Refactor CSS pt. 3 (semantically @extend Bootstrap)

app/javascript/stylesheets/components/Board.scss

@@ -1,4 +1,20 @@
 .boardContainer {
+  @extend
+    .d-flex,
+    .justify-content-between,
+    .align-items-start;
+
+  flex-direction: row;
+
+  .sidebar {
+    position: sticky;
+    top: 20px;
+
+    .sidebarBox {
+      width: 250px;
+    }
+  }
+
   @media (max-width: 800px) {
     flex-direction: column;
 
@@ -13,26 +29,14 @@
     }
   }
 
-  @media (min-width: 801px) {
-    flex-direction: row;
-
-    .sidebar {
-      position: sticky;
-      top: 20px;
-
-      .sidebarBox {
-        width: 250px;
-      }
-    }
-  }
-
   .sidebarBox {
-    flex: 0 0 auto;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
+    @extend
+      .d-flex,
+      .flex-column,
+      .justify-content-start,
+      .align-items-center,
+      .flex-grow-0,
+      .flex-shrink-0;
 
     border: thin solid black;
     border-radius: 4px;
@@ -41,7 +45,21 @@
     padding: 8px;
   }
 
+  .postStatusListItemContainer {
+    @extend
+      .d-flex,
+      .align-self-stretch;
+  }
+
+  .postStatusListItemLink {
+    @extend
+      .flex-grow-1;
+  }
+
   .postStatusListItem {
+    @extend
+      .p-1;
+
     height: 40px;
 
     &:hover {
@@ -53,13 +71,21 @@
   }
 
   .resetFilter {
-    flex: 0 0 auto;
+    @extend
+      .flex-grow-0,
+      .flex-shrink-0,
+      .align-self-center,
+      .p-0;
+
     width: 30px;
     height: 30px;
+  }
 
-    padding: 0;
-
-    align-self: center;
+  .postList {
+    @extend
+      .d-flex,
+      .flex-column,
+      .flex-grow-1;
   }
 
   .postLink {
@@ -67,14 +93,29 @@
     border-radius: 4px;
     margin: 8px 0;
     color: black;
-  }
-  
-  .postLink:hover {
-    text-decoration: none;
-    background-color: #f5f5f5;
+
+    &:hover {
+      text-decoration: none;
+      background-color: #f5f5f5;
+    }
   }
 
   .postListItem {
+    @extend
+      .d-flex,
+      .flex-column,
+      .justify-content-between,
+      .m-0,
+      .px-2,
+      .py-1;
+
     height: 114px;
   }
+
+  .postDetails {
+    @extend
+      .d-flex,
+      .justify-content-between,
+      .text-uppercase;
+  }
 }

app/javascript/stylesheets/components/Roadmap.scss

@@ -1,17 +1,33 @@
 .roadmapColumns {
-  @media (max-width: 800px) {
-    .roadmapColumn {
+  @extend
+    .d-flex,
+    .justify-content-between,
+    .flex-wrap;
+
+  .roadmapColumn {
+    @extend
+      .card,
+      .my-2,
+      .px-2;
+
+    width: 32%;
+
+    @media (max-width: 800px) {
       width: 100%;
     }
   }
-  
-  @media (min-width: 801px) {
-    .roadmapColumn {
-      width: 32%;
-    }
+
+  .columnHeader {
+    @extend
+      .card-header,
+      .d-flex,
+      .bg-transparent;
   }
 
   .scrollContainer {
+    @extend
+      .card-body;
+
     overflow-y: auto;
     max-height: 350px;
   }
@@ -19,4 +35,12 @@
   .postLink:hover {
     text-decoration: none;
   }
+
+  .postListItem {
+    @extend
+      .d-flex,
+      .flex-column,
+      .my-1,
+      .py-2;
+  }
 }

app/javascript/stylesheets/general/_custom_texts.scss

@@ -0,0 +1,40 @@
+/*
+  This styles apply to custom texts defined in  
+  /app/javascript/components/shared/CustomTexts.tsx
+*/
+
+.titleText {
+  @extend
+   .text-dark,
+   .font-weight-bolder;
+}
+
+.mutedText {
+  @extend
+    .text-muted,
+    .text-center;
+}
+
+.uppercaseText {
+  @extend
+    .text-secondary,
+    .text-uppercase,
+    .font-weight-lighter;
+}
+
+.successText {
+  @extend
+    .text-success,
+    .text-center;
+}
+
+.dangerText {
+  @extend
+    .text-danger,
+    .text-center;
+}
+
+.descriptionText {
+  @extend
+    .text-muted;
+}

app/javascript/stylesheets/main.scss

@@ -1,12 +1,16 @@
 @import 'vendors/bootstrap_custom';
 
-@import 'general/index';
-@import 'general/navbar';
+@import 'general/custom_texts';
 @import 'general/form';
 @import 'general/icons';
+@import 'general/index';
+@import 'general/navbar';
 
 /*
   Components stylesheets are not imported here. Instead,
   they are imported in the specific React components
   that use them
-*/
+*/
+@import 'components/Board';
+@import 'components/Post';
+@import 'components/Roadmap';