change theme (gruvbox theme) for just dark mode now

No0ne003 · May 5, 2024 · 50b5588 · 50b5588
1 parent 3d230e7
commit 50b5588
Show file tree

Hide file tree

Showing 17 changed files with 164 additions and 96 deletions.
diff --git a/src/components/ui/NavLinks.jsx b/src/components/ui/NavLinks.jsx
@@ -19,4 +19,4 @@ NavLinks.propTypes = {
   name: PropTypes.string.isRequired
 }
 
-export default NavLinks
+export default NavLinks
diff --git a/src/index.css b/src/index.css
@@ -5,49 +5,118 @@
 @tailwind utilities;
 
 @layer base {
+  /* :root { */
+  /*   --background: 220 23.077% 94.902%; */
+  /*   --foreground: 233.793 16.022% 35.49%; */
+  /*   --muted: 222.857 15.909% 82.745%; */
+  /*   --muted-foreground: 233.333 12.796% 41.373%; */
+  /*   --popover: 220 23.077% 94.902%; */
+  /*   --popover-foreground: 233.793 16.022% 35.49%; */
+  /*   --card: 220 23.077% 94.902%; */
+  /*   --card-foreground: 233.793 16.022% 35.49%; */
+  /*   --border: 225 13.559% 76.863%; */
+  /*   --input: 225 13.559% 76.863%; */
+  /*   --primary: 230.935 97.203% 71.961%; */
+  /*   --primary-foreground: 220 23.077% 94.902%; */
+  /*   --secondary: 222.857 15.909% 82.745%; */
+  /*   --secondary-foreground: 233.793 16.022% 35.49%; */
+  /*   --accent: 222.857 15.909% 82.745%; */
+  /*   --accent-foreground: 233.793 16.022% 35.49%; */
+  /*   --destructive: 347.077 86.667% 44.118%; */
+  /*   --destructive-foreground: 220 21.951% 91.961%; */
+  /*   --ring: 233.793 16.022% 35.49%; */
+  /*   --radius: 0rem; */
+  /* } */
+  /**/
+  /* .dark { */
+  /*   --background: 240 21.053% 14.902%; */
+  /*   --foreground: 226.154 63.934% 88.039%; */
+  /*   --muted: 236.842 16.239% 22.941%; */
+  /*   --muted-foreground: 226.667 35.294% 80%; */
+  /*   --popover: 240 21.053% 14.902%; */
+  /*   --popover-foreground: 226.154 63.934% 88.039%; */
+  /*   --card: 240 21.053% 14.902%; */
+  /*   --card-foreground: 226.154 63.934% 88.039%; */
+  /*   --border: 234.286 13.208% 31.176%; */
+  /*   --input: 234.286 13.208% 31.176%; */
+  /*   --primary: 231.892 97.368% 85.098%; */
+  /*   --primary-foreground: 240 21.053% 14.902%; */
+  /*   --secondary: 236.842 16.239% 22.941%; */
+  /*   --secondary-foreground: 226.154 63.934% 88.039%; */
+  /*   --accent: 236.842 16.239% 22.941%; */
+  /*   --accent-foreground: 226.154 63.934% 88.039%; */
+  /*   --destructive: 343.269 81.25% 74.902%; */
+  /*   --destructive-foreground: 240 21.311% 11.961%; */
+  /*   --ring: 226.154 63.934% 88.039%; */
+  /*   --radius: 0rem; */
+  /* } */
+
   :root {
-    --background: 220 23.077% 94.902%;
-    --foreground: 233.793 16.022% 35.49%;
-    --muted: 222.857 15.909% 82.745%;
-    --muted-foreground: 233.333 12.796% 41.373%;
-    --popover: 220 23.077% 94.902%;
-    --popover-foreground: 233.793 16.022% 35.49%;
-    --card: 220 23.077% 94.902%;
-    --card-foreground: 233.793 16.022% 35.49%;
-    --border: 225 13.559% 76.863%;
-    --input: 225 13.559% 76.863%;
-    --primary: 230.935 97.203% 71.961%;
-    --primary-foreground: 220 23.077% 94.902%;
-    --secondary: 222.857 15.909% 82.745%;
-    --secondary-foreground: 233.793 16.022% 35.49%;
-    --accent: 222.857 15.909% 82.745%;
-    --accent-foreground: 233.793 16.022% 35.49%;
-    --destructive: 347.077 86.667% 44.118%;
-    --destructive-foreground: 220 21.951% 91.961%;
-    --ring: 233.793 16.022% 35.49%;
+    --background: #f0eff2;
+    --foreground: #4d5368;
+    --muted: #d9d6de;
+    --muted-foreground: #5d5f6e;
+    --popover: #f0eff2;
+    --popover-foreground: #4d5368;
+    --card: #f0eff2;
+    --card-foreground: #4d5368;
+    --border: #d9d6de;
+    --input: #d9d6de;
+    --primary: #e2dff8;
+    --primary-foreground: #f0eff2;
+    --secondary: #efeaeb;
+    --secondary-foreground: #4d5368;
+    --accent: #efeaeb;
+    --accent-foreground: #4d5368;
+    --destructive: #562f6b;
+    --destructive-foreground: #e0e1e8;
+    --ring: #4d5368;
     --radius: 0rem;
   }
 
+  /* .dark { */
+  /*   --background: #282828; */
+  /*   --foreground: #ebdbb2; */
+  /*   --muted: #3f3a35; */
+  /*   --muted-foreground: #a19e94; */
+  /*   --popover: #3c3836; */
+  /*   --popover-foreground: #a89984; */
+  /*   --card: #3c3836; */
+  /*   --card-foreground: #a89984; */
+  /*   --border: #3c3836; */
+  /*   --input: #3c3836; */
+  /*   --primary: #b16286; */
+  /*   --primary-foreground: #d3869b; */
+  /*   --secondary: #d79921; */
+  /*   --secondary-foreground: #fabd2f; */
+  /*   --accent: #d65d0e; */
+  /*   --accent-foreground: #fe8019; */
+  /*   --destructive: #cc241d; */
+  /*   --destructive-foreground: #fb4934; */
+  /*   --ring: #a89984; */
+  /*   --radius: 0rem; */
+  /* } */
+
   .dark {
-    --background: 240 21.053% 14.902%;
-    --foreground: 226.154 63.934% 88.039%;
-    --muted: 236.842 16.239% 22.941%;
-    --muted-foreground: 226.667 35.294% 80%;
-    --popover: 240 21.053% 14.902%;
-    --popover-foreground: 226.154 63.934% 88.039%;
-    --card: 240 21.053% 14.902%;
-    --card-foreground: 226.154 63.934% 88.039%;
-    --border: 234.286 13.208% 31.176%;
-    --input: 234.286 13.208% 31.176%;
-    --primary: 231.892 97.368% 85.098%;
-    --primary-foreground: 240 21.053% 14.902%;
-    --secondary: 236.842 16.239% 22.941%;
-    --secondary-foreground: 226.154 63.934% 88.039%;
-    --accent: 236.842 16.239% 22.941%;
-    --accent-foreground: 226.154 63.934% 88.039%;
-    --destructive: 343.269 81.25% 74.902%;
-    --destructive-foreground: 240 21.311% 11.961%;
-    --ring: 226.154 63.934% 88.039%;
+    --background: 0 0% 16%;
+    --foreground: 43 59% 81%;
+    --muted: 30 9% 23%;
+    --muted-foreground: 46 6% 61%;
+    --popover: 30 7% 23%;
+    --popover-foreground: 35 17% 60%;
+    --card: 30 9% 23%;
+    --card-foreground: 35 17% 59%;
+    --border: 30 9% 23%;
+    --input: 30 9% 23%;
+    --primary: 333 42% 54%;
+    --primary-foreground: 344 47% 88%;
+    --secondary: 40 73% 49%;
+    --secondary-foreground: 42 95% 88%;
+    --accent: 24 88% 45%;
+    --accent-foreground: 27 99% 80%;
+    --destructive: 355 64% 47%;
+    --destructive-foreground: 356 88% 88%;
+    --ring: 35 17% 59%;
     --radius: 0rem;
   }
 }
