use Card component for userdetails, storypreview, issues

Roshanjossey · Roshanjossey · commit 34b368b64a9f · 2023-04-29T00:49:30.000+02:00
diff --git a/app/Home.tsx b/app/Home.tsx
@@ -55,7 +55,7 @@ function MainView(props: { queryRef: PreloadedQuery<HomeQuery> }) {
   let leftSidebar = <Login />
   if (data.viewer) {
     leftSidebar = (
-      <Card>
+      <Card classes="p-4">
         <UserDetails user={data.viewer} />
       </Card>
     )
diff --git a/app/issues/Issues.tsx b/app/issues/Issues.tsx
@@ -63,7 +63,7 @@ export function Issues(props: { queryRef: PreloadedQuery<IssuesQuery> }) {
       <Layout
         sidebarContentRight={<>UserPage right sidebar</>}
         sidebarContentLeft={
-          <Card>
+          <Card classes="p-4">
             <UserDetails user={data.viewer} />
           </Card>
         }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,7 +6,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
+    <html lang="en" className="dark">
       <head />
       <body>{children}</body>
     </html>
diff --git a/app/user/[handle]/UserPage.tsx b/app/user/[handle]/UserPage.tsx
@@ -58,7 +58,7 @@ function User(props: { queryRef: PreloadedQuery<UserPageQuery> }) {
       <Layout
         sidebarContentRight={<>UserPage right sidebar</>}
         sidebarContentLeft={
-          <Card>
+          <Card classes="p-4">
             <UserDetails user={data.user} />
           </Card>
         }
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -9,7 +9,9 @@ export default function Card({
 }) {
   return (
     <div
-      className={` ${classes || ''} p-4 bg-white dark:bg-dark-700 rounded-md`}
+      className={` ${
+        classes || ''
+      } rounded-lg shadow-lg hover:shadow-md bg-white dark:bg-dark-700`}
     >
       {children}
     </div>
diff --git a/src/components/UserDetails/Badges/BadgeList.tsx b/src/components/UserDetails/Badges/BadgeList.tsx
@@ -31,7 +31,7 @@ const BadgeList = ({ user }: { user: BadgeList_user$key }) => {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col space-y-4">
       {data.badges.edges.map(
         (badge) => badge && <Badge key={badge.node.id} badge={badge.node} />
       )}
diff --git a/src/components/feed/StoryPreview.tsx b/src/components/feed/StoryPreview.tsx
@@ -6,6 +6,7 @@ import { GoKebabVertical } from '@react-icons/all-files/go/GoKebabVertical'
 import Link from 'next/link'
 import { ErrorBoundary } from 'react-error-boundary'
 import ErrorFallback from '../ErrorFallback'
+import Card from '../Card'
 
 type StoryPreviewProps = {
   story: StoryPreview_node$key
@@ -32,7 +33,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-md">
+      <Card classes="my-8 mr-2 flex flex-col ">
         <Link href={`/story/${data.id}___${data.urlSuffix}`}>
           <div>
             {data.thumbnail ? (
@@ -78,7 +79,7 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
             }
           `}
         </style>
-      </div>
+      </Card>
     </ErrorBoundary>
   )
 }
diff --git a/src/components/issue/Issue.tsx b/src/components/issue/Issue.tsx
@@ -1,5 +1,6 @@
 import { graphql, useFragment } from 'react-relay'
 import { Issue_node$key } from '__generated__/Issue_node.graphql'
+import Card from '../Card'
 
 export type IssueProps = {
   issue: Issue_node$key
@@ -20,7 +21,7 @@ const Issue = ({ issue }: IssueProps) => {
     issue
   )
   return (
-    <div className="w-96 flex flex-col p-6 rounded-lg shadow-lg hover:shadow-md bg-white dark:bg-dark-700">
+    <Card classes="w-96 flex flex-col p-6">
       <a href={data.url} target="_blank" rel="noopener noreferrer">
         <div className="flex flex-row">
           <img
@@ -50,7 +51,7 @@ const Issue = ({ issue }: IssueProps) => {
       <div className="mt-2">
         <span className="text-l dark:text-gray-300">{data.title}</span>
       </div>
-    </div>
+    </Card>
   )
 }
 
diff --git a/src/components/navbar/HamburgerButton.tsx b/src/components/navbar/HamburgerButton.tsx
@@ -9,7 +9,7 @@ const HamburgerMenu = ({
   isOpen,
   setIsOpen,
 }: HamburgerMenuProps) => {
-  const genericHamburgerLine = `h-1 w-6 my-0.5 rounded-full bg-black transition ease transform duration-300`
+  const genericHamburgerLine = `h-1 w-6 my-0.5 rounded-full bg-black dark:bg-white transition ease transform duration-300`
 
   return (
     <button

Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ function MainView(props: { queryRef: PreloadedQuery<HomeQuery> }) {`
`55`	`55`	`let leftSidebar = <Login />`
`56`	`56`	`if (data.viewer) {`
`57`	`57`	`leftSidebar = (`
`58`		`- <Card>`
	`58`	`+ <Card classes="p-4">`
`59`	`59`	`<UserDetails user={data.viewer} />`
`60`	`60`	`</Card>`
`61`	`61`	`)`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ export function Issues(props: { queryRef: PreloadedQuery<IssuesQuery> }) {`
`63`	`63`	`<Layout`
`64`	`64`	`sidebarContentRight={<>UserPage right sidebar</>}`
`65`	`65`	`sidebarContentLeft={`
`66`		`- <Card>`
	`66`	`+ <Card classes="p-4">`
`67`	`67`	`<UserDetails user={data.viewer} />`
`68`	`68`	`</Card>`
`69`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@ function User(props: { queryRef: PreloadedQuery<UserPageQuery> }) {`
`58`	`58`	`<Layout`
`59`	`59`	`sidebarContentRight={<>UserPage right sidebar</>}`
`60`	`60`	`sidebarContentLeft={`
`61`		`- <Card>`
	`61`	`+ <Card classes="p-4">`
`62`	`62`	`<UserDetails user={data.user} />`
`63`	`63`	`</Card>`
`64`	`64`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ const BadgeList = ({ user }: { user: BadgeList_user$key }) => {`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`return (`
`34`		`- <div className="space-y-4">`
	`34`	`+ <div className="flex flex-col space-y-4">`
`35`	`35`	`{data.badges.edges.map(`
`36`	`36`	`(badge) => badge && <Badge key={badge.node.id} badge={badge.node} />`
`37`	`37`	`)}`