UI done for video archiving

client/app/scss/grid.scss

@@ -0,0 +1,13 @@
+.archive-grid {
+  display: grid;
+  grid-gap: 5px;
+  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+
+  @include smallScreen() {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+
+  &__item {
+    height: 300px;
+  }
+}

client/app/scss/index.scss

@@ -1,5 +1,14 @@
 @import '~normalize.css/normalize.css';
 @import '~font-awesome/css/font-awesome.css';
+@import '~nprogress/nprogress.css';
+
+@import './mixins.scss';
+@import './variables.scss';
+
 @import './style.scss';
+
 @import './button.scss';
 @import './card.scss';
+@import './input.scss';
+@import './grid.scss';
+@import './nprogress.scss';

client/app/scss/input.scss

@@ -0,0 +1,14 @@
+.input {
+  line-height: 38px;
+  border-radius: 3px;
+  border: 1px solid $lightGray;
+  padding-left: 5px;
+  padding-right: 5px;
+  height: 38px;
+  background: $gray5;
+  color: $white;
+
+  &::placeholder {
+    font-size: 14px;
+  }
+}

client/app/scss/mixins.scss

@@ -3,3 +3,9 @@
     @content;
   }
 }
+
+@mixin smallScreen {
+  @media only screen and (max-width: 768px) {
+    @content;
+  }
+}

client/app/scss/nprogress.scss

@@ -0,0 +1,5 @@
+// override nprogress css
+
+#nprogress .bar {
+  background: $red;
+}

client/app/scss/style.scss

@@ -1,6 +1,3 @@
-@import './variables.scss';
-@import './mixins.scss';
-
 html {
   font-family: 'Roboto', sans-serif;
 }
@@ -29,13 +26,16 @@ i {
 body {
   background-color: $gray1;
   color: $white;
-  // padding-left: $navbarWidth;
 }
 
 .flex {
   display: flex;
 }
 
+.flex--v-center {
+  align-items: center;
+}
+
 .content {
   padding: 20px;
   @include tinyScreen {
@@ -43,16 +43,6 @@ body {
   }
 }
 
-.input {
-  border-radius: 3px;
-  border: 1px solid $lightGray;
-  padding-left: 5px;
-  padding-right: 5px;
-  height: 30px;
-  background: $gray5;
-  color: $white;
-}
-
 .column {
   flex: 1;
 
@@ -65,3 +55,19 @@ body {
   word-break: break-word;
   word-wrap: break-word;
 }
+
+.color {
+  &__red {
+    color: $red;
+  }
+
+  &__primary {
+    color: $primaryBlue;
+  }
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

client/app/scss/variables.scss

@@ -2,6 +2,7 @@ $navbarWidth: 200px;
 
 // colors
 $primaryBlue: #7289da;
+$red: #dd6e6e;
 $white: darken(white, 20%);
 
 $gray1: #2e3136;