Finish UI stuff for today

Author: DaneEveritt

resources/assets/scripts/components/server/subpages/Console.ts

@@ -159,7 +159,7 @@ export default Vue.component('server-console', {
     },
 
     template: `
-        <div class="content-box animate fadein">
+        <div class="animate fadein shadow-md">
             <div class="text-xs font-mono">
                 <div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
                     <div class="mb-2 text-grey-light" ref="terminal" v-if="connected"></div>

resources/assets/scripts/components/server/subpages/FileManager.ts

@@ -115,7 +115,7 @@ export default Vue.component('file-manager', {
     },
 
     template: `
-        <div class="content-box animate fadein">
+        <div class="animate fadein">
             <div class="filemanager-breadcrumbs">
                 /<span class="px-1">home</span><!--
                 -->/<router-link :to="{ name: 'server-files' }" class="px-1">container</router-link><!--
@@ -128,24 +128,24 @@ export default Vue.component('file-manager', {
                     </span>
                 </span>
             </div>
-            <div v-if="loading">
-                <div class="spinner spinner-xl blue"></div>
-            </div>
-            <div v-else-if="!loading && errorMessage">
-                <div class="alert error" v-text="errorMessage"></div>
-            </div>
-            <div class="filemanager" v-else>
-                <div class="header">
-                    <div class="flex-none w-8"></div>
-                    <div class="flex-1">Name</div>
-                    <div class="flex-1 text-right">Size</div>
-                    <div class="flex-1 text-right">Modified</div>
-                    <div class="flex-none w-1/6">Actions</div>
+            <div class="content-box">
+                <div v-if="loading">
+                    <div class="spinner spinner-xl blue"></div>
                 </div>
-                <div v-if="!directories.length && !files.length">
+                <div v-else-if="!loading && errorMessage">
+                    <div class="alert error" v-text="errorMessage"></div>
+                </div>
+                <div v-else-if="!directories.length && !files.length">
                     <p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
                 </div>
-                <div v-else>
+                <div class="filemanager" v-else>
+                    <div class="header">
+                        <div class="flex-none w-8"></div>
+                        <div class="flex-1">Name</div>
+                        <div class="flex-1 text-right">Size</div>
+                        <div class="flex-1 text-right">Modified</div>
+                        <div class="flex-none w-1/6">Actions</div>
+                    </div>
                     <div v-for="directory in directories">
                         <folder-row :directory="directory"/>
                     </div>

resources/assets/styles/components/filemanager.css

@@ -15,11 +15,11 @@
     }
 
     &.clickable {
-      @apply .no-underline;
+      @apply .no-underline .cursor-pointer;
     }
 
     &.active-selection, &.clickable:hover {
-      @apply .bg-grey-lightest .border-blue-light .text-blue-dark;
+      @apply .bg-grey-lightest .text-grey-darkest .shadow;
     }
 
     & > .icon {
@@ -65,13 +65,14 @@
 }
 
 .filemanager-breadcrumbs {
-  @apply .px-4 .py-3 .mb-6 .rounded .border .bg-grey-lightest .text-grey-darker;
+  @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-grey-darker .shadow-md;
 
   & a {
-    @apply .no-underline .text-blue-light;
+    @apply .no-underline .text-blue;
+    transition: color 50ms ease-in;
 
     &:hover {
-      @apply .text-blue-dark;
+      @apply .text-blue-darker;
     }
   }
 }

resources/assets/styles/components/modal.css

@@ -4,7 +4,7 @@
   transition: opacity 250ms ease;
 
   & > .modal-container {
-    @apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex;
+    @apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded;
     transition: all 250ms ease;
     margin-top: 15%;
 

resources/assets/styles/components/navigation.css

@@ -1,5 +1,5 @@
 .nav {
-    @apply .bg-blue .border-b .border-t .border-blue-darkest;
+    @apply .bg-blue-dark .border-b .border-t .border-blue-darkest;
     height: 56px;
 
     & .logo {

tailwind.js

@@ -92,8 +92,8 @@ let colors = {
     'blue-lightest': '#E6F6FF',
     'blue-lighter': '#BAE3FF',
     'blue-light': '#2186EB',
-    'blue': '#0552B5',
-    'blue-dark': '#03449E',
+    'blue': '#0967D2',
+    'blue-dark': '#0552B5',
     'blue-darker': '#01337D',
     'blue-darkest': '#002159',