Merge pull request #1429 from nishant0708/dark-icons

🐞 [BUG] - Dark mode icon visiblity issue And Hover Issue #1395
jfmartinz · Jun 26, 2024 · 06dc86c · 06dc86c
2 parents 2a8573a + 5239fb5
commit 06dc86c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/new-website/index.html b/new-website/index.html
@@ -84,8 +84,7 @@
     <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
         href="#faq">FAQ</a
                 class="flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-center md:flex-row">
-
-                <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+                <a class="social-icon px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
                     href="https://discord.com/channels/1243120700626309131/1243121246217175081" target="_blank"
                     aria-label="Discord">
                     <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -94,7 +93,7 @@
                     </svg>
                 </a>
 
-                <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+                <a class="social-icon px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
                     href="https://github.com/jfmartinz/ResourceHub" target="_blank" aria-label="Github">
                     <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                         <path fill="black"
@@ -115,7 +114,12 @@
         display: inline-block;
         transition: transform 0.3s ease;
     }
-
+    .dark .social-icon:hover svg path{
+        fill: black;
+    }
+     .dark .social-icon svg path{
+       fill: white;
+     }
     .icon-link:hover {
         transform: scale(1.2);
     }

diff --git a/new-website/style.css b/new-website/style.css
@@ -1126,7 +1126,9 @@ body{
   color: white;
   background-color: black;
 }
-
+.dark .footer-icons a svg path{
+  fill: white;
+}
 .dark .footer-description,
 .dark .footer-links a,
 .dark .footer-links a::before{