Improve style pt. 1

app/javascript/components/Board/NewPost.tsx

@@ -142,8 +142,8 @@ class NewPost extends React.Component<Props, State> {
 
     return (
       <div className="newBoardContainer sidebarBox">
-        <TitleText>{board.name}</TitleText>
+        <span className="boardTitle">{board.name}</span>
-        <MutedText>{board.description}</MutedText>
+        <p><MutedText>{board.description}</MutedText></p>
         {
           isLoggedIn ?
             <Button

app/javascript/components/Board/PostList.tsx

@@ -6,7 +6,7 @@ import PostListItem from './PostListItem';
 import Spinner from '../shared/Spinner';
 import {
   DangerText,
-  MutedText,
+  CenteredMutedText,
 } from '../shared/CustomTexts';
 
 import IPost from '../../interfaces/IPost';
@@ -55,10 +55,7 @@ const PostList = ({
             />
           ))
         :
-          areLoading ?
+          areLoading ? <p></p> : <CenteredMutedText>There are no posts.</CenteredMutedText>
-            <MutedText>Loading...</MutedText>
-          :
-            <MutedText>There are no posts.</MutedText>
       }
     </InfiniteScroll>
   </div>

app/javascript/components/Board/PostListItem.tsx

@@ -16,7 +16,7 @@ interface Props {
 const PostListItem = ({ id, title, description, postStatus}: Props) => (
   <a href={`/posts/${id}`} className="postLink">
     <div className="postListItem">
-      <TitleText>{title}</TitleText>
+      <span className="postTitle">{title}</span>
       <DescriptionText limit={120}>{description}</DescriptionText>
 
       <div className="postDetails">

app/javascript/components/Roadmap/PostList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import PostListItem from './PostListItem';
-import { MutedText } from '../shared/CustomTexts';
+import { CenteredMutedText } from '../shared/CustomTexts';
 
 import IPostJSON from '../../interfaces/json/IPost';
 import IBoard from '../../interfaces/IBoard';
@@ -25,7 +25,7 @@ const PostList = ({ posts, boards }: Props) => (
           />
         ))
       :
-        <MutedText>There are no posts that have this status.</MutedText>
+        <CenteredMutedText>There are no posts that have this status.</CenteredMutedText>
     }
   </div>
 );

app/javascript/components/Roadmap/PostListByPostStatus.tsx

@@ -14,10 +14,9 @@ interface Props {
 }
 
 const PostListByPostStatus = ({ postStatus, posts, boards }: Props) => (
-  <div className="roadmapColumn" style={{borderColor: postStatus.color}}>
+  <div className="roadmapColumn">
     <div className="columnHeader"
-      style={{borderBottomColor: postStatus.color}}>
+      style={{backgroundColor: postStatus.color}}>
-      <div className="dot" style={{backgroundColor: postStatus.color}}></div>
       <div className="columnTitle"><TitleText>{postStatus.name}</TitleText></div>
     </div>
     <div className="scrollContainer">

app/javascript/components/shared/Button.tsx

@@ -11,7 +11,7 @@ interface Props {
 const Button = ({ children, onClick, className = '', outline = false}: Props) => (
   <button
     onClick={onClick}
-    className={`${className} btn btn-${outline ? 'outline-' : ''}dark my-2`}
+    className={`${className} btn btn-${outline ? 'outline-' : ''}dark`}
   >
     {children}
   </button>

app/javascript/components/shared/CommentsNumber.tsx

@@ -5,10 +5,7 @@ interface Props {
 }
 
 const CommentsNumber = ({ number }: Props) => (
-  <div className="d-flex">
+  <span className="badge badgeLight">{`${number} comment${number === 1 ? '' : 's'}`}</span>
-    <span className="comment icon"></span>
-    <span>{`${number} comment${number === 1 ? '' : 's'}`}</span>
-  </div>
 );
 
 export default CommentsNumber;

app/javascript/components/shared/CustomTexts.tsx

@@ -17,6 +17,10 @@ export const MutedText = ({ children }: Props) => (
   <span className="mutedText">{children}</span>
 );
 
+export const CenteredMutedText = ({ children }: Props) => (
+  <p className="centeredText"><span className="mutedText">{children}</span></p>
+);
+
 export const UppercaseText = ({ children }: Props) => (
   <span className="uppercaseText">{children}</span>
 );

app/javascript/components/shared/PostStatusLabel.tsx

@@ -7,10 +7,7 @@ const PostStatusLabel = ({
   name,
   color,
 }: IPostStatus) => (
-  <div style={{display: 'flex'}}>
+  <span className="badge" style={{backgroundColor: color, color: 'white'}}>{name}</span>
-    <div className="dot" style={{backgroundColor: color}}></div>
-    <span className="postStatusName">{name}</span>
-  </div>
 );
 
 export default PostStatusLabel;

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;
+      .flex-shrink-0,
-
+      .my-3,
-    border: thin solid black;
+      .p-2;
-    border-radius: 4px;
-
-    margin: 8px;
-    padding: 8px;
   }
 
   .postStatusListItemContainer {
@@ -63,10 +71,12 @@
     height: 40px;
 
     &:hover {
+      filter: brightness(90%);
       cursor: pointer;
+    }
 
-      background-color: #f5f5f5;
+    span.badge {
-      border-radius: 4px;
+      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 {
+    &:hover { text-decoration: none; }
-      text-decoration: none;
-      background-color: #f5f5f5;
-    }
   }
 
   .postListItem {
     @extend
+      .card3D,
       .d-flex,
       .flex-column,
       .justify-content-between,
-      .m-0,
+      .p-3;
-      .px-2,
-      .py-1;
 
-    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,
+      .d-flex;
-      .bg-transparent;
+
+    .columnTitle {
+      color: white;
+    }
   }
 
   .scrollContainer {
-    @extend
-      .card-body;
-
     overflow-y: auto;
     max-height: 350px;
   }
 
-  .postLink:hover {
+  .postLink {
-    text-decoration: none;
+    @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';

app/views/layouts/_header.html.erb

@@ -6,12 +6,12 @@
     </button>
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav nav-pills mr-auto">
+      <ul class="boardsNav">
         <%= render 'layouts/boards_menu_section', boards: @boards unless @boards.nil? %>
       </ul>
       <ul class="navbar-nav ml-auto">
         <% if user_signed_in? %>
-          <% if current_user.moderator? || current_user.admin? %>
+          <% if current_user.power_user? %>
             <li class="nav-item">
               <%= link_to 'Admin Panel', admin_root_path, class: 'nav-link', 'data-turbolinks': 'false' %>
             </li>

app/views/layouts/application.html.erb

@@ -5,6 +5,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="turbolinks-cache-control" content="no-cache">
 
     <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>