From 50b5588e87995bdd49701f2f3674af10e938fdf3 Mon Sep 17 00:00:00 2001
From: No0ne003 <hi.yassir.op@gmail.com>
Date: Sun, 5 May 2024 15:32:38 +0100
Subject: [PATCH] change theme (gruvbox theme) for just dark mode now

---
 src/components/ui/NavLinks.jsx                |   2 +-
 src/index.css                                 | 151 +++++++++++++-----
 .../CustomHooks/use-outside-click/test.jsx    |   2 +-
 .../CustomHooks/use-window-resize/test.jsx    |   7 +
 .../use-window-resize/useWindowResize.jsx     |   0
 src/pages/CustomModalPopup/Modal.jsx          |  41 +++--
 src/pages/Feature-flag/FeatureFlags.jsx       |   2 +-
 .../GithubProfileFinder.jsx                   |   2 +-
 src/pages/ImageSlider.jsx                     |   8 +-
 src/pages/LoadMoreData.jsx                    |   6 +-
 src/pages/QRCodeGenerator.jsx                 |   1 -
 src/pages/RandomColor.jsx                     |  19 +--
 src/pages/StarRating.jsx                      |   6 +-
 src/pages/TicTacToe.jsx                       |   6 +-
 src/pages/accordion/accordion.jsx             |   1 -
 src/pages/tree-view/TreeView.jsx              |   2 +-
 src/pages/tree-view/custom-tabs/Tabs.jsx      |   4 +-
 17 files changed, 164 insertions(+), 96 deletions(-)
 create mode 100644 src/pages/CustomHooks/use-window-resize/test.jsx
 create mode 100644 src/pages/CustomHooks/use-window-resize/useWindowResize.jsx

diff --git a/src/components/ui/NavLinks.jsx b/src/components/ui/NavLinks.jsx
index bebf765..a99f5ce 100644
--- 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
\ No newline at end of file
+export default NavLinks
diff --git a/src/index.css b/src/index.css
index 67939c3..8bfbc74 100644
--- 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
index abb9b30..568af03 100644
--- 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
new file mode 100644
index 0000000..8479f75
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/CustomModalPopup/Modal.jsx b/src/pages/CustomModalPopup/Modal.jsx
index 99d38ae..ed34615 100644
--- 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
index 6a886a4..d4ff426 100644
--- 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
index 41f59bc..a8d8e57 100644
--- 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
index e71ab15..484bbf0 100644
--- 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
index 85f623c..99e0983 100644
--- 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
index 802ebd0..9e7f86f 100644
--- 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
index 1ef780d..19882de 100644
--- a/src/pages/RandomColor.jsx
+++ b/src/pages/RandomColor.jsx
@@ -19,12 +19,12 @@ 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 (
@@ -32,19 +32,14 @@ function RandomColor() {
       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
index bd0386e..0f35a00 100644
--- 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,7 +35,7 @@ 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 (
@@ -43,7 +43,7 @@ function StarRating({ numOfStars = 5 }) {
               key={index}
               className={
                 index <= (hover || rating)
-                  ? "active text-primary"
+                  ? "active text-accent"
                   : "inactive text-white"
               }
               onClick={() => handleClick(index)}
diff --git a/src/pages/TicTacToe.jsx b/src/pages/TicTacToe.jsx
index ba571f7..b9615af 100644
--- a/src/pages/TicTacToe.jsx
+++ b/src/pages/TicTacToe.jsx
@@ -98,9 +98,7 @@ export const TicTacToe = () => {
 
       <div className="flex items-center py-10 h-[50px]">
         {winner || isDraw ? (
-          <Button onClick={handleRestart} variant="secondary">
-            Restart
-          </Button>
+          <Button onClick={handleRestart}>Restart</Button>
         ) : null}
       </div>
     </div>
@@ -111,7 +109,7 @@ export const Square = ({ value, onClick }) => {
   return (
     <button
       onClick={onClick}
-      className="border-[1px] border-primary float-left text-4xl size-[100px] text-center mr-[-1px] mt-[-1px] cursor-pointer empty:hover:bg-gr hover:bg-black hover:bg-opacity-5 font-sans font-bold flex justify-center items-center outline-none"
+      className="border-[1px] border-primary float-left text-4xl size-[100px] text-center mr-[-1px] mt-[-1px] cursor-pointer empty:hover:bg-primary/5 hover:bg-black hover:bg-opacity-5 font-sans font-bold flex justify-center items-center outline-none"
     >
       {value}
     </button>
diff --git a/src/pages/accordion/accordion.jsx b/src/pages/accordion/accordion.jsx
index cbc8825..45b90e2 100644
--- a/src/pages/accordion/accordion.jsx
+++ b/src/pages/accordion/accordion.jsx
@@ -24,7 +24,6 @@ export default function Accordion() {
   return (
     <div className="container flex flex-1 flex-col items-center justify-center gap-8 my-10">
       <Button
-        variant="secondary"
         onClick={() => setEnableMultiSelection(!enableMultiSelection)}
       >
         Toggle Multi Selection
diff --git a/src/pages/tree-view/TreeView.jsx b/src/pages/tree-view/TreeView.jsx
index d83cd54..35dd205 100644
--- a/src/pages/tree-view/TreeView.jsx
+++ b/src/pages/tree-view/TreeView.jsx
@@ -2,7 +2,7 @@ import MenuList from "./MenuList"
 
 function TreeView({menus = []})  {
   return (
-    <div className="container bg-secondary w-[260px] flex flex-1 py-5 mr-[100%]">
+    <div className="container bg-card w-[260px] flex flex-1 py-5 mr-[100%]">
       <MenuList list={menus} />
     </div>
   )
diff --git a/src/pages/tree-view/custom-tabs/Tabs.jsx b/src/pages/tree-view/custom-tabs/Tabs.jsx
index a27256b..d3c1a7e 100644
--- a/src/pages/tree-view/custom-tabs/Tabs.jsx
+++ b/src/pages/tree-view/custom-tabs/Tabs.jsx
@@ -13,7 +13,7 @@ export const Tabs = ({ tabsContent, onChange }) => {
       <div className="flex w-fit">
         {tabsContent.map((tabItem, index) => (
           <div
-            className={`cursor-pointer hover:bg-transparent px-5 py-3 font-mono w-[100px] ${currentTabIndex === index ? 'bg-transparent' : 'bg-secondary'}`}
+            className={`cursor-pointer hover:bg-card px-5 py-3 font-mono w-[100px] ${currentTabIndex === index ? 'bg-card' : 'bg-card/50'}`}
             onClick={() => handleOnClick(index)}
             key={tabItem.label}
           >
@@ -21,7 +21,7 @@ export const Tabs = ({ tabsContent, onChange }) => {
           </div>
         ))}
       </div>
-      <div className="flex justify-center py-4 px-3 w-full">
+      <div className="flex justify-center py-4 px-3 w-full bg-card">
         {tabsContent[currentTabIndex] && tabsContent[currentTabIndex].content}
       </div>
     </div>