add dark theme to contacts page

fe-may23-dreamTeam · Sep 17, 2023 · e6897f2 · e6897f2
1 parent 945bee9
commit e6897f2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx
@@ -21,10 +21,11 @@ const ContactCard: React.FC<Props> = ({ contact }) => {
     <article
       className="card box-border p-8 relative
         flex flex-col gap-4
-        border border-secondary rounded-lg
+        border rounded-lg
         min-w-[272px] max-w-[335px]
-        bg-white text-primary
-        hover:shadow-card"
+        bg-white-light text-primary-light dark:text-primary-dark
+        dark:bg-gray-surface dark:border-none
+        hover:shadow-card dark:hover:shadow-card-dark"
     >
       <a href={linkedIn} target="_blank" className="self-center">
         <img
@@ -36,11 +37,13 @@ const ContactCard: React.FC<Props> = ({ contact }) => {
 
       <h2 className="font-bold text-xl">{devName}</h2>
 
-      <ul className="text-secondary">
+      <ul className="text-secondary-light dark:text-secondary-dark">
         <li>
           <a
             href={linkedIn}
-            className="flex gap-2 items-center hover:text-secondary-accent"
+            className="flex gap-2 items-center
+              hover:text-secondary-accent-light
+              dark:hover:text-secondary-accent-dark"
             target="_blank"
           >
             <FiLinkedin />
@@ -50,7 +53,9 @@ const ContactCard: React.FC<Props> = ({ contact }) => {
         <li>
           <a
             href={github}
-            className="flex gap-2 items-center hover:text-secondary-accent"
+            className="flex gap-2 items-center
+              hover:text-secondary-accent-light
+              dark:hover:text-secondary-accent-dark"
             target="_blank"
           >
             <FiGithub />
@@ -60,7 +65,9 @@ const ContactCard: React.FC<Props> = ({ contact }) => {
         <li>
           <a
             href={`mailto:${email}`}
-            className="flex gap-2 items-center hover:text-secondary-accent"
+            className="flex gap-2 items-center
+              hover:text-secondary-accent-light
+              dark:hover:text-secondary-accent-dark"
           >
             <FiMail />
             Email
@@ -69,7 +76,9 @@ const ContactCard: React.FC<Props> = ({ contact }) => {
         <li>
           <a
             href={telegramLink}
-            className="flex gap-2 items-center hover:text-secondary-accent"
+            className="flex gap-2 items-center
+              hover:text-secondary-accent-light
+              dark:hover:text-secondary-accent-dark"
             target="_blank"
           >
             <FiSend />

diff --git a/src/pages/ContactsPage.tsx b/src/pages/ContactsPage.tsx
@@ -6,6 +6,7 @@ const ContactsPage = () => {
   return (
     <main
       className="container mx-auto flex flex-col items-center
+        text-primary-light dark:text-primary-dark
         tablet:items-start p-4 pb-6 tablet:px-6 desktop:w-[1200px]"
     >
       <BreadCrumb />