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/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/Button.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+interface Props {
+  children: any;
+  onClick(e: React.FormEvent): void;
+  className?: string;
+  outline?: boolean;
+  disabled?: boolean;
+}
+
+const Button = ({ children, onClick, className = '', outline = false, disabled = false}: Props) => (
+  <button
+    onClick={onClick}
+    className={`${className} btn btn-${outline ? 'outline-' : ''}dark`}
+    disabled={disabled}
+  >
+    {children}
+  </button>
+);
+
+export default Button;

app/javascript/components/common/CommentsNumber.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+interface Props {
+  number: number;
+}
+
+const CommentsNumber = ({ number }: Props) => (
+  <span className="badge badgeLight">
+    {I18n.t('common.comments_number', { count: number })}
+  </span>
+);
+
+export default CommentsNumber;

app/javascript/components/common/CustomTexts.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+interface Props {
+  children: string;
+}
+
+interface DescriptionTextProps {
+  children: string;
+  limit?: number;
+}
+
+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>
+);
+
+export const CenteredMutedText = ({ children }: Props) => (
+  <p className="centeredText"><span className="mutedText">{children}</span></p>
+);
+
+export const SmallMutedText = ({ children }: Props) => (
+  <p className="smallMutedText">{children}</p>
+);
+
+export const UppercaseText = ({ children }: Props) => (
+  <span className="uppercaseText">{children}</span>
+);
+
+export const SuccessText = ({ children }: Props) => (
+  <span className="successText">{children}</span>
+);
+
+export const DangerText = ({ children }: Props) => (
+  <span className="dangerText">{children}</span>
+);
+
+export const DescriptionText = ({ children, limit = 90}: DescriptionTextProps) => (
+  <span className="descriptionText">
+    {
+      children && children.length > limit ?
+        children.slice(0, limit-1) + '...'
+      :
+        children || '<No description provided>'
+    }
+  </span>
+);

app/javascript/components/common/DragZone.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+const DragZone = ({dndProvided, isDragDisabled}) => (
+  <span
+    className={`drag-zone${isDragDisabled ? ' drag-zone-disabled' : ''}`}
+    {...dndProvided.dragHandleProps}
+  >
+    <span className="drag-icon"></span>
+  </span>
+);
+
+export default DragZone;

app/javascript/components/common/PostBoardLabel.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface Props {
+  name: string;
+}
+
+const PostBoardLabel = ({ name }: Props) => (
+  <span className="badge badgeLight">{name?.toUpperCase()}</span>
+);
+
+export default PostBoardLabel;

app/javascript/components/common/PostStatusLabel.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+interface Props {
+  name: string;
+  color: string;
+}
+
+const PostStatusLabel = ({
+  name,
+  color,
+}: Props) => (
+  <span className="badge" style={{backgroundColor: color || 'black', color: 'white'}}>
+    {(name || I18n.t('common.no_status')).toUpperCase()}
+  </span>
+);
+
+export default PostStatusLabel;

app/javascript/components/common/Separator.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const Separator = () => <span>&nbsp;&bull;&nbsp;</span>
+
+export default Separator;

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+import Spinner from './Spinner';
+import Box from './Box';
+
+interface Props {
+  areUpdating: boolean;
+  error: string;
+}
+
+const SiteSettingsInfoBox = ({ areUpdating, error }: Props) => (
+  <Box customClass="siteSettingsInfo">
+  {
+    areUpdating ?
+      <Spinner />
+    :
+      error ?
+        <span className="error">
+          {I18n.t('site_settings.info_box.error', { message: JSON.stringify(error) })}
+        </span>
+      :
+        <span>{I18n.t('site_settings.info_box.up_to_date')}</span>
+  }
+  </Box>
+);
+
+export default SiteSettingsInfoBox;

app/javascript/components/common/Spinner.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+const Spinner = ({ color = 'dark' }) => (
+  <div className={`spinner-grow d-block mx-auto text-${color}`} role="status">
+    <span className="sr-only">{I18n.t('common.loading')}</span>
+  </div>
+);
+
+export default Spinner;

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;