From 7d62bf9cfc2f26ed90203350db652b905a05cdbb Mon Sep 17 00:00:00 2001
From: Jack Hamer <47187316+JackHamer09@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:19:22 +0200
Subject: [PATCH] fix: sessions light theme (#28)

---
 packages/auth-server/assets/css/style.scss                 | 2 +-
 packages/auth-server/components/common/Alert.vue           | 4 ++--
 packages/auth-server/components/common/ContentLoader.vue   | 2 +-
 packages/auth-server/components/session/row/Expiry.vue     | 2 +-
 packages/auth-server/components/session/row/Row.vue        | 6 +++++-
 packages/auth-server/components/session/row/SpendLimit.vue | 2 +-
 packages/auth-server/components/zk/button.vue              | 2 +-
 packages/auth-server/pages/dashboard/sessions.vue          | 5 +++--
 8 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/auth-server/assets/css/style.scss b/packages/auth-server/assets/css/style.scss
index f787bf9..b0034ac 100644
--- a/packages/auth-server/assets/css/style.scss
+++ b/packages/auth-server/assets/css/style.scss
@@ -1,3 +1,3 @@
 body {
-  @apply min-h-[100dvh] bg-white dark:bg-black dark:text-white;
+  @apply min-h-[100dvh] bg-white text-neutral-950 dark:bg-black dark:text-white;
 }
diff --git a/packages/auth-server/components/common/Alert.vue b/packages/auth-server/components/common/Alert.vue
index 76b14f6..eef08e8 100644
--- a/packages/auth-server/components/common/Alert.vue
+++ b/packages/auth-server/components/common/Alert.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-xl bg-primary-500/20 p-2">
+  <div class="rounded-xl bg-primary-50 dark:bg-primary-500/20 p-2">
     <div class="flex">
       <div
         v-if="$slots.icon"
@@ -7,7 +7,7 @@
       >
         <slot name="icon" />
       </div>
-      <div class="ml-3 text-primary-100">
+      <div class="ml-3 text-primary-300 dark:text-primary-100">
         <slot />
       </div>
     </div>
diff --git a/packages/auth-server/components/common/ContentLoader.vue b/packages/auth-server/components/common/ContentLoader.vue
index d8af89c..3292b50 100644
--- a/packages/auth-server/components/common/ContentLoader.vue
+++ b/packages/auth-server/components/common/ContentLoader.vue
@@ -25,6 +25,6 @@ defineProps({
 
 <style lang="scss" scoped>
 .content-loader {
-  @apply rounded-xl bg-neutral-700;
+  @apply rounded-xl bg-neutral-300 dark:bg-neutral-700;
 }
 </style>
diff --git a/packages/auth-server/components/session/row/Expiry.vue b/packages/auth-server/components/session/row/Expiry.vue
index 68c2f85..e3789a7 100644
--- a/packages/auth-server/components/session/row/Expiry.vue
+++ b/packages/auth-server/components/session/row/Expiry.vue
@@ -23,7 +23,7 @@
       </div>
       <div class="session-row-line">
         <div
-          class="bg-white rounded-full h-full will-change-[width] transition-[width] duration-300"
+          class="session-row-line-inner"
           :style="{ width: `${timeLeftPercentage}%` }"
         />
       </div>
diff --git a/packages/auth-server/components/session/row/Row.vue b/packages/auth-server/components/session/row/Row.vue
index 16090f4..5cde318 100644
--- a/packages/auth-server/components/session/row/Row.vue
+++ b/packages/auth-server/components/session/row/Row.vue
@@ -148,7 +148,11 @@ fetchSessionState();
     @apply text-neutral-500 text-xs;
   }
   .session-row-line {
-    @apply bg-neutral-900 rounded-full w-full h-1 mt-1;
+    @apply bg-neutral-100 dark:bg-neutral-900 rounded-full w-full h-1 mt-1;
+
+    .session-row-line-inner {
+      @apply bg-primary-300 dark:bg-white rounded-full h-full will-change-[width,opacity] transition-[width,opacity];
+    }
   }
 }
 </style>
diff --git a/packages/auth-server/components/session/row/SpendLimit.vue b/packages/auth-server/components/session/row/SpendLimit.vue
index f57c1da..7a9f623 100644
--- a/packages/auth-server/components/session/row/SpendLimit.vue
+++ b/packages/auth-server/components/session/row/SpendLimit.vue
@@ -38,7 +38,7 @@
       :class="tokensLoading ? 'animate-pulse' : ''"
     >
       <div
-        class="bg-white rounded-full h-full will-change-[width,opacity] transition-[width,opacity]"
+        class="session-row-line-inner"
         :class="{ 'opacity-30': tokensLoading || !totalSpentUsd || isInactive }"
         :style="{ width: `${usedPercentage}%` }"
       />
diff --git a/packages/auth-server/components/zk/button.vue b/packages/auth-server/components/zk/button.vue
index bf7e9a9..b226c0b 100644
--- a/packages/auth-server/components/zk/button.vue
+++ b/packages/auth-server/components/zk/button.vue
@@ -66,7 +66,7 @@ const types = {
   secondary:
     "bg-neutral-200 text-neutral-700 hover:bg-neutral-300 hover:text-neutral-800 focus:bg-neutral-300 active:bg-neutral-400 active:text-neutral-900 disabled:bg-neutral-100 disabled:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200 dark:focus:bg-neutral-800 dark:active:bg-neutral-900 dark:active:text-neutral-400 dark:disabled:bg-neutral-900 dark:disabled:text-neutral-500",
   danger:
-    "bg-error-100 text-error-950 focus:bg-error-200 hover:bg-error-200  active:bg-error-300 disabled:bg-transparent dark:bg-error-400/20 dark:text-error-300 dark:hover:bg-error-400/40 dark:active:bg-error-400/20 disabled:bg-error-100/70 disabled:text-error-800/70 disabled:dark:hover:bg-error-100/70",
+    "bg-error-100 text-error-700 focus:bg-error-200 hover:bg-error-200  active:bg-error-300 disabled:bg-transparent dark:bg-error-400/20 dark:text-error-300 dark:hover:bg-error-400/40 dark:active:bg-error-400/20 disabled:bg-error-100/70 disabled:text-error-800/70 disabled:dark:hover:bg-error-100/70",
   ghost:
     "border-neutral-100 bg-inherit text-neutral-800 focus:bg-neutral-100 hover:bg-neutral-100 active:bg-neutral-300 active:text-neutral-950/70 disabled:bg-neutral-100 disabled:text-neutral-600 dark:border-neutral-700 dark:bg-transparent dark:text-neutral-100 dark:hover:bg-neutral-800 dark:hover:text-neutral-200 dark:focus:bg-neutral-800 dark:active:bg-neutral-900 dark:active:text-neutral-300 disabled:dark:bg-neutral-100 disabled:dark:text-neutral-600",
   tertiary:
diff --git a/packages/auth-server/pages/dashboard/sessions.vue b/packages/auth-server/pages/dashboard/sessions.vue
index 1a095bd..cc66e14 100644
--- a/packages/auth-server/pages/dashboard/sessions.vue
+++ b/packages/auth-server/pages/dashboard/sessions.vue
@@ -23,6 +23,7 @@
     </layout-header>
 
     <CommonAlert
+      v-if="sessions?.length"
       class="mb-4"
     >
       <template #icon>
@@ -41,7 +42,7 @@
     >No sessions yet...</span>
     <div
       v-else
-      class="bg-neutral-950 border border-neutral-900 rounded-3xl divide-y divide-neutral-900"
+      class="border rounded-3xl divide-y bg-white border-neutral-200 divide-neutral-200 dark:bg-neutral-950 dark:border-neutral-900 dark:divide-neutral-900"
     >
       <template v-if="!sessions?.length && sessionsInProgress">
         <SessionRowLoader
@@ -64,7 +65,7 @@
     </div>
 
     <CommonAlert
-      v-if="defaultChain.id === zksyncInMemoryNode.id"
+      v-if="defaultChain.id === zksyncInMemoryNode.id && sessions?.length"
       class="mt-4"
     >
       <template #icon>