Refactor CSS (#116)

Refactor CSS files and structure. Also refactors some html and React components for a smarter use of CSS classes.
2025-12-15 11:17:49 +01:00 · 2022-06-08 10:20:36 +02:00
parent 35c427d9f6
commit 8e75a85873
61 changed files with 329 additions and 262 deletions
--- a/app/javascript/components/Board/BoardP.tsx
+++ b/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}
--- a/app/javascript/components/Board/NewPost.tsx
+++ b/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';
-import Button from '../shared/Button';
+} from '../common/CustomTexts';
+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
--- a/app/javascript/components/Board/NewPostForm.tsx
+++ b/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;
--- a/app/javascript/components/Board/PostList.tsx
+++ b/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';
--- a/app/javascript/components/Board/PostListItem.tsx
+++ b/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 PostStatusLabel from '../shared/PostStatusLabel';
+import CommentsNumber from '../common/CommentsNumber';
+import PostStatusLabel from '../common/PostStatusLabel';

 import IPostStatus from '../../interfaces/IPostStatus';

--- a/app/javascript/components/Board/PostStatusFilter.tsx
+++ b/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 { BoxTitleText, DangerText } from '../shared/CustomTexts';
+import Spinner from '../common/Spinner';
+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">
-    <BoxTitleText>{I18n.t('board.filter_box.title')}</BoxTitleText>
+  <SidebarBox title={I18n.t('board.filter_box.title')} customClass="postStatusFilterContainer">
    {
      postStatuses.map((postStatus, i) => (
        <PostStatusListItem
@@ -42,7 +42,7 @@ const PostStatusFilter = ({
    }
    { areLoading ? <Spinner /> : null }
    { error ? <DangerText>{error}</DangerText> : null }
-  </div>
+  </SidebarBox>
 );

 export default PostStatusFilter;
--- a/app/javascript/components/Board/PostStatusListItem.tsx
+++ b/app/javascript/components/Board/PostStatusListItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';

-import PostStatusLabel from '../shared/PostStatusLabel';
-import Button from '../shared/Button';
+import PostStatusLabel from '../common/PostStatusLabel';
+import Button from '../common/Button';

 interface Props {
  name: string;
--- a/app/javascript/components/Board/SearchFilter.tsx
+++ b/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">
-    <BoxTitleText>{I18n.t('board.search_box.title')}</BoxTitleText>
-
+  <SidebarBox title={I18n.t('board.search_box.title')}>
    <input
      type="search"
      value={searchQuery}
@@ -19,7 +17,7 @@ const SearchFilter = ({ searchQuery, handleChange }: Props) => (
      id="searchPostInput"
      className="form-control"
    />
-  </div>
+  </SidebarBox>
 );

 export default SearchFilter;
--- a/app/javascript/components/Comments/Comment.tsx
+++ b/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 { MutedText } from '../shared/CustomTexts';
+import Separator from '../common/Separator';
+import { MutedText } from '../common/CustomTexts';

 import { ReplyFormState } from '../../reducers/replyFormReducer';

--- a/app/javascript/components/Comments/CommentsP.tsx
+++ b/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 { DangerText } from '../shared/CustomTexts';
+import Spinner from '../common/Spinner';
+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;
--- a/app/javascript/components/Comments/NewComment.tsx
+++ b/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 Spinner from '../shared/Spinner';
-import { DangerText } from '../shared/CustomTexts';
+import Button from '../common/Button';
+import Spinner from '../common/Spinner';
+import { DangerText } from '../common/CustomTexts';

 interface Props {
  body: string;
--- a/app/javascript/components/Comments/NewCommentUpdateSection.tsx
+++ b/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;
--- a/app/javascript/components/Post/ActionBox.tsx
+++ b/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 { BoxTitleText, SmallMutedText } from '../shared/CustomTexts';
+import { SmallMutedText } from '../common/CustomTexts';
+import SidebarBox from '../common/SidebarBox';
+import Switch from '../common/Switch';

 interface Props {
  followed: boolean;
@@ -12,23 +13,22 @@ interface Props {
 }

 const ActionBox = ({followed, submitFollow, isLoggedIn}: Props) => (
-  <div className="actionBoxContainer">
-    <div className="actionBoxFollow">
-      <BoxTitleText>{I18n.t('post.action_box.title')}</BoxTitleText>
-      <br />
-      <Button onClick={isLoggedIn ? submitFollow : () => location.href = '/users/sign_in'} outline>
-        { followed ? I18n.t('post.action_box.unfollow_button') : I18n.t('post.action_box.follow_button') }
-      </Button>
-      <br />
-      <SmallMutedText>
-        { followed ?
-          I18n.t('post.action_box.following_description')
-          :
-          I18n.t('post.action_box.not_following_description')
-        }
-      </SmallMutedText>
-    </div>
-  </div>
+  <SidebarBox title={I18n.t('post.action_box.title')} customClass="actionBoxContainer">
+    <Switch
+      onClick={isLoggedIn ? submitFollow : () => location.href = '/users/sign_in'}
+      label={I18n.t('post.action_box.follow_button')}
+      checked={followed}
+      htmlId="followSwitch"
+    />
+    
+    <SmallMutedText>
+      { followed ?
+        I18n.t('post.action_box.following_description')
+        :
+        I18n.t('post.action_box.not_following_description')
+      }
+    </SmallMutedText>
+  </SidebarBox>
 );

 export default ActionBox;
--- a/app/javascript/components/Post/LikeList.tsx
+++ b/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">
-    <BoxTitleText>{I18n.t('post.likes_box.title')}</BoxTitleText>
-
+  <SidebarBox title={I18n.t('post.likes_box.title')} customClass="likeListContainer">
    { areLoading ? <Spinner /> : null }
    { error ? <DangerText>{error}</DangerText> : null }

@@ -34,7 +32,7 @@ const LikeList = ({ likes, areLoading, error}: Props) => (
        ))
      }
    </div>
-  </div>
+  </SidebarBox>
 );

 export default LikeList;
--- a/app/javascript/components/Post/PostP.tsx
+++ b/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 PostStatusLabel from '../shared/PostStatusLabel';
+import PostBoardLabel from '../common/PostBoardLabel';
+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="sidebar">
+      <div className="postContainer">
+        <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}
--- a/app/javascript/components/Post/PostUpdateList.tsx
+++ b/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 Spinner from '../shared/Spinner';
+import { DangerText, CenteredMutedText, MutedText } from '../common/CustomTexts';
+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">
-    <BoxTitleText>{I18n.t('post.updates_box.title')}</BoxTitleText>
-
+  <SidebarBox title={I18n.t('post.updates_box.title')} customClass="postUpdateListContainer">
    { areLoading ? <Spinner /> : null }
    { error ? <DangerText>{error}</DangerText> : null }

@@ -71,7 +70,7 @@ const PostUpdateList = ({
        ))
      }
    </div>
-  </div>
+  </SidebarBox>
 );

 export default PostUpdateList;
