Make the file manager look better

Author: DaneEveritt

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

@@ -31,7 +31,7 @@ export default Vue.component('folder-row', {
             <router-link class="row clickable"
                          :to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\\//, '') }}"
             >
-                <div class="flex-none icon">
+                <div class="flex-none icon text-primary-700">
                     <icon name="folder"/>
                 </div>
                 <div class="flex-1">{{directory.name}}</div>

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

@@ -115,7 +115,7 @@ export default Vue.component('file-manager', {
     },
 
     template: `
-        <div class="animate fadein">
+        <div class="animated-fade-in">
             <div class="filemanager-breadcrumbs">
                 /<span class="px-1">home</span><!--
                 -->/<router-link :to="{ name: 'server-files' }" class="px-1">container</router-link><!--
@@ -124,7 +124,7 @@ export default Vue.component('file-manager', {
                         /<router-link :to="{ name: 'server-files', params: { path: crumb.path } }" class="px-1">{{crumb.directoryName}}</router-link>
                     </span>
                     <span v-else>
-                        /<span class="px-1 font-semibold">{{crumb.directoryName}}</span>
+                        /<span class="px-1 text-neutral-600 font-medium">{{crumb.directoryName}}</span>
                     </span>
                 </span>
             </div>
@@ -138,7 +138,7 @@ export default Vue.component('file-manager', {
                 <div v-else-if="!directories.length && !files.length">
                     <p class="text-neutral-500 text-sm text-center p-6 pb-4">This directory is empty.</p>
                 </div>
-                <div class="filemanager" v-else>
+                <div class="filemanager animated-fade-in" v-else>
                     <div class="header">
                         <div class="flex-none w-8"></div>
                         <div class="flex-1">Name</div>
@@ -154,6 +154,15 @@ export default Vue.component('file-manager', {
                     </div>
                 </div>
             </div>
+            <div class="flex mt-6" v-if="!loading && !errorMessage">
+                <div class="flex-1"></div>
+                <div class="mr-4">
+                    <a href="#" class="block btn btn-secondary btn-sm">New Folder</a>
+                </div>
+                <div>
+                    <a href="#" class="block btn btn-primary btn-sm">New File</a>
+                </div>
+            </div>
         </div>
     `,
 });

resources/assets/styles/components/filemanager.css

@@ -1,6 +1,6 @@
 .filemanager {
   & .header {
-    @apply .flex .text-sm .pb-4 .font-bold .border-b .border-neutral-400 .mb-3;
+    @apply .flex .text-xs .text-neutral-600 .pb-4 .font-bold .border-b .border-neutral-200 .mb-3 .uppercase;
 
     & > div {
       @apply .pr-4;
@@ -19,7 +19,7 @@
     }
 
     &.active-selection, &.clickable:hover {
-      @apply .bg-neutral-50 .text-neutral-900 .shadow;
+      @apply .bg-neutral-50 .text-neutral-900;
     }
 
     & > .icon {
@@ -65,14 +65,14 @@
 }
 
 .filemanager-breadcrumbs {
-  @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-800 .shadow-md;
+  @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-400 .border .border-neutral-100 .shadow;
 
   & a {
-    @apply .no-underline .text-primary-500;
-    transition: color 50ms ease-in;
+    @apply .no-underline .text-neutral-400;
+    transition: color 100ms linear;
 
     &:hover {
-      @apply .text-primary-800;
+      @apply .text-primary-500;
     }
   }
 }

resources/assets/styles/components/forms.css

@@ -77,6 +77,10 @@ input[type=number] {
     }
 }
 
+a.btn {
+    @apply .no-underline;
+}
+
 .btn {
     @apply .rounded .p-2;
     transition: all 150ms linear;
@@ -87,15 +91,15 @@ input[type=number] {
     &.btn-primary {
         @apply .bg-primary-500 .border-primary-600 .border .text-white;
 
-        &:hover:enabled {
+        &:hover:not(:disabled) {
             @apply .bg-primary-600 .border-primary-800;
         }
     }
 
     &.btn-green {
         @apply .bg-green-500 .border-green-600 .border .text-white;
 
-        &:hover:enabled {
+        &:hover:not(:disabled) {
             @apply .bg-green-600 .border-green-800;
         }
     }
@@ -105,19 +109,19 @@ input[type=number] {
             @apply .bg-red-500 .border-red-600 .border .text-white;
         }
 
-        &:hover:enabled {
+        &:hover:not(:disabled) {
             @apply .bg-red-600 .border-red-800;
         }
     }
 
     &.btn-secondary {
-        @apply .border .border-neutral-400 .text-neutral-600;
+        @apply .border .border-neutral-200 .text-neutral-400;
 
-        &:hover:enabled {
-            @apply .border-neutral-500 .text-neutral-800;
+        &:hover:not(:disabled) {
+            @apply .border-neutral-500 .text-neutral-700;
         }
 
-        &.btn-red:hover:enabled {
+        &.btn-red:hover:not(:disabled) {
             @apply .bg-red-600 .border-red-800 .text-white;
         }
     }

resources/assets/styles/components/miscellaneous.css

@@ -46,7 +46,7 @@ code {
  * Styling for elements that contain the core page content.
  */
 .content-box {
-    @apply .bg-white .p-6 .rounded .shadow-md;
+    @apply .bg-white .p-6 .rounded .shadow .border .border-neutral-100;
 }
 
 /**

resources/assets/styles/components/navigation.css

@@ -73,7 +73,7 @@
                     @apply .text-neutral-800;
                 }
 
-                &.router-link-exact-active {
+                &.router-link-exact-active, &.router-link-active {
                     @apply .border-primary-500 .cursor-default;
                 }
             }

resources/themes/pterodactyl/templates/base/core.blade.php

@@ -6,7 +6,7 @@
 
 @section('below-container')
     <div class="flex-grow"></div>
-    <div class="w-full m-auto mt-0 container">
+    <div class="w-full m-auto mt-0 mb-6 container">
         <p class="text-center sm:text-right text-neutral-300 text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>