Internal: Improve filemanager, icons, loading, nav, and doc access - refs BT#21647

assets/css/app.scss

@@ -742,6 +742,49 @@ form .field {
   }
 }
 
+.filemanager-container {
+  .mdi-icon {
+    font-size: 48px;
+  }
+
+  .thumbnails {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .thumbnail-item {
+    width: 150px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+  }
+
+  .thumbnail-icon {
+    font-size: 2rem;
+  }
+
+  .thumbnail-title {
+    margin-top: 10px;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+  .thumbnail-actions {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+    gap: 5px;
+  }
+
+  .thumbnail-image {
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+  }
+}
+
 //@import 'primevue-md-light-indigo/theme.css';
 //@import '~primevue/resources/primevue.min.css';
 //@import '~primeflex/primeflex.css';

assets/css/scss/_admin_index.scss

@@ -13,30 +13,18 @@
 
 .admin-colors {
   &__container {
-    @apply flex flex-col mt-6;
+    @apply flex flex-col md:flex-row mt-6;
   }
 
-  &__settings {
-    @apply flex flex-col gap-4
-      md:flex-row;
-
-    &-form {
-      @apply flex-1;
-
-      &-title {
-        @apply mb-4;
-      }
-    }
+  &__form {
+    @apply w-full md:w-3/5;
+  }
 
-    .row-group {
-      @apply flex flex-col gap-4 items-start
-        sm:grid sm:grid-cols-2
-        md:items-end
-        xl:grid-cols-3;
-    }
+  &__form-fields {
+    @apply mt-4;
+  }
 
-    &-preview {
-      @apply space-y-4 flex-1;
-    }
+  &__preview {
+    @apply flex w-full md:w-2/5;
   }
 }

assets/css/scss/_documents.scss

@@ -32,3 +32,55 @@
     }
   }
 }
+
+.filemanager-container .mdi-icon {
+  @apply text-6xl;
+}
+
+.filemanager-container .thumbnails-container {
+  @apply flex justify-center;
+}
+
+.filemanager-container .thumbnails {
+  @apply flex flex-wrap gap-2.5 justify-center mb-12;
+}
+
+.filemanager-container .thumbnail-item {
+  @apply w-36 p-2 border border-gray-25 rounded-md text-center cursor-pointer;
+}
+
+.filemanager-container .thumbnail-item:hover {
+  @apply bg-gray-15;
+}
+
+.filemanager-container .thumbnail-icon {
+  @apply text-2xl w-24 h-24 object-cover flex items-center justify-center mx-auto;
+}
+
+.filemanager-container .thumbnail-title {
+  @apply mt-2 text-base break-words;
+}
+
+.filemanager-container .thumbnail-actions {
+  @apply mt-2 flex justify-center gap-1;
+}
+
+.filemanager-container .thumbnail-image {
+  @apply w-24 h-24 object-cover;
+}
+
+.context-menu ul {
+  @apply p-0 m-0 list-none;
+}
+
+.context-menu li {
+  @apply flex items-center p-2.5 cursor-pointer transition ease-in-out duration-200;
+}
+
+.context-menu li:hover {
+  @apply bg-gray-20 shadow-inner;
+}
+
+.context-menu li .mdi {
+  @apply mr-2;
+}

assets/css/scss/atoms/_color_picker.scss

@@ -1,5 +1,5 @@
 .color-picker {
-  @apply flex flex-col justify-center gap-0 relative;
+  @apply flex flex-col flex-grow-0 flex-shrink-0 basis-0 justify-center gap-0 relative;
 
   label {
     @apply absolute -top-2.5 left-2 text-caption px-1 bg-white text-primary z-[2] max-w-full truncate;

assets/css/scss/atoms/_form.scss

@@ -58,10 +58,14 @@
   > small {
     @apply text-caption text-primary;
   }
+
+  &-group {
+    @apply flex gap-4 flex-wrap mb-4 items-start;
+  }
 }
 
 .p-error {
-  @apply text-error;
+  @apply text-error text-caption;
 }
 
 .p-disabled {

assets/css/scss/organisms/_section_header.scss

@@ -3,11 +3,14 @@
     md:flex-row sm:items-center;
 
   &--h2 {
-    @apply pb-6 ;
+    @apply pb-6 mb-6;
   }
 
+  &--h3,
+  &--h4,
+  &--h5,
   &--h6 {
-    @apply pb-4;
+    @apply pb-4 mb-4;
   }
 
   &__title {