From 17c29efdebf06e71f34b31a50c633ec8900116dc Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 24 Sep 2022 18:36:18 -0800
Subject: [PATCH] (WIP) unify card styles

---
 frontend/components/Base/Card.vue |  20 ++++++
 frontend/pages/home.vue           | 108 ++++++++++++++----------------
 2 files changed, 69 insertions(+), 59 deletions(-)
 create mode 100644 frontend/components/Base/Card.vue

diff --git a/frontend/components/Base/Card.vue b/frontend/components/Base/Card.vue
new file mode 100644
index 0000000..4301987
--- /dev/null
+++ b/frontend/components/Base/Card.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="card bg-base-100 shadow-xl sm:rounded-lg">
+    <div class="px-4 py-5 sm:px-6">
+      <h3 class="text-lg font-medium leading-6">
+        <slot name="title"></slot>
+      </h3>
+      <p v-if="$slots.subtitle" class="mt-1 max-w-2xl text-sm text-gray-500">
+        <slot name="subtitle"></slot>
+      </p>
+      <template v-if="$slots['title-actions']">
+        <slot name="title-actions"></slot>
+      </template>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/frontend/pages/home.vue b/frontend/pages/home.vue
index b173709..fc4d3f7 100644
--- a/frontend/pages/home.vue
+++ b/frontend/pages/home.vue
@@ -101,7 +101,7 @@
 </script>
 
 <template>
-  <BaseContainer class="space-y-16 pb-16">
+  <div>
     <BaseModal v-model="importDialog">
       <template #title> Import CSV File </template>
       <p>
@@ -112,6 +112,7 @@
       <form @submit.prevent="submitCsvFile">
         <div class="flex flex-col gap-2 py-6">
           <input ref="importRef" type="file" class="hidden" accept=".csv" @change="setFile" />
+
           <BaseButton type="button" @click="uploadCsv">
             <Icon class="h-5 w-5 mr-2" name="mdi-upload" />
             Upload
@@ -126,69 +127,58 @@
         </div>
       </form>
     </BaseModal>
-
-    <section aria-labelledby="profile-overview-title" class="mt-8">
-      <div class="overflow-hidden rounded-lg bg-white shadow">
-        <h2 id="profile-overview-title" class="sr-only">Profile Overview</h2>
-        <div class="bg-white p-6">
-          <div class="sm:flex sm:items-center sm:justify-between">
-            <div class="sm:flex sm:space-x-5">
-              <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
-                <p class="text-sm font-medium text-gray-600">Welcome back,</p>
-                <p class="text-xl font-bold text-gray-900 sm:text-2xl">{{ auth.self.name }}</p>
-                <p class="text-sm font-medium text-gray-600">{{ auth.self.isSuperuser ? "Admin" : "User" }}</p>
+    <BaseContainer class="flex flex-col gap-16 pb-16">
+      <section>
+        <BaseCard>
+          <template #title> Welcome Back, {{ auth.self ? auth.self.name : "Username" }} </template>
+          <template #subtitle> {{ auth.self.isSuperuser ? "Admin" : "User" }} </template>
+          <template #title-actions>
+            <div class="flex justify-end gap-2">
+              <div class="tooltip" data-tip="Import CSV File">
+                <button class="btn btn-primary btn-sm" @click="openDialog">
+                  <Icon name="mdi-database" class="mr-2"></Icon>
+                  Import
+                </button>
               </div>
+              <BaseButton type="button" size="sm">
+                <Icon class="h-5 w-5 mr-2" name="mdi-person" />
+                Profile
+              </BaseButton>
             </div>
-            <div class="mt-5 flex justify-center sm:mt-0">
-              <a
-                href="#"
-                class="flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
-                >View profile</a
-              >
+          </template>
+
+          <div
+            class="grid grid-cols-1 divide-y divide-gray-300 border-t border-gray-300 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
+          >
+            <div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
+              <span class="text-gray-900">{{ stat.value.value }}</span>
+              {{ " " }}
+              <span class="text-gray-600">{{ stat.label }}</span>
             </div>
           </div>
+        </BaseCard>
+      </section>
+
+      <section>
+        <BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
+        <div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
+          <LocationCard v-for="location in locations" :key="location.id" :location="location" />
         </div>
-        <div
-          class="grid grid-cols-1 divide-y divide-gray-200 border-t border-gray-200 bg-gray-50 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
-        >
-          <div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
-            <span class="text-gray-900">{{ stat.value.value }}</span>
-            {{ " " }}
-            <span class="text-gray-600">{{ stat.label }}</span>
-          </div>
+      </section>
+
+      <section>
+        <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <ItemCard v-for="item in items" :key="item.id" :item="item" />
         </div>
-      </div>
-    </section>
+      </section>
 
-    <section>
-      <BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
-      <div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
-        <LocationCard v-for="location in locations" :key="location.id" :location="location" />
-      </div>
-    </section>
-
-    <section>
-      <BaseSectionHeader class="mb-5">
-        Items
-        <template #description>
-          <div class="tooltip" data-tip="Import CSV File">
-            <button class="btn btn-primary btn-sm" @click="openDialog">
-              <Icon name="mdi-database" class="mr-2"></Icon>
-              Import
-            </button>
-          </div>
-        </template>
-      </BaseSectionHeader>
-      <div class="grid sm:grid-cols-2 gap-4">
-        <ItemCard v-for="item in items" :key="item.id" :item="item" />
-      </div>
-    </section>
-
-    <section>
-      <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
-      <div class="flex gap-2 flex-wrap">
-        <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
-      </div>
-    </section>
-  </BaseContainer>
+      <section>
+        <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
+        <div class="flex gap-2 flex-wrap">
+          <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
+        </div>
+      </section>
+    </BaseContainer>
+  </div>
 </template>