Merge pull request #2344 from rupali-codes/light-theme

feat: improve styling of various sections for light and dark theme
rupali-codes · Apr 20, 2024 · 1c541b8 · 1c541b8
2 parents d2d7479 + fe956b3
commit 1c541b8
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 82 deletions.
diff --git a/components/Breadcrumbs/index.tsx b/components/Breadcrumbs/index.tsx
@@ -11,7 +11,7 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
       <div className="hidden sm:flex py-3">
         <Link
           href={`/`}
-          className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer"
+          className="flex gap-x-2 dark:bg-theme-tertiary/50 border border-theme-secondary/25 bg-theme-primary-light/20 dark:border dark:border-theme-primary/8 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg cursor-pointer"
         >
           <HomeIcon className="m-auto fill-text-primary-light dark:fill-text-quaternary" />
           <div>Home</div>
@@ -23,7 +23,7 @@ const BreadCrumbs: React.FC<ComponentProps> = ({ sections }) => {
           <Link
             key={i}
             href={section.url}
-            className="flex gap-x-2 bg-theme-quinary bg-opacity-20 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer"
+            className="flex gap-x-2 border border-theme-secondary/25 bg-theme-primary-light/20 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 text-text-primary-light dark:text-text-quaternary text-lg py-0.5 px-2.5 rounded-lg capitalize cursor-pointer"
           >
             {section.name?.split('-').join(' ')}
           </Link>

diff --git a/components/Cards/Card.tsx b/components/Cards/Card.tsx
@@ -7,7 +7,7 @@ import type { IData } from 'types'
 import Bookmark from 'components/Bookmark/Bookmark'
 
 interface CardProps {
-  data: IData,
+  data: IData
   onClick: () => void
 }
 
@@ -27,7 +27,7 @@ export const Card: FC<CardProps> = ({ data, onClick }) => {
   }, [])
 
   return (
-    <article className="z-10 h-full w-full rounded-3xl dark:bg-slate-800 dark:text-text-primary dark:shadow-sm bg-light-white">
+    <article className="z-10 h-full w-full rounded-3xl dark:bg-slate-800 dark:border dark:border-theme-primary/8 dark:text-text-primary dark:shadow-sm bg-theme-primary-light border border border-theme-secondary/25">
       <div className="card-body">
         <header className="flex justify-between items-center gap-2">
           <h2
@@ -48,23 +48,26 @@ export const Card: FC<CardProps> = ({ data, onClick }) => {
             {description}
           </div>
           {isOverflow && (
-            <span onClick={onClick} className="text-sm float-right hover:underline dark:hover:text-theme-primary text-right hover:text-theme-primary dark:text-text-primary">
+            <span
+              onClick={onClick}
+              className="text-sm float-right hover:underline dark:hover:text-theme-primary text-right hover:text-theme-primary dark:text-text-primary"
+            >
               ...Read More
             </span>
           )}
         </div>
         <footer className="grid grid-cols-2 gap-x-4 md:grid-cols-1 lg:grid-cols-2">
-        <CopyToClipboard url={url} />
+          <CopyToClipboard url={url} />
           <a
             onClick={(e) => e.stopPropagation()}
             href={url}
             target="_blank"
             rel="noopener noreferrer"
             className={
-              'mt-2 flex w-full items-center justify-center gap-2 rounded-lg  bg-theme-secondary px-3 py-2 text-center text-light-primary duration-100'
+              'mt-2 flex w-full items-center justify-center gap-2 rounded-lg bg-theme-secondary px-3 py-2 text-center text-light-primary duration-100'
             }
           >
-            <span className='truncate ...'>Visit site</span>
+            <span className="truncate ...">Visit site</span>
             {youtubeRegex.test(url) ? (
               <BsYoutube size="1.3em" />
             ) : subcategory === 'e-book' ? (

diff --git a/components/CopyToClipboard/CopyToClipboard.tsx b/components/CopyToClipboard/CopyToClipboard.tsx
@@ -16,7 +16,7 @@ export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => {
   }
   return (
     <div
-      className="flex items-center justify-center text-center text-theme-secondary dark:text-white gap-x-2 bg-light-primary dark:bg-light-primary dark:bg-opacity-10 dark:hover:bg-opacity-20 rounded-lg mt-2 cursor-pointer relative py-2 px-2 truncate ..."
+      className="flex items-center justify-center text-center dark:border-none border border-theme-secondary/25 text-theme-secondary dark:text-white gap-x-2 bg-light-primary dark:bg-light-primary dark:bg-opacity-10 dark:hover:bg-opacity-20 rounded-lg mt-2 cursor-pointer relative py-2 px-2 truncate ..."
       onClick={(e) => handleCopy(e)}
     >
       <span className="truncate ...">Copy Link</span>

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -1,11 +1,7 @@
 import Link from 'next/link'
 import type { FC } from 'react'
-import { useTheme } from 'next-themes'
 
 export const Footer: FC = () => {
-  const { resolvedTheme } = useTheme()
-  const isDarkMode = resolvedTheme === 'dark'
-
   return (
     <footer className="z-10 flex w-full items-baseline justify-center rounded-lg text-center px-2">
       <div className="text-sm leading-7 md:tracking-wide text-center text-black dark:text-theme-secondary-light">
@@ -19,11 +15,7 @@ export const Footer: FC = () => {
             rel="noopener noreferrer"
             aria-label="GitHub Profile of Rupali Haldiya"
           >
-            <span
-              className={`underline mr-1 ${
-                isDarkMode ? 'text-primary-light' : 'theme-tertiary-light'
-              } `}
-            >
+            <span className="underline mr-1 duration-300 transition-all hover:text-theme-secondary">
               Rupali Haldiya
             </span>
           </Link>{' '}
@@ -34,11 +26,7 @@ export const Footer: FC = () => {
             target="_blank"
             aria-label="List of Contributors in LinksHub"
           >
-            <span
-              className={`underline ml-1 ${
-                isDarkMode ? 'text-primary-light' : 'theme-tertiary-light'
-              } `}
-            >
+            <span className="underline ml-1 duration-300 transition-all hover:text-theme-secondary">
               Open Source Community
             </span>
           </Link>

diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
@@ -114,7 +114,7 @@ export const Searchbar: React.FC<SearchbarProps> = ({
       role="search"
     >
       <div className="relative">
-        <div className="relative w-full h-12 flex items-center justify-between">
+        <div className="relative w-full h-12 flex items-center justify-between border border border-theme-secondary/25 dark:border-none rounded-lg">
           <label htmlFor="simple-search" className="sr-only">
             Quick search
           </label>

diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
@@ -48,23 +48,23 @@ export const TopBar: FC<TopBarProps> = ({}) => {
     >
       <Link
         href={'/'}
-        className="gap-x-2 items-center bg-[#EDEDED] bg-opacity-20 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:flex"
+        className="gap-x-2 items-center border border-theme-secondary/25 bg-theme-primary-light/20 bg-opacity-20 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:flex"
       >
         <HomeIcon className="m-auto fill-text-primary-light dark:fill-text-quaternary" />
         <h3>Home</h3>
       </Link>
       <RxSlash className="hidden md:inline-block" />
       <Link
         href={'/' + categoryNameLink}
-        className="bg-[#EDEDED] bg-opacity-20 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:inline-block"
+        className="bg-theme-primary-light/20 border border-theme-secondary/25 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:inline-block"
       >
         <h3>{capitalizeEachWord(categoryName)}</h3>
       </Link>
       <RxSlash className="hidden md:inline-block" />
       <Link href={'/' + categoryNameLink} className="flex gap-x-2 items-center">
         <IoIosArrowBack className="md:hidden" />
       </Link>
-      <div className="md:bg-[#EDEDED] md:bg-opacity-20 px-[10px] py-[6px] text-xl md:text-base rounded-md truncate ...">
+      <div className="md:bg-theme-primary-light/20 border border-theme-secondary/25 dark:bg-theme-tertiary/50 dark:border dark:border-theme-primary/8 px-[10px] py-[6px] text-xl md:text-base rounded-md truncate ...">
         <h3>{capitalizeEachWord(cleanedCategory)}</h3>
       </div>
       <button>
@@ -73,7 +73,7 @@ export const TopBar: FC<TopBarProps> = ({}) => {
           data-tooltip-place="bottom"
           data-tooltip-content={description}
           size={30}
-          className=" ml-2 text-sm cursor-pointer bg-[#EDEDED] bg-opacity-20 p-2 rounded-md "
+          className=" ml-2 border border-theme-secondary/25 text-sm cursor-pointer bg-[#EDEDED] bg-opacity-20 dark:bg-theme-tertiary/75 dark:border dark:border-theme-primary/8 p-2 rounded-md "
         />
       </button>
       <CardTooltip theme={theme} />

diff --git a/components/popup/popupInfo.tsx b/components/popup/popupInfo.tsx
@@ -21,17 +21,15 @@ export const PopupInfo: React.FC<{
     return null
   }
 
-  // const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+$/
-
   return (
-    <div className='fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80'>
+    <div className="fixed inset-0 z-50 h-full w-full cursor-pointer bg-black/80">
       <Backdrop onClick={onClose} />
       {createPortal(
         <div
           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 bg-light-primary px-5 py-10 dark:bg-slate-800`}
+          } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl bg-light-primary border-2 border-theme-secondary/50 px-5 py-10 dark:bg-slate-800 dark:border dark:border-theme-primary/8`}
           role="dialog"
           title={`${currentCard?.name ?? 'Card'} Popup`}
         >
@@ -51,40 +49,9 @@ export const PopupInfo: React.FC<{
                   <IoClose />
                 </p>
               </div>
-              {/* <div className="max-w-[25]%] mx-3 text-xsm text-theme-secondary capitalize flex items-center gap-2">
-                <CopyToClipboard url={currentCard?.url ?? ''} />
-                {currentCard?.language ? (
-                  <>
-                    <BsGlobe />
-                    {currentCard?.language}
-                  </>
-                ) : (
-                  ''
-                )}
-              </div> */}
             </div>
             <p className="">{currentCard?.description}</p>
           </div>
-          {/* <div className="card-actions justify-end mt-auto">
-            <a
-              onClick={(e) => e.stopPropagation()}
-              href={currentCard?.url}
-              target="_blank"
-              rel="noreferrer"
-              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 flex items-center justify-center bottom-0 relative gap-2"
-            >
-              Visit Site
-              {youtubeRegex.test(currentCard?.url || '') ? (
-                <BsYoutube size="1.3em" />
-              ) : currentCard?.subcategory === 'e-book' ? (
-                <AiOutlineRead size="1.3em" />
-              ) : currentCard?.subcategory === 'technical-writing-tools' ? (
-                <BsPen size="1.2em" />
-              ) : (
-                <MdArticle size="1.3em" />
-              )}
-            </a>
-          </div> */}
         </div>,
         overlayRoot
       )}

diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx
@@ -13,7 +13,7 @@ import MobileBottomNav from 'components/MobileBottomNav/MobileBottomNav'
 
 const GeneralLayout = ({ children }: { children: ReactNode }) => {
   const { sidebar } = useContext<IContext>(GlobalContext)
-  
+
   return (
     <>
       <SkipLink />
@@ -29,7 +29,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
         </nav>
         <main
           data-custom="restrict-click-outside"
-          className="flex flex-col min-h-full px-4 pb-2 md:ml-[290px] lg:w-[calc(100%-290px)] bg-theme-primary-light dark:bg-inherit"
+          className="flex flex-col min-h-full px-4 pb-2 md:ml-[290px] lg:w-[calc(100%-290px)] bg-white dark:bg-inherit"
           id="main"
         >
           <div className="flex-grow">{children}</div>

diff --git a/pages/[category]/index.tsx b/pages/[category]/index.tsx
@@ -25,7 +25,7 @@ const CategoryPage = () => {
 
     return 'No descrition'
   }
-  
+
   return (
     <section className="flex min-h-[calc(100vh-165px)] flex-col">
       <div className="sm:ml-4 2xl:mx-auto items-start gap-2">
@@ -54,7 +54,7 @@ const CategoryPage = () => {
                     key={i}
                     href={`/${category}${subcat.url}`}
                     aria-label={`Explore ${subcat.name}`}
-                    className="group flex flex-col dark:border dark:border-theme-primary dark:border-opacity-8 rounded-xl dark:bg-theme-tertiary bg-white dark:bg-opacity-25 dark:hover:bg-theme-quaternary dark:hover:bg-opacity-25	px-3 py-1 dark:hover:border-opacity-25 hover:text-dark-primary dark:shadow-lg shadow-tile md:max-w-[320px] px-4 py-4 group max-w-none w-full"
+                    className="group flex flex-col dark:border dark:border-theme-primary dark:border-opacity-8 rounded-xl dark:bg-theme-tertiary bg-theme-primary-light border border border-theme-secondary/25 dark:bg-opacity-25 dark:hover:bg-theme-quaternary dark:hover:bg-opacity-25	px-3 py-1 dark:hover:border-opacity-25 hover:text-dark-primary dark:shadow-lg shadow-tile md:max-w-[320px] px-4 py-4 group max-w-none w-full"
                   >
                     <div className="flex justify-between">
                       <div className="dark:text-gray-300 text-text-primary-light text-lg capitalize font-medium">

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -39,13 +39,15 @@ const SocialLink: React.FC<SocialLinkProps> = ({
   title,
   description,
 }) => (
-  <div className="md:w-1/3 w-full dark:bg-slate-800 bg-light-white hover:bg-light-silver dark:hover:bg-slate-700 hover:border border-[#BDBDBD14] p-6 mb-4 rounded-lg lg:h-44">
+  <div className="md:w-1/3 w-full dark:bg-slate-800 bg-theme-primary-light hover:bg-theme-primary-light/8 dark:hover:bg-slate-700 border border-theme-secondary/25 shadow-md p-6 mb-4 rounded-lg lg:h-44">
     <Link href={href}>
       <div className="flex items-center dark:text-text-quinary gap-2 mb-3">
         <div>{icon}</div>
         <span className="sm:inline">{title}</span>
       </div>
-      <p className="text-sm sm:text-base text-text-quinary sm:h-24 h-fit lg:h-fit overflow-hidden font-sans text-ellipsis line-clamp-4">{description}</p>
+      <p className="text-sm sm:text-base text-text-quinary sm:h-24 h-fit lg:h-fit overflow-hidden font-sans text-ellipsis line-clamp-4">
+        {description}
+      </p>
     </Link>
   </div>
 )
@@ -64,7 +66,6 @@ const RatingForkComponent: React.FC<RatingForkProps> = ({
   return (
     <div
       className={`dark:text-white rounded-lg md:w-[160px] text-3xl p-4 dark:bg-[rgba(255,255,255,0.1)] bg-[rgba(0,0,0,0.05)] w-full`}
-
     >
       {type === 'star' ? (
         <IoIosStar
@@ -106,7 +107,9 @@ export default function Home() {
   useEffect(() => {
     const getStarForkCount = async () => {
       try {
-        const response = await fetch(`https://api.github.com/repos/rupali-codes/LinksHub`)
+        const response = await fetch(
+          `https://api.github.com/repos/rupali-codes/LinksHub`
+        )
         const data = await response.json()
         setStarCount(data.stargazers_count)
         setForkCount(data.forks)
@@ -211,7 +214,7 @@ export default function Home() {
               </p>
               <div
                 className={
-                  'min-h-52 p-8 rounded-3xl dark:bg-slate-800 bg-light-white mt-4 mb-6 border border-[#BDBDBD14]'
+                  'min-h-52 p-8 rounded-3xl dark:bg-slate-800 bg-theme-primary-light mt-4 mb-6 border border-theme-secondary/25 shadow-md'
                 }
               >
                 <div
@@ -224,11 +227,12 @@ export default function Home() {
                       <Logo />
                     </div>
                     <p className={'my-2 text-base text-text-quinary pt-3'}>
-                      LinksHub aims to provide people access to a wide
-                      range of free resources and tools that they can use to learn and develop their tech skills.
-       These resources include links to free
-                      software, libraries, frameworks, and other tools that can
-                      be used to build and deploy applications, website, and other projects.
+                      LinksHub aims to provide people access to a wide range of
+                      free resources and tools that they can use to learn and
+                      develop their tech skills. These resources include links
+                      to free software, libraries, frameworks, and other tools
+                      that can be used to build and deploy applications,
+                      website, and other projects.
                     </p>
                   </div>
                   <div
@@ -277,7 +281,7 @@ export default function Home() {
           {community && (
             <>
               <div className="text-text-quinary">
-                Get involved!  Everyone is welcome!
+                Get involved! Everyone is welcome!
               </div>
               <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-4">
                 <SocialLink
@@ -328,8 +332,10 @@ export default function Home() {
                         href={`/${el.category}`}
                         className="w-full sm:w-[calc(50%-1rem)] md:w-[calc(33.33%-1rem)] lg:w-[calc(33.33%-1rem)] group"
                       >
-                        <div className="border-solid border-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700 bg-light-white hover:bg-light-silver flex items-center justify-between rounded-xl sm:h-16 h-fit">
-                          <div className="p-5 truncate ...">{el.category.toUpperCase()}</div>
+                        <div className="border border-theme-secondary border-opacity-25 shadow-sm dark:border dark:border-theme-primary dark:border-opacity-20 duration-300 transition-all dark:bg-slate-800 dark:hover:bg-slate-700 bg-theme-primary-light hover:bg-theme-primary-light/8 flex items-center justify-between rounded-xl sm:h-16 h-fit">
+                          <div className="p-5 truncate ...">
+                            {el.category.toUpperCase()}
+                          </div>
                           <div>
                             <FaArrowRightLong className="m-4 hidden group-hover:block" />
                           </div>
@@ -342,7 +348,7 @@ export default function Home() {
           </div>
         </div>
         <div className="mt-10 mb-6 md:mb-0">
-          <div className="dark:bg-slate-800 bg-light-white rounded-lg border border-[#BDBDBD14] sm:flex-row items-center justify-between md:p-7 md:pr-12 p-5">
+          <div className="dark:bg-slate-800 bg-theme-primary-light rounded-lg border border border-theme-secondary/25 sm:flex-row items-center justify-between md:p-7 md:pr-12 p-5">
             <div className="md:flex items-center gap-4">
               <div className="text-yellow-400 ml-4 lg:ml-0">
                 <StarIcon />
@@ -363,7 +369,7 @@ export default function Home() {
                 icon={<HeartIcon />}
                 variant="pale"
                 link="https://github.com/sponsors/rupali-codes"
-                className="w-full sm:w-auto mt-4 mt-4 lg:mt-0 md:ml-4 md:mr-auto"
+                className="w-full sm:w-auto border border-theme-secondary/25 bg-primary/8 mt-4 mt-4 lg:mt-0 md:ml-4 md:mr-auto"
               />
             </div>
           </div>