@@ -58,7 +127,7 @@
   }
 
   *::-webkit-scrollbar {
-    @apply w-1 bg-neutral-900;
+    @apply w-[2px] bg-neutral-900;
   }
 
   *::-webkit-scrollbar-thumb {
@@ -89,10 +158,6 @@
     @apply focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring;
   }
 
-  .bg-gr {
-    @apply bg-gradient-to-br from-primary-foreground to-secondary;
-  }
-
   /* loading*/
   .loader {
     width: 80px;

diff --git a/src/pages/CustomHooks/use-outside-click/test.jsx b/src/pages/CustomHooks/use-outside-click/test.jsx
@@ -12,7 +12,7 @@ const UseOnClickOutsideTest = () => {
       {showContent ? (
         <div
           ref={ref}
-          className="w-[450px] bg-gr py-4 px-3 border-border border-2"
+          className="w-[450px] bg-gr py-4 px-5 border-border border-2"
         >
           <h1 className="text-xl font-bold mb-1">This is a random content</h1>
           <p>

diff --git a/src/pages/CustomHooks/use-window-resize/test.jsx b/src/pages/CustomHooks/use-window-resize/test.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const UseWindowResizeTest = () => {
+  return (
+    <div>UseWindowResizeTest</div>
+  )
+}
diff --git a/src/pages/CustomHooks/use-window-resize/useWindowResize.jsx b/src/pages/CustomHooks/use-window-resize/useWindowResize.jsx
diff --git a/src/pages/CustomModalPopup/Modal.jsx b/src/pages/CustomModalPopup/Modal.jsx
@@ -1,19 +1,28 @@
-import React from 'react'
+import React from "react";
 
-export const Modal = ({id, header, body, onClose}) => {
-  return <div id={id || 'Modal'} className='fixed w-screen h-fit z-50 flex justify-center items-center top-1/2'>
-    <div className='bg-gr px-6 py-2'>
-      <header className='flex items-center px-2 py-3 justify-between'>
-        <h3 className='text-xl'>{header ? header : 'Header'}</h3>
-        <span onClick={onClose} className='text-rose-500 cursor-pointer'>&times;</span>
-      </header>
-      <div className='px-2 py-3 text-sm'>
-        {
-          body ? body : <div>
-            <p>This is our Modal Body</p>
-          </div>
-        }
+export const Modal = ({ id, header, body, onClose }) => {
+  return (
+    <div
+      id={id || "Modal"}
+      className="fixed w-screen h-fit z-50 flex justify-center items-center top-1/2"
+    >
+      <div className="px-6 py-2 border-border border-2">
+        <header className="flex items-center px-2 py-3 justify-between ">
+          <h3 className="text-xl">{header ? header : "Header"}</h3>
+          <span onClick={onClose} className="text-rose-500 cursor-pointer text-2xl">
+            &times;
+          </span>
+        </header>
+        <div className="px-2 py-3 text-sm">
+          {body ? (
+            body
+          ) : (
+            <div>
+              <p>This is our Modal Body</p>
+            </div>
+          )}
+        </div>
       </div>
     </div>
-  </div>
-}
+  );
+};
diff --git a/src/pages/Feature-flag/FeatureFlags.jsx b/src/pages/Feature-flag/FeatureFlags.jsx
@@ -47,7 +47,7 @@ export const FeatureFlags = () => {
 
   return (
     <div>
-      <h1 className="text-2xl text-center bg-gr py-4">Feature Flags</h1>
+      <h1 className="text-2xl text-center py-4 bg-accent">Feature Flags</h1>
       {componentsToRender.map((componentItem) =>
         checkEnabledFlags(componentItem.key) ? componentItem.component : null,
       )}

diff --git a/src/pages/GithubProfileFinder/GithubProfileFinder.jsx b/src/pages/GithubProfileFinder/GithubProfileFinder.jsx
@@ -40,7 +40,7 @@ export const GithubProfileFinder = () => {
           value={userName}
           onChange={(event) => setUserName(event.target.value)}
         />
-        <Button onClick={handleSumbit} variant="outline" type='submit'>
+        <Button onClick={handleSumbit} type='submit'>
           Search
         </Button>
       </div>

diff --git a/src/pages/ImageSlider.jsx b/src/pages/ImageSlider.jsx
@@ -54,7 +54,7 @@ function ImageSlider({
     >
       <BsArrowLeftCircleFill
         onClick={handlePrevious}
-        className="absolute size-8 text-foreground drop-shadow-xl left-4"
+        className="absolute size-8 text-accent hover:text-accent/80 drop-shadow-xl left-4"
       />
       {images && images.length
         ? images.map((imageItem, index) => (
@@ -68,7 +68,7 @@ function ImageSlider({
         : null}
       <BsArrowRightCircleFill
         onClick={handleNext}
-        className="absolute size-8 text-foreground drop-shadow-xl right-4"
+        className="absolute size-8 text-accent hover:text-accent/80 drop-shadow-xl right-4"
       />
       <span className="flex absolute bottom-4">
         {images && images.length
@@ -77,8 +77,8 @@ function ImageSlider({
               key={index}
               className={
                 currentSlide === index
-                  ? "bg-foreground size-4 outline-none border-none mx-1 cursor-pointer rounded-full"
-                  : "bg-secondary size-4 outline-none border-none mx-1 cursor-pointer rounded-full"
+                  ? "bg-accent size-4 outline-none border-none mx-1 cursor-pointer rounded-full"
+                  : "bg-accent-foreground size-4 outline-none border-none mx-1 cursor-pointer rounded-full"
               }
               onClick={() => setCurrentSlide(index)}
             ></button>

diff --git a/src/pages/LoadMoreData.jsx b/src/pages/LoadMoreData.jsx
@@ -60,11 +60,7 @@ function LoadMoreData() {
           : null}
       </div>
       <div className="btn-container">
-        <Button
-          disabled={disableButton}
-          onClick={() => setCount(count + 1)}
-          variant="secondary"
-        >
+        <Button disabled={disableButton} onClick={() => setCount(count + 1)}>
           Load More Products
         </Button>
         {disableButton ? <p>you have reached to 100 products</p> : null}

diff --git a/src/pages/QRCodeGenerator.jsx b/src/pages/QRCodeGenerator.jsx
@@ -28,7 +28,6 @@ const QRCodeGenerator = () => {
         <Button
           disabled={input && input.trim() !== "" ? false : true}
           onClick={handleGenerateQrCode}
-          variant="secondary"
         >
           Generate
         </Button>

diff --git a/src/pages/RandomColor.jsx b/src/pages/RandomColor.jsx
@@ -19,32 +19,27 @@ function RandomColor() {
     setcolor(hexColor);
   }
 
-  function handleCreateRandomRgbColor() { 
-    const r = randomColorUtility(250)
-    const g = randomColorUtility(250)
-    const b = randomColorUtility(250)
+  function handleCreateRandomRgbColor() {
+    const r = randomColorUtility(250);
+    const g = randomColorUtility(250);
+    const b = randomColorUtility(250);
 
-    setcolor(`rgb(${r},${g},${b})`)
+    setcolor(`rgb(${r},${g},${b})`);
   }
 
   return (
     <div
       className={`container flex flex-1 flex-col items-center justify-start gap-8 my-10 w-full h-screen`}
       style={{ background: color }}
     >
-      <Button onClick={() => settypeOfColor("hex")} variant="secondary">
-        Create HEX Color
-      </Button>
-      <Button onClick={() => settypeOfColor("rgb")} variant="secondary">
-        Create RGB Color
-      </Button>
+      <Button onClick={() => settypeOfColor("hex")}>Create HEX Color</Button>
+      <Button onClick={() => settypeOfColor("rgb")}>Create RGB Color</Button>
       <Button
         onClick={
           typeOfColor === "hex"
             ? handleCreateRandomHexColor
             : handleCreateRandomRgbColor
         }
-        variant="secondary"
       >
         Generate Random Color
       </Button>

diff --git a/src/pages/StarRating.jsx b/src/pages/StarRating.jsx
@@ -19,7 +19,7 @@ function StarRating({ numOfStars = 5 }) {
   }
   const handleStarNumChange = (event) => {
     setStarNums(event.target.value);
-    console.log(starNums)
+    console.log(starNums);
   };
 
   return (
@@ -35,15 +35,15 @@ function StarRating({ numOfStars = 5 }) {
       />
 
       <div className="flex justify-center items-center w-full gap-3">
-        {Array.from({length: starNums}).map((_, index) => {
+        {Array.from({ length: starNums }).map((_, index) => {
           index += 1;
 
           return (
             <FaStar
               key={index}
               className={
                 index <= (hover || rating)
-                  ? "active text-primary"
+                  ? "active text-accent"
                   : "inactive text-white"
               }
               onClick={() => handleClick(index)}