fix: apply consistent colours for dropdowns, menu and resourcess

closes #39
Wildlander-mod · Apr 14, 2021 · bb20a07 · bb20a07
1 parent 8922c39
commit bb20a07
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 98 deletions.
diff --git a/src/assets/scss/settings/colours.scss b/src/assets/scss/settings/colours.scss
@@ -1,15 +1,17 @@
 $colour-primary: #0b32e6;
+$colour-primary--light: #3A5EFF;
 $colour-secondary: #e1e1e1;
 $colour-alternate: #00BF6F;
 $colour-text: #ffffff;
+$colour-text--dark: darken($colour-text, 60%);
 $colour-text-secondary: #ffffff66;
 $colour-background: #e1e1e1;
+$colour-background-light: rgba(81, 81, 81, 0.5);
 $colour-background-secondary: #000000;
 
-$colour-text--darker: darken($colour-text, 60%);
 
 $colour-background--transparent: transparentize($colour-background, 0.8);
-$colour-background--darker: darken($colour-background, 20%);
+$colour-background--dark: rgba(132, 132, 132, 0.2);
 $colour-background-secondary--transparent: transparentize(
   $colour-background-secondary,
   0.8

diff --git a/src/components/List.vue b/src/components/List.vue
@@ -44,7 +44,7 @@ export default class List extends Vue {
   line-height: 16px;
   flex: 1;
   background-color: $colour-background-secondary--transparent;
-  border: 1px solid $colour-background--darker;
+  border: 1px solid $colour-background--dark;
   margin: 0;
   padding: 6px 10px 10px;
   font-size: $font-size--small;

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -184,7 +184,7 @@ nav {
   }
 
   hr {
-    border-color: $colour-background--darker;
+    border-color: $colour-background--dark;
     margin-bottom: 0;
     margin-top: 30px;
     width: 223px;

diff --git a/src/components/News.vue b/src/components/News.vue
@@ -98,7 +98,7 @@ export default class News extends Vue {
   margin-right: $size-margin--x-small;
 
   border-radius: 8px;
-  background-color: $colour-background--darker;
+  background-color: $colour-background--dark;
 }
 
 .c-news__tag--news {

diff --git a/src/components/PageContent.vue b/src/components/PageContent.vue
@@ -48,7 +48,7 @@ export default class PageContent extends Vue {
 
   backdrop-filter: blur(10px);
   background-color: $colour-background-secondary--transparent;
-  border: 1px solid $colour-background--darker;
+  border: 1px solid $colour-background--dark;
   height: 200px;
   margin-top: 5px;
 }

diff --git a/src/components/controls/Button.vue b/src/components/controls/Button.vue
@@ -27,7 +27,7 @@ export default {
 @import "~@/assets/scss";
 
 div {
-  background-color: $colour-background--darker;
+  background-color: $colour-background--dark;
   border: 0;
   border-radius: 2px;
   color: $colour-text;
@@ -39,7 +39,7 @@ div {
 
   &:active,
   &:hover {
-    background-color: lighten($colour-background--darker, 10%);
+    background-color: lighten($colour-background--dark, 10%);
   }
 
   &:hover {
@@ -55,7 +55,7 @@ div {
 
     &:active,
     &:hover {
-      background-color: lighten($colour-primary, 10%);
+      background-color: $colour-primary--light;
     }
   }
 

diff --git a/src/components/controls/Select.vue b/src/components/controls/Select.vue
@@ -1,18 +1,26 @@
 <template>
-  <div id="select">
-    <div @click="toggle" id="select__head">
-      <p>
-        {{ currentOption.name }}
-      </p>
-      <span :class="'material-icons ' + `select__icon${isOpenModifier}`">
+  <div :class="`c-select c-select${isOpenModifier}`">
+    <div
+      :class="`c-select__head u-text c-select__head${isOpenModifier}`"
+      @click="toggle"
+    >
+      {{ currentOption.name }}
+      <span
+        :class="
+          'material-icons ' + `c-select__icon c-select__icon${isOpenModifier}`
+        "
+      >
         expand_more
       </span>
     </div>
-    <div :class="`select__options${isOpenModifier}`" id="select__options">
-      <div @click="select(option)" :key="option.name" v-for="option in options">
-        <p>
-          {{ option.name }}
-        </p>
+    <div :class="`c-select__options c-select__options${isOpenModifier}`">
+      <div
+        v-for="option in options"
+        :key="option.name"
+        class="c-select__option"
+        @click="select(option)"
+      >
+        <div class="u-text">{{ option.name }}</div>
       </div>
     </div>
   </div>
@@ -54,105 +62,109 @@ export default {
 <style lang="scss" scoped>
 @import "~@/assets/scss";
 
-$selectBackground: transparentize($colour-background, 0.8);
-$selectFocus: darken($colour-secondary, 50%);
+$selectBackground: #767676;
+$selectFocus: rgba(255, 255, 255, 0.1);
 
-div {
+.c-select {
   height: 30px;
   user-select: none;
+  border-radius: 2px;
 
-  &#select__head {
-    background-color: $selectBackground;
-    border-radius: 2px;
-    display: flex;
-    justify-content: space-between;
-    width: 155px;
+  background-color: $selectBackground;
+  &:hover {
+    cursor: pointer;
+    background-color: $colour-background--dark;
+  }
 
-    &:active,
-    &:hover {
-      background-color: $selectFocus;
-    }
+  &--open {
+    background-color: $colour-background--dark;
+  }
+}
 
-    &:hover {
-      cursor: pointer;
-    }
+.c-select__head {
+  display: flex;
+  justify-content: space-between;
+  width: 155px;
 
-    span {
-      align-self: center;
-      display: inline-block;
+  .c-select__icon {
+    align-self: center;
 
-      &.select__icon--closed {
-        animation: rotate-reverse 0.2s linear forwards;
+    &--closed {
+      animation: rotate-reverse 0.2s linear forwards;
 
-        @keyframes rotate-reverse {
-          from {
-            transform: rotate(180deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
+      @keyframes rotate-reverse {
+        from {
+          transform: rotate(180deg);
+        }
+        to {
+          transform: rotate(360deg);
         }
       }
+    }
 
-      &.select__icon--open {
-        animation: rotate 0.2s linear forwards;
+    &--open {
+      animation: rotate 0.2s linear forwards;
 
-        @keyframes rotate {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(180deg);
-          }
+      @keyframes rotate {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(180deg);
         }
       }
     }
   }
+}
 
-  &#select__options {
-    background-color: $selectFocus;
-    height: auto;
-    padding-bottom: 8px;
-    padding-top: 8px;
-    position: absolute;
-    transform-origin: top;
-    width: 200px;
-    z-index: 1;
-
-    &.select__options--closed {
-      animation: retract 0.2s forwards;
-    }
+.c-select__options {
+  background-color: $selectBackground;
+  padding-bottom: 8px;
+  padding-top: 8px;
+  position: absolute;
+  transform-origin: top;
+  width: 200px;
+  z-index: 1;
+  border-radius: 0 4px 4px 4px;
+
+  &--closed {
+    animation: retract 0.2s forwards;
+  }
 
-    &.select__options--open {
-      animation: expand 0.2s forwards;
-    }
+  &--open {
+    animation: expand 0.2s forwards;
+  }
 
-    div:hover {
-      background-color: $selectBackground;
-      cursor: pointer;
+  @keyframes expand {
+    from {
+      transform: scaleY(0);
     }
-
-    @keyframes expand {
-      from {
-        transform: scaleY(0);
-      }
-      to {
-        transform: scaleY(1);
-      }
+    to {
+      transform: scaleY(1);
     }
+  }
 
-    @keyframes retract {
-      from {
-        transform: scaleY(1);
-      }
-      to {
-        transform: scaleY(0);
-      }
+  @keyframes retract {
+    from {
+      transform: scaleY(1);
+    }
+    to {
+      transform: scaleY(0);
     }
   }
 }
 
-p {
-  margin-left: 8px;
+.c-select__option:hover {
+  background-color: $selectFocus;
+  cursor: pointer;
+}
+
+// TODO this should be globally applied as a default
+.u-text {
+  padding-left: 8px;
+  font-weight: 300;
+  line-height: 30px;
+  size: 14px;
+  box-sizing: border-box;
 }
 </style>
diff --git a/src/views/ConfigureENB.vue b/src/views/ConfigureENB.vue
@@ -51,7 +51,7 @@ export default {
 
   #configure-enb__controls {
     background-color: rgba(0, 0, 0, 0.5);
-    border: 1px solid $colour-background--darker;
+    border: 1px solid $colour-background--dark;
     display: flex;
     flex-direction: column;
 
@@ -79,7 +79,7 @@ export default {
 
   #configure-enb__selector {
     background-color: rgba(0, 0, 0, 0.5);
-    border: 1px solid $colour-background--darker;
+    border: 1px solid $colour-background--dark;
     height: 225px;
     margin-top: -1px;
   }

diff --git a/src/views/Resources.vue b/src/views/Resources.vue
@@ -54,7 +54,7 @@ export default {
 
   #resources__wrapper {
     background-color: rgba(0, 0, 0, 0.5);
-    border: 1px solid $colour-background--darker;
+    border: 1px solid $colour-background--dark;
     height: 350px;
 
     .resources__row {
@@ -67,15 +67,15 @@ export default {
 
       .resources__link-container {
         align-items: center;
-        border: 1px solid $colour-background--darker;
+        border: 1px solid $colour-background--dark;
         display: flex;
         flex-direction: column;
         height: 125px;
         justify-content: center;
         width: 150px;
 
         &:hover {
-          background-color: $colour-background-secondary--transparent;
+          background-color: $colour-background-light;
         }
 
         p {