Convert colours to use standardised variables

This commit also makes some styling changes to improve accessibility and
tidy up the overall design somewhat.

src/App.vue

@@ -22,13 +22,13 @@ export default {
 </script>
 
 <style lang="scss">
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
 
 #app {
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #333;
+  color: $grey-900;
 }
 
 #page {
@@ -37,8 +37,8 @@ export default {
 
 body {
   margin: 0;
-  background-color: #f7f6f4;
+  background-color: $grey-000;
-  color: #333;
+  color: $grey-900;
 
   h1 {
     font-size: 3rem;
@@ -48,7 +48,7 @@ body {
 }
 
 a {
-  color: #c43422;
+  color: $red-500;
   text-decoration: none;
 
   &:hover {

src/components/Chip.vue

@@ -34,13 +34,14 @@ export default {
   justify-content: space-between;
   padding: 6px 12px;
   margin: 0 5px;
-  background-color: #f0ad4e;
+  background-color: $yellow-100;
-  color: #f7f6f4;
+  color: $yellow-900;
   border-radius: 20px;
 }
 
 .chip-delete {
-  background: darken(#f0ad4e, 20%);
+  background: $yellow-300;
+  color: $yellow-800;
   font-size: 12px;
   cursor: pointer;
   border-radius: 50%;
@@ -50,7 +51,7 @@ export default {
   transition: background 0.2s;
 
   &:hover {
-    background: darken(#f0ad4e, 30%);
+    background: $yellow-400;
   }
 }
 </style>

src/components/ChipInputDropdown.vue

@@ -129,7 +129,7 @@ export default {
 <style lang="scss">
 .chip-input {
   align-items: center;
-  background-color: white;
+  background-color: $white;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, .125);
   display: flex;
   margin-top: 5px;
@@ -146,7 +146,7 @@ export default {
     margin: 0;
     padding: 0 10px;
     line-height: 0;
-    color: #666666;
+    color: $grey-600;
   }
 }
 
@@ -180,13 +180,13 @@ export default {
   }
 
   li {
-    background: white;
+    background: $white;
     cursor: pointer;
     padding: 8px 10px;
 
     &.selected,
     &:hover {
-      background: #eeeeee;
+      background: $grey-100;
     }
   }
 }

src/components/DateInline.vue

@@ -17,7 +17,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>

src/components/EventComment.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="event-details">
+  <div class="event-details comment">
     <p class="event-title">
       <UserLinkInline v-if="event.author_id" :user-id="event.author_id" />
       commented on {{ createdDate.toDateString() }}

src/components/EventTagsAdded.vue

@@ -34,8 +34,8 @@ export default {
 .tag {
   padding: 6px 12px;
   margin: 0 5px;
-  background-color: #f0ad4e;
+  background-color: $yellow-100;
-  color: #f7f6f4;
+  color: $yellow-900;
   border-radius: 20px;
 }
 </style>

src/components/Header.vue

@@ -16,8 +16,8 @@ export default {
   top: 0;
   left: 0;
   height: 60px;
-  background-color: #c43422;
+  background-color: $red-500;
-  color: #f7f6f4;
+  color: $grey-000;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
   padding: 0 10px;
   z-index: 2000;

src/components/ProjectGroupListItem.vue

@@ -97,16 +97,11 @@ export default {
 <style lang="scss" scoped>
 .project-group {
   padding: 20px;
-  border-top: solid 1px #ddd;
+  border-top: solid 1px $grey-100;
 
   h3 {
     margin: 0;
     font-size: 1.25em;
-    font-weight: 300;
-  }
-
-  &:hover {
-    background-color: #fff;
   }
 
   .metadata {
@@ -114,15 +109,11 @@ export default {
     align-items: center;
 
     .text-muted {
-      color: #999;
+      color: $grey-600;
     }
 
     p {
       margin: 0.5em 1em 0 1em;
-
-      &.text-muted {
-        color: #777;
-      }
     }
 
     ul {
@@ -132,7 +123,8 @@ export default {
       padding: 0;
 
       a {
-        color: #333;
+        color: $grey-800;
+        font-weight: 500;
       }
     }
   }
@@ -143,7 +135,17 @@ export default {
 
   .svg-inline--fa {
     margin-right: 10px;
-    color: #7c342b;
+    color: $red-700;
+    font-size: 22px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: $white;
+
+    .svg-inline--fa {
+      color: $red-500;
+    }
   }
 }
 

src/components/ProjectListItem.vue

@@ -50,11 +50,7 @@ export default {
 <style lang="scss" scoped>
 .project {
   padding: 20px;
-  border-top: solid 1px #ddd;
+  border-top: solid 1px $grey-100;
-
-  &:hover {
-    background-color: #fff;
-  }
 
   .header {
     display: flex;
@@ -64,7 +60,6 @@ export default {
     h3 {
       margin: 0;
       font-size: 1.25em;
-      font-weight: 300;
     }
   }
 
@@ -73,15 +68,11 @@ export default {
     align-items: center;
 
     .text-muted {
-      color: #999;
+      color: $grey-600;
     }
 
     p {
       margin: 0.5em 1em 0 1em;
-
-      &.text-muted {
-        color: #777;
-      }
     }
   }
 

src/components/ProjectTabDetails.vue

@@ -95,7 +95,7 @@ export default {
   margin: 10px;
   padding: 30px;
   border-radius: 5px;
-  background-color: #fff;
+  background-color: $white;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
 
   h2 {
@@ -104,7 +104,7 @@ export default {
   }
 
   .svg-inline--fa {
-    color: #777;
+    color: $grey-400;
     margin-right: 10px;
   }
 

src/components/ProjectTabStories.vue

@@ -50,7 +50,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>

src/components/Sidebar.vue

@@ -61,23 +61,23 @@ export default {
   left: 0;
   height: calc(100vh - 60px);
   width: 10vw;
-  background-color: #333;
+  background-color: $grey-900;
   box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.5);
 
   a {
-    color: #f9f0eb;
+    color: $grey-100;
     display: block;
     padding: 20px 20px;
     text-decoration: none;
     text-align: left;
 
     &.router-link-active {
-      color: #f7f6f4;
+      color: $grey-000;
-      background-color: #a03427;
+      background-color: $red-600;
     }
     &:hover {
-      color: #f7f6f4;
+      color: $grey-000;
-      background-color: #7c342b;
+      background-color: $red-700;
     }
 
     svg {
@@ -88,7 +88,7 @@ export default {
   .divider {
     margin: 9px 10px;
     height: 1px;
-    background-color: #444;
+    background-color: $grey-700;
   }
 }
 </style>

src/components/Spinner.vue

@@ -26,17 +26,16 @@ export default {
   width: 11em;
   height: 11em;
   border-radius: 50%;
-  background: linear-gradient(to right, rgb(196, 52, 34) 10%, rgba(196, 52, 34, 0.42));
+  background: linear-gradient(to right, $red-300, $red-500);
   position: relative;
-  animation: spin 1.2s infinite linear;
+  animation: spin 1.4s infinite linear;
   transform: translateZ(0);
 }
 
 .spinner:before {
   width: 50%;
   height: 50%;
-  background: #f7f6f4;
+  background: $grey-000;
-  border-radius: 100% 0 0 0;
   position: absolute;
   top: 0;
   left: 0;
@@ -44,7 +43,7 @@ export default {
 }
 
 .spinner:after {
-  background: #f7f6f4;
+  background: $grey-000;
   width: 75%;
   height: 75%;
   border-radius: 50%;

src/components/StoryListItem.vue

@@ -65,10 +65,10 @@ export default {
 <style lang="scss" scoped>
 .story {
   padding: 20px;
-  border-top: solid 1px #ddd;
+  border-top: solid 1px $grey-100;
 
   &:hover {
-    background-color: #fff;
+    background-color: $grey-000;
   }
 
   .header {
@@ -79,27 +79,44 @@ export default {
     h3 {
       margin: 0;
       font-size: 1.25em;
-      font-weight: 300;
     }
 
-    .story-status-badge {
+    .header-details {
-      padding: 6px 12px;
+      display: flex;
-      margin: 0 5px;
-      color: #f7f6f4;
-      border-radius: 20px;
-      width: 60px;
-      text-align: center;
 
-      &.merged {
+      .badge {
-        background-color: #5cb85c;
+        padding: 6px 12px;
-      }
+        margin: 0 5px;
+        border-radius: 20px;
+        width: 80px;
+        text-align: center;
 
-      &.active {
+        &.story-status {
-        background-color: #5bc0de;
+          color: $grey-000;
-      }
 
-      &.invalid {
+          &.merged {
-        background-color: #777;
+            background-color: $lime-100;
+            color: $lime-900;
+          }
+
+          &.active {
+            background-color: $cyan-100;
+            color: $cyan-900;
+          }
+
+          &.invalid {
+            background-color: $grey-100;
+            color: $grey-900;
+          }
+        }
+
+        &.security {
+          width: 160px;
+        }
+
+        &.privacy {
+          width: 80px;
+        }
       }
     }
   }
@@ -109,7 +126,7 @@ export default {
     align-items: center;
 
     .text-muted {
-      color: #999;
+      color: $grey-600;
     }
 
     p {
@@ -124,9 +141,13 @@ export default {
       display: inline-block;
       padding: 6px 12px;
       margin: 0 5px;
-      background-color: #f0ad4e;
+      background-color: $yellow-100;
-      color: #f7f6f4;
+      color: $yellow-900;
       border-radius: 20px;
+
+      .svg-inline--fa {
+        color: $yellow-600;
+      }
     }
   }
 

src/components/TaskListEntry.vue

@@ -10,7 +10,9 @@
       Not assigned
     </div>
     <p class="thin"><FontAwesomeIcon icon="code-branch" fixed-width />{{ branch.name }}</p>
-    <p class="thin">{{ task.status }}</p>
+    <p class="thin right-align">
+      <span class="status" :class="[task.status]">{{ task.status }}</span>
+    </p>
   </div>
 </template>
 
@@ -71,7 +73,7 @@ export default {
 }
 
 .svg-inline--fa {
-  color: #777;
+  color: $grey-400;
 
   &.fa-code-branch {
     margin-right: 10px;
@@ -91,4 +93,42 @@ export default {
   display: inline-flex;
   align-items: center;
 }
+
+.right-align {
+  text-align: right;
+}
+
+.status {
+  display: inline-block;
+  text-align: center;
+  padding: 6px 12px;
+  margin: 0 5px;
+  border-radius: 20px;
+  width: 80px;
+  color: $grey-000;
+
+  &.todo {
+    background-color: $grey-100;
+    color: $grey-900;
+  }
+
+  &.merged {
+    background-color: $lime-100;
+    color: $lime-900;
+  }
+
+  &.inprogress {
+    background-color: $cyan-100;
+    color: $cyan-900;
+  }
+
+  &.invalid {
+    color: $grey-600;
+  }
+
+  &.review {
+    background-color: $yellow-100;
+    color: $yellow-900;
+  }
+}
 </style>

src/components/TimelineEvent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline-event">
+  <div class="timeline-event" :class="{ 'align-top': isComment }">
     <p class="timeline-event-icon" :class="iconClass">
       <FontAwesomeIcon :icon="eventIcon" />
     </p>
@@ -81,29 +81,33 @@ export default {
 <style lang="scss" scoped>
 .timeline-event {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   margin-top: 20px;
 
+  &.align-top {
+    align-items: flex-start;
+  }
+
   .timeline-event-icon {
     flex: 0 0 30px;
     margin: 3px 5px;
-    background-color: #f7f6f4;
+    background-color: $grey-000;
     width: 30px;
     height: 30px;
     border-radius: 50px;
-    border: 3px solid #ddd;
+    border: 3px solid $grey-200;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #999;
+    color: $grey-400;
 
     &.primary {
       flex-basis: 40px;
       margin: 0;
       width: 40px;
       height: 40px;
-      background-color: #c43422;
+      background-color: $red-500;
-      color: #f7f6f4;
+      color: $grey-000;
       box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
     }
   }
@@ -119,18 +123,25 @@ export default {
     ::v-deep .event-title {
       padding: 5px 10px;
       line-height: 30px;
-      background-color: #eee;
-      border: 1px solid #ddd;
-      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
       z-index: 10;
-      position: relative;
+      color: $grey-600;
     }
 
-    ::v-deep .event-body {
+    &.comment {
-      background-color: #fff;
+      background-color: $white;
-      margin: 0 2px;
-      padding: 20px;
       box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
+      border-radius: 10px;
+
+      ::v-deep .event-title {
+        background-color: $grey-100;
+        color: $grey-700;
+        border-radius: 10px 10px 0 0;
+      }
+
+      ::v-deep .event-body {
+        margin: 0 2px;
+        padding: 20px;
+      }
     }
   }
 }

src/components/UserListItem.vue

@@ -33,11 +33,7 @@ export default {
   align-items: center;
 
   padding: 20px;
-  border-top: solid 1px #ddd;
+  border-top: solid 1px $grey-100;
-
-  &:hover {
-    background-color: #fff;
-  }
 
   img {
     margin-right: 20px;
@@ -51,7 +47,7 @@ export default {
 
   .metadata {
     margin: 0;
-    color: #777;
+    color: $grey-600;
   }
 }
 </style>

src/views/ProjectDetail.vue

@@ -69,9 +69,8 @@ export default {
   .tabs {
     list-style: none;
     display: flex;
-    //margin: 20px 15% 10px 15%;
     padding: 0;
-    border-bottom: solid 1px #ddd;
+    border-bottom: solid 1px $grey-200;
     text-align: center;
 
     .tab {
@@ -82,12 +81,12 @@ export default {
       transition: 100ms ease-in-out all;
 
       &:hover {
-        box-shadow: 0 -1px 0 inset #c43422;
+        box-shadow: 0 -2px 0 inset $red-500;
       }
 
       &.active {
-        color: #c43422;
+        color: $red-500;
-        box-shadow: 0 -2px 0 inset #c43422;
+        box-shadow: 0 -4px 0 inset $red-500;
       }
     }
   }

src/views/ProjectGroupDetail.vue

@@ -69,9 +69,8 @@ export default {
   .tabs {
     list-style: none;
     display: flex;
-    //margin: 20px 15% 10px 15%;
     padding: 0;
-    border-bottom: solid 1px #ddd;
+    border-bottom: solid 1px $grey-200;
     text-align: center;
 
     .tab {
@@ -82,12 +81,12 @@ export default {
       transition: 100ms ease-in-out all;
 
       &:hover {
-        box-shadow: 0 -1px 0 inset #c43422;
+        box-shadow: 0 -2px 0 inset $red-500;
       }
 
       &.active {
-        color: #c43422;
+        color: $red-500;
-        box-shadow: 0 -2px 0 inset #c43422;
+        box-shadow: 0 -4px 0 inset $red-500;
       }
     }
   }

src/views/ProjectGroupList.vue

@@ -54,6 +54,6 @@ export default {
 <style lang="scss" scoped>
 .svg-inline--fa {
   margin-right: 30px;
-  color: #999;
+  color: $grey-400;
 }
 </style>

src/views/ProjectList.vue

@@ -54,6 +54,6 @@ export default {
 <style lang="scss" scoped>
 .svg-inline--fa {
   margin-right: 30px;
-  color: #999;
+  color: $grey-400;
 }
 </style>

src/views/StoryDetail.vue

@@ -125,15 +125,10 @@ export default {
   h1 {
     margin: 0;
     padding: 0;
-
-    .svg-inline--fa {
-      color: #999;
-      margin-right: 20px;
-    }
   }
 
   .metadata {
-    color: #959492;
+    color: $grey-600;
 
     p {
       margin: 5px 0;
@@ -158,7 +153,7 @@ h2 {
 }
 
 .svg-inline--fa {
-  color: #777;
+  color: $grey-400;
   margin-right: 10px;
 }
 
@@ -187,29 +182,21 @@ h2 {
   margin: 10px;
   padding: 30px;
   border-radius: 5px;
-  background-color: #fff;
+  background-color: $white;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
 }
 
 .tag {
   padding: 6px 12px;
   margin: 0 5px;
-  background-color: #f0ad4e;
+  background-color: $yellow-100;
-  color: #f7f6f4;
+  color: $yellow-900;
   border-radius: 20px;
 }
 
 .task-list {
-  .task-list-entry {
+  .task-list-entry:nth-of-type(even) {
-    border-top: solid 1px #ddd;
+    background-color: $grey-050;
-
-    &:nth-of-type(even) {
-      background-color: #f7f6f4;
-    }
-
-    &:last-of-type {
-      border-bottom: solid 1px #ddd;
-    }
   }
 }
 
@@ -224,7 +211,7 @@ h2 {
     height: calc(100% - 20px);
     left: 21px;
     top: 20px;
-    background-color: #ddd;
+    background-color: $grey-300;
     z-index: -1;
   }
 }

src/views/StoryList.vue

@@ -57,6 +57,6 @@ export default {
 <style lang="scss" scoped>
 .svg-inline--fa {
   margin-right: 30px;
-  color: #999;
+  color: $grey-400;
 }
 </style>

src/views/UserDetail.vue

@@ -91,7 +91,7 @@ export default {
 
   .metadata {
     margin: 0;
-    color: #777;
+    color: $grey-600;
   }
 
   .tabs {
@@ -99,7 +99,7 @@ export default {
     display: flex;
     margin: 20px 15% 10px 15%;
     padding: 0;
-    border-bottom: solid 1px #ddd;
+    border-bottom: solid 1px $grey-200;
 
     .tab {
       flex: 1 1 0;
@@ -109,12 +109,12 @@ export default {
       transition: 100ms ease-in-out all;
 
       &:hover {
-        box-shadow: 0 -2px 0 inset #c43422;
+        box-shadow: 0 -2px 0 inset $red-500;
       }
 
       &.active {
-        color: #c43422;
+        color: $red-500;
-        box-shadow: 0 -4px 0 inset #c43422;
+        box-shadow: 0 -4px 0 inset $red-500;
       }
     }
   }