Cleanup more filemanager design

Author: DaneEveritt

resources/assets/scripts/components/server/components/filemanager/FileContextMenu.ts

@@ -25,6 +25,12 @@ export default Vue.component('file-context-menu', {
                     </div>
                     <div class="action">Copy</div>
                 </div>
+                <div class="context-row">
+                    <div class="icon">
+                        <icon name="download" class="h-4"/>
+                    </div>
+                    <div class="action">Download</div>
+                </div>
             </div>
             <div>
                 <div class="context-row">
@@ -41,12 +47,6 @@ export default Vue.component('file-context-menu', {
                 </div>
             </div>
             <div>
-                <div class="context-row">
-                    <div class="icon">
-                        <icon name="download" class="h-4"/>
-                    </div>
-                    <div class="action">Download</div>
-                </div>
                 <div class="context-row danger">
                     <div class="icon">
                         <icon name="delete" class="h-4"/>

resources/assets/styles/components/filemanager.css

@@ -31,14 +31,15 @@
   }
 
   .context-menu {
-    @apply .absolute .bg-white .py-2 .border .rounded .text-neutral-800 .text-sm .cursor-pointer;
+    @apply .absolute .bg-white .py-2 .border .border-neutral-300 .shadow-lg .rounded .text-neutral-600 .text-sm .cursor-pointer;
 
     & > div:not(:last-of-type) {
-      @apply .border-b .border-neutral-50 .pb-2 .mb-2;
+      @apply .border-b .border-neutral-100 .pb-2 .mb-2;
     }
 
     & .context-row {
-      @apply .flex .flex-row .items-center .py-2 .px-8 .border-t .border-b .border-transparent;
+      @apply .flex .flex-row .items-center .py-2 .px-8 .mx-2 .rounded;
+      transition: background-color 50ms linear;
 
       & > .icon {
         @apply .flex-none;
@@ -53,11 +54,16 @@
       }
 
       &:hover {
-        @apply .bg-neutral-50 .border-t .border-b .border-neutral-100;
+        @apply .bg-neutral-50 .text-neutral-800;
       }
 
-      &.danger:hover {
-        @apply .bg-red-50 .border-t .border-b .border-red-100;
+      &.danger {
+        @apply .border .border-transparent;
+        transition: border 50ms linear;
+
+        &:hover {
+          @apply .bg-red-50 .border-red-100;
+        }
       }
 
     }

resources/assets/styles/components/navigation.css

@@ -69,14 +69,25 @@
                 transition: border-left-color 250ms linear, color 250ms linear;
                 @apply .block .px-4 .py-3 .border-l-3 .border-neutral-100 .no-underline .text-neutral-400 .font-medium;
 
-                &:hover, &.router-link-exact-active {
+                &:hover, &.router-link-exact-active, &.router-link-active {
                     @apply .text-neutral-800;
                 }
 
                 &.router-link-exact-active, &.router-link-active {
                     @apply .border-primary-500 .cursor-default;
                 }
             }
+
+            /**
+              * Because of how the router works the first sidebar link is always active
+              * since that is the container for all of the server things. Override the
+              * style for active links if its the first one and not an exact route match.
+              */
+            &:first-of-type > a {
+                &.router-link-active:not(.router-link-exact-active) {
+                    @apply .border-neutral-100 .text-neutral-400 .cursor-pointer;
+                }
+            }
         }
     }
 }