From 20a6e9ca8332d5fee93b0bc75ad40c28a42bacda Mon Sep 17 00:00:00 2001
From: Rupali Haldiya <rupali7487@gmail.com>
Date: Sun, 23 Jul 2023 20:55:52 +0530
Subject: [PATCH] chore: fix colors

---
 components/BackToTop/BackToTopButton.tsx      |  4 ++--
 components/Cards/Card.tsx                     |  8 +++----
 .../CopyToClipboard/CopyToClipboard.tsx       |  4 ++--
 components/Footer/Footer.tsx                  |  4 ++--
 components/ForkButton/GitHubForkButton.tsx    |  2 +-
 components/Header/Header.tsx                  |  4 ++--
 components/MainContainer/MainContainer.tsx    | 13 ------------
 components/MainContainer/index.ts             |  1 -
 components/NewIssue/NewIssue.tsx              | 15 ++++++-------
 components/Searchbar/Searchbar.tsx            | 21 +++++++------------
 components/SideNavbar/SideNavbar.tsx          |  2 +-
 components/SideNavbar/SideNavbarBody.tsx      |  4 ++--
 components/SideNavbar/SideNavbarCategory.tsx  |  4 ++--
 components/SideNavbar/SideNavbarElement.tsx   | 10 ++++-----
 components/SkipLink/SkipLink.tsx              |  2 +-
 components/StarButton/GitHubStarButton.tsx    |  2 +-
 components/logo/logo.tsx                      |  2 +-
 components/popup/index.tsx                    |  8 +++----
 components/popup/popupCategoryDesc.tsx        |  4 ++--
 styles/globals.css                            | 16 --------------
 tailwind.config.js                            | 16 ++++++--------
 21 files changed, 51 insertions(+), 95 deletions(-)
 delete mode 100644 components/MainContainer/MainContainer.tsx
 delete mode 100644 components/MainContainer/index.ts

diff --git a/components/BackToTop/BackToTopButton.tsx b/components/BackToTop/BackToTopButton.tsx
index 2d43e630b..ffe7861c0 100644
--- a/components/BackToTop/BackToTopButton.tsx
+++ b/components/BackToTop/BackToTopButton.tsx
@@ -40,7 +40,7 @@ export const BackToTopButton = () => {
     return null
   }
 
