Add ReactIcons (#149)

app/javascript/stylesheets/common/_index.scss

@@ -187,4 +187,25 @@
 .link {
   cursor: pointer;
   &:hover { text-decoration: underline; }
+}
+
+.actionLink {
+  display: flex;
+  cursor: pointer;
+  align-self: center;
+  margin-right: 12px;
+  
+  &:hover { text-decoration: underline !important; }
+
+  svg {
+    margin-right: 4px;
+    align-self: center;
+  }
+
+  &.actionLinkDisabled {
+    color: $astuto-grey !important;
+  
+    text-decoration: none !important;
+    cursor: not-allowed;
+  }
 }

app/javascript/stylesheets/components/Comments.scss

@@ -1,15 +1,6 @@
 .commentsContainer {
   @extend .my-3;
 
-  a.commentLink {
-    color: $primary-color;
-
-    &:hover {
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-
   .commentForm {
     @extend
       .form-control,
@@ -41,7 +32,7 @@
         .justify-content-between,
         .mt-3;
 
-      margin-left: 48px;
+      margin-left: 58px;
     }
 
     .currentUserAvatar {
@@ -71,6 +62,8 @@
         .d-flex,
         .justify-content-between;
     }
+
+    .editCommentFormActions { @extend .d-flex; }
   }
 
   .commentsTitle {
@@ -113,7 +106,9 @@
     }
 
     .commentFooter {
-      font-size: 14px;
+      @extend .d-flex;
+
+      font-size: 13px;
     }
   }
 }

app/javascript/stylesheets/components/Post.scss

@@ -141,12 +141,7 @@
         .postAuthorAvatar { @extend .gravatar; }
       }
 
-      a {
-        &:hover {
-          cursor: pointer;
-          text-decoration: underline;
-        }
-      }
+      .postFooterActions { @extend .d-flex; }
     }
 
     .postEditForm {
@@ -155,14 +150,7 @@
       }
 
       .postEditFormButtons {
-        text-align: right;
-
-        a {
-          &:hover {
-            cursor: pointer;
-            text-decoration: underline;
-          }
-        }
+        @extend .d-flex, .justify-content-end;
       }
     }
   }

app/javascript/stylesheets/components/Roadmap.scss

@@ -25,6 +25,7 @@
 
     .columnTitle {
       color: white;
+      text-transform: uppercase;
     }
   }
 

app/javascript/stylesheets/components/SiteSettings/Authentication/index.scss

@@ -34,11 +34,9 @@
       }
       
       .oAuthActions {
-        align-self: center;
+        @extend .d-flex;
 
-        a {
-          @extend .link;
-        }
+        align-self: center;
       }
     }
   }
@@ -46,12 +44,8 @@
 
 .authenticationFormPage {
   a.backButton {
-    @extend .mb-2;
+    @extend .mb-2, .align-self-start;
 
     font-size: 18px;
   }
-
-  a.link {
-    @extend .link;
-  }
 }

app/javascript/stylesheets/components/SiteSettings/Boards/index.scss

@@ -13,12 +13,6 @@
 
     column-gap: 32px;
 
-    a {
-      cursor: pointer;
-
-      &:hover { text-decoration: underline; }
-    }
-
     .boardInfo {
       @extend
         .d-flex,
@@ -30,8 +24,8 @@
       .boardDescription { @extend .text-center; }
     }
 
-    .boardEditableActions, .boardFormCancelButton {
-      @extend .align-self-center;
+    .boardEditableActions {
+      @extend .d-flex, .align-self-center;
     }
   }
 }

app/javascript/stylesheets/components/SiteSettings/PostStatuses/index.scss

@@ -11,15 +11,7 @@
       .justify-content-between,
       .p-3;
 
-    a {
-      cursor: pointer;
-
-      &:hover { text-decoration: underline; }
-    }
-
-    .postStatusFormCancelButton {
-      align-self: center;
-    }
+    .postStatusEditableActions { @extend .d-flex; }
   }
 }
 

app/javascript/stylesheets/components/SiteSettings/Roadmap/index.scss

@@ -45,6 +45,7 @@
 
       color: white;
       padding: 8px 4px;
+      text-transform: uppercase;
 
       .titleText { @extend .align-self-center; }
     }

app/javascript/stylesheets/components/SiteSettings/Users/index.scss

@@ -30,7 +30,7 @@ ul.usersList {
     }
 
     .userEditableActions {
-      @extend .align-self-center;
+      @extend .d-flex, .align-self-center;
     }
 
     .userForm {
@@ -41,24 +41,8 @@ ul.usersList {
       }
     }
 
-    .updateUserButton { @extend .align-self-center; }
-
-    .userEditCancelButton { @extend .align-self-center; }
-
-    a {
-      cursor: pointer;
-
-      &:hover { text-decoration: underline; }
-    }
-
-    a.actionDisabled {
-      @extend .mutedText;
-
-      text-decoration: none;        
-      cursor: not-allowed;
-    }
-
     .updateUserButton {
+      @extend .align-self-center;
       margin-left: 16px;
     }
 

app/javascript/stylesheets/icons/drag_icon.scss

@@ -1,28 +0,0 @@
-/* Code taken from: https://gist.github.com/JakeSidSmith/83c324dbe7e4d91ee8c52525b1d504d9 */
-/* Thanks JakeSidSmith */
-
-span.drag-icon {
-  display: inline-block;
-  width: 16px;
-  height: 8px;
-}
-
-span.drag-icon,
-span.drag-icon::before {
-  background-image: radial-gradient(black 40%, transparent 40%);
-  background-size: 4px 4px;
-  background-position: 0 100%;
-  background-repeat: repeat-x;
-}
-
-span.drag-icon.drag-icon-white,
-span.drag-icon.drag-icon-white::before {
-  background-image: radial-gradient(white 40%, transparent 40%);
-}
-
-span.drag-icon::before {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 33%;
-}

app/javascript/stylesheets/main.scss

@@ -22,7 +22,4 @@
   @import 'components/SiteSettings/PostStatuses';
   @import 'components/SiteSettings/Roadmap';
   @import 'components/SiteSettings/Users';
-  @import 'components/SiteSettings/Authentication';
-
-/* Icons */
-@import 'icons/drag_icon';
+  @import 'components/SiteSettings/Authentication';