From 8ad3eb9bd5c6bfd069ab5b901f596d8e7e552f31 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Thu, 19 Dec 2024 14:55:14 +0100
Subject: [PATCH] Add dark mode tweaks to client two factor code page (#483)

---
 .../Components/ShowRecoveryCodes.razor        |  4 +-
 .../wwwroot/css/tailwind.css                  | 92 +++++++++----------
 2 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/AliasVault.Client/Main/Pages/Settings/Security/Components/ShowRecoveryCodes.razor b/src/AliasVault.Client/Main/Pages/Settings/Security/Components/ShowRecoveryCodes.razor
index 259423783..671ad063a 100644
--- a/src/AliasVault.Client/Main/Pages/Settings/Security/Components/ShowRecoveryCodes.razor
+++ b/src/AliasVault.Client/Main/Pages/Settings/Security/Components/ShowRecoveryCodes.razor
@@ -4,7 +4,7 @@
         The recovery codes below are used to access your account in case you lose access to your authenticator device.
         Make a photo or write them down and store them in a secure location. Do not share them with anyone.
     </div>
-    <div class="bg-primary-100 border-l-4 border-primary-500 text-primary-700 p-4 mb-4">
+    <div class="bg-primary-100 border-l-4 border-primary-500 text-primary-700 p-4 mb-4 dark:bg-gray-700 dark:border-primary-500 dark:text-gray-200">
         <p class="font-semibold">
             Store these recovery codes in a safe place.
         </p>
@@ -18,7 +18,7 @@
         @foreach (var recoveryCode in RecoveryCodes)
         {
             <div>
-                <code class="block p-2">@recoveryCode</code>
+                <code class="block p-2 bg-gray-100 dark:bg-gray-700 dark:text-gray-200">@recoveryCode</code>
             </div>
         }
     </div>
diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css
index 172c97e07..391dfc5f4 100644
--- a/src/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/src/AliasVault.Client/wwwroot/css/tailwind.css
@@ -638,10 +638,6 @@ video {
   bottom: 0.25rem;
 }
 
-.-top-2 {
-  top: -0.5rem;
-}
-
 .bottom-0 {
   bottom: 0px;
 }
@@ -682,6 +678,10 @@ video {
   z-index: 10;
 }
 
+.z-20 {
+  z-index: 20;
+}
+
 .z-30 {
   z-index: 30;
 }
@@ -690,10 +690,6 @@ video {
   z-index: 50;
 }
 
-.z-20 {
-  z-index: 20;
-}
-
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -1024,14 +1020,14 @@ video {
   max-width: 1536px;
 }
 
-.max-w-xl {
-  max-width: 36rem;
-}
-
 .max-w-screen-xl {
   max-width: 1280px;
 }
 
+.max-w-xl {
+  max-width: 36rem;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -1640,10 +1636,6 @@ video {
   padding-bottom: 7rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
 .pb-8 {
   padding-bottom: 2rem;
 }
@@ -1908,11 +1900,6 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
-.text-amber-500 {
-  --tw-text-opacity: 1;
-  color: rgb(245 158 11 / var(--tw-text-opacity));
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -2083,16 +2070,16 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-red-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-red-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+}
+
 .hover\:from-primary-600:hover {
   --tw-gradient-from: #d68338 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(214 131 56 / 0) var(--tw-gradient-to-position);
@@ -2138,6 +2125,11 @@ video {
   color: rgb(184 112 47 / var(--tw-text-opacity));
 }
 
+.hover\:text-red-200:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 202 202 / var(--tw-text-opacity));
+}
+
 .hover\:text-red-700:hover {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -2148,11 +2140,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.hover\:text-red-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 202 202 / var(--tw-text-opacity));
-}
-
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
@@ -2303,14 +2290,19 @@ video {
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
+.dark\:border-red-800:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 27 27 / var(--tw-border-opacity));
+}
+
 .dark\:border-yellow-500:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(234 179 8 / var(--tw-border-opacity));
 }
 
-.dark\:border-red-800:is(.dark *) {
+.dark\:border-primary-500:is(.dark *) {
   --tw-border-opacity: 1;
-  border-color: rgb(153 27 27 / var(--tw-border-opacity));
+  border-color: rgb(244 149 65 / var(--tw-border-opacity));
 }
 
 .dark\:bg-blue-800:is(.dark *) {
@@ -2378,6 +2370,11 @@ video {
   background-color: rgb(153 27 27 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-red-900:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-white:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2393,11 +2390,6 @@ video {
   background-color: rgb(113 63 18 / var(--tw-bg-opacity));
 }
 
-.dark\:bg-red-900:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
-}
-
 .dark\:bg-opacity-80:is(.dark *) {
   --tw-bg-opacity: 0.8;
 }
@@ -2652,6 +2644,14 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:absolute {
+    position: absolute;
+  }
+
+  .sm\:-top-2 {
+    top: -0.5rem;
+  }
+
   .sm\:col-span-3 {
     grid-column: span 3 / span 3;
   }
@@ -2660,6 +2660,10 @@ video {
     margin-bottom: 0px;
   }
 
+  .sm\:ml-1 {
+    margin-left: 0.25rem;
+  }
+
   .sm\:mr-4 {
     margin-right: 1rem;
   }
@@ -2790,6 +2794,10 @@ video {
     margin-bottom: 0px;
   }
 
+  .lg\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
   .lg\:mr-8 {
     margin-right: 2rem;
   }
@@ -2806,10 +2814,6 @@ video {
     margin-top: 4rem;
   }
 
-  .lg\:mb-16 {
-    margin-bottom: 4rem;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -2893,10 +2897,6 @@ video {
     padding-bottom: 3rem;
   }
 
-  .lg\:pb-16 {
-    padding-bottom: 4rem;
-  }
-
   .lg\:pb-4 {
     padding-bottom: 1rem;
   }