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