--- a/app/javascript/components/Roadmap/PostList.tsx
+++ b/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';
--- a/app/javascript/components/Roadmap/PostListByPostStatus.tsx
+++ b/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';
--- a/app/javascript/components/Roadmap/PostListItem.tsx
+++ b/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;
--- a/app/javascript/components/SiteSettings/Boards/BoardEditable.tsx
+++ b/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 PostBoardLabel from '../../shared/PostBoardLabel';
-import Separator from '../../shared/Separator';
+import DragZone from '../../common/DragZone';
+import PostBoardLabel from '../../common/PostBoardLabel';
+import Separator from '../../common/Separator';
 import BoardForm from './BoardForm';

 interface Props {
--- a/app/javascript/components/SiteSettings/Boards/BoardForm.tsx
+++ b/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';
--- a/app/javascript/components/SiteSettings/Boards/BoardsSiteSettingsP.tsx
+++ b/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 Spinner from '../../shared/Spinner';
+import SiteSettingsInfoBox from '../../common/SiteSettingsInfoBox';
+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>
+      </>
    );
  }
 }
--- a/app/javascript/components/SiteSettings/PostStatuses/PostStatusEditable.tsx
+++ b/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 DragZone from '../../shared/DragZone';
-import Separator from '../../shared/Separator';
+import PostStatusLabel from "../../common/PostStatusLabel";
+import DragZone from '../../common/DragZone';
+import Separator from '../../common/Separator';
 import PostStatusForm from './PostStatusForm';

 interface Props {
--- a/app/javascript/components/SiteSettings/PostStatuses/PostStatusForm.tsx
+++ b/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';

--- a/app/javascript/components/SiteSettings/PostStatuses/PostStatusesSiteSettingsP.tsx
+++ b/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 SiteSettingsInfoBox from '../../shared/SiteSettingsInfoBox';
+import { CenteredMutedText } from '../../common/CustomTexts';
+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>
+      </>
    );
  }
 }