-  const buttonClasses = `focus:animate-button-press rounded-full border border-white bg-violet-600 p-4 text-white shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-violet-400 group-hover:bg-white dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600 ${
+  const buttonClasses = `focus:animate-button-press rounded-full border border-light-primary bg-theme-secondary p-4 text-light-primary shadow-xl duration-300 transition-colors focus:ring group-hover:border-dashed group-hover:border-theme-primary group-hover:bg-light-primary dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600 ${
     status === 'preEnter' || status === 'exiting'
       ? 'opacity-0 translate-y-3'
       : ''
@@ -53,7 +53,7 @@ export const BackToTopButton = () => {
         onClick={handleClick}
         title="Back to top"
       >
-        <FaArrowUp className="group-hover:text-violet-500" />
+        <FaArrowUp className="group-hover:text-theme-secondary" />
       </button>
       <span className="absolute left-1/2 top-1/2 -z-10 hidden -translate-x-1/2 -translate-y-1/2 rotate-0 text-2xl transition-all duration-100 ease-in-out group-hover:ml-8 group-hover:block group-hover:rotate-45">
         👾
diff --git a/components/Cards/Card.tsx b/components/Cards/Card.tsx
index 9b2925bff..bd1ef2311 100644
--- a/components/Cards/Card.tsx
+++ b/components/Cards/Card.tsx
@@ -22,11 +22,11 @@ const Card: FC<CardProps> = ({ data }) => {
   }, [])
 
   return (
-    <article className="z-10 h-full w-full rounded-3xl border border-dashed border-violet-500 dark:border-violet-400 bg-gray-100 shadow-lg dark:bg-gray-900 dark:text-gray-300 dark:shadow-sm">
+    <article className="z-10 h-full w-full rounded-3xl border border-dashed border-theme-secondary dark:border-theme-primary bg-[rgba(255,255,255,0.3)] shadow-md dark:bg-dark dark:text-text-primary dark:shadow-sm">
       <div className="card-body">
         <header className="flex justify-between items-center">
           <h2
-            className="cursor-default md:truncate ... text-xl text-violet-600 dark:text-violet-400"
+            className="cursor-default md:truncate ... text-xl text-theme-secondary dark:text-theme-primary"
             title={name}
           >
             {name}
@@ -41,7 +41,7 @@ const Card: FC<CardProps> = ({ data }) => {
             {description}
           </div>
           {isOverflow && (
-            <p className="text-sm underline text-violet-600 dark:text-violet-400 text-right hover:text-violet-400 dark:hover:text-violet-300">
+            <p className="text-sm underline text-theme-secondary dark:text-theme-primary text-right hover:text-theme-primary dark:hover:text-text-primary">
               Read More
             </p>
           )}
@@ -53,7 +53,7 @@ const Card: FC<CardProps> = ({ data }) => {
             target="_blank"
             rel="noopener noreferrer"
             className={
-              'mt-2 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-violet-600 px-6 py-2 text-center text-white duration-100 hover:border-violet-400 hover:bg-transparent hover:text-violet-500 dark:hover:text-violet-400'
+              'mt-2 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-theme-secondary px-6 py-2 text-center text-light-primary duration-100 hover:border-theme-primary hover:bg-transparent hover:text-theme-secondary dark:hover:text-theme-primary'
             }
           >
             Visit site
diff --git a/components/CopyToClipboard/CopyToClipboard.tsx b/components/CopyToClipboard/CopyToClipboard.tsx
index 0705c066f..dac287271 100644
--- a/components/CopyToClipboard/CopyToClipboard.tsx
+++ b/components/CopyToClipboard/CopyToClipboard.tsx
@@ -18,11 +18,11 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
     <div className="dropdown dropdown-left dropdown-hover">
       <FaRegCopy
         size={'1.3rem'}
-        className="text-violet-500 cursor-pointer"
+        className="text-theme-primary cursor-pointer"
         title="Copy link"
         onClick={(e) => handleCopy(e)}
       />
-      <p className="dropdown-content bg-violet-500 text-white text-sm rounded-lg p-1.5 cursor-default">
+      <p className="dropdown-content bg-theme-secondary text-white text-sm rounded-lg px-3 py-1 cursor-default">
         {success ? 'Copied!' : 'Copy'}
       </p>
     </div>
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index eae57f236..e31198c7d 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -7,12 +7,12 @@ export const Footer: FC = () => {
   const isDarkMode = resolvedTheme === 'dark'
 
   const nameStyles = `underline ${
-    isDarkMode ? 'text-gray-200' : 'text-violet-700'
+    isDarkMode ? 'text-light-primary' : 'text-theme-secondary'
   } `
 
   return (
     <footer className="z-10 mb-4 flex w-full items-baseline justify-center rounded-lg py-2 backdrop-blur-md sm:py-3">
-      <p className="leading-7 tracking-wide text-center text-black dark:text-violet-400">
+      <p className="leading-7 tracking-wide text-center text-black dark:text-theme-primary">
         <span>&copy; {new Date().getFullYear()} LinksHub | </span>
         Developed by{' '}
         <Link
diff --git a/components/ForkButton/GitHubForkButton.tsx b/components/ForkButton/GitHubForkButton.tsx
index dc428078a..2c3254040 100644
--- a/components/ForkButton/GitHubForkButton.tsx
+++ b/components/ForkButton/GitHubForkButton.tsx
@@ -29,7 +29,7 @@ export const GitHubForkButton: FC<{ repo: string }> = ({ repo }) => {
       aria-label={`Fork ${repo} on GitHub`}
     >
       <div
-        className="inline-flex items-center py-1 text-sm font-semibold bg-transparent text-theme-secondary rounded-sm transition-colors transition duration-300 ease-in-out hover:text-text-secondary transition duration-300 ease-in-out dark:hover:text-gray-300 dark:text-theme-primary hover:underline"
+        className="inline-flex items-center py-1 text-sm font-semibold bg-transparent text-theme-secondary rounded-sm transition-colors transition duration-300 ease-in-out hover:text-text-secondary transition duration-300 ease-in-out dark:hover:text-text-primary dark:text-theme-primary"
       >
         <FaCodeBranch className="mr-1" />
         <span className="font-semibold">Fork</span>
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index a42ad316a..b95552991 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -11,8 +11,8 @@ export const Header: FC = () => {
   const { toggleNav } = useContext(GlobalContext)
 
   return (
-    <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between">
-      <div className="bg-light-primary h-full w-fit flex-none px-6 py-4 dark:bg-dark lg:w-[290px]">
+    <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between bg-light-primary dark:bg-dark">
+      <div className="bg-[rgba(255,255,255,0.3)] h-full w-fit flex-none px-6 py-4 dark:bg-dark lg:w-[290px]">
         <Link href="/">
           <Logo className="text-3xl" />
         </Link>
diff --git a/components/MainContainer/MainContainer.tsx b/components/MainContainer/MainContainer.tsx
deleted file mode 100644
index f67a2953f..000000000
--- a/components/MainContainer/MainContainer.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-
-export const MainContainer = () => {
-  return (
-    <div className="min-h-screen flex flex-row items-center justify-center">
-      <h2 className="text-6xl font-bold text-violet-200">
-        <span className="border-b-8 border-violet-500">Links</span>
-        <span className="text-violet-500">Hub</span>
-      </h2>
-      <p className="uppercase font-semibold text-xl mt-6">...coming soon</p>
-    </div>
-  )
-}
diff --git a/components/MainContainer/index.ts b/components/MainContainer/index.ts
deleted file mode 100644
index f63aafa3f..000000000
--- a/components/MainContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { MainContainer } from './MainContainer'
diff --git a/components/NewIssue/NewIssue.tsx b/components/NewIssue/NewIssue.tsx
index 63f4b85a6..774b56c39 100644
--- a/components/NewIssue/NewIssue.tsx
+++ b/components/NewIssue/NewIssue.tsx
@@ -3,19 +3,16 @@ import Link from 'next/link'
 
 const NewIssue: FC = () => {
   return (
-    <p className="pt-6 md:p-0 coming-soon">
-      <span className="text-2xl">
-        Be the first to add by creating a GitHub issue
-      </span>{' '}
-      <span className="motion-safe:animate-pulse text-2xl text-purple-500">
-        <Link
+    <div className="pt-6 md:p-0 text-xl w-fit m-auto">
+      <span>Be the first to add by creating a GitHub issue </span>
+        <Link 
+           className="dark:text-theme-primary text-theme-secondary underline"
           href="https://github.com/rupali-codes/LinksHub/issues/new?assignees=&labels=add+link&template=add_link.yml&title=%5BAdd%5D+%3Cname%3E"
           target="_blank"
         >
-          <u>here</u>
+          here
         </Link>
-      </span>
-    </p>
+    </div>
   )
 }
 
diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
index f1545eea3..5a35d2ded 100644
--- a/components/Searchbar/Searchbar.tsx
+++ b/components/Searchbar/Searchbar.tsx
@@ -8,13 +8,6 @@ interface SearchbarProps {
   setSearch: (search: string) => void
 }
 
-// const subcategory =subcategoryArray;
-
-// const subcategoryList: SubCategory[] = Object.keys(SubCategory).filter(
-//   (key) => isNaN(Number(key))
-// ) as SubCategory[];
-
-const searchOptions = subcategoryArray
 
 export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
   const router = useRouter()
@@ -34,7 +27,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
       setSuggestions([])
       setSearch('')
     } else {
-      const filteredSuggestions = searchOptions.filter((option) =>
+      const filteredSuggestions = subcategoryArray.filter((option) =>
         option.toLowerCase().includes(trimmedValue)
       )
       setSuggestions(filteredSuggestions)
@@ -80,15 +73,15 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
           <input
             type="text"
             id="simple-search"
-            className="block p-2.5 w-full bg-transparent text-sm text-gray-900 dark:text-gray-200 border border-dashed border-gray-400 dark:border-gray-500 focus:border-violet-500 dark:focus:border-violet-500 dark:focus:ring-violet-500 focus:ring-violet-500 dark:placeholder-gray-400 outline-none transition-all ease-in-out duration-300 rounded-lg"
-            placeholder="Start searching..."
+            className="block p-2.5 w-full bg-transparent text-sm text-dark dark:text-text-primary border border-dashed border-gray-text focus:border-theme-secondary dark:focus:border-theme-primary dark:focus:ring-theme-primary focus:ring-theme-secondary dark:placeholder-gray-text outline-none transition-all ease-in-out duration-300 rounded-lg capitalize"
+            placeholder="Quick search..."
             value={searchQuery}
             onChange={handleSearchChange}
             required
           />
           <button
             type="submit"
-            className="ml-2 px-4 py-2.5 bg-violet-500 text-white rounded-md border border-dashed border-transparent hover:border-violet-400 hover:bg-transparent hover:text-violet-400 dark:hover:text-violet-400"
+            className="ml-2 px-4 py-2.5 bg-theme-secondary text-light-primary rounded-md border border-dashed border-transparent hover:border-theme-primary hover:bg-transparent hover:text-theme-primary dark:hover:text-theme-primary transition-colors transition duration-300 ease-in-out"
           >
             <SearchIcon className="w-5 h-5" />
           </button>
@@ -96,15 +89,15 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
         {suggestions.length > 0 && (
           <ul
             ref={dropdownRef}
-            className="absolute z-10 bg-white dark:bg-gray-800 w-full py-2 mt-1 rounded-lg shadow-lg"
+            className="absolute z-10 text-light-primary bg-theme-secondary w-full mt-1 rounded-lg shadow-2xl"
           >
             {suggestions.map((suggestion) => (
               <li
                 key={suggestion}
-                className="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
+                className="px-4 py-2 cursor-pointer hover:bg-[rgba(0,0,0,0.2)] capitalize"
                 onClick={() => handleSuggestionClick(suggestion)}
               >
-                {suggestion}
+                {suggestion.split('-').join(' ')}
               </li>
             ))}
           </ul>
diff --git a/components/SideNavbar/SideNavbar.tsx b/components/SideNavbar/SideNavbar.tsx
index 56290d003..f8bdfb6da 100644
--- a/components/SideNavbar/SideNavbar.tsx
+++ b/components/SideNavbar/SideNavbar.tsx
@@ -34,7 +34,7 @@ export const SideNavbar: FC = () => {
         >
           <SideNavbarHeader />
           <SocialMediaIconsList
-            className="bg-gray-100 px-6 py-2 dark:bg-gray-900"
+            className="bg-light-primary px-6 py-2 dark:bg-dark"
             showGithubButtons={true} // to show the Star & Fork Button below social media icons
           />
           <SideNavbarBody />
diff --git a/components/SideNavbar/SideNavbarBody.tsx b/components/SideNavbar/SideNavbarBody.tsx
index b9a75f239..69bd00ca7 100644
--- a/components/SideNavbar/SideNavbarBody.tsx
+++ b/components/SideNavbar/SideNavbarBody.tsx
@@ -13,11 +13,11 @@ export const SideNavbarBody: FC = () => {
   return (
     <div
       className={classNames(
-        `bg-base-200 h-full w-full overflow-x-hidden whitespace-nowrap transition-all ease-in dark:bg-gray-900 dark:text-gray-300`,
+        `bg-[rgba(255,255,255,0.3)] h-full w-full overflow-x-hidden whitespace-nowrap transition-all ease-in dark:bg-dark dark:text-text-primary`,
         theme === 'light' ? 'scrollColorLight' : 'scrollColorDark'
       )}
     >
-      <div className="bg-base-200 transiton-all w-full p-4 transition-none ease-in dark:bg-gray-900">
+      <div className="bg-primary-light transiton-all w-full p-4 transition-none ease-in dark:bg-dark">
         <Searchbar setSearch={setSearch} />
       </div>
       <SideNavbarCategoryList
diff --git a/components/SideNavbar/SideNavbarCategory.tsx b/components/SideNavbar/SideNavbarCategory.tsx
index d8818f0d8..ebd56f621 100644
--- a/components/SideNavbar/SideNavbarCategory.tsx
+++ b/components/SideNavbar/SideNavbarCategory.tsx
@@ -23,7 +23,7 @@ export const SideNavbarCategory: FC<{
     ))
 
   return (
-    <li className="relative w-full transition-all ease-in-out text-violet-600 dark:text-violet-400 dark:bg-opacity-5 hover:text-violet-500 dark:hover:text-violet-300 rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-violet-400">
+    <li className="relative w-full transition-all ease-in-out text-theme-secondary dark:text-theme-primary dark:bg-opacity-5 hover:text-theme-secondary dark:hover:text-theme-primary rounded-md focus-visible:outline-none focus-visible:ring focus-visible:ring-theme-primary">
       <button
         className="flex w-full cursor-pointer justify-between py-2"
         onClick={handleToggle}
@@ -40,7 +40,7 @@ export const SideNavbarCategory: FC<{
           isOpen ? 'max-h-screen' : ''
         }`}
       >
-        <ul className="relative ml-1 border-l-2 border-slate-300 dark:border-slate-700 -pl-0.5">
+        <ul className="relative ml-1 border-l-2 dark:border-zinc-500 border-zinc-300 -pl-0.5">
           {subcategoryList}
         </ul>
       </div>
diff --git a/components/SideNavbar/SideNavbarElement.tsx b/components/SideNavbar/SideNavbarElement.tsx
index 0e4210790..ec97cf2f4 100644
--- a/components/SideNavbar/SideNavbarElement.tsx
+++ b/components/SideNavbar/SideNavbarElement.tsx
@@ -14,12 +14,12 @@ export const SideNavbarElement = ({ name, url }: SubCategories) => {
       onClick={closeNav}
       className={`${
         router.asPath === url
-          ? 'border-l-4 border-violet-500 text-violet-700 dark:text-violet-400 '
-          : 'text-slate-600 dark:text-slate-400'
-      } collapse w-full text-start pl-3 hover:text-violet-500 dark:hover:text-violet-300 
-      focus-visible:outline-none focus-visible:ring focus-visible:ring-violet-400 focus-visible:rounded-lg`}
+          ? 'border-l-4 border-theme-primary text-theme-secondary dark:text-theme-primary '
+          : 'text-text-secondary dark:text-gray-text'
+      } collapse w-full text-start pl-3 hover:text-theme-secondary dark:hover:text-violet-300 
+      focus-visible:outline-none focus-visible:ring focus-visible:ring-theme-primary focus-visible:rounded-lg`}
     >
-      <div className="ml-2 text-lg py-2 capitalize transition-all duration-300 hover:pl-2 dark:border-violet-500">
+      <div className="ml-2 text-lg py-2 capitalize transition-all duration-300 hover:pl-2 dark:border-theme-secondary">
         {name}
       </div>
     </Link>
diff --git a/components/SkipLink/SkipLink.tsx b/components/SkipLink/SkipLink.tsx
index cfdf439d9..0f1ccc38e 100644
--- a/components/SkipLink/SkipLink.tsx
+++ b/components/SkipLink/SkipLink.tsx
@@ -4,7 +4,7 @@ export const SkipLink: FC = () => (
   <div className="z-40 flex absolute left-1/2 transform -translate-x-1/2">
     <a
       href="#main"
-      className="-translate-y-20   focus:transform-none mt-2 flex items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-violet-600 px-6 py-2 text-center text-white"
+      className="-translate-y-20 focus:transform-none mt-2 flex items-center justify-center gap-2 rounded-2xl border border-dashed border-transparent bg-theme-secondary px-6 py-2 text-center text-light-primary"
     >
       Skip to main content
     </a>
diff --git a/components/StarButton/GitHubStarButton.tsx b/components/StarButton/GitHubStarButton.tsx
index 01d5fb58d..da43200ad 100644
--- a/components/StarButton/GitHubStarButton.tsx
+++ b/components/StarButton/GitHubStarButton.tsx
@@ -28,7 +28,7 @@ export const GitHubStarButton: FC<{ repo: string }> = ({ repo }) => {
       rel="noopener noreferrer"
       aria-label={`Star ${repo} on GitHub`}
     >
-      <div className="inline-flex items-center py-1 text-sm font-semibold bg-transparent text-theme-secondary rounded-sm transition-colors transition duration-300 ease-in-out hover:text-text-secondary transition duration-300 ease-in-out dark:hover:text-gray-300 dark:text-theme-primary hover:underline">
+      <div className="inline-flex items-center py-1 text-sm font-semibold bg-transparent text-theme-secondary rounded-sm transition-colors transition duration-300 ease-in-out hover:text-text-secondary transition duration-300 ease-in-out dark:hover:text-text-primary dark:text-theme-primary">
         <FaRegStar className="mr-1" />
         <span>Star</span>
         <span className="ml-2">{starCount}</span>
diff --git a/components/logo/logo.tsx b/components/logo/logo.tsx
index 66191d581..1f8f3b3f9 100644
--- a/components/logo/logo.tsx
+++ b/components/logo/logo.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 const Logo = ({ className }: { className?: string }) => {
   return (
     <h1 className={`font-semibold  ${className}`}>
-      <span className="border-b-4 border-theme-secondary dark:border-theme-primary text-text-secondary dark:text-light-primary">
+      <span className="border-b-4 border-theme-primary text-text-secondary dark:text-light-primary">
         Links
       </span>
       <span className="text-theme-secondary dark:text-theme-primary motion-safe:animate-pulse">
diff --git a/components/popup/index.tsx b/components/popup/index.tsx
index b628dab56..964c3df82 100644
--- a/components/popup/index.tsx
+++ b/components/popup/index.tsx
@@ -30,18 +30,18 @@ const Popup: React.FC<{
           onClick={(e) => e.stopPropagation()}
           className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${
             currentCard ? 'animate-scale-appearance' : 'animate-scale-hide'
-          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl border border-dashed border-violet-500 dark:border-violet-400 bg-gray-100 px-5 py-10 dark:bg-gray-900`}
+          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl border border-dashed border-theme-secondary dark:border-theme-primary bg-light-primary px-5 py-10 dark:bg-dark`}
           role="dialog"
           title={`${currentCard?.name ?? 'Card'} Popup`}
         >
           <div className="flex flex-col gap-5">
             <div className="flex justify-between items-center">
               <div className="w-full flex justify-between items-center">
-                <h2 className="text-2xl text-violet-400 capitalize">
+                <h2 className="text-2xl text-theme-primary capitalize">
                   {currentCard?.name}
                 </h2>
               </div>
-              <div className="max-w-[25]%] text-xsm text-violet-500 capitalize flex items-center gap-2">
+              <div className="max-w-[25]%] text-xsm text-theme-secondary capitalize flex items-center gap-2">
                 <CopyToClipboard url={currentCard?.url ?? ''} />
                 {currentCard?.language ? (
                   <>
@@ -61,7 +61,7 @@ const Popup: React.FC<{
               href={currentCard?.url}
               target="_blank"
               rel="noreferrer"
-              className="mt-2 px-6 py-2 text-white text-center bg-violet-600 rounded-2xl w-full hover:bg-transparent hover:text-violet-500 border border-dashed border-transparent duration-100 hover:border-violet-400  bottom-0 flex items-center justify-center bottom-0 relative"
+              className="mt-2 px-6 py-2 text-white text-center bg-theme-secondary rounded-2xl w-full hover:bg-transparent hover:text-theme-secondary border border-dashed border-transparent duration-100 hover:border-theme-primary  bottom-0 flex items-center justify-center bottom-0 relative"
             >
               Visit site
             </a>
diff --git a/components/popup/popupCategoryDesc.tsx b/components/popup/popupCategoryDesc.tsx
index 2d6c89f6f..2f1b852cb 100644
--- a/components/popup/popupCategoryDesc.tsx
+++ b/components/popup/popupCategoryDesc.tsx
@@ -30,14 +30,14 @@ const PopupDesc: React.FC<{
           onClick={(e) => e.stopPropagation()}
           className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${
             currentCategory ? 'animate-scale-appearance' : 'animate-scale-hide'
-          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl border border-dashed border-violet-500 dark:border-violet-400 bg-gray-100 px-5 py-10 dark:bg-gray-900`}
+          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl border border-dashed border-theme-secondary dark:border-theme-primary bg-light-primary px-5 py-10 dark:bg-dark`}
           role="dialog"
           title={`${name ?? 'Card'} Popup`}
         >
           <div className="flex flex-col gap-5">
             <div className="flex justify-between items-center">
               <div className="w-full flex justify-between items-center">
-                <h2 className="max-w-[80%] text-2xl text-violet-400 capitalize">
+                <h2 className="max-w-[80%] text-2xl text-theme-primary capitalize">
                   {name}
                 </h2>
               </div>
diff --git a/styles/globals.css b/styles/globals.css
index 389fa7593..f90afd8f9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -92,22 +92,6 @@ p,
 pre {
   text-align: justify !important;
 }
-
-@media (min-width: 992px) {
-  .coming-soon {
-    text-align: center;
-    top: 220px;
-    position: relative;
-  }
-}
-
-@media (max-width: 800px) {
-  .coming-soon {
-    text-align: center;
-    top: 150px;
-    position: relative;
-  }
-}
 /* setting root value for main scrollbar */
 :root {
   --scroll-thumb: #bbb;
diff --git a/tailwind.config.js b/tailwind.config.js
index fea406859..ad5ef7ddb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,19 +8,15 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        discord: '#7289DA',
-        github: '#211F1F',
-        twitter: '#1DA1F2',
-        'theme-primary': '#a78bfa',   //violet
-        'theme-secondary': '#8b5cf6', //violet
-        'light': '#ffffff',
+        'theme-primary': '#a78bfa', 
+        'theme-secondary': '#8b5cf6',
         'light-primary': '#f5f3ff',
-        'light-secondary': '',
-        'dark': '#0f172a',
-        'dark-primary': '#101623',
-        'dark-secondary': '',
+        'dark': '#0f172a',  
+        'dark-primary': '#101623', 
+        'gray-text': '#9ca3af',
         'text-primary': '#d1d5db',
         'text-secondary': '#4b5563',
+
       },
       screens: {
         xs: '200px',