change color scheme

Author: mjiang108

app/stylesheets/Occupied.scss

@@ -1,4 +1,9 @@
  @import './constants.scss';
+
+.entireArea {
+  height: 100vh;
+}
+
  // HEADER
  .mainHeader {
      display: flex;

app/stylesheets/Settings.scss

@@ -15,11 +15,6 @@
   width: 100vw;
   height: 100vh;
   opacity: 1;
-  animation: fadeIn ease 2s;
-  -webkit-animation: fadeIn ease 2s;
-  -moz-animation: fadeIn ease 2s;
-  -o-animation: fadeIn ease 2s;
-  -ms-animation: fadeIn ease 2s;
 }
 
 .mode {

app/stylesheets/SidebarContainer.scss

@@ -177,8 +177,7 @@
 }
 
 .sidebar {
-  background-image: url("../../app/assets/mountain.png");
-  background-size: cover;
+  background: $darkblue;
   width: 140px;
   height: 100%;
   position: fixed;

app/stylesheets/constants.scss

@@ -1,3 +1,12 @@
+// Chronos 6.0 colors
+$darkblue: #011325;
+$white: #ffffff;
+$black: #000000;
+$blue: #224281;
+$lightblue: #4267b2;
+$yellowwhite: #ffffe5;
+$gray: #c2c2c2;
+
 $yellow: #fce356;
 $navy: #040819;
 $background: #ffffff;
@@ -7,7 +16,7 @@ $header: #888888;
 $darkgrey: #444d56;
 $hover: rgba(255,255,255, 0.1);
 $warningred: rgb(255, 0, 0); // #cc0000
-$lightblue: #b5d3e9;
+// $lightblue: #b5d3e9;
 
 // Primary colors:
 $gblue: #3788fc;

client/stylesheets/constants.scss

@@ -0,0 +1,106 @@
+$box-shadow: 0px 3px 8px 3px;
+$dark-gradient: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+$darkblue: #011325;
+$white: #ffffff;
+$black: #000000;
+$blue: #224281;
+$lightblue: #4267b2;
+$yellowwhite: #ffffe5;
+$gray: #c2c2c2;
+
+@mixin center-with-flex($align: center, $justify: center, $direction: row) {
+  display: flex;
+  align-items: $align;
+  justify-content: $justify;
+  flex-direction: $direction;
+}
+
+@mixin background-theme($mode) {
+  @if $mode == 'light' {
+    background: linear-gradient($gray, $white);
+
+    h1, h2, h3, p {
+      color: $black;
+      
+      a {
+        color: $lightblue;
+
+        &:hover {
+          color: $blue;
+        }
+      }
+    }
+    
+    ion-icon {
+      color: $black;
+    }
+  }
+
+  @if $mode == 'dark' {
+    background-image: linear-gradient($darkblue, $black);
+
+    h1, h2, h3, p {
+      color: $white;
+      
+      a {
+        color: $lightblue;
+
+        &:hover {
+          color: $blue;
+        }
+      }
+    }
+    
+    ion-icon {
+      color: $white;
+    }
+  }
+}
+
+@mixin section-header {
+  width: 50%;
+  text-align: center;
+  margin-bottom: 100px;
+  font-size: 135%;
+
+  h1 {
+    font-weight: 300;
+    font-size: 300%;
+    margin-bottom: 15px;
+  }
+
+  h2 {
+    font-weight: 300;
+    font-size: 225%;
+    margin-bottom: 15px;
+  }
+
+  p {
+    font-size: 110%;
+    line-height: 135%;
+  }
+}
+
+@keyframes twirl {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}