--- a/app/javascript/components/common/Box.tsx
+++ b/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;
--- a/app/javascript/components/common/Button.tsx
+++ b/app/javascript/components/common/Button.tsx
--- a/app/javascript/components/common/CommentsNumber.tsx
+++ b/app/javascript/components/common/CommentsNumber.tsx
--- a/app/javascript/components/common/CustomTexts.tsx
+++ b/app/javascript/components/common/CustomTexts.tsx
--- a/app/javascript/components/common/DragZone.tsx
+++ b/app/javascript/components/common/DragZone.tsx
--- a/app/javascript/components/common/PostBoardLabel.tsx
+++ b/app/javascript/components/common/PostBoardLabel.tsx
--- a/app/javascript/components/common/PostStatusLabel.tsx
+++ b/app/javascript/components/common/PostStatusLabel.tsx
--- a/app/javascript/components/common/Separator.tsx
+++ b/app/javascript/components/common/Separator.tsx
--- a/app/javascript/components/common/Sidebar.tsx
+++ b/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;
--- a/app/javascript/components/common/SidebarBox.tsx
+++ b/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;
--- a/app/javascript/components/common/SiteSettingsInfoBox.tsx
+++ b/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;
--- a/app/javascript/components/common/Spinner.tsx
+++ b/app/javascript/components/common/Spinner.tsx
--- a/app/javascript/components/common/Switch.tsx
+++ b/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;
--- a/app/javascript/packs/bootstrap_custom.js
+++ b/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'
--- a/app/javascript/packs/hello_erb.js.erb
+++ b/app/javascript/packs/hello_erb.js.erb
@@ -1,3 +0,0 @@
-<% name = 'Erb' %>
-
-console.log('Hello world from <%= name %>')
--- a/app/javascript/stylesheets/general/_custom_texts.scss
+++ b/app/javascript/stylesheets/general/_custom_texts.scss
@@ -24,7 +24,7 @@
 }

 .mutedText {
-  color: $muted-text-color;
+  color: $astuto-grey;
 }

 .smallMutedText {
--- a/app/javascript/stylesheets/general/_form.scss
+++ b/app/javascript/stylesheets/general/_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 {
--- a/app/javascript/stylesheets/general/_header.scss
+++ b/app/javascript/stylesheets/general/_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 @@
    }
  }

-  .fullname {
-    vertical-align: middle;
+  .profileNav {
+    @extend
+      .navbar-nav,
+      .ml-auto;

-    color: $astuto-black;
-  }
+    .profileToggle {
+      @extend
+        .nav-link,
+        .dropdown-toggle;

-  .dropdown-toggle::after {
-    vertical-align: middle;
-  }
+      &::after { vertical-align: middle; }
+    }

-  .navbar-toggler:focus {
-    outline: none;
-  }
-
-  .navbar-toggler[aria-expanded="true"] {
-    background-color: $astuto-grey;
+    .fullname {
+      color: $astuto-black;
+      vertical-align: middle;
+    }
  }

  .dropdown-item:active {
-    background-color: $astuto-black;
+    background-color: $primary-color;
  }
 }
--- a/app/javascript/stylesheets/general/_components.scss
+++ b/app/javascript/stylesheets/general/_components.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%; }
+  // Make the main content full width
+  & > div:nth-child(2) {
+    @extend
+      .flex-grow-1,
+      .w-100;
  }
 }

-.multiRowContent {
-  @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;
+  }
 }
