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'>×</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"> + × + </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>