Improve style pt. 1

app/javascript/stylesheets/components/Board.scss

@@ -8,10 +8,11 @@
 
   .sidebar {
     position: sticky;
-    top: 20px;
+    top: 60px;
 
     .sidebarBox {
       width: 250px;
+      margin-right: 16px;
     }
   }
 
@@ -29,20 +30,27 @@
     }
   }
 
+  .newBoardContainer {
+    background-color: $astuto-grey;
+    text-align: center;
+
+    .boardTitle {
+      font-size: 25px;
+      font-weight: 600;
+    }
+  }
+
   .sidebarBox {
     @extend
+      .card,
       .d-flex,
       .flex-column,
       .justify-content-start,
       .align-items-center,
       .flex-grow-0,
-      .flex-shrink-0;
-
-    border: thin solid black;
-    border-radius: 4px;
-
-    margin: 8px;
-    padding: 8px;
+      .flex-shrink-0,
+      .my-3,
+      .p-2;
   }
 
   .postStatusListItemContainer {
@@ -63,10 +71,12 @@
     height: 40px;
 
     &:hover {
+      filter: brightness(90%);
       cursor: pointer;
+    }
 
-      background-color: #f5f5f5;
-      border-radius: 4px;
+    span.badge {
+      display: block; font-size: 15px;
     }
   }
 
@@ -74,6 +84,7 @@
     @extend
       .flex-grow-0,
       .flex-shrink-0,
+      .rounded-circle,
       .align-self-center,
       .p-0;
 
@@ -89,33 +100,38 @@
   }
 
   .postLink {
+    @extend .my-3;
+    
     display: block;
-    border-radius: 4px;
-    margin: 8px 0;
     color: black;
 
-    &:hover {
-      text-decoration: none;
-      background-color: #f5f5f5;
-    }
+    &:hover { text-decoration: none; }
   }
 
   .postListItem {
     @extend
+      .card3D,
       .d-flex,
       .flex-column,
       .justify-content-between,
-      .m-0,
-      .px-2,
-      .py-1;
+      .p-3;
 
-    height: 114px;
+    height: 140px;
+  }
+
+  .postTitle {
+    @extend
+      .font-weight-bold;
   }
 
   .postDetails {
     @extend
       .d-flex,
-      .justify-content-between,
+      .justify-content-start,
       .text-uppercase;
+
+    .badge {
+      @extend .mr-2;
+    }
   }
 }

app/javascript/stylesheets/components/Roadmap.scss

@@ -8,9 +8,10 @@
     @extend
       .card,
       .my-2,
-      .px-2;
+      .p-0;
 
     width: 32%;
+    background-color: $astuto-grey;
 
     @media (max-width: 800px) {
       width: 100%;
@@ -20,27 +21,31 @@
   .columnHeader {
     @extend
       .card-header,
-      .d-flex,
-      .bg-transparent;
+      .d-flex;
+
+    .columnTitle {
+      color: white;
+    }
   }
 
   .scrollContainer {
-    @extend
-      .card-body;
-
     overflow-y: auto;
     max-height: 350px;
   }
 
-  .postLink:hover {
-    text-decoration: none;
+  .postLink {
+    @extend
+      .my-2;
+
+    &:hover { text-decoration: none; }
   }
 
   .postListItem {
     @extend
+      .card3D,
       .d-flex,
       .flex-column,
-      .my-1,
+      .m-2,
       .py-2;
   }
 }

app/javascript/stylesheets/constants/_colors.scss

@@ -0,0 +1,2 @@
+$astuto-grey: rgba(178, 178, 178, 0.15);
+$muted-text-color: #6c757d;

app/javascript/stylesheets/general/_components.scss

@@ -0,0 +1,37 @@
+.card {
+  @extend .card;
+
+  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.15);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+
+  color: #333;
+
+  padding: 8px;
+}
+
+.card3D {
+  @extend
+    .card;
+
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+
+  &:hover {
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  }
+}
+
+.badge {
+  @extend
+    .badge,
+    .badge-pill,
+    .p-2;
+
+  font-size: 13px;
+}
+
+.badgeLight {
+  @extend .badge-light;
+
+  background-color: $astuto-grey;
+}

app/javascript/stylesheets/general/_custom_texts.scss

@@ -5,14 +5,17 @@
 
 .titleText {
   @extend
-   .text-dark,
    .font-weight-bolder;
 }
 
-.mutedText {
+.centeredText {
   @extend
-    .text-muted,
-    .text-center;
+    .text-center,
+    .p-2;
+}
+
+.mutedText {
+  color: $muted-text-color;
 }
 
 .uppercaseText {
@@ -20,6 +23,8 @@
     .text-secondary,
     .text-uppercase,
     .font-weight-lighter;
+  
+    font-size: 13px;
 }
 
 .successText {

app/javascript/stylesheets/general/_form.scss

@@ -1,5 +1,3 @@
-@import "node_modules/bootstrap/scss/variables";
-
 .field_with_errors {
   label {
     color: $danger;
@@ -8,4 +6,9 @@
   input {
     border-color: $danger;
   }
+}
+
+.form-control:focus {
+  border-color: $astuto-grey;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(0, 0, 0, 0.6);
 }

app/javascript/stylesheets/general/_navbar.scss

@@ -1,15 +1,44 @@
 .navbar {
+  position: sticky;
+  z-index: 1;
+  top: 0px;
+
+  background-color: white;
+
   border-bottom-width: 1px;
   border-bottom-style: solid;
-  border-bottom-color: black;
+  border-bottom-color: rgba(0, 0, 0, 0.25);
 
-  margin-bottom: 1.5em;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.15), 0 1px 8px rgba(0,0,0,0.15);
+
+  margin-bottom: 1em;
 
   .navbar-brand {
     font-size: 18pt;
     font-weight: 700;
   }
 
+  .boardsNav {
+    @extend
+      .navbar-nav,
+      .nav-pills,
+      .d-flex,
+      .flex-row,
+      .mr-auto;
+
+    .nav-item {
+      @extend
+        .badge,
+        .text-uppercase;
+
+      a { @extend .text-dark; }
+    }
+
+    .nav-item.active {
+      @extend .badgeLight;
+    }
+  }
+
   .fullname {
     vertical-align: middle;
 

app/javascript/stylesheets/main.scss

@@ -1,5 +1,8 @@
 @import 'vendors/bootstrap_custom';
 
+@import 'constants/colors';
+
+@import 'general/components';
 @import 'general/custom_texts';
 @import 'general/form';
 @import 'general/icons';