--- a/app/javascript/stylesheets/common/_scroll_shadows.scss
+++ b/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;
--- a/app/javascript/stylesheets/components/Board.scss
+++ b/app/javascript/stylesheets/components/Board.scss
@@ -1,14 +1,7 @@
 .boardContainer {
-  @extend
-    .d-flex,
-    .justify-content-between,
-    .align-items-start;
-
-  flex-direction: row;
+  @extend .twoColumnsContainer;

  @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;
--- a/app/javascript/stylesheets/components/Comments.scss
+++ b/app/javascript/stylesheets/components/Comments.scss
@@ -95,7 +95,7 @@
      font-size: 14px;

      .commentLink {
-        color: $astuto-black;
+        color: $primary-color;

        &:hover {
          text-decoration: underline;
--- a/app/javascript/stylesheets/components/LikeButton.scss
+++ b/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 {
--- a/app/javascript/stylesheets/components/Post.scss
+++ b/app/javascript/stylesheets/components/Post.scss
@@ -1,10 +1,5 @@
-.pageContainer {
-  @extend
-    .d-flex,
-    .justify-content-between,
-    .align-items-start;
-
-  flex-direction: row;
+.postContainer {
+  @extend .twoColumnsContainer;

  @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
-        .sidebarCard,
-        .text-center;
+      @extend .text-center;

-      .btn {
+      .checkboxSwitch {
        @extend
-          .mt-3,
-          .mb-1;
+          .mt-1,
+          .mb-2;
      }
    }
  }
@@ -141,7 +130,7 @@
      @extend
        .my-3;

-      color: $astuto-black;
+      color: $primary-color;
    }
  }
 }
--- a/app/javascript/stylesheets/components/Roadmap.scss
+++ b/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%;
--- a/app/javascript/stylesheets/constants/_colors.scss
+++ b/app/javascript/stylesheets/constants/_colors.scss
@@ -1,3 +1,5 @@
+$primary-color: #333;
+
 $astuto-black: #333;
-$astuto-grey: rgba(178, 178, 178, 0.15);
-$muted-text-color: #6c757d;
+$astuto-grey: rgba(0, 0, 0, 0.5);
+$astuto-light-grey: rgba(178, 178, 178, 0.2);
--- a/app/javascript/stylesheets/main.scss
+++ b/app/javascript/stylesheets/main.scss
@@ -2,11 +2,11 @@

@import 'constants/colors';

-@import 'general/components';
-@import 'general/custom_texts';
-@import 'general/form';
-@import 'general/header';
-@import 'general/index';
+@import 'common/index';
+@import 'common/custom_texts';
+@import 'common/form';
+@import 'common/header';
+@import 'common/scroll_shadows';

 /* Components */
@import 'components/Board';
--- a/app/views/layouts/_boards_menu_section.html.erb
+++ b/app/views/layouts/_boards_menu_section.html.erb
--- a/app/views/layouts/_header.html.erb
+++ b/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">
-        <%= render 'layouts/boards_menu_section', boards: @boards unless @boards.nil? %>
+      <ul class="boardsNav">
+        <%= render 'layouts/boards_nav_section', boards: @boards unless @boards.nil? %>
      </ul>
-      <ul class="navbar-nav ml-auto">
+
+      <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>
--- a/app/views/site_settings/_menu.html.erb
+++ b/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 %>
--- a/app/views/site_settings/boards.html.erb
+++ b/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',
--- a/app/views/site_settings/general.html.erb
+++ b/app/views/site_settings/general.html.erb
@@ -1,4 +1,4 @@
-<div class="multiColumnContainer">
+<div class="twoColumnsContainer">
  <%= render 'menu' %>

  <div class="content">
--- a/app/views/site_settings/post_statuses.html.erb
+++ b/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',
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -85,8 +85,7 @@ en:
      empty: 'There are no likes yet'
    action_box:
      title: 'Actions'
-      follow_button: 'Follow'
-      unfollow_button: 'Unfollow'
+      follow_button: 'Follow post'
      following_description: "you're receiving notifications about new updates on this post"
      not_following_description: "you won't receive notifications about this post"
    comments:
--- a/config/locales/it.yml
+++ b/config/locales/it.yml
@@ -85,8 +85,7 @@ it:
      empty: 'Non ci sono mi piace per ora'
    action_box:
      title: 'Azioni'
-      follow_button: 'Segui'
-      unfollow_button: 'Non seguire più'
+      follow_button: 'Segui post'
      following_description: 'riceverai notifiche sugli aggiornamenti di questo post'
      not_following_description: 'non riceverai alcuna notifica riguardo questo post'
    comments:
--- a/spec/views/header_spec.rb
+++ b/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