Build Backup

src/app/app.component.scss

@@ -4,6 +4,7 @@ $themeColor-Dark:#E3E2DF;
 $theme-font: verdana, sans-serif;
 // $theme-supplementer: #f39c12;
 $theme-supplementer: #5D001E;
+$theme-background-secondary: #007BEB;
 
 // app-root {
 //     font-family: 'Poppins', sans-serif;
@@ -26,6 +27,43 @@ a:focus {
     transition: all 0.3s;
 }
 
+.th-bg-color-light {
+    background-color: $themeColor-Light;
+}
+
+.th-color-light {
+    color: $themeColor-Light;
+}
+
+.th-bg-color-dark {
+    background-color: $themeColor-Dark;
+}
+
+.th-color-dark {
+    color: $themeColor-Dark;
+}
+
+.th-base-font {
+    font-family: $theme-font;
+}
+
+.th-bg-color-supplementer {
+    background-color: $theme-supplementer;
+}
+
+.th-color-supplementer {
+    color: $theme-supplementer;
+}
+
+.th-bg-color-secondary {
+    background-color: $theme-background-secondary;
+}
+
+.th-color-secondary {
+    color: $theme-background-secondary;
+}
+
+
 .navbar {
     padding: 15px 10px;
     background: #fff;
@@ -67,7 +105,7 @@ span {
 #sidebar {
     min-width: 250px;
     max-width: 250px;
-    background: $theme-supplementer;
+    background: $themeColor-Dark;
     color: $themeColor-Dark;
     transition: all 0.3s;
 }
@@ -145,7 +183,7 @@ span {
 }
 
 #sidebar ul li a:hover {
-    color: $theme-supplementer;
+    color: $themeColor-Dark;
     background: $themeColor-Light;
 }
 
@@ -155,7 +193,7 @@ span {
 
 #sidebar ul li.active>a,
 a[aria-expanded="true"] {
-    color: $theme-supplementer;
+    color: $themeColor-Light;
     background:$themeColor-Dark;
 }
 
@@ -293,7 +331,7 @@ ADDITIONS
   width: 2em;
   border-right: 1px solid #c99034;
 //   background-color: #f5d38b;
-  background-color: $theme-supplementer;
+  background-color: $themeColor-Dark;
   width: 4%;
   margin-bottom: 40px;
   border-radius: 4px 0 0 4px;
@@ -325,11 +363,11 @@ ADDITIONS
 }
 
 .logotext {
-  color: $theme-supplementer;
+  color: $themeColor-Dark;
 }
 
 #content nav div.collapse li a.nav-link i.far {
-  color: $theme-supplementer;
+  color: $themeColor-Light;
   font-size: 1.8em;
   padding: 0.2em;
 }

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { ToolsComponent } from './content/header/tools/tools.component';
 import { UploadComponent } from './content/header/tools/upload/upload.component';
 import { ImageContainerComponent } from './content/image-container/image-container.component';
 import { ImageComponent } from './content/image-container/image/image.component';
+import { ImageComponent as ViewerImageComponent } from './content/image-viewer/image/image.component';
 import { VerticalImageComponent } from './content/image-container/image/vertical-image/vertical-image.component';
 import { HorizontalImageComponent } from './content/image-container/image/horizontal-image/horizontal-image.component';
 import { PictureComponent } from './content/image-container/image/picture/picture.component';
@@ -46,6 +47,7 @@ import { HomeComponent } from './content/image-container/home/home.component';
     UploadComponent,
     ImageContainerComponent,
     ImageComponent,
+    ViewerImageComponent,
     PictureComponent,
     DescriptionComponent,
     VerticalImageComponent,

src/app/content/content.component.scss

@@ -1,17 +1,21 @@
+$themeColor-Dark:#141414;
+
 :host {
     width: 100%;
+    margin: 0 20px;
 }
 
 .background-image { 
-    background-image: url("/assets/images/BG.jpg");
-    background-size: cover;
-    -webkit-background-size: cover;
-    display: block;
-    filter: blur(15px);
-    -webkit-filter: blur(15px);
+    // background-image: url("/assets/images/58930.jpg");
+    background: $themeColor-Dark;
+    // background-size: cover;
+    // -webkit-background-size: cover;
+    // display: block;
+    // filter: blur(15px);
+    // -webkit-filter: blur(15px);
     height: 100%;
     left: 0;
     position: fixed;
     right: 0;
     /* z-index: 1; */
-  }
+}

src/app/content/header/header.component.scss

@@ -11,7 +11,7 @@ $theme-supplementer: #5D001E;
 // }
 
 :host {
-    padding: 20px;
+    padding: 20px 0;
     display: flex;
 }
 

src/app/content/header/tools/tools.component.html

@@ -18,5 +18,11 @@
         <!-- <i class="far fa-paper-plane"></i> -->
       </a>
     </li>
