Refactor CSS (#116)

Refactor CSS files and structure. Also refactors some html and React components for a smarter use of CSS classes.

app/javascript/components/Board/BoardP.tsx

@@ -4,6 +4,7 @@ import NewPost from './NewPost';
 import SearchFilter from './SearchFilter';
 import PostStatusFilter from './PostStatusFilter';
 import PostList from './PostList';
+import Sidebar from '../common/Sidebar';
 
 import IBoard from '../../interfaces/IBoard';
 
@@ -74,7 +75,7 @@ class BoardP extends React.Component<Props> {
 
     return (
       <div className="boardContainer">
-        <div className="sidebar">
+        <Sidebar>
           <NewPost
             board={board}
             isLoggedIn={isLoggedIn}
@@ -92,7 +93,7 @@ class BoardP extends React.Component<Props> {
             currentFilter={filters.postStatusId}
             handleFilterClick={handlePostStatusFilterChange}
           />
-        </div>
+        </Sidebar>
 
         <PostList
           posts={posts.items}

app/javascript/components/Board/NewPost.tsx

@@ -3,12 +3,12 @@ import ReactMarkdown from 'react-markdown';
 import I18n from 'i18n-js';
 
 import NewPostForm from './NewPostForm';
-import Spinner from '../shared/Spinner';
+import Spinner from '../common/Spinner';
 import {
   DangerText,
   SuccessText,
-} from '../shared/CustomTexts';
+} from '../common/CustomTexts';
-import Button from '../shared/Button';
+import Button from '../common/Button';
 
 import IBoard from '../../interfaces/IBoard';
 import buildRequestHeaders from '../../helpers/buildRequestHeaders';
@@ -143,7 +143,7 @@ class NewPost extends React.Component<Props, State> {
     } = this.state;
 
     return (
-      <div className="newPostContainer sidebarCard">
+      <div className="newPostContainer sidebarBox">
         <span className="boardTitle">{board.name}</span>
 
         <ReactMarkdown

app/javascript/components/Board/NewPostForm.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import I18n from 'i18n-js';
 
-import Button from '../shared/Button';
+import Button from '../common/Button';
 
 interface Props {
   title: string;

app/javascript/components/Board/PostList.tsx

@@ -3,11 +3,11 @@ import I18n from 'i18n-js';
 import InfiniteScroll from 'react-infinite-scroller';
 
 import PostListItem from './PostListItem';
-import Spinner from '../shared/Spinner';
+import Spinner from '../common/Spinner';
 import {
   DangerText,
   CenteredMutedText,
-} from '../shared/CustomTexts';
+} from '../common/CustomTexts';
 
 import IPost from '../../interfaces/IPost';
 import IPostStatus from '../../interfaces/IPostStatus';

app/javascript/components/Board/PostListItem.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
 import LikeButton from '../../containers/LikeButton';
-import CommentsNumber from '../shared/CommentsNumber';
+import CommentsNumber from '../common/CommentsNumber';
-import PostStatusLabel from '../shared/PostStatusLabel';
+import PostStatusLabel from '../common/PostStatusLabel';
 
 import IPostStatus from '../../interfaces/IPostStatus';
 

app/javascript/components/Board/PostStatusFilter.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import I18n from 'i18n-js';
 
 import PostStatusListItem from './PostStatusListItem';
-import Spinner from '../shared/Spinner';
+import Spinner from '../common/Spinner';
-import { BoxTitleText, DangerText } from '../shared/CustomTexts';
+import { DangerText } from '../common/CustomTexts';
 
 import IPostStatus from '../../interfaces/IPostStatus';
+import SidebarBox from '../common/SidebarBox';
 
 interface Props {
   postStatuses: Array<IPostStatus>;
@@ -24,8 +25,7 @@ const PostStatusFilter = ({
   handleFilterClick,
   currentFilter,
 }: Props) => (
-  <div className="postStatusFilterContainer sidebarCard">
+  <SidebarBox title={I18n.t('board.filter_box.title')} customClass="postStatusFilterContainer">
-    <BoxTitleText>{I18n.t('board.filter_box.title')}</BoxTitleText>
     {
       postStatuses.map((postStatus, i) => (
         <PostStatusListItem
@@ -42,7 +42,7 @@ const PostStatusFilter = ({
     }
     { areLoading ? <Spinner /> : null }
     { error ? <DangerText>{error}</DangerText> : null }
-  </div>
+  </SidebarBox>
 );
 
 export default PostStatusFilter;

app/javascript/components/Board/PostStatusListItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import PostStatusLabel from '../shared/PostStatusLabel';
+import PostStatusLabel from '../common/PostStatusLabel';
-import Button from '../shared/Button';
+import Button from '../common/Button';
 
 interface Props {
   name: string;

app/javascript/components/Board/SearchFilter.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import I18n from 'i18n-js';
 
-import { BoxTitleText } from '../shared/CustomTexts';
+import SidebarBox from '../common/SidebarBox';
 
 interface Props {
   searchQuery: string;
@@ -9,9 +9,7 @@ interface Props {
 }
 
 const SearchFilter = ({ searchQuery, handleChange }: Props) => (
-  <div className="sidebarCard">
+  <SidebarBox title={I18n.t('board.search_box.title')}>
-    <BoxTitleText>{I18n.t('board.search_box.title')}</BoxTitleText>
-
     <input
       type="search"
       value={searchQuery}
@@ -19,7 +17,7 @@ const SearchFilter = ({ searchQuery, handleChange }: Props) => (
       id="searchPostInput"
       className="form-control"
     />
-  </div>
+  </SidebarBox>
 );
 
 export default SearchFilter;

app/javascript/components/Comments/Comment.tsx

@@ -4,8 +4,8 @@ import Gravatar from 'react-gravatar';
 import I18n from 'i18n-js';
 
 import NewComment from './NewComment';
-import Separator from '../shared/Separator';
+import Separator from '../common/Separator';
-import { MutedText } from '../shared/CustomTexts';
+import { MutedText } from '../common/CustomTexts';
 
 import { ReplyFormState } from '../../reducers/replyFormReducer';
 

app/javascript/components/Comments/CommentsP.tsx

@@ -3,12 +3,12 @@ import I18n from 'i18n-js';
 
 import NewComment from './NewComment';
 import CommentList from './CommentList';
-import Spinner from '../shared/Spinner';
+import Spinner from '../common/Spinner';
-import { DangerText } from '../shared/CustomTexts';
+import { DangerText } from '../common/CustomTexts';
 
 import IComment from '../../interfaces/IComment';
 import { ReplyFormState } from '../../reducers/replyFormReducer';
-import Separator from '../shared/Separator';
+import Separator from '../common/Separator';
 
 interface Props {
   postId: number;

app/javascript/components/Comments/NewComment.tsx

@@ -4,9 +4,9 @@ import Gravatar from 'react-gravatar';
 
 import NewCommentUpdateSection from './NewCommentUpdateSection';
 
-import Button from '../shared/Button';
+import Button from '../common/Button';
-import Spinner from '../shared/Spinner';
+import Spinner from '../common/Spinner';
-import { DangerText } from '../shared/CustomTexts';
+import { DangerText } from '../common/CustomTexts';
 
 interface Props {
   body: string;

app/javascript/components/Comments/NewCommentUpdateSection.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import I18n from 'i18n-js';
 
-import { MutedText } from '../shared/CustomTexts';
+import { MutedText } from '../common/CustomTexts';
 
 interface Props {
   postUpdateFlagValue: boolean;

app/javascript/components/Post/ActionBox.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import I18n from 'i18n-js';
 
-import Button from '../shared/Button';
+import { SmallMutedText } from '../common/CustomTexts';
-import { BoxTitleText, SmallMutedText } from '../shared/CustomTexts';
+import SidebarBox from '../common/SidebarBox';
+import Switch from '../common/Switch';
 
 interface Props {
   followed: boolean;
@@ -12,14 +13,14 @@ interface Props {
 }
 
 const ActionBox = ({followed, submitFollow, isLoggedIn}: Props) => (
-  <div className="actionBoxContainer">
+  <SidebarBox title={I18n.t('post.action_box.title')} customClass="actionBoxContainer">
-    <div className="actionBoxFollow">
+    <Switch
-      <BoxTitleText>{I18n.t('post.action_box.title')}</BoxTitleText>
+      onClick={isLoggedIn ? submitFollow : () => location.href = '/users/sign_in'}
-      <br />
+      label={I18n.t('post.action_box.follow_button')}
-      <Button onClick={isLoggedIn ? submitFollow : () => location.href = '/users/sign_in'} outline>
+      checked={followed}
-        { followed ? I18n.t('post.action_box.unfollow_button') : I18n.t('post.action_box.follow_button') }
+      htmlId="followSwitch"
-      </Button>
+    />
-      <br />
+    
     <SmallMutedText>
       { followed ?
         I18n.t('post.action_box.following_description')
@@ -27,8 +28,7 @@ const ActionBox = ({followed, submitFollow, isLoggedIn}: Props) => (
         I18n.t('post.action_box.not_following_description')
       }
     </SmallMutedText>
-    </div>
+  </SidebarBox>
-  </div>
 );
 
 export default ActionBox;

app/javascript/components/Post/LikeList.tsx

@@ -3,12 +3,12 @@ import I18n from 'i18n-js';
 import Gravatar from 'react-gravatar';
 
 import ILike from '../../interfaces/ILike';
-import Spinner from '../shared/Spinner';
+import Spinner from '../common/Spinner';
+import SidebarBox from '../common/SidebarBox';
 import {
-  BoxTitleText,
   DangerText,
   CenteredMutedText
-} from '../shared/CustomTexts';
+} from '../common/CustomTexts';
 
 interface Props {
   likes: Array<ILike>;
@@ -17,9 +17,7 @@ interface Props {
 }
 
 const LikeList = ({ likes, areLoading, error}: Props) => (
-  <div className="likeListContainer">
+  <SidebarBox title={I18n.t('post.likes_box.title')} customClass="likeListContainer">
-    <BoxTitleText>{I18n.t('post.likes_box.title')}</BoxTitleText>
-
     { areLoading ? <Spinner /> : null }
     { error ? <DangerText>{error}</DangerText> : null }
 
@@ -34,7 +32,7 @@ const LikeList = ({ likes, areLoading, error}: Props) => (
         ))
       }
     </div>
-  </div>
+  </SidebarBox>
 );
 
 export default LikeList;

app/javascript/components/Post/PostP.tsx

@@ -12,10 +12,11 @@ import ActionBox from './ActionBox';
 import LikeButton from '../../containers/LikeButton';
 import PostBoardSelect from './PostBoardSelect';
 import PostStatusSelect from './PostStatusSelect';
-import PostBoardLabel from '../shared/PostBoardLabel';
+import PostBoardLabel from '../common/PostBoardLabel';
-import PostStatusLabel from '../shared/PostStatusLabel';
+import PostStatusLabel from '../common/PostStatusLabel';
 import Comments from '../../containers/Comments';
-import { MutedText } from '../shared/CustomTexts';
+import { MutedText } from '../common/CustomTexts';
+import Sidebar from '../common/Sidebar';
 
 import { LikesState } from '../../reducers/likesReducer';
 import { CommentsState } from '../../reducers/commentsReducer';
@@ -101,8 +102,8 @@ class PostP extends React.Component<Props> {
     );
 
     return (
-      <div className="pageContainer">
+      <div className="postContainer">
-        <div className="sidebar">
+        <Sidebar>
           <PostUpdateList
             postUpdates={postUpdates}
             postStatuses={postStatuses}
@@ -122,10 +123,10 @@ class PostP extends React.Component<Props> {
 
             isLoggedIn={isLoggedIn}
           />
-        </div>
+        </Sidebar>
 
         <div className="postAndCommentsContainer">
-          <div className="postContainer">
+          <>
             <div className="postHeader">
             <LikeButton
               postId={post.id}
@@ -183,7 +184,7 @@ class PostP extends React.Component<Props> {
             </ReactMarkdown>
             
             <MutedText>{friendlyDate(post.createdAt)}</MutedText>
-          </div>
+          </>
 
           <Comments
             postId={this.props.postId}

app/javascript/components/Post/PostUpdateList.tsx

@@ -3,15 +3,16 @@ import ReactMarkdown from 'react-markdown';
 import Gravatar from 'react-gravatar';
 import I18n from 'i18n-js';
 
-import { BoxTitleText, DangerText, CenteredMutedText, MutedText } from '../shared/CustomTexts';
+import { DangerText, CenteredMutedText, MutedText } from '../common/CustomTexts';
-import Spinner from '../shared/Spinner';
+import Spinner from '../common/Spinner';
 
 import IComment from '../../interfaces/IComment';
 import IPostStatusChange from '../../interfaces/IPostStatusChange';
 import IPostStatus from '../../interfaces/IPostStatus';
 
 import friendlyDate from '../../helpers/datetime';
-import PostStatusLabel from '../shared/PostStatusLabel';
+import PostStatusLabel from '../common/PostStatusLabel';
+import SidebarBox from '../common/SidebarBox';
 
 interface Props {
   postUpdates: Array<IComment | IPostStatusChange>;
@@ -26,9 +27,7 @@ const PostUpdateList = ({
   areLoading,
   error,
 }: Props) => (
-  <div className="postUpdateListContainer">
+  <SidebarBox title={I18n.t('post.updates_box.title')} customClass="postUpdateListContainer">
-    <BoxTitleText>{I18n.t('post.updates_box.title')}</BoxTitleText>
-
     { areLoading ? <Spinner /> : null }
     { error ? <DangerText>{error}</DangerText> : null }
 
@@ -71,7 +70,7 @@ const PostUpdateList = ({
         ))
       }
     </div>
-  </div>
+  </SidebarBox>
 );
 
 export default PostUpdateList;

app/javascript/components/Roadmap/PostList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import PostListItem from './PostListItem';
-import { CenteredMutedText } from '../shared/CustomTexts';
+import { CenteredMutedText } from '../common/CustomTexts';
 
 import IPostJSON from '../../interfaces/json/IPost';
 import IBoard from '../../interfaces/IBoard';

app/javascript/components/Roadmap/PostListByPostStatus.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import PostList from './PostList';
-import { TitleText } from '../shared/CustomTexts';
+import { TitleText } from '../common/CustomTexts';
 
 import IPostStatus from '../../interfaces/IPostStatus';
 import IPostJSON from '../../interfaces/json/IPost';

app/javascript/components/Roadmap/PostListItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { TitleText, UppercaseText } from '../shared/CustomTexts';
+import { TitleText, UppercaseText } from '../common/CustomTexts';
 
 interface Props {
   id: number;

app/javascript/components/SiteSettings/Boards/BoardEditable.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import I18n from 'i18n-js';
 
 import { Draggable } from 'react-beautiful-dnd';
-import { DescriptionText } from '../../shared/CustomTexts';
+import { DescriptionText } from '../../common/CustomTexts';
 
-import DragZone from '../../shared/DragZone';
+import DragZone from '../../common/DragZone';
-import PostBoardLabel from '../../shared/PostBoardLabel';
+import PostBoardLabel from '../../common/PostBoardLabel';
-import Separator from '../../shared/Separator';
+import Separator from '../../common/Separator';
 import BoardForm from './BoardForm';
 
 interface Props {

app/javascript/components/SiteSettings/Boards/BoardForm.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import I18n from 'i18n-js';
 
-import Button from '../../shared/Button';
+import Button from '../../common/Button';
 
 interface Props {
   mode: 'create' | 'update';

app/javascript/components/SiteSettings/Boards/BoardsSiteSettingsP.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import I18n from 'i18n-js';
-
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 import BoardEditable from './BoardEditable';
 import BoardForm from './BoardForm';
-import SiteSettingsInfoBox from '../../shared/SiteSettingsInfoBox';
+import SiteSettingsInfoBox from '../../common/SiteSettingsInfoBox';
-import Spinner from '../../shared/Spinner';
+import Spinner from '../../common/Spinner';
+import Box from '../../common/Box';
+import { CenteredMutedText } from '../../common/CustomTexts';
+
 import { BoardsState } from '../../../reducers/boardsReducer';
-import { CenteredMutedText } from '../../shared/CustomTexts';
 import IBoard from '../../../interfaces/IBoard';
 
 interface Props {
@@ -89,8 +90,8 @@ class BoardsSiteSettingsP extends React.Component<Props> {
     } = this.props;
 
     return (
-      <React.Fragment>
+      <>
-        <div className="content">
+        <Box>
           <h2>{I18n.t('site_settings.boards.title')}</h2>
 
           {
@@ -124,16 +125,16 @@ class BoardsSiteSettingsP extends React.Component<Props> {
             :
               <CenteredMutedText>{I18n.t('site_settings.boards.empty')}</CenteredMutedText>
           }
-        </div>
+        </Box>
 
-        <div className="content">
+        <Box>
           <h2>{I18n.t('site_settings.boards.new')}</h2>
 
           <BoardForm mode='create' handleSubmit={this.handleSubmit} />
-        </div>
+        </Box>
 
         <SiteSettingsInfoBox areUpdating={settingsAreUpdating || boards.areLoading} error={settingsError} />
-      </React.Fragment>
+      </>
     );
   }
 }

app/javascript/components/SiteSettings/PostStatuses/PostStatusEditable.tsx

@@ -3,9 +3,9 @@ import I18n from 'i18n-js';
 
 import { Draggable } from 'react-beautiful-dnd';
 
-import PostStatusLabel from "../../shared/PostStatusLabel";
+import PostStatusLabel from "../../common/PostStatusLabel";
-import DragZone from '../../shared/DragZone';
+import DragZone from '../../common/DragZone';
-import Separator from '../../shared/Separator';
+import Separator from '../../common/Separator';
 import PostStatusForm from './PostStatusForm';
 
 interface Props {

app/javascript/components/SiteSettings/PostStatuses/PostStatusForm.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import I18n from 'i18n-js';
 
-import Button from '../../shared/Button';
+import Button from '../../common/Button';
 
 import padStart from '../../../helpers/padStart';
 

app/javascript/components/SiteSettings/PostStatuses/PostStatusesSiteSettingsP.tsx

@@ -5,11 +5,12 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import IPostStatus from '../../../interfaces/IPostStatus';
 
 import { PostStatusesState } from "../../../reducers/postStatusesReducer";
-import { CenteredMutedText } from '../../shared/CustomTexts';
+import { CenteredMutedText } from '../../common/CustomTexts';
-import SiteSettingsInfoBox from '../../shared/SiteSettingsInfoBox';
+import SiteSettingsInfoBox from '../../common/SiteSettingsInfoBox';
 import PostStatusForm from './PostStatusForm';
 import PostStatusEditable from './PostStatusEditable';
-import Spinner from '../../shared/Spinner';
+import Spinner from '../../common/Spinner';
+import Box from '../../common/Box';
 
 interface Props {
   authenticityToken: string;
@@ -84,8 +85,8 @@ class PostStatusesSiteSettingsP extends React.Component<Props> {
     const { postStatuses, settingsAreUpdating, settingsError } = this.props;
     
     return (
-      <React.Fragment>
+      <>
-        <div className="content">
+        <Box>
           <h2>{I18n.t('site_settings.post_statuses.title')}</h2>
 
           {
@@ -119,16 +120,16 @@ class PostStatusesSiteSettingsP extends React.Component<Props> {
             :
               <CenteredMutedText>{I18n.t('site_settings.post_statuses.empty')}</CenteredMutedText>
           }
-        </div>
+        </Box>
 
-        <div className="content">
+        <Box>
           <h2>{I18n.t('site_settings.post_statuses.new')}</h2>
 
           <PostStatusForm mode='create' handleSubmit={this.handleSubmit} />
-        </div>
+        </Box>
 
         <SiteSettingsInfoBox areUpdating={settingsAreUpdating || postStatuses.areLoading} error={settingsError} />
-      </React.Fragment>
+      </>
     );
   }
 }

app/javascript/components/common/Box.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface Props {
+  customClass?: string;
+  children: React.ReactNode;
+}
+
+const Box = ({ customClass, children }: Props) => (
+  <div className={`box ${customClass}`}>
+    {children}
+  </div>
+);
+
+export default Box;

app/javascript/components/common/Sidebar.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const Sidebar = ({ children }: Props) => (
+  <div className="sidebar">
+    {children}
+  </div>
+);
+
+export default Sidebar;

app/javascript/components/common/SidebarBox.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { BoxTitleText } from './CustomTexts';
+
+interface Props {
+  title: string;
+  customClass?: string;
+  children: React.ReactNode;
+}
+
+const SidebarBox = ({ title, customClass, children }: Props) => (
+  <div className={`sidebarBox ${customClass}`}>
+    <BoxTitleText>{title}</BoxTitleText>
+    {children}
+  </div>
+);
+
+export default SidebarBox;

app/javascript/components/common/SiteSettingsInfoBox.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import I18n from 'i18n-js';
 
 import Spinner from './Spinner';
+import Box from './Box';
 
 interface Props {
   areUpdating: boolean;
@@ -9,7 +10,7 @@ interface Props {
 }
 
 const SiteSettingsInfoBox = ({ areUpdating, error }: Props) => (
-  <div className="content siteSettingsInfo">
+  <Box customClass="siteSettingsInfo">
   {
     areUpdating ?
       <Spinner />
@@ -21,7 +22,7 @@ const SiteSettingsInfoBox = ({ areUpdating, error }: Props) => (
       :
         <span>{I18n.t('site_settings.info_box.up_to_date')}</span>
   }
-  </div>
+  </Box>
 );
 
 export default SiteSettingsInfoBox;

app/javascript/components/common/Switch.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface Props {
+  label?: string;
+  onClick: React.MouseEventHandler;
+  checked?: boolean;
+  htmlId?: string;
+}
+
+const Switch = ({ label, onClick, checked, htmlId }: Props) => (
+  <div className="checkboxSwitch">
+    <input type="checkbox" id={htmlId} onClick={onClick} checked={checked} />
+    <label htmlFor={htmlId}>{label}</label>
+  </div>
+);
+
+export default Switch;

app/javascript/packs/bootstrap_custom.js

@@ -1,13 +1,5 @@
 import 'bootstrap/js/dist/alert'
 import 'bootstrap/js/dist/button'
-import 'bootstrap/js/dist/carousel'
 import 'bootstrap/js/dist/collapse'
 import 'bootstrap/js/dist/dropdown'
-import 'bootstrap/js/dist/index'
-import 'bootstrap/js/dist/modal'
-import 'bootstrap/js/dist/popover'
-import 'bootstrap/js/dist/scrollspy'
-import 'bootstrap/js/dist/tab'
-import 'bootstrap/js/dist/toast'
-import 'bootstrap/js/dist/tooltip'
 import 'bootstrap/js/dist/util'

app/javascript/packs/hello_erb.js.erb

@@ -1,3 +0,0 @@
-<% name = 'Erb' %>
-
-console.log('Hello world from <%= name %>')

app/javascript/stylesheets/common/_custom_texts.scss

@@ -24,7 +24,7 @@
 }
 
 .mutedText {
-  color: $muted-text-color;
+  color: $astuto-grey;
 }
 
 .smallMutedText {

app/javascript/stylesheets/common/_form.scss

@@ -9,7 +9,7 @@
 }
 
 .form-control:focus {
-  border-color: $astuto-grey;
+  border-color: $astuto-light-grey;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(0, 0, 0, 0.6);
 }
 
@@ -33,7 +33,7 @@
 
   margin-top: 24px;
 
-  a { color: $astuto-black; }
+  a { color: $primary-color; }
 }
 
 .switch {

app/javascript/stylesheets/common/_header.scss

@@ -1,4 +1,9 @@
-.navbar {
+.header {
+  @extend
+    .navbar,
+    .navbar-expand-md,
+    .navbar-light;
+
   position: sticky;
   z-index: 1;
   top: 0px;
@@ -13,7 +18,9 @@
 
   margin-bottom: 1em;
 
-  .navbar-brand {
+  .brand {
+    @extend .navbar-brand;
+
     font-size: 18pt;
     font-weight: 700;
 
@@ -27,7 +34,19 @@
     }
   }
 
+  .navbarToggler {
+    @extend .navbar-toggler;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
   .boardsNav {
+    @extend
+      .navbar-nav,
+      .mr-auto;
+
     .nav-item {
       @extend
         .badge,
@@ -42,25 +61,26 @@
     }
   }
 
+  .profileNav {
+    @extend
+      .navbar-nav,
+      .ml-auto;
+
+    .profileToggle {
+      @extend
+        .nav-link,
+        .dropdown-toggle;
+
+      &::after { vertical-align: middle; }
+    }
+
     .fullname {
-    vertical-align: middle;
-
       color: $astuto-black;
-  }
-
-  .dropdown-toggle::after {
       vertical-align: middle;
     }
-
-  .navbar-toggler:focus {
-    outline: none;
-  }
-
-  .navbar-toggler[aria-expanded="true"] {
-    background-color: $astuto-grey;
   }
 
   .dropdown-item:active {
-    background-color: $astuto-black;
+    background-color: $primary-color;
   }
 }

app/javascript/stylesheets/common/_index.scss

@@ -1,16 +1,10 @@
-a {
-  color: $astuto-black;
-
-  &:hover { color: inherit; }
-}
-
 .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: $astuto-black;
+  color: $primary-color;
 
   padding: 8px;
 }
@@ -27,7 +21,8 @@ a {
   }
 }
 
-.multiColumnContainer {
+// General container for pages with siderbar + main content
+.twoColumnsContainer {
   @extend
     .d-flex,
     .justify-content-between,
@@ -37,18 +32,17 @@ a {
 
   @include media-breakpoint-down(sm) {
     flex-direction: column;
-
-    .postAndCommentsContainer { width: 100%; }
   }
-}
 
-.multiRowContent {
+  // Make the main content full width
+  & > div:nth-child(2) {
     @extend
       .flex-grow-1,
       .w-100;
+  }
 }
 
-.content {
+.box {
   @extend
     .card,
     .flex-grow-1,
@@ -60,7 +54,13 @@ a {
   position: sticky;
   top: 79px;
 
-  .sidebarCard {
+  @include media-breakpoint-down(sm) {
+    position: relative;
+    width: 100%;
+    top: 0;
+  }
+
+  .sidebarBox {
     @extend
       .card,
       .d-flex,
@@ -74,6 +74,10 @@ a {
 
     width: 280px;
     margin-right: 16px;
+
+    @include media-breakpoint-down(sm) {
+      width: 100%;
+    }
   }
 }
 
@@ -85,8 +89,18 @@ a {
     .text-center,
     .align-self-stretch;
 
+  a {
+    color: $astuto-grey;
+    font-weight: 500;
+
+    &:hover {
+      color: $astuto-black;
+    }
+  }
+
   .nav-link.active {
-    background-color: $astuto-black;
+    color: $astuto-black;
+    background-color: $astuto-light-grey;
   }
 }
 
@@ -109,17 +123,6 @@ a {
   &:active { cursor: grabbing; }
 }
 
-
-@include media-breakpoint-down(sm) {
-  .sidebar {
-    position: relative;
-    width: 100%;
-    top: 0;
-
-    .sidebarCard { width: 100%; }
-  }
-}
-
 .badge {
   @extend
     .badge,
@@ -132,5 +135,41 @@ a {
 .badgeLight {
   @extend .badge-light;
 
-  background-color: $astuto-grey;
+  background-color: $astuto-light-grey;
+}
+
+.container {
+  max-width: 960px;
+}
+
+.turbolinks-progress-bar {
+  background-color: $primary-color;
+  height: 2px;
+}
+
+.gravatar {
+  border-radius: 100%;
+}
+
+.checkboxSwitch {
+  @extend 
+    .custom-control,
+    .custom-switch;
+
+  & > input[type="checkbox"] {
+    @extend .custom-control-input;
+  }
+
+  & > label {
+    @extend .custom-control-label;
+
+    &::before {
+      transform: scale(1.2);
+    }
+  }
+
+  & > input:checked ~ label::before {
+    background-color: $primary-color !important;
+    border-color: $primary-color !important;
+  }
 }

app/javascript/stylesheets/common/_scroll_shadows.scss

@@ -1,41 +1,3 @@
-/*
-  This stylesheet contains styles that are general and
-  could not be grouped in a file of their own
-*/
-
-.container {
-  max-width: 960px;
-}
-
-.turbolinks-progress-bar {
-  background-color: $astuto-black;
-  height: 2px;
-}
-
-.gravatar {
-  border-radius: 100%;
-}
-
-.dot {
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-right: 4px;
-}
-
-.loginInfo {
-  text-decoration: underline;
-}
-
-.btn {
-  color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
-}
-
 // Credits: https://codepen.io/chriscoyier/pen/YzXBYvL
 .scroll-shadows {
   max-height: 200px;

app/javascript/stylesheets/components/Board.scss

@@ -1,14 +1,7 @@
 .boardContainer {
-  @extend
+  @extend .twoColumnsContainer;
-    .d-flex,
-    .justify-content-between,
-    .align-items-start;
-
-  flex-direction: row;
 
   @include media-breakpoint-down(sm) {
-    flex-direction: column;
-
     .postStatusFilterContainer {
       flex-direction: row !important;
       flex-wrap: wrap;
@@ -18,7 +11,7 @@
   }
 
   .newPostContainer {
-    background-color: $astuto-grey;
+    background-color: $astuto-light-grey;
     text-align: center;
 
     .boardTitle {
@@ -91,7 +84,7 @@
       .p-3;
 
     height: 140px;
-    color: $astuto-black;
+    color: $primary-color;
 
     @include media-breakpoint-down(sm) {
       height: auto;

app/javascript/stylesheets/components/Comments.scss

@@ -95,7 +95,7 @@
       font-size: 14px;
 
       .commentLink {
-        color: $astuto-black;
+        color: $primary-color;
 
         &:hover {
           text-decoration: underline;

app/javascript/stylesheets/components/LikeButton.scss

@@ -15,13 +15,13 @@
     border-bottom: $like_button_size solid rgba(35,35,35,.2);
 
     &:hover {
-      border-bottom-color: $astuto-black;
+      border-bottom-color: $primary-color;
       cursor: pointer;
     }
   }
 
   .likeButton.liked {
-    border-bottom-color: $astuto-black;
+    border-bottom-color: $primary-color;
   }
 
   .likesCountLabel {

app/javascript/stylesheets/components/Post.scss

@@ -1,10 +1,5 @@
-.pageContainer {
+.postContainer {
-  @extend
+  @extend .twoColumnsContainer;
-    .d-flex,
-    .justify-content-between,
-    .align-items-start;
-
-  flex-direction: row;
 
   @include media-breakpoint-down(sm) {
     flex-direction: column;
@@ -14,8 +9,6 @@
 
   .sidebar {
     .postUpdateListContainer {
-      @extend .sidebarCard;
-
       .postUpdateList {
         @extend
           .scroll-shadows,
@@ -63,8 +56,6 @@
     }
 
     .likeListContainer {
-      @extend .sidebarCard;
-
       .likeList {
         @extend
           .scroll-shadows,
@@ -86,14 +77,12 @@
     }
 
     .actionBoxContainer {
-      @extend
+      @extend .text-center;
-        .sidebarCard,
-        .text-center;
 
-      .btn {
+      .checkboxSwitch {
         @extend
-          .mt-3,
+          .mt-1,
-          .mb-1;
+          .mb-2;
       }
     }
   }
@@ -141,7 +130,7 @@
       @extend
         .my-3;
 
-      color: $astuto-black;
+      color: $primary-color;
     }
   }
 }

app/javascript/stylesheets/components/Roadmap.scss

@@ -11,7 +11,7 @@
       .p-0;
 
     width: 32%;
-    background-color: $astuto-grey;
+    background-color: $astuto-light-grey;
 
     @include media-breakpoint-down(sm) {
       width: 100%;

app/javascript/stylesheets/constants/_colors.scss

@@ -1,3 +1,5 @@
+$primary-color: #333;
+
 $astuto-black: #333;
-$astuto-grey: rgba(178, 178, 178, 0.15);
+$astuto-grey: rgba(0, 0, 0, 0.5);
-$muted-text-color: #6c757d;
+$astuto-light-grey: rgba(178, 178, 178, 0.2);

app/javascript/stylesheets/main.scss

@@ -2,11 +2,11 @@
 
 @import 'constants/colors';
 
-@import 'general/components';
+@import 'common/index';
-@import 'general/custom_texts';
+@import 'common/custom_texts';
-@import 'general/form';
+@import 'common/form';
-@import 'general/header';
+@import 'common/header';
-@import 'general/index';
+@import 'common/scroll_shadows';
 
 /* Components */
 @import 'components/Board';

app/views/layouts/_header.html.erb

@@ -1,26 +1,35 @@
-<nav class="navbar navbar-expand-md navbar-light">
+<nav class="header">
   <div class="container">
     <%=
-      link_to root_path, class: 'navbar-brand' do
+      link_to root_path, class: 'brand' do
         app_name = content_tag :span, Rails.application.name
         logo = image_tag(asset_pack_path('media/images/logo.png'), class: 'logo')
 
         Rails.application.show_logo? ? logo + app_name : app_name
       end
     %>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+
+    <button
+      class="navbarToggler"
+      type="button"
+      data-toggle="collapse"
+      data-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
       <span class="navbar-toggler-icon"></span>
     </button>
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="boardsNav navbar-nav mr-auto">
+      <ul class="boardsNav">
-        <%= render 'layouts/boards_menu_section', boards: @boards unless @boards.nil? %>
+        <%= render 'layouts/boards_nav_section', boards: @boards unless @boards.nil? %>
       </ul>
-      <ul class="navbar-nav ml-auto">
-        <% if user_signed_in? %>
 
+      <ul class="profileNav">
+        <% if user_signed_in? %>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <a class="profileToggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <%= image_tag(current_user.gravatar_url, class: 'gravatar', alt: current_user.full_name, size: 24) %>
               <span class="fullname"><%= current_user.full_name %></span>
             </a>
@@ -30,8 +39,11 @@
                 <%= link_to t('header.menu.admin_panel'), admin_root_path, class: 'dropdown-item', 'data-turbolinks': 'false' %>
                 <div class="dropdown-divider"></div>
               <% end %>
+
               <%= link_to t('header.menu.profile_settings'), edit_user_registration_path, class: 'dropdown-item' %>
+
               <div class="dropdown-divider"></div>
+
               <%= link_to t('header.menu.sign_out'), destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
             </div>
           </li>

app/views/site_settings/_menu.html.erb

@@ -1,6 +1,7 @@
 <div class="sidebar">
-  <div class="sidebarCard">
+  <div class="sidebarBox">
     <span class="boxTitleText"><%= t('site_settings.menu.title') %></span>
+    
     <div class="verticalNavigation" role="tablist" aria-orientation="vertical">
       <%= render 'menu_link', label: t('site_settings.menu.boards'), path: site_settings_boards_path %>
       <%= render 'menu_link', label: t('site_settings.menu.post_statuses'), path: site_settings_post_statuses_path %>

app/views/site_settings/boards.html.erb

@@ -1,6 +1,6 @@
-<div class="multiColumnContainer">
+<div class="twoColumnsContainer">
   <%= render 'menu' %>
-  <div class="multiRowContent">
+  <div>
     <%=
       react_component(
         'SiteSettings/Boards',

app/views/site_settings/general.html.erb

@@ -1,4 +1,4 @@
-<div class="multiColumnContainer">
+<div class="twoColumnsContainer">
   <%= render 'menu' %>
 
   <div class="content">

app/views/site_settings/post_statuses.html.erb

@@ -1,6 +1,6 @@
-<div class="multiColumnContainer">
+<div class="twoColumnsContainer">
   <%= render 'menu' %>
-  <div class="multiRowContent">
+  <div>
     <%=
       react_component(
         'SiteSettings/PostStatuses',

config/locales/en.yml

@@ -85,8 +85,7 @@ en:
       empty: 'There are no likes yet'
     action_box:
       title: 'Actions'
-      follow_button: 'Follow'
+      follow_button: 'Follow post'
-      unfollow_button: 'Unfollow'
       following_description: "you're receiving notifications about new updates on this post"
       not_following_description: "you won't receive notifications about this post"
     comments:

config/locales/it.yml

@@ -85,8 +85,7 @@ it:
       empty: 'Non ci sono mi piace per ora'
     action_box:
       title: 'Azioni'
-      follow_button: 'Segui'
+      follow_button: 'Segui post'
-      unfollow_button: 'Non seguire più'
       following_description: 'riceverai notifiche sugli aggiornamenti di questo post'
       not_following_description: 'non riceverai alcuna notifica riguardo questo post'
     comments:

spec/views/header_spec.rb

@@ -11,7 +11,7 @@ RSpec.describe 'header', type: :view do
   it 'renders a logo' do
     render_header
 
-    expect(rendered).to have_selector('.navbar-brand')
+    expect(rendered).to have_selector('.brand')
   end
 
   it 'renders a link for each board' do