#81 - clean up file box dark/light mode styling

src/app/components/nodes/file-box/file-box.component.html

@@ -1,4 +1,4 @@
-<div class="file-box-wrapper" *ngIf="!notAvailableOffline">
+<div [ngClass]="'file-box-wrapper ' + (isDark() ? 'dark' : '')" *ngIf="!notAvailableOffline">
     <ion-toolbar>
         <div style="display: flex; flex-direction: row">
             <button
@@ -28,7 +28,7 @@
         <div *ngIf="items && items.length" class="folders">
             <ng-container *ngFor="let item of items">
                 <div class="folder item" *ngIf="item.type === 'folder'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
-                    <div class="icon" style="color: #ecd3a9"><i class="fa fa-folder"></i></div>
+                    <div class="icon folder"><i class="fa fa-folder"></i></div>
                     <div class="title">{{ item.title }}</div>
                 </div>
             </ng-container>
@@ -36,7 +36,7 @@
         <div *ngIf="items && items.length" class="files">
             <ng-container *ngFor="let item of items">
                 <div class="folder item" *ngIf="item.type === 'file'" (contextmenu)="onItemContextMenu(item, $event)" (dblclick)="onItemActivate(item)">
-                    <div class="icon"><i [ngClass]="categoryIcons[item.category]" [ngStyle]="{ color: categoryColors[item.category] }"></i></div>
+                    <div [ngClass]="'icon ' + item.category"><i [ngClass]="categoryIcons[item.category]"></i></div>
                     <div class="title">{{ item.title }}</div>
                 </div>
             </ng-container>

src/app/components/nodes/file-box/file-box.component.scss

@@ -13,7 +13,7 @@ div.file-box-wrapper {
 
 .content-wrapper {
   min-height: 200px;
-  background: #222;
+  background: #f5f5f5;
   display: flex;
   flex-direction: column;
 
@@ -23,7 +23,7 @@ div.file-box-wrapper {
     justify-content: center;
     display: flex;
     flex-direction: column;
-    color: #ccc;
+    color: #666;
   }
 }
 
@@ -35,7 +35,7 @@ div.file-box-wrapper {
   .item {
     display: flex;
     flex-direction: row;
-    background: #393939;
+    background: #dddddd;
     padding: 10px;
     margin: 10px;
     border-radius: 3px;
@@ -43,11 +43,79 @@ div.file-box-wrapper {
 
     &:hover {
       cursor: pointer;
-      background: #424242;
+      background: #d0d0d0;
     }
 
     .icon {
       margin-right: 10px;
+
+      &.document {
+        color: #4269a5;
+      }
+
+      &.spreadsheet {
+        color: #39825a;
+      }
+
+      &.presentation {
+        color: #dc6141;
+      }
+
+      &.image {
+        color: #cf9f20;
+      }
+
+      &.pdf {
+        color: #d32f2f;
+      }
+
+      &.video {
+        color: #8049c0;
+      }
+
+      &.code {
+        color: #ff4500;
+      }
+
+      &.text {
+        color: #444444;
+      }
+
+      &.folder {
+        color: #ac9379;
+      }
+    }
+  }
+}
+
+.file-box-wrapper.dark {
+  .content-wrapper {
+    background: #222;
+
+    .empty-text {
+      color: #ccc;
+    }
+  }
+
+  .item {
+    background: #393939;
+
+    &:hover {
+      background: #424242;
+    }
+
+    .icon {
+      &.text {
+        color: #cccccc;
+      }
+
+      &.image {
+        color: #ffbf50;
+      }
+
+      &.folder {
+        color: #ecd3a9;
+      }
     }
   }
 }

src/app/components/nodes/file-box/file-box.component.ts

@@ -51,18 +51,6 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
         other: 'fa fa-file',
     };
 
-    categoryColors = {
-        document: '#4269a5',
-        spreadsheet: '#39825a',
-        presentation: '#dc6141',
-        image: '#ffbf50',
-        pdf: '#d32f2f',
-        video: '#8049c0',
-        code: '#ff4500',
-        text: '#cccccc',
-        other: '#ffffff',
-    };
-
     protected dirty = false;
     protected pendingSetup = true;
     public notAvailableOffline = false;
@@ -87,6 +75,10 @@ export class FileBoxComponent extends EditorNodeContract implements OnInit {
         @Inject(APP_BASE_HREF) private baseHref: string
     ) { super(); }
 
+    public isDark() {
+        return document.body.classList.contains('dark');
+    }
+
     public isDirty(): boolean | Promise<boolean> {
         return this.dirty;
     }