improvement (incremental): update colors and improve page when current folder is empty

client/assets/css/reset.scss

@@ -42,23 +42,32 @@
 }
 
 :root {
-    --bg-color: #f1f2f2;
-    --color: #626469;
+    --bg-color: #f2f3f5;
+    --color: #626466;
     --emphasis: #375160;
     --primary: #9AD1ED;
     --emphasis-primary: #c5e2f1;
     --secondary: #466372;
     --emphasis-secondary: #466372;
     --light: #909090;
+<<<<<<< HEAD
     --super-light: #f4f4f4;
+=======
+    --super-light:  #F7F9FA;
+>>>>>>> 801aef8... improvement (incremental): update colors and improve page when current folder is empty
     --error: #f26d6d;
     --success: #63d9b1;
     --dark: #313538;
 }
 
 html {
+<<<<<<< HEAD
     font-family: "San Francisco", "Roboto", "Arial", sans-serif;
     -webkit-text-size-adjust: 100%;
+=======
+    font-family: "Roboto", sans-serif;
+    -webkit-text-size-adjust:100%;
+>>>>>>> 801aef8... improvement (incremental): update colors and improve page when current folder is empty
     background: var(--bg-color);
     color: var(--color);
 }

client/components/decorator.js

@@ -72,7 +72,6 @@ export function ErrorPage(WrappedComponent){
                         <div className="error-page">
                           <h1>Oops!</h1>
                           <h2>{message}</h2>
-                          <p>{JSON.stringify(this.state.error)}</p>
                         </div>
                       </Container>
                     </div>

client/pages/error.scss

@@ -5,12 +5,15 @@
     flex-direction: column;
 
     h1{margin: 5px 0; font-size: 3.1em;}
-    h2{margin: 10px 0; font-weight: normal;}
+    h2{margin: 10px 0; font-weight: normal; opacity: 0.9;}
     p{font-style: italic;}
     a{border-bottom: 1px dashed;}
 }
 
 .backnav {
-    .component_icon { height: 25px; }
+    .component_icon {
+        height: 25px;
+        margin-right: -2px;
+    }
     line-height: 25px;
 }

client/pages/filespage/filesystem.js

@@ -6,7 +6,7 @@ import { DropTarget } from 'react-dnd';
 import Path from 'path';
 
 import "./filesystem.scss";
-import { Container, NgIf } from '../../components/';
+import { Container, NgIf, Icon } from '../../components/';
 import { NewThing } from './thing-new';
 import { ExistingThing } from './thing-existing';
 import { FileZone } from './filezone';
@@ -42,7 +42,10 @@ export class FileSystem extends React.Component {
                   </ReactCSSTransitionGroup>
                 </NgIf>
                 <NgIf className="error" cond={this.props.files.length === 0}>
-                  There is nothing here
+                  <p className="empty_image">
+                    <Icon name="file"/>
+                  </p>
+                  <p>This folder is empty</p>
                 </NgIf>
               </Container>
             </div>

client/pages/filespage/filesystem.scss

@@ -17,10 +17,30 @@
         }
 
         .error{
-            font-size: 25px;
             text-align: center;
             font-weight: 100;
+
+            background: white;
+            border-radius: 50%;
+            max-width: 250px;
+            margin: 0 auto;
+            opacity: 0.9;
+            font-size: 20px;
+            color: var(--light);
             margin-top: 50px;
+            height: 100%;
+            opacity: 0.8;
+            border: 1px solid rgba(0,0,0,0.1);
+            font-family: sans-serif;
+
+            .component_icon{
+                height: 100px;
+            }
+
+            padding: 50px;
+            @media screen and (max-width: 420px) {
+                padding: 30px;
+            }
         }
     }
 }

client/pages/filespage/submenu.scss

@@ -27,7 +27,7 @@
                 }
                 @include ripple(var(--bg-color));
             }
-            > span{padding: 3px 5px;}
+            > span{padding: 3px 5px; font-weight: 100;}
 
             > div {cursor: pointer; margin-right: 15px;}
             .view{