From fce5ca592a7b91770ca92292671125023057e024 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Wed, 21 Feb 2024 14:26:12 -0500
Subject: [PATCH] [S] Style existing cards

---
 AquaNet/src/app.sass                   |  4 +--
 AquaNet/src/components/BindCard.svelte | 41 +++++++++++++++++++++-----
 AquaNet/src/vars.sass                  |  3 ++
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/AquaNet/src/app.sass b/AquaNet/src/app.sass
index 94e7cb7e..0310aaaa 100644
--- a/AquaNet/src/app.sass
+++ b/AquaNet/src/app.sass
@@ -59,7 +59,7 @@ button
   font-size: 1em
   font-weight: 500
   font-family: inherit
-  background-color: rgba(white, 0.08)
+  background-color: $ov-lighter
   opacity: 0.9
   cursor: pointer
   transition: all 0.25s
@@ -95,7 +95,7 @@ input
   font-size: 1em
   font-weight: 500
   font-family: inherit
-  background-color: rgba(white, 0.08)
+  background-color: $ov-lighter
   transition: all 0.25s
   box-sizing: border-box
 
diff --git a/AquaNet/src/components/BindCard.svelte b/AquaNet/src/components/BindCard.svelte
index f5df912c..3cb483f4 100644
--- a/AquaNet/src/components/BindCard.svelte
+++ b/AquaNet/src/components/BindCard.svelte
@@ -67,6 +67,10 @@
     // Ghost card
     return luid
   }
+
+  function isGhostCard(luid: string) {
+    return luid.length === 18
+  }
 </script>
 
 <div class="bind-card">
@@ -74,13 +78,15 @@
   <p>Here are the cards you have linked to your account:</p>
 
   {#if me}
-    {#each me.cards as card}
-      <div>
-        <span class="register">Registered: {moment(card.registerTime).format("YYYY MMM DD")}</span>
-        <span class="last">Last used: {moment(card.accessTime).format("YYYY MMM DD")}</span>
-        <span class="id">ID: {formatLUID(card.luid)}</span>
-      </div>
-    {/each}
+    <div class="existing-cards">
+      {#each me.cards as card}
+        <div class={clz({ghost: isGhostCard(card.luid)}, 'existing-card')}>
+          <span class="register">Registered: {moment(card.registerTime).format("YYYY MMM DD")}</span>
+          <span class="last">Last used: {moment(card.accessTime).format("YYYY MMM DD")}</span>
+          <span class="id">ID: {formatLUID(card.luid)}</span>
+        </div>
+      {/each}
+    </div>
   {:else if error}
     <p>{error}</p>
   {:else}
@@ -127,6 +133,8 @@
 </div>
 
 <style lang="sass">
+  @import "../vars"
+
   .bind-card
     input
       width: 100%
@@ -136,4 +144,23 @@
 
       button
         margin-left: 1rem
+
+    .existing-cards
+      display: grid
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
+      gap: 1rem
+
+      .existing-card
+        display: flex
+        flex-direction: column
+
+        border-radius: 5px
+        padding: 12px 16px
+        background: $ov-light
+
+        .id
+          font-size: 0.8rem
+          opacity: 0.5
+
+
 </style>
\ No newline at end of file
diff --git a/AquaNet/src/vars.sass b/AquaNet/src/vars.sass
index f3aec7b0..d5ae3ec3 100644
--- a/AquaNet/src/vars.sass
+++ b/AquaNet/src/vars.sass
@@ -5,6 +5,9 @@ $c-darker: #646cff
 $c-bg: #242424
 $c-error: #ff6b6b
 
+$ov-light: rgba(white, 0.04)
+$ov-lighter: rgba(white, 0.08)
+
 $nav-height: 4rem
 $w-mobile: 560px
 $w-max: 900px