From dad736b0d9b75b508d1d2cec04105973e6a342a3 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 20 Feb 2023 16:17:37 +1000
Subject: [PATCH] cleanup

---
 resources/js/views/dashboard/Dashboard.vue | 174 +++++++++++----------
 1 file changed, 90 insertions(+), 84 deletions(-)

diff --git a/resources/js/views/dashboard/Dashboard.vue b/resources/js/views/dashboard/Dashboard.vue
index c914898..08b3875 100644
--- a/resources/js/views/dashboard/Dashboard.vue
+++ b/resources/js/views/dashboard/Dashboard.vue
@@ -1,54 +1,56 @@
 <template>
-    <SMPage class="dashboard mx-auto">
-        <h1>Dashboard</h1>
-        <div class="boxes">
-            <router-link to="/dashboard/details" class="box">
-                <ion-icon name="location-outline" />
-                <h2>My Details</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/posts')"
-                to="/dashboard/posts"
-                class="box">
-                <ion-icon name="newspaper-outline" />
-                <h2>Posts</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/users')"
-                :to="{ name: 'user-list' }"
-                class="box">
-                <ion-icon name="people-outline" />
-                <h2>Users</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/events')"
-                to="/dashboard/events"
-                class="box">
-                <ion-icon name="calendar-outline" />
-                <h2>Events</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/courses')"
-                to="/dashboard/courses"
-                class="box">
-                <ion-icon name="school-outline" />
-                <h2>{{ courseBoxTitle }}</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('admin/media')"
-                to="/dashboard/media"
-                class="box">
-                <ion-icon name="film-outline" />
-                <h2>Media</h2>
-            </router-link>
-            <router-link
-                v-if="userStore.permissions.includes('logs/discord')"
-                :to="{ name: 'discord-bot-logs' }"
-                class="box">
-                <ion-icon name="logo-discord" />
-                <h2>Discord Bot Logs</h2>
-            </router-link>
-        </div>
+    <SMPage class="sm-dashboard">
+        <template #container>
+            <h1>Dashboard</h1>
+            <div class="boxes">
+                <router-link to="/dashboard/details" class="box">
+                    <ion-icon name="location-outline" />
+                    <h2>My Details</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/posts')"
+                    to="/dashboard/posts"
+                    class="box">
+                    <ion-icon name="newspaper-outline" />
+                    <h2>Posts</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/users')"
+                    :to="{ name: 'user-list' }"
+                    class="box">
+                    <ion-icon name="people-outline" />
+                    <h2>Users</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/events')"
+                    to="/dashboard/events"
+                    class="box">
+                    <ion-icon name="calendar-outline" />
+                    <h2>Events</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/courses')"
+                    to="/dashboard/courses"
+                    class="box">
+                    <ion-icon name="school-outline" />
+                    <h2>{{ courseBoxTitle }}</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('admin/media')"
+                    to="/dashboard/media"
+                    class="box">
+                    <ion-icon name="film-outline" />
+                    <h2>Media</h2>
+                </router-link>
+                <router-link
+                    v-if="userStore.permissions.includes('logs/discord')"
+                    :to="{ name: 'discord-bot-logs' }"
+                    class="box">
+                    <ion-icon name="logo-discord" />
+                    <h2>Discord Bot Logs</h2>
+                </router-link>
+            </div>
+        </template>
     </SMPage>
 </template>
 
@@ -69,45 +71,49 @@ const courseBoxTitle = computed(() => {
 </script>
 
 <style lang="scss">
-.dashboard {
-    max-width: 1000px;
-}
+.sm-dashboard {
+    background-color: #f8f8f8;
 
-.boxes {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: -#{map-get($spacer, 3)};
-
-    .box {
+    .boxes {
         display: flex;
-        flex-basis: map-get($spacer, 5) * 4.5;
-        flex-direction: column;
-        background-color: #eee;
-        border: 3px solid #eee;
-        border-radius: 12px;
-        padding: map-get($spacer, 5) map-get($spacer, 4);
-        margin: map-get($spacer, 3);
-        font-size: map-get($spacer, 3);
-        color: $font-color;
-        transition: background-color 0.3s, border 0.3s;
-        align-items: center;
-        text-align: center;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: -#{map-get($spacer, 3)};
 
-        h2 {
-            margin-top: map-get($spacer, 2);
-            margin-bottom: 0;
-        }
-
-        ion-icon {
-            font-size: map-get($spacer, 5);
-        }
-
-        &:hover {
-            border: 3px solid $font-color;
-            text-decoration: none;
+        .box {
+            display: flex;
+            flex-basis: map-get($spacer, 5) * 4.5;
+            flex-direction: column;
+            border: 1px solid $border-color;
+            border-radius: 12px;
+            border: 2px solid $font-color;
             background-color: #fff;
+            padding: map-get($spacer, 5) map-get($spacer, 4);
+            margin: map-get($spacer, 3);
+            font-size: map-get($spacer, 3);
             color: $font-color;
+            color: $font-color !important;
+            margin-bottom: map-get($spacer, 5);
+            transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
+            align-items: center;
+            text-align: center;
+
+            h2 {
+                margin-top: map-get($spacer, 2);
+                margin-bottom: 0;
+            }
+
+            ion-icon {
+                font-size: map-get($spacer, 5);
+            }
+
+            &:hover {
+                text-decoration: none;
+                // background-color: $secondary-color;
+                color: $font-color;
+                box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
+                transform: scale(1.01);
+            }
         }
     }
 }