Refactor CSS pt. 1 (remove custom css in favour of Bootstrap's)

app/javascript/components/shared/CommentsNumber.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface Props {
+  number: number;
+}
+
+const CommentsNumber = ({ number }: Props) => (
+  <div className="d-flex">
+    <span className="comment icon"></span>
+    <span>{`${number} comment${number === 1 ? '' : 's'}`}</span>
+  </div>
+);
+
+export default CommentsNumber;

app/javascript/components/shared/CustomTexts.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+interface Props {
+  children: string;
+}
+
+interface DescriptionTextProps {
+  children: string;
+  limit?: number;
+}
+
+export const TitleText = ({ children }: Props) => (
+  <span className="text-dark font-weight-bolder">{children}</span>
+);
+
+export const MutedText = ({ children }: Props) => (
+  <span className="text-muted text-center">{children}</span>
+);
+
+export const UppercaseText = ({ children }: Props) => (
+  <span className="text-secondary text-uppercase font-weight-lighter">{children}</span>
+);
+
+export const SuccessText = ({ children }: Props) => (
+  <span className="text-success text-center">{children}</span>
+);
+
+export const DangerText = ({ children }: Props) => (
+  <span className="text-danger text-center">{children}</span>
+);
+
+export const DescriptionText = ({ children, limit = 90}: DescriptionTextProps) => (
+  <span className="text-muted">
+    {
+      children && children.length > limit ?
+        children.slice(0, limit-1) + '...'
+      :
+        children || '<No description provided>'
+    }
+  </span>
+);