Fix dark mode bugs

maliksenpai · maliksenpai · commit 71bc52b8607f · 2024-08-25T15:25:46.000+03:00
diff --git a/apps/react-vite/src/app/routes/app/profile.tsx b/apps/react-vite/src/app/routes/app/profile.tsx
@@ -9,7 +9,7 @@ type EntryProps = {
 const Entry = ({ label, value }: EntryProps) => (
   <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
     <dt className="text-sm font-medium text-gray-500">{label}</dt>
-    <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+    <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0 dark:text-gray-100">
       {value}
     </dd>
   </div>
diff --git a/apps/react-vite/src/app/routes/landing.tsx b/apps/react-vite/src/app/routes/landing.tsx
@@ -22,7 +22,7 @@ export const LandingRoute = () => {
       <Head description="Welcome to bulletproof react" />
       <div className="flex h-screen items-center">
         <div className="mx-auto max-w-7xl px-4 py-12 text-center sm:px-6 lg:px-8 lg:py-16">
-          <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+          <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
             <span className="block">Bulletproof React</span>
           </h2>
           <img src={logo} alt="react" />
diff --git a/apps/react-vite/src/components/layouts/auth-layout.tsx b/apps/react-vite/src/components/layouts/auth-layout.tsx
@@ -28,21 +28,21 @@ export const AuthLayout = ({ children, title }: LayoutProps) => {
   return (
     <>
       <Head title={title} />
-      <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
+      <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8 dark:bg-gray-900">
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <div className="flex justify-center">
             <Link className="flex items-center text-white" to="/">
               <img className="h-24 w-auto" src={logo} alt="Workflow" />
             </Link>
           </div>
 
-          <h2 className="mt-3 text-center text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-3 text-center text-3xl font-extrabold text-gray-900 dark:text-slate-100">
             {title}
           </h2>
         </div>
 
         <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-          <div className="px-4 py-8 shadow sm:rounded-lg sm:px-10">
+          <div className="px-4 py-8 shadow sm:rounded-lg sm:px-10 dark:shadow-slate-600">
             {children}
           </div>
         </div>
diff --git a/apps/react-vite/src/components/layouts/dashboard-layout.tsx b/apps/react-vite/src/components/layouts/dashboard-layout.tsx
@@ -179,13 +179,17 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
             <DropdownMenuContent align="end">
               <DropdownMenuItem
                 onClick={() => navigate('./profile')}
-                className={cn('block px-4 py-2 text-sm text-gray-700')}
+                className={cn(
+                  'block px-4 py-2 text-sm text-gray-700 dark:text-slate-100',
+                )}
               >
                 Your Profile
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem
-                className={cn('block px-4 py-2 text-sm text-gray-700 w-full')}
+                className={cn(
+                  'block px-4 py-2 text-sm text-gray-700 w-full dark:text-slate-100',
+                )}
                 onClick={() => logout.mutate({})}
               >
                 Sign Out
diff --git a/apps/react-vite/src/components/ui/button/button.tsx b/apps/react-vite/src/components/ui/button/button.tsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90 dark:bg-slate-700 dark:text-slate-100 hover:dark:bg-slate-600',
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
diff --git a/apps/react-vite/src/components/ui/form/select.tsx b/apps/react-vite/src/components/ui/form/select.tsx
@@ -24,7 +24,7 @@ export const Select = (props: SelectFieldProps) => {
     <FieldWrapper label={label} error={error}>
       <select
         className={cn(
-          'mt-1 block w-full rounded-md border-gray-600 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm',
+          'mt-1 block w-full bg-transparent shadow border border-input rounded-md py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm',
           className,
         )}
         defaultValue={defaultValue}
diff --git a/apps/react-vite/src/components/ui/link/link.tsx b/apps/react-vite/src/components/ui/link/link.tsx
@@ -5,7 +5,10 @@ import { cn } from '@/utils/cn';
 export const Link = ({ className, children, ...props }: LinkProps) => {
   return (
     <RouterLink
-      className={cn('text-slate-600 hover:text-slate-900', className)}
+      className={cn(
+        'text-slate-600 hover:text-slate-900 dark:text-white dark:hover:text-slate-300',
+        className,
+      )}
       {...props}
     >
       {children}
diff --git a/apps/react-vite/src/components/ui/md-preview/md-preview.tsx b/apps/react-vite/src/components/ui/md-preview/md-preview.tsx
@@ -10,7 +10,7 @@ export type MDPreviewProps = {
 export const MDPreview = ({ value = '' }: MDPreviewProps) => {
   return (
     <div
-      className="prose prose-slate w-full p-2"
+      className="prose prose-slate w-full p-2 dark:text-slate-100"
       dangerouslySetInnerHTML={{
         __html: DOMPurify.sanitize(parse(value) as string),
       }}
diff --git a/apps/react-vite/src/components/ui/table/pagination.tsx b/apps/react-vite/src/components/ui/table/pagination.tsx
@@ -160,7 +160,7 @@ export const TablePagination = ({
             </PaginationLink>
           </PaginationItem>
         )}
-        <PaginationItem className="rounded-sm bg-gray-200">
+        <PaginationItem className="rounded-sm bg-gray-200 dark:bg-slate-800 dark:text-white">
           <PaginationLink href={createHref(currentPage)}>
             {currentPage}
           </PaginationLink>
diff --git a/apps/react-vite/src/components/ui/table/table.tsx b/apps/react-vite/src/components/ui/table/table.tsx
@@ -142,7 +142,7 @@ export const Table = <Entry extends BaseEntity>({
 }: TableProps<Entry>) => {
   if (!data?.length) {
     return (
-      <div className="flex h-80 flex-col items-center justify-center bg-white text-gray-500">
+      <div className="flex h-80 flex-col items-center justify-center bg-white text-gray-500 dark:bg-slate-800">
         <ArchiveX className="size-16" />
         <h4>No Entries Found</h4>
       </div>
diff --git a/apps/react-vite/src/features/comments/components/comments-list.tsx b/apps/react-vite/src/features/comments/components/comments-list.tsx
@@ -35,7 +35,7 @@ export const CommentsList = ({ discussionId }: CommentsListProps) => {
       <div
         role="list"
         aria-label="comments"
-        className="flex h-40 flex-col items-center justify-center bg-white text-gray-500"
+        className="flex h-40 flex-col items-center justify-center bg-white text-gray-500 dark:bg-slate-700 dark:text-slate-100"
       >
         <ArchiveX className="size-10" />
         <h4>No Comments Found</h4>
@@ -49,7 +49,7 @@ export const CommentsList = ({ discussionId }: CommentsListProps) => {
           <li
             aria-label={`comment-${comment.body}-${index}`}
             key={comment.id || index}
-            className="w-full bg-white p-4 shadow-sm"
+            className="w-full bg-white p-4 shadow-sm dark:bg-slate-600"
           >
             <Authorization
               policyCheck={POLICIES['comment:delete'](
diff --git a/apps/react-vite/src/features/discussions/components/discussion-view.tsx b/apps/react-vite/src/features/discussions/components/discussion-view.tsx
@@ -37,9 +37,9 @@ export const DiscussionView = ({ discussionId }: { discussionId: string }) => {
           <UpdateDiscussion discussionId={discussionId} />
         </div>
         <div>
-          <div className="overflow-hidden bg-white shadow sm:rounded-lg">
+          <div className="overflow-hidden bg-white shadow sm:rounded-lg dark:bg-slate-700 ">
             <div className="px-4 py-5 sm:px-6">
-              <div className="mt-1 max-w-2xl text-sm text-gray-500">
+              <div className="mt-1 max-w-2xl text-sm text-gray-500 dark:text-slate-100">
                 <MDPreview value={discussion.body} />
               </div>
             </div>
diff --git a/apps/react-vite/src/index.css b/apps/react-vite/src/index.css
@@ -1,5 +1,3 @@
-@import "./themes/light-theme.css";
-@import "./themes/dark-theme.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/apps/react-vite/src/themes/dark-theme.css b/apps/react-vite/src/themes/dark-theme.css
diff --git a/apps/react-vite/src/themes/light-theme.css b/apps/react-vite/src/themes/light-theme.css
