From 3964c086e6ebe73bbaa99c82528a420173f5e464 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 16 May 2022 12:25:48 +0300
Subject: [PATCH] style: blog components responsive

---
 .../Comments/AddComment/AddComment.tsx        |  2 +-
 .../Components/Comments/Comment/Comment.tsx   |  4 +--
 .../BountyApplicants.stories.tsx              | 29 +++++++++++++++
 .../BountyPageContent/BountyApplicants.tsx    | 36 +++++++++++++++++++
 .../BountyPageContent.stories.tsx             | 24 +++++++++++++
 .../BountyPageContent.tsx                     | 23 +++---------
 .../Components/PageContent/PageContent.tsx    |  6 ++--
 .../QuestionPageContent.stories.tsx           | 24 +++++++++++++
 .../QuestionPageContent.tsx                   |  2 +-
 .../StoryPageContent.stories.tsx              | 24 +++++++++++++
 .../StoryPageContent.tsx                      |  2 +-
 11 files changed, 150 insertions(+), 26 deletions(-)
 create mode 100644 src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.stories.tsx
 create mode 100644 src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.tsx
 create mode 100644 src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyPageContent.stories.tsx
 rename src/features/Posts/pages/PostDetailsPage/Components/{PageContent => BountyPageContent}/BountyPageContent.tsx (71%)
 create mode 100644 src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.stories.tsx
 rename src/features/Posts/pages/PostDetailsPage/Components/{PageContent => QuestionPageContent}/QuestionPageContent.tsx (97%)
 create mode 100644 src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.stories.tsx
 rename src/features/Posts/pages/PostDetailsPage/Components/{PageContent => StoryPageContent}/StoryPageContent.tsx (97%)

