From 861316b21c521f5cc6c30cb0616b055c85650750 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ahmet=20=C3=87etinkaya?= <ahmetcetinkaya@tutamail.com>
Date: Tue, 31 Dec 2024 21:44:17 +0300
Subject: [PATCH] feat(presentation): refactor dark mode styles and improve
 footer component structure

---
 .../pages/_components/posts/post-page.astro   |  38 +++----
 .../layouts/components/FooterSection.astro    | 105 +++++++-----------
 2 files changed, 61 insertions(+), 82 deletions(-)

diff --git a/src/presentation/src/pages/_components/posts/post-page.astro b/src/presentation/src/pages/_components/posts/post-page.astro
index 413c834..e1e6d72 100644
--- a/src/presentation/src/pages/_components/posts/post-page.astro
+++ b/src/presentation/src/pages/_components/posts/post-page.astro
@@ -209,62 +209,62 @@ const structuredData = {
       }
 
       /* Dark mode styles */
-      :global(.dark) .ac-content {
+      html.dark .ac-content {
         color: #e5e5e5;
       }
 
-      :global(.dark) .ac-content h1,
-      :global(.dark) .ac-content h2,
-      :global(.dark) .ac-content h3,
-      :global(.dark) .ac-content h4,
-      :global(.dark) .ac-content h5,
-      :global(.dark) .ac-content h6 {
+      html.dark .ac-content h1,
+      html.dark .ac-content h2,
+      html.dark .ac-content h3,
+      html.dark .ac-content h4,
+      html.dark .ac-content h5,
+      html.dark .ac-content h6 {
         color: #f3f4f6;
       }
 
-      :global(.dark) .ac-content p,
-      :global(.dark) .ac-content ul,
-      :global(.dark) .ac-content ol {
+      html.dark .ac-content p,
+      html.dark .ac-content ul,
+      html.dark .ac-content ol {
         color: #d1d5db;
       }
 
-      :global(.dark) .ac-content a {
+      html.dark .ac-content a {
         color: #60a5fa;
       }
 
-      :global(.dark) .ac-content a:hover {
+      html.dark .ac-content a:hover {
         color: #93c5fd;
       }
 
-      :global(.dark) .ac-content blockquote {
+      html.dark .ac-content blockquote {
         border-left-color: #4b5563;
         background-color: #1f2937;
         color: #e5e5e5;
       }
 
-      :global(.dark) .ac-content table {
+      html.dark .ac-content table {
         border-color: #374151;
       }
 
-      :global(.dark) .ac-content th {
+      html.dark .ac-content th {
         background-color: #374151;
         color: #f3f4f6;
         border-color: #4b5563;
       }
 
-      :global(.dark) .ac-content td {
+      html.dark .ac-content td {
         border-color: #4b5563;
       }
 
-      :global(.dark) .ac-content tr:nth-child(even) {
+      html.dark .ac-content tr:nth-child(even) {
         background-color: #1f2937;
       }
 
-      :global(.dark) .ac-content tr:hover {
+      html.dark .ac-content tr:hover {
         background-color: #374151;
       }
 
-      :global(.dark) .ac-content img {
+      html.dark .ac-content img {
         opacity: 0.9;
       }
     </style>
diff --git a/src/presentation/src/shared/layouts/components/FooterSection.astro b/src/presentation/src/shared/layouts/components/FooterSection.astro
index 46df409..faaa281 100644
--- a/src/presentation/src/shared/layouts/components/FooterSection.astro
+++ b/src/presentation/src/shared/layouts/components/FooterSection.astro
@@ -47,68 +47,47 @@ const footerSections = [
 <footer class="relative w-full overflow-hidden shadow-lg">
   <!-- Horizontal Pipe -->
   <div class="absolute bottom-12 right-0 flex h-6 w-full items-center">
-    <div class="h-4 w-full bg-gradient-to-b from-gray-400 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600">
-    </div>
+    <div class="ac-pipe"></div>
   </div>
 
   <div class="relative mx-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-16 lg:pt-20 2xl:max-w-screen-2xl">
     <!-- Radiator top border -->
-    <div
-      class="h-4 w-full rounded-t-lg bg-gradient-to-r from-gray-500 to-gray-400 shadow-inner dark:from-gray-700 dark:to-gray-800"
-    >
-    </div>
+    <div class="ac-radiator-border rounded-t-lg"></div>
 
     <div
       class="relative grid grid-cols-1 gap-x-12 gap-y-8 bg-gradient-to-b from-neutral-50/90 to-neutral-50/90 px-2 py-8 dark:from-neutral-900/90 dark:to-neutral-900/90 md:grid-cols-3 lg:px-8"
     >
       <!-- Top Left Valve -->
       <div class="absolute -left-6 -top-3 z-20 h-full">
-        <div
-          class="relative size-6 rounded-full border-2 border-gray-400 bg-gradient-to-br from-gray-400 to-gray-300 shadow-lg dark:border-gray-700 dark:from-gray-700 dark:to-gray-600"
-        >
+        <div class="ac-valve">
           <div class="absolute inset-0 flex items-center justify-center">
-            <div class="size-2 -rotate-45 transform rounded-full bg-neutral-600 dark:bg-neutral-500"></div>
+            <div class="ac-valve-center"></div>
           </div>
         </div>
 
         <!-- Top Left Valve Heat Pipe -->
-        <div
-          class="-mt-2 ms-[0.4rem] h-full w-3 bg-gradient-to-b from-gray-400 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600"
-        >
-        </div>
+        <div class="ac-vertical-pipe"></div>
+
         <!-- Horizontal Pipe -->
         <div class="absolute -bottom-5 right-0 flex h-6 w-full items-center">
-          <div
-            class="h-4 w-full bg-gradient-to-b from-gray-400 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600"
-          >
-          </div>
+          <div class="ac-pipe"></div>
         </div>
       </div>
 
       <!-- Bottom Right Valve -->
       <div class="absolute -bottom-2 -right-6 z-20">
-        <div
-          class="size-6 rounded-full border-2 border-gray-400 bg-gradient-to-br from-gray-400 to-gray-300 shadow-lg dark:border-gray-700 dark:from-gray-700 dark:to-gray-600"
-        >
+        <div class="ac-valve">
           <div class="absolute inset-0 flex items-center justify-center">
-            <div class="size-2 -rotate-45 transform rounded-full bg-neutral-600 dark:bg-neutral-500"></div>
+            <div class="ac-valve-center"></div>
           </div>
         </div>
       </div>
       <!-- Vertical radiator fins effect -->
       <div class="pointer-events-none absolute inset-0 flex hidden justify-between md:flex">
-        {
-          [...Array(60)].map(() => (
-            <div class="h-full w-px bg-gradient-to-b from-gray-300/50 to-gray-300/50 dark:from-gray-800/50 dark:to-gray-900/50" />
-          ))
-        }
+        {[...Array(60)].map(() => <div class="ac-vertical-fin" />)}
       </div>
       <div class="pointer-events-none absolute inset-0 flex justify-between md:hidden">
-        {
-          [...Array(20)].map(() => (
-            <div class="h-full w-px bg-gradient-to-b from-gray-300/50 to-gray-300/50 dark:from-gray-800/50 dark:to-gray-900/50" />
-          ))
-        }
+        {[...Array(20)].map(() => <div class="ac-vertical-fin" />)}
       </div>
 
       <!-- Logo Column -->
@@ -131,10 +110,7 @@ const footerSections = [
                 <ul class="mt-3 grid space-y-3">
                   {section.links.map((link) => (
                     <li>
-                      <a
-                        href={link.url}
-                        class="inline-flex gap-x-2 rounded-lg text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-900 focus-visible:ring dark:text-neutral-400 dark:hover:text-neutral-200"
-                      >
+                      <a href={link.url} class="ac-footer-link">
                         {link.name}
                       </a>
                     </li>
@@ -164,10 +140,7 @@ const footerSections = [
               ...Object.entries(CompanyData.socials),
             ].map(([name, url]) => (
               <FooterSocialLink url={url}>
-                <Icon
-                  name={name}
-                  class="size-6 text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200"
-                />
+                <Icon name={name} class="ac-social-icon" />
               </FooterSocialLink>
             ))
           }
@@ -176,10 +149,7 @@ const footerSections = [
     </div>
 
     <!-- Radiator bottom border -->
-    <div
-      class="h-4 w-full rounded-b-lg bg-gradient-to-r from-gray-500 to-gray-400 shadow-inner dark:from-gray-700 dark:to-gray-800"
-    >
-    </div>
+    <div class="ac-radiator-border rounded-b-lg"></div>
   </div>
 
   <div class="col-span-full lg:col-span-1">
@@ -192,26 +162,35 @@ const footerSections = [
 </footer>
 
 <style>
-  /* Pipe shine effect */
-  .absolute.right-0.bottom-8 .w-full::before {
-    content: "";
-    position: absolute;
-    top: 2px;
-    left: 0;
-    width: 100%;
-    height: 1px;
-    background: rgba(255, 255, 255, 0.2);
+  .ac-radiator-border {
+    @apply h-4 w-full bg-gradient-to-r from-gray-300 to-gray-300/50 shadow-inner dark:from-gray-700 dark:to-gray-800;
+  }
+
+  .ac-valve {
+    @apply relative size-6 rounded-full border-2 border-gray-400 bg-gradient-to-br from-gray-200 to-gray-300 shadow-lg dark:border-gray-700 dark:from-gray-700 dark:to-gray-600;
+  }
+
+  .ac-valve-center {
+    @apply absolute left-1/2 top-1/2 size-1.5 -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-full bg-neutral-600 dark:bg-neutral-500;
+  }
+
+  .ac-pipe {
+    @apply h-4 w-full bg-gradient-to-b from-gray-200 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600;
+  }
+
+  .ac-vertical-fin {
+    @apply h-full w-px bg-gradient-to-b from-gray-300/50 to-gray-200/50 dark:from-gray-800/50 dark:to-gray-900/50;
+  }
+
+  .ac-footer-link {
+    @apply inline-flex gap-x-2 rounded-lg text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-900 focus-visible:ring dark:text-neutral-400 dark:hover:text-neutral-200;
+  }
+
+  .ac-social-icon {
+    @apply size-6 text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200;
   }
 
-  /* Valve shine effect */
-  .w-10.h-10.rounded-full::before {
-    content: "";
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    width: 8px;
-    height: 8px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
+  .ac-vertical-pipe {
+    @apply -mt-2 ms-[0.4rem] h-full w-3 bg-gradient-to-b from-gray-200 to-gray-300 shadow-inner dark:from-gray-700 dark:to-gray-600;
   }
 </style>