Various minor style improvements

app/javascript/components/Board/PostStatusFilter.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import PostStatusListItem from './PostStatusListItem';
 import Spinner from '../shared/Spinner';
-import { TitleText, DangerText } from '../shared/CustomTexts';
+import { BoxTitleText, DangerText } from '../shared/CustomTexts';
 
 import IPostStatus from '../../interfaces/IPostStatus';
 
@@ -24,7 +24,7 @@ const PostStatusFilter = ({
   currentFilter,
 }: Props) => (
   <div className="postStatusFilterContainer sidebarCard">
-    <TitleText>Filter by post status</TitleText>
+    <BoxTitleText>Filter by status</BoxTitleText>
     {
       postStatuses.map((postStatus, i) => (
         <PostStatusListItem

app/javascript/components/Board/SearchFilter.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { TitleText } from '../shared/CustomTexts';
+import { BoxTitleText } from '../shared/CustomTexts';
 
 interface Props {
   searchQuery: string;
@@ -9,7 +9,8 @@ interface Props {
 
 const SearchFilter = ({ searchQuery, handleChange }: Props) => (
   <div className="sidebarCard">
-    <TitleText>Search</TitleText>
+    <BoxTitleText>Search</BoxTitleText>
+
     <input
       type="search"
       value={searchQuery}

app/javascript/components/Comments/NewComment.tsx

@@ -43,7 +43,7 @@ const NewComment = ({
             <Button
               onClick={() => handleSubmit(body, parentId)}
               className="submitCommentButton">
-              { isSubmitting ? <Spinner /> : 'Submit' }
+              { isSubmitting ? <Spinner color="light" /> : 'Submit' }
             </Button>
           </React.Fragment>
         :

app/javascript/components/Post/LikeList.tsx

@@ -4,7 +4,7 @@ import Gravatar from 'react-gravatar';
 import ILike from '../../interfaces/ILike';
 import Spinner from '../shared/Spinner';
 import {
-  TitleText,
+  BoxTitleText,
   DangerText,
   CenteredMutedText
 } from '../shared/CustomTexts';
@@ -17,7 +17,7 @@ interface Props {
 
 const LikeList = ({ likes, areLoading, error}: Props) => (
   <div className="likeListContainer">
-    <TitleText>People who liked</TitleText>
+    <BoxTitleText>Likes</BoxTitleText>
     { areLoading ? <Spinner /> : null }
     { error ? <DangerText>{error}</DangerText> : null }
     <div className="likeList">

app/javascript/components/Post/PostUpdateList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Gravatar from 'react-gravatar';
 
-import { TitleText, DangerText, CenteredMutedText, MutedText } from '../shared/CustomTexts';
+import { BoxTitleText, DangerText, CenteredMutedText, MutedText } from '../shared/CustomTexts';
 import Spinner from '../shared/Spinner';
 
 import IComment from '../../interfaces/IComment';
@@ -20,11 +20,11 @@ const PostUpdateList = ({
   error,
 }: Props) => (
   <div className="postUpdateListContainer">
-    <TitleText>Post updates</TitleText>
+    <BoxTitleText>Updates</BoxTitleText>
     { areLoading ? <Spinner /> : null }
     { error ? <DangerText>{error}</DangerText> : null }
     <div className="postUpdateList">
-      { postUpdates.length === 0 ? <CenteredMutedText>There are no post updates yet.</CenteredMutedText> : null }
+      { postUpdates.length === 0 ? <CenteredMutedText>There are no updates yet.</CenteredMutedText> : null }
       {
         postUpdates.map((postUpdate, i) => (
           <div className="postUpdateListItem" key={i}>

app/javascript/components/shared/CustomTexts.tsx

@@ -13,6 +13,10 @@ export const TitleText = ({ children }: Props) => (
   <span className="titleText">{children}</span>
 );
 
+export const BoxTitleText = ({ children }: Props) => (
+  <span className="boxTitleText">{children}</span>
+);
+
 export const MutedText = ({ children }: Props) => (
   <span className="mutedText">{children}</span>
 );

app/javascript/components/shared/PostBoardLabel.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import IBoard from '../../interfaces/IBoard';
 
 const PostBoardLabel = ({ name }: IBoard) => (
-  <span className="badge badgeLight">{name}</span>
+  <span className="badge badgeLight">{name?.toUpperCase()}</span>
 );
 
 export default PostBoardLabel;

app/javascript/components/shared/PostStatusLabel.tsx

@@ -9,7 +9,9 @@ const PostStatusLabel = ({
   name,
   color,
 }: Props) => (
-  <span className="badge" style={{backgroundColor: color, color: 'white'}}>{name}</span>
+  <span className="badge" style={{backgroundColor: color, color: 'white'}}>
+    {name?.toUpperCase()}
+  </span>
 );
 
 export default PostStatusLabel;

app/javascript/components/shared/Spinner.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-const Spinner = () => (
-  <div className="spinner-grow d-block mx-auto" role="status">
+const Spinner = ({ color = 'dark' }) => (
+  <div className={`spinner-grow d-block mx-auto text-${color}`} role="status">
     <span className="sr-only">Loading...</span>
   </div>
 );

app/javascript/stylesheets/components/Board.scss

@@ -124,5 +124,4 @@
   .postTitle {
     color: white;
   }
-
 }

app/javascript/stylesheets/components/Comments.scss

@@ -30,6 +30,8 @@
       @extend
         .align-self-end;
 
+      box-sizing: border-box;
+      width: 120px;
       height: 40px;
     }
   }
@@ -90,5 +92,4 @@
   .commentList .comment .commentFooter .commentLink {
     color: white;
   }
-
 }

app/javascript/stylesheets/components/Post.scss

@@ -121,7 +121,6 @@
 }
 
 @media (prefers-color-scheme: dark) {
-
   .postDescription {
     color: white !important;
   }
@@ -138,6 +137,4 @@
   .postAndCommentsContainer .postHeader a {
     color: white;
   }
-
-
 }

app/javascript/stylesheets/general/_components.scss

@@ -88,5 +88,4 @@ a {
     background-color: #E74C3C;
     border-color: #fff;
   }
-
 }

app/javascript/stylesheets/general/_custom_texts.scss

@@ -8,6 +8,15 @@
    .font-weight-bolder;
 }
 
+.boxTitleText {
+  @extend
+    .font-weight-bolder,
+    .text-uppercase,
+    .mb-2;
+
+  font-size: 16px;
+}
+
 .centeredText {
   @extend
     .text-center,

app/javascript/stylesheets/general/_form.scss

@@ -36,6 +36,11 @@
   a { color: $astuto-black; }
 }
 
+.switch {
+  @extend
+    .custom-control-input;
+}
+
 @media (prefers-color-scheme: dark) {
   .deviseLinks {
     a { color: white; }

app/views/devise/registrations/edit.html.erb

@@ -17,8 +17,11 @@
   </div>
 
   <div class="form-group">
-    <%= f.label :notifications_enabled %>
-    <%= f.check_box :notifications_enabled %>
+    <%= f.label :notifications_enabled %> <br />
+    <%= f.check_box :notifications_enabled, style: "transform: scale(1.5)" %>
+    <small id="notificationsHelp" class="form-text text-muted">
+      if disabled, you won't receive any notification
+    </small>
   </div>
 
   <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>

app/views/devise/registrations/new.html.erb

@@ -23,11 +23,6 @@
     <%= f.password_field :password_confirmation, placeholder: "Password confirmation", required: true, class: "form-control" %>
   </div>
 
-  <div class="form-group">
-    <%= f.label :notifications_enabled %>
-    <%= f.check_box :notifications_enabled %>
-  </div>
-
   <div class="actions">
     <%= f.submit "Sign up", class: "btn btn-block" %>
   </div>