style: Change footer colors

components/Footer/FacebookIconLink.tsx

@@ -1,10 +1,10 @@
 "use client" 
+
 import React from 'react';
-import { useTheme } from 'next-themes';
+import { useStrokeColor } from './useStrokeColor'
 
 const FacebookIconLink = () => {
-  const { theme } = useTheme();
-  const strokeColor = theme === 'dark' ? '#dddfe7' : '#020616';
+  const strokeColor = useStrokeColor();
 
   return (
     <a

components/Footer/GithubIconLink.tsx

@@ -1,27 +1,34 @@
+"use client" 
+
 import React from 'react';
+import { useStrokeColor } from './useStrokeColor'
+
 
 interface GithubIconLinkProps {
     repoUrl: string;
 }
 
-const GithubIconLink: React.FC<GithubIconLinkProps> = ({ repoUrl }) => (
-    <a
+const GithubIconLink: React.FC<GithubIconLinkProps> = ({ repoUrl }) => {
+  const strokeColor = useStrokeColor();
+    return (
+
+        <a
         href={repoUrl}
         target="_blank"
         rel="noopener noreferrer"
         aria-label="תבקרו אותנו בגיטהאב"
-    >
+        >
         <svg
             width="40"
             height="40"
             viewBox="0 0 52 52"
             xmlns="http://www.w3.org/2000/svg"
             className="text-transparent transition duration-300 cursor-pointer fill-current hover:text-blue-700 transform translate-y-3"
-        >
+            >
             <g id="GitHub-Icon">
                 <path
                     d="M26,2C14.9543,2,6,10.9543,6,22C6,31.3894,11.7984,39.1736,20.3333,41.8C21.3333,41.9333,21.6667,41.4667,21.6667,41.0667C21.6667,40.8,21.6667,39.6,21.6667,38.0667C14.5333,39.4667,13.4667,36.1333,13.4667,36.1333C12.6,34.0667,11.4,33.6667,11.4,33.6667C10,32.8667,11.8667,32.8667,11.8667,32.8667C13.6667,32.9333,14.6667,34.6,14.6667,34.6C16.4,37.8,19.4667,37.0667,20.6667,36.6C20.8667,35.6,21.3333,34.8667,21.8,34.4667C16.3333,33.8,11.4667,31.3333,11.4667,22.8667C11.4667,20.6667,12.1333,19,13.3333,17.6667C13.1333,17.0667,12.5333,14.6,13.8667,11.4667C13.8667,11.4667,15.4667,11,21.6667,14.8667C23.6667,14.2667,25.8667,14,28,14C30.1333,14,32.3333,14.2667,34.3333,14.8667C40.5333,11,42.1333,11.4667,42.1333,11.4667C43.4667,14.6,42.8667,17.0667,42.6667,17.6667C43.8667,19,44.5333,20.6667,44.5333,22.8667C44.5333,31.3333,39.6667,33.8,34.2,34.4667C34.8,34.9333,35.3333,35.8,35.3333,37.0667C35.3333,39.1333,35.3333,41,35.3333,41.0667C35.3333,41.4667,35.6667,41.9333,36.6667,41.8C45.2016,39.1736,51,31.3894,51,22C51,10.9543,42.0457,2,31,2H26Z"
-                    stroke="#020616"
+                    stroke={strokeColor}
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
@@ -30,5 +37,6 @@ const GithubIconLink: React.FC<GithubIconLinkProps> = ({ repoUrl }) => (
         </svg>
     </a>
 );
+}
 
 export default GithubIconLink;

components/Footer/LinkedinIconLink.tsx

@@ -1,6 +1,11 @@
+"use client" 
+
 import React from 'react';
+import { useStrokeColor } from './useStrokeColor'
 
 const LinkedinIconLink = () => {
+  const strokeColor = useStrokeColor();
+
   return (
     <a
       href="https://www.linkedin.com/"
@@ -19,23 +24,23 @@ const LinkedinIconLink = () => {
             <path
               id="Vector"
               d="M31.6666 21C33.7884 21 35.8232 21.8429 37.3235 23.3431C38.8238 24.8434 39.6666 26.8783 39.6666 29V38.3333H34.3333V29C34.3333 28.2928 34.0523 27.6145 33.5522 27.1144C33.0521 26.6143 32.3739 26.3333 31.6666 26.3333C30.9594 26.3333 30.2811 26.6143 29.781 27.1144C29.2809 27.6145 29 28.2928 29 29V38.3333H23.6666V29C23.6666 26.8783 24.5095 24.8434 26.0098 23.3431C27.5101 21.8429 29.5449 21 31.6666 21Z"
-          stroke="#020616"
+              stroke={strokeColor}
               strokeWidth="2"
               strokeLinecap="round"
               strokeLinejoin="round"
             />
             <path
               id="Vector_2"
               d="M18.3333 22.3333H13V38.3333H18.3333V22.3333Z"
-          stroke="#020616"
+              stroke={strokeColor}
               strokeWidth="2"
               strokeLinecap="round"
               strokeLinejoin="round"
             />
             <path
               id="Vector_3"
               d="M15.6667 18.3333C17.1394 18.3333 18.3333 17.1394 18.3333 15.6667C18.3333 14.1939 17.1394 13 15.6667 13C14.1939 13 13 14.1939 13 15.6667C13 17.1394 14.1939 18.3333 15.6667 18.3333Z"
-          stroke="#020616"
+              stroke={strokeColor}
               strokeWidth="2"
               strokeLinecap="round"
               strokeLinejoin="round"

components/Footer/TwitterIconLink.tsx

@@ -1,6 +1,11 @@
+"use client" 
+
 import React from 'react';
+import { useStrokeColor } from './useStrokeColor'
 
 const TwitterIconLink = () => {
+  const strokeColor = useStrokeColor();
+
   return (
     <a
       href="https://twitter.com/"
@@ -18,7 +23,7 @@ const TwitterIconLink = () => {
           <path
             id="Vector"
             d="M40.3333 17.0134C39.0565 17.914 37.6428 18.6029 36.1467 19.0534C35.3437 18.1301 34.2764 17.4757 33.0894 17.1786C31.9023 16.8816 30.6527 16.9563 29.5094 17.3927C28.3662 17.829 27.3846 18.6059 26.6973 19.6184C26.01 20.6308 25.6503 21.8299 25.6667 23.0534V24.3867C23.3235 24.4475 21.0017 23.9278 18.908 22.874C16.8143 21.8202 15.0138 20.2649 13.6667 18.3467C13.6667 18.3467 8.33333 30.3467 20.3333 35.6801C17.5874 37.544 14.3162 38.4786 11 38.3467C23 45.0134 37.6667 38.3467 37.6667 23.0134C37.6654 22.642 37.6297 22.2715 37.56 21.9067C38.9208 20.5647 39.8811 18.8704 40.3333 17.0134Z"
-            stroke="#020616"
+            stroke={strokeColor}
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"

components/Footer/useStrokeColor.ts

@@ -0,0 +1,7 @@
+import { useTheme } from 'next-themes';
+
+export const useStrokeColor = () => {
+  const { theme } = useTheme();
+  const strokeColor = theme === 'dark' ? '#dddfe7' : '#020616';
+  return strokeColor;
+};