update styles of new comment

Author: Roshanjossey

src/components/Card.tsx

@@ -9,7 +9,7 @@ export default function Card({
 }) {
   return (
     <div
-      className={` ${classes || ''} p-4 bg-white dark:bg-dark-700 rounded-lg`}
+      className={` ${classes || ''} p-4 bg-white dark:bg-dark-700 rounded-md`}
     >
       {children}
     </div>

src/components/UserDetails/Bio.tsx

@@ -3,6 +3,7 @@ import { GoPencil } from '@react-icons/all-files/go/GoPencil'
 import { GoCheck } from '@react-icons/all-files/go/GoCheck'
 import { graphql, useFragment, useMutation } from 'react-relay'
 import { Bio_user$key } from '../../queries/__generated__/Bio_user.graphql'
+import ExpandingTextarea from '../ExpandingTextarea'
 
 type BioProps = {
   user: Bio_user$key
@@ -62,7 +63,7 @@ const Bio = ({ user }: BioProps) => {
       ) : (
         <div className="flex justify-between">
           <span>{data.bio}</span>
-          <button onClick={() => setEditMode(true)}>
+          <button className="ml-4" onClick={() => setEditMode(true)}>
             <GoPencil />
           </button>
         </div>

src/components/comment/NewComment.tsx

@@ -30,13 +30,14 @@ export default function NewComment({ storyId, refetch }: NewCommentProps) {
       },
       onCompleted: () => {
         refetch({}, { fetchPolicy: 'network-only' })
+        setComment('')
       },
     })
   }
 
   return (
-    <div className="w-full dark:text-gray-300 dark:bg-dark-600 flex flex-col items-end">
-      <div className="textarea-container w-full">
+    <div className="w-full dark:text-gray-300 dark:bg-dark-600 flex flex-col items-end rounded-md">
+      <div className="textarea-container w-full p-4">
         <ExpandingTextarea
           value={comment}
           setValue={setComment}

src/components/feed/StoryPreview.tsx

@@ -32,7 +32,7 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <div className="my-8 mr-2 flex flex-col bg-white  dark:bg-dark-700 rounded-lg">
+      <div className="my-8 mr-2 flex flex-col bg-white  dark:bg-dark-700 rounded-md">
         <div>
           {data.thumbnail ? (
             <img className="cover-image" src={data.thumbnail} alt="" />

src/components/feed/UserSnippet.tsx

@@ -28,7 +28,7 @@ const UserSnippet = ({ user }: UserSnippetProps) => {
         <img
           src={data.avatar}
           alt={`${data.handle}'s avatar`}
-          className="w-16 h-16 rounded-full -mt-8 border-4 dark:border-dark-700"
+          className="w-16 h-16 rounded-full -mt-8 border-4 dark:border-dark-700 bg-white  dark:bg-dark-500"
         />
         <div className="flex flex-row mt-2">
           <Link href={`/@${data.handle}`}>

src/stories/ExpandingTextarea.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import ExpandingTextarea from '../components/ExpandingTextarea'
+
+export default {
+  title: 'Atoms/ExpandingTextarea',
+  component: ExpandingTextarea,
+} as ComponentMeta<typeof ExpandingTextarea>
+
+const Template: ComponentStory<typeof ExpandingTextarea> = (args) => (
+  <ExpandingTextarea {...args} />
+)
+
+export const Primary = Template.bind({})
+Primary.args = {
+  value: 'All your base are belong to us',
+  setValue: () => {
+    undefined
+  },
+}

src/stories/Hexagon.stories.tsx

@@ -8,8 +8,10 @@ export default {
   component: Hexagon,
 } as ComponentMeta<typeof Hexagon>
 
+const Template: ComponentStory<typeof Hexagon> = (args) => <Hexagon {...args} />
+
 export const AllColors = () => (
-  <>
+  <div className="flex flex-wrap justify-between">
     <Hexagon color="green-dark" size="4">
       Green Dark
     </Hexagon>
@@ -46,7 +48,7 @@ export const AllColors = () => (
     <Hexagon color="gold" size="4">
       Gold
     </Hexagon>
-  </>
+  </div>
 )
 
 export const Sizes1to8 = () => (
@@ -77,3 +79,9 @@ export const Sizes1to8 = () => (
     </Hexagon>
   </>
 )
+
+export const Basic = Template.bind({})
+Basic.args = {
+  color: 'red',
+  size: '4',
+}