+    <li id="btnUploadCommand" class="nav-item float-right">
+      <a class="nav-link" href="#">
+        <i class="material-icons md-light md-36">cloud_upload</i>
+        <!-- <i class="far fa-paper-plane"></i> -->
+      </a>
+    </li>
   </ul>
 </div>

src/app/content/image-container/image-container.component.scss

@@ -19,4 +19,10 @@ p {
 
 :host {
     margin: auto;
+}
+
+.container-fluid {
+    padding: 0;
+    border-top: 3px solid darkblue;
+    z-index: 30;
 }

src/app/content/image-container/image/image.component.scss

@@ -10,7 +10,7 @@
 // }
 
 .card {
-    width: 20rem;
+    // width: 100%;
     margin: 20px auto;
     overflow: auto
 }

src/app/content/image-viewer/image/image.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-image',
+  selector: 'app-viewer-image',
   templateUrl: './image.component.html',
   styleUrls: ['./image.component.scss']
 })

src/app/side-bar/side-bar-tab/side-bar-tab.component.scss

@@ -1,6 +1,8 @@
-$themeColor-Light: #EEE2DC;
+// $themeColor-Light: #EEE2DC;
 // $themeColor-Dark:#252525;
-$themeColor-Dark:#E3E2DF;
+// $themeColor-Dark:#E3E2DF;
+$themeColor-Light: #CBCBCB;
+$themeColor-Dark:#141414;
 $theme-font: verdana, sans-serif;
 // $theme-supplementer: #f39c12;
 $theme-supplementer: #5D001E;
@@ -11,7 +13,7 @@ $theme-supplementer: #5D001E;
 // }
 
 :host {
-    background: $theme-supplementer;
+    background: $themeColor-Dark;
 }
 
 p {
@@ -71,7 +73,7 @@ span {
 #sidebar {
     min-width: 250px;
     max-width: 250px;
-    background: $theme-supplementer;
+    background: $themeColor-Dark;
     color: $themeColor-Dark;
     transition: all 0.3s;
 }
@@ -149,7 +151,7 @@ span {
 }
 
 #sidebar ul li a:hover {
-    color: $theme-supplementer;
+    color: $themeColor-Dark ;
     background: $themeColor-Light;
 }
 
@@ -159,8 +161,8 @@ span {
 
 #sidebar ul li.active>a,
 a[aria-expanded="true"] {
-    color: $theme-supplementer;
-    background:$themeColor-Dark;
+    color: $themeColor-Light;
+    background: $themeColor-Dark;
 }
 
 a[data-toggle="collapse"] {
@@ -297,7 +299,7 @@ ADDITIONS
   width: 2em;
   border-right: 1px solid #c99034;
 //   background-color: #f5d38b;
-  background-color: $theme-supplementer;
+  background-color: $themeColor-Dark;
   width: 4%;
   margin-bottom: 40px;
   border-radius: 4px 0 0 4px;
@@ -329,11 +331,11 @@ ADDITIONS
 }
 
 .logotext {
-  color: $theme-supplementer;
+  color: $themeColor-Dark;
 }
 
 #content nav div.collapse li a.nav-link i.far {
-  color: $theme-supplementer;
+  color: $themeColor-Dark;
   font-size: 1.8em;
   padding: 0.2em;
 }
@@ -420,7 +422,7 @@ ADDITIONS
   OVERRIDES
   --------------------------------------------------*/
   .btn:not(.featureRequest) {
-    background-color: $theme-supplementer;
+    background-color: $themeColor-Dark;
     color: $themeColor-Dark
   }
 

src/app/side-bar/side-bar.component.scss

@@ -1,6 +1,8 @@
-$themeColor-Light: #EEE2DC;
+// $themeColor-Light: #EEE2DC;
 // $themeColor-Dark:#252525;
-$themeColor-Dark:#E3E2DF;
+// $themeColor-Dark:#E3E2DF;
+$themeColor-Light: #CBCBCB;
+$themeColor-Dark:#141414;
 $theme-font: verdana, sans-serif;
 // $theme-supplementer: #f39c12;
 $theme-supplementer: #5D001E;
@@ -12,7 +14,7 @@ $theme-supplementer-transparent: rgba(93,0,30,0.3);
 // }
 
 :host {
-    background: $theme-supplementer-transparent;
+    // background: $theme-supplementer-transparent;
     z-index: 20;
 }
 
@@ -67,14 +69,14 @@ span {
     display: flex;
     align-items: stretch;
     font-family: 'Poppins', sans-serif;
-    background-color: $themeColor-Dark;
+    background-color: $themeColor-Light;
 }
 
 #sidebar {
     min-width: 250px;
     max-width: 250px;
     // background: $theme-supplementer-transparent;
-    color: $themeColor-Dark;
+    color: $themeColor-Light;
     transition: all 0.3s;
 }
 
@@ -161,7 +163,7 @@ span {
 
 #sidebar ul li.active>a,
 a[aria-expanded="true"] {
-    color: $theme-supplementer;
+    color: $themeColor-Light;
     background:$themeColor-Dark;
 }