Fix a bunch of design inconsistencies and horrible code on server boxes

Author: DaneEveritt

resources/assets/scripts/components/dashboard/Dashboard.ts

@@ -108,7 +108,7 @@ export default Vue.component('dashboard', {
                     />
                 </div>
                 <div v-if="this.loading" class="my-4 animate fadein">
-                    <div class="text-center h-16">
+                    <div class="text-center h-16 my-20">
                         <span class="spinner spinner-xl spinner-thick blue"></span>
                     </div>
                 </div>

resources/assets/scripts/components/dashboard/ServerBox.ts

@@ -156,13 +156,13 @@ export default Vue.component('server-box', {
     },
 
     template: `
-        <div class="server-card-container">
-            <div class="server-card animated-fade-in hover:shadow-md">
-                <div class="content h-32 relative">
-                    <router-link :to="link">
+        <div class="server-card-container animated-fade-in">
+            <div>
+                <div class="server-card">
+                    <router-link :to="link" class="block">
                         <h2 class="text-xl flex flex-row items-center mb-2">
                             <div class="identifier-icon select-none" :class="{
-                            'bg-grey-500': status === '',
+                            'bg-neutral-400': status === '',
                             'bg-red-500': status === 'offline',
                             'bg-green-500': status === 'online'
                         }">
@@ -171,21 +171,24 @@ export default Vue.component('server-box', {
                             {{ server.name }}
                         </h2>
                     </router-link>
-                    <div class="text-neutral-800 font-normal text-sm">
-                        <p v-if="server.description.length" class="pb-1">{{ server.description }}</p>
-    
-                        <div class="absolute pin-b pin-l p-4 w-full">
-                            <span class="font-semibold text-indigo">{{ server.node }}</span>
-                            <span class="float-right text-neutral-600 font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
+                    <div class="flex-1 py-3">
+                        <p v-if="server.description.length" class="text-neutral-500 text-sm">{{ server.description }}</p>
+                    </div>
+                    <div class="flex flex-none pt-2">
+                        <div class="flex-1">
+                            <span class="font-semibold text-cyan-800">{{ server.node }}</span>
+                        </div>
+                        <div>
+                            <span class="text-neutral-300">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
                         </div>
                     </div>
                 </div>
                 <div class="footer p-4 text-sm">
                     <div class="inline-block pr-2">
-                        <div class="pillbox bg-green-500"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
+                        <div class="pillbox bg-neutral-700"><span class="select-none">MEM:</span> {{ memory }} Mb</div>
                     </div>
                     <div class="inline-block">
-                        <div class="pillbox bg-primary-500"><span class="select-none">CPU:</span> {{ cpu }} %</div>
+                        <div class="pillbox bg-neutral-700"><span class="select-none">CPU:</span> {{ cpu }} %</div>
                     </div>
                 </div>
             </div>

resources/assets/styles/components/miscellaneous.css

@@ -53,11 +53,7 @@ code {
  * Flex boxes for server listing on user dashboard.
  */
 .server-card-container {
-    @apply .mb-4;
-
-    @screen smx {
-        @apply .w-full;
-    }
+    @apply .mb-4 .w-full;
 
     @screen md {
         @apply .w-1/2 .pr-4;
@@ -78,27 +74,31 @@ code {
             @apply .pr-0;
         }
     }
-}
 
-.server-card {
-    @apply .block .no-underline .shadow;
-    transition: all 100ms ease-in;
+    & > div {
+        @apply .flex .flex-col .h-full;
+        transition: box-shadow 150ms ease-in;
 
-    & .identifier-icon {
-        @apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
+        &:hover {
+            @apply .shadow-md;
+        }
     }
 
-    & a, & a:visited {
-        @apply .no-underline .text-neutral-900;
-    }
+    & > div > .server-card {
+        @apply .flex .flex-1 .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
+        transition: all 100ms ease-in;
+
+        & .identifier-icon {
+            @apply .select-none .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
+        }
 
-    & > .content {
-        @apply .border .border-neutral-400 .bg-white .no-underline .block .text-black .p-4;
-        border-top: 4px solid config('colors.neutral-400') !important;
+        & a, & a:visited {
+            @apply .no-underline .text-neutral-800;
+        }
     }
 
-    & > .footer {
-        @apply .border .border-neutral-400 .border-t-0 .bg-neutral-50;
+    & > div > .footer {
+        @apply .border .border-neutral-100 .border-t-0 .bg-neutral-50 .shadow-inner;
     }
 }
 
@@ -110,11 +110,11 @@ code {
     @apply .w-full .my-4;
 
     & > input[type="text"] {
-        @apply .w-full .p-3 .rounded .border .text-neutral-800;
+        @apply .w-full .p-4 .rounded .border .border-neutral-200 .text-neutral-500;
         transition: border 150ms ease-in;
 
         &:focus {
-            @apply .border-primary-400;
+            @apply .border-primary-500;
         }
     }
 }