diff --git a/src/features/Posts/Components/Comments/AddComment/AddComment.tsx b/src/features/Posts/Components/Comments/AddComment/AddComment.tsx
index 2edeaba..24f5089 100644
--- a/src/features/Posts/Components/Comments/AddComment/AddComment.tsx
+++ b/src/features/Posts/Components/Comments/AddComment/AddComment.tsx
@@ -103,7 +103,7 @@ export default function AddComment({ initialContent, placeholder, name, autoFocu
                 autoFocus={autoFocus}
             >
                 <div className="flex gap-16 items-start pb-24 border-b border-gray-200 focus-within:border-primary-500">
-                    <div className="mt-16 shrink-0"><Avatar width={48} src='https://i.pravatar.cc/150?img=1' /></div>
+                    <div className="hidden sm:block mt-16 shrink-0"><Avatar width={48} src='https://i.pravatar.cc/150?img=1' /></div>
                     <div className="flex-grow">
                         <EditorComponent
                         />
diff --git a/src/features/Posts/Components/Comments/Comment/Comment.tsx b/src/features/Posts/Components/Comments/Comment/Comment.tsx
index 7d19d40..a5cd688 100644
--- a/src/features/Posts/Components/Comments/Comment/Comment.tsx
+++ b/src/features/Posts/Components/Comments/Comment/Comment.tsx
@@ -26,8 +26,8 @@ export default function Comment({ comment, onClickedReply }: Props) {
     return (
         <div >
             <CommentCard comment={comment} onReply={clickReply} />
-            {(comment.replies.length > 0 || replyOpen) && <div className="flex mt-16 gap-20">
-                <div className="border-l border-b border-gray-200 w-24 h-40 rounded-bl-8 flex-shrink-0 ml-8"></div>
+            {(comment.replies.length > 0 || replyOpen) && <div className="flex mt-16 gap-8 md:gap-20 pl-8">
+                <div className="border-l border-b border-gray-200 w-16 md:w-24 h-40 rounded-bl-8 flex-shrink-0"></div>
                 <div className="flex flex-col w-full gap-16">
                     {comment.replies.map(reply => <Comment
                         key={reply.id}
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.stories.tsx b/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.stories.tsx
new file mode 100644
index 0000000..8153ffa
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+
+import BountyApplicants from './BountyApplicants';
+
+export default {
+    title: 'Posts/Post Details Page/Components/Bounty Page Content/Applicants',
+    component: BountyApplicants,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof BountyApplicants>;
+
+
+const Template: ComponentStory<typeof BountyApplicants> = (args) => <div className="max-w-[890px]"><BountyApplicants {...args as any} ></BountyApplicants></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    applications: MOCK_DATA.posts.bounties[0]['applications']
+}
+
+
+export const Empty = Template.bind({});
+Empty.args = {
+    applications: []
+}
+
+
+
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.tsx b/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.tsx
new file mode 100644
index 0000000..a75979b
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyApplicants.tsx
@@ -0,0 +1,36 @@
+import { FiMeh } from 'react-icons/fi'
+import Header from 'src/features/Posts/Components/PostCard/Header/Header'
+import { Bounty } from 'src/features/Posts/types'
+
+interface Props {
+    applications: Bounty['applications']
+}
+
+export default function BountyApplicants({ applications }: Props) {
+    return (
+        <div className="border bg-white rounded-8 p-24 mt-16">
+            <h4 className="text-body2 font-bolder">Applicants</h4>
+            {applications.length > 0 && <ul className="flex flex-col gap-16 mt-16">
+                {applications.map(application =>
+                    <li key={application.id}>
+                        <Header author={application.author} size='sm' date={application.date} />
+                        <div className="bg-gray-100 mt-10 p-16 rounded-8">
+                            <p className="text-body5 font-medium mb-8">Work Plan</p>
+                            <p className="text-body5 text-gray-600">   {application.workplan}</p>
+                        </div>
+                    </li>
+                )}
+
+            </ul>}
+            {applications.length === 0 && <div className='flex flex-col gap-16 mt-16'>
+                <FiMeh className='text-body2' />
+                <p className="text-body4 font-medium">
+                    No applicants yet
+                </p>
+                <p className="text-body5">
+                    The current bounty has  no current appliacants
+                </p>
+            </div>}
+        </div>
+    )
+}
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyPageContent.stories.tsx b/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyPageContent.stories.tsx
new file mode 100644
index 0000000..e06ff84
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyPageContent.stories.tsx
@@ -0,0 +1,24 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+
+import BountyPageContent from './BountyPageContent';
+
+export default {
+    title: 'Posts/Post Details Page/Components/Bounty Page Content',
+    component: BountyPageContent,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof BountyPageContent>;
+
+
+const Template: ComponentStory<typeof BountyPageContent> = (args) => <div className="max-w-[890px]"><BountyPageContent {...args as any} ></BountyPageContent></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    bounty: MOCK_DATA.posts.bounties[0]
+}
+
+
+
+
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyPageContent.tsx
similarity index 71%
rename from src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx
rename to src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyPageContent.tsx
index 0073c01..ef50742 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/BountyPageContent/BountyPageContent.tsx
@@ -1,12 +1,13 @@
 import Header from "src/features/Posts/Components/PostCard/Header/Header"
 import { Bounty, } from "src/features/Posts/types"
 import { marked } from 'marked';
-import styles from './styles.module.css'
+import styles from '../PageContent/styles.module.css'
 import Badge from "src/Components/Badge/Badge";
 import { BiComment } from "react-icons/bi";
 import VotesCount from "src/Components/VotesCount/VotesCount";
 import Button from "src/Components/Button/Button";
 import { FiGithub, FiShare2 } from "react-icons/fi";
+import BountyApplicants from "./BountyApplicants";
 
 
 interface Props {
@@ -20,7 +21,7 @@ export default function BountyPageContent({ bounty }: Props) {
             {/* Header */}
             <div className="flex flex-col gap-24">
                 <Header size="lg" showTimeAgo={false} author={bounty.author} date={bounty.date} />
-                <h1 className="text-h2 font-bolder">{bounty.title} <Badge color="none" size="sm" className="bg-yellow-500 text-black">Bounty</Badge></h1>
+                <h1 className="text-h2 font-bolder">{bounty.title} <Badge color="none" size="sm" className="bg-warning-500 text-black">Bounty</Badge></h1>
                 <div className="">
                     <span className="text-body4 text-gray-600 font-bolder">Reward: </span>
                     <span className="text-body4 text-purple-500 font-medium">{bounty.reward_amount} sats</span>
@@ -31,7 +32,7 @@ export default function BountyPageContent({ bounty }: Props) {
                         <BiComment /> <span className="align-middle text-body5">32 Comments</span>
                     </div>
                 </div>
-                <div className="flex gap-16">
+                <div className="flex flex-col md:flex-row gap-16">
                     <Button size='sm' color="black" className="!font-normal">
                         Express Interest
                     </Button>
@@ -52,21 +53,7 @@ export default function BountyPageContent({ bounty }: Props) {
                 </Badge>)}
             </div>
             {/* Applicants */}
-            <div className="border bg-white rounded-8 p-24 mt-16">
-                <h4 className="text-body2 font-bolder">Applicants</h4>
-                <ul className="flex flex-col gap-16 mt-16">
-                    {bounty.applications.map(application =>
-                        <li key={application.id}>
-                            <Header author={application.author} size='sm' date={application.date} />
-                            <div className="bg-gray-100 mt-10 p-16 rounded-8">
-                                <p className="text-body5 font-medium mb-8">Work Plan</p>
-                                <p className="text-body5 text-gray-600">   {application.workplan}</p>
-                            </div>
-                        </li>
-                    )}
-
-                </ul>
-            </div>
+            <BountyApplicants applications={bounty.applications} />
         </div>
     )
 }
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx
index 71e4717..0945666 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx
@@ -1,8 +1,8 @@
 import { isBounty, isQuestion, isStory, Post } from "src/features/Posts/types"
-import StoryPageContent from "./StoryPageContent";
-import BountyPageContent from "./BountyPageContent";
+import StoryPageContent from "../StoryPageContent/StoryPageContent";
+import BountyPageContent from "../BountyPageContent/BountyPageContent";
+import QuestionPageContent from "../QuestionPageContent/QuestionPageContent";
 import { PostDetailsQuery } from "src/graphql";
-import QuestionPageContent from "./QuestionPageContent";
 
 
 interface Props {
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.stories.tsx b/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.stories.tsx
new file mode 100644
index 0000000..700f41b
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.stories.tsx
@@ -0,0 +1,24 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+
+import QuestionPageContent from './QuestionPageContent';
+
+export default {
+    title: 'Posts/Post Details Page/Components/Question Page Content',
+    component: QuestionPageContent,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof QuestionPageContent>;
+
+
+const Template: ComponentStory<typeof QuestionPageContent> = (args) => <div className="max-w-[890px]"><QuestionPageContent {...args as any} ></QuestionPageContent></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    question: MOCK_DATA.posts.questions[0]
+}
+
+
+
+
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx
similarity index 97%
rename from src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx
rename to src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx
index 95e7986..d88d220 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx
@@ -1,7 +1,7 @@
 import Header from "src/features/Posts/Components/PostCard/Header/Header"
 import { Question } from "src/features/Posts/types"
 import { marked } from 'marked';
-import styles from './styles.module.css'
+import styles from '../PageContent/styles.module.css'
 import Badge from "src/Components/Badge/Badge";
 import { BiComment } from "react-icons/bi";
 import { RiFlashlightLine } from "react-icons/ri";
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.stories.tsx b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.stories.tsx
new file mode 100644
index 0000000..d12f647
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.stories.tsx
@@ -0,0 +1,24 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+
+import StoryPageContent from './StoryPageContent';
+
+export default {
+    title: 'Posts/Post Details Page/Components/Story Page Content',
+    component: StoryPageContent,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof StoryPageContent>;
+
+
+const Template: ComponentStory<typeof StoryPageContent> = (args) => <div className="max-w-[890px]"><StoryPageContent {...args as any} ></StoryPageContent></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    story: MOCK_DATA.posts.stories[0]
+}
+
+
+
+
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
similarity index 97%
rename from src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx
rename to src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
index d9686f6..92e47ac 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
@@ -1,7 +1,7 @@
 import Header from "src/features/Posts/Components/PostCard/Header/Header"
 import { Story } from "src/features/Posts/types"
 import { marked } from 'marked';
-import styles from './styles.module.css'
+import styles from '../PageContent/styles.module.css'
 import Badge from "src/Components/Badge/Badge";
 import { BiComment } from "react-icons/bi";
 import { RiFlashlightLine } from "react-icons/ri";