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';
-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

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 PostStatusLabel from '../shared/PostStatusLabel';
+import CommentsNumber from '../common/CommentsNumber';
+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 { 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;

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;

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;

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';
 

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;

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;

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 { 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;

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;

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}

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;

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 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 {

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 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>
+      </>
     );
   }
 }

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 {

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 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>
+      </>
     );
   }
 }

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;