feat(front): Use bootstrap icons.

10 files changed, 51 insertions, 145 deletions

diff --git a/Timeline/ClientApp/.editorconfig b/Timeline/ClientApp/.editorconfig
index fc0b1223..54d8316a 100644
--- a/Timeline/ClientApp/.editorconfig
+++ b/Timeline/ClientApp/.editorconfig
@@ -9,5 +9,5 @@ tab_width = 2
 [*.css]

 tab_width = 2

 

-[*.scss]

+[*.sass]

 tab_width = 2

diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json
index a4bac434..fa9cca09 100644
--- a/Timeline/ClientApp/package.json
+++ b/Timeline/ClientApp/package.json
@@ -4,9 +4,9 @@
   "private": true,
   "homepage": "https://crupest.xyz",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.13.0",
     "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
+    "bootstrap-icons": "^1.0.0-alpha4",
     "classnames": "^2.2.6",
     "clsx": "^1.1.1",
     "core-js": "^3.6.5",
@@ -18,6 +18,7 @@
     "react-dom": "^16.13.1",
     "react-hot-loader": "^4.12.21",
     "react-i18next": "^11.5.0",
+    "react-inlinesvg": "^1.2.0",
     "react-responsive": "^8.1.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
diff --git a/Timeline/ClientApp/src/app/about/About.tsx b/Timeline/ClientApp/src/app/about/About.tsx
index bce4c06e..841ec6fe 100644
--- a/Timeline/ClientApp/src/app/about/About.tsx
+++ b/Timeline/ClientApp/src/app/about/About.tsx
@@ -2,18 +2,17 @@ import React from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
 import authorAvatarUrl from './author-avatar.png';
+import githubLogoUrl from './github.png';
 
 import AppBar from '../common/AppBar';
 
 const frontendCredits: {
   name: string;
   url: string;
-  icon?: string;
 }[] = [
   {
     name: 'reactjs',
     url: 'https://reactjs.org',
-    icon: 'react',
   },
   {
     name: 'typescript',
@@ -22,7 +21,6 @@ const frontendCredits: {
   {
     name: 'bootstrap',
     url: 'https://getbootstrap.com',
-    icon: 'bootstrap',
   },
   {
     name: 'reactstrap',
@@ -39,12 +37,6 @@ const frontendCredits: {
   {
     name: 'sass',
     url: 'https://sass-lang.com',
-    icon: 'sass',
-  },
-  {
-    name: 'fontawesome',
-    url: 'https://fontawesome.com',
-    icon: 'font-awesome-flag',
   },
   {
     name: 'eslint',
@@ -58,12 +50,15 @@ const frontendCredits: {
     name: 'pepjs',
     url: 'https://github.com/jquery/PEP',
   },
+  {
+    name: 'react-inlinesvg',
+    url: 'https://github.com/gilbarbara/react-inlinesvg',
+  },
 ];
 
 const backendCredits: {
   name: string;
   url: string;
-  icon?: string;
 }[] = [
   {
     name: 'ASP.NET Core',
@@ -113,7 +108,10 @@ const About: React.FC = () => {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <i className="fab fa-github about-link-icon text-body" />
+                <img
+                  src={githubLogoUrl}
+                  className="about-link-icon text-body"
+                />
               </a>
             </p>
           </div>
@@ -145,9 +143,6 @@ const About: React.FC = () => {
               return (
                 <li key={index}>
                   <a href={item.url} target="_blank" rel="noopener noreferrer">
-                    {item.icon != null && (
-                      <i className={'fab fa-' + item.icon + ' mx-2'} />
-                    )}
                     {item.name}
                   </a>
                 </li>
@@ -161,9 +156,6 @@ const About: React.FC = () => {
               return (
                 <li key={index}>
                   <a href={item.url} target="_blank" rel="noopener noreferrer">
-                    {item.icon != null && (
-                      <i className={'fab fa-' + item.icon + ' mx-2'} />
-                    )}
                     {item.name}
                   </a>
                 </li>
diff --git a/Timeline/ClientApp/src/app/about/about.sass b/Timeline/ClientApp/src/app/about/about.sass
index 0b0f89f5..3b5840cd 100644
--- a/Timeline/ClientApp/src/app/about/about.sass
+++ b/Timeline/ClientApp/src/app/about/about.sass
@@ -1,3 +1,4 @@
 .about-link-icon
   @extend .mx-2
-  font-size: 1.2em
+  width: 1.2em
+  height: 1.2em
diff --git a/Timeline/ClientApp/src/app/about/github.png b/Timeline/ClientApp/src/app/about/github.png
new file mode 100644
index 00000000..ea6ff545
--- /dev/null
+++ b/Timeline/ClientApp/src/app/about/github.png
diff --git a/Timeline/ClientApp/src/app/common/CollapseButton.tsx b/Timeline/ClientApp/src/app/common/CollapseButton.tsx
deleted file mode 100644
index 5307c4ac..00000000
--- a/Timeline/ClientApp/src/app/common/CollapseButton.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from 'react';
-
-export interface CollapseButtonProps {
-  collapse: boolean;
-  onClick: () => void;
-  className?: string;
-}
-
-const CollapseButton: React.FC<CollapseButtonProps> = (props) => {
-  const { onClick, collapse, className } = props;
-
-  return (
-    <svg
-      width="25"
-      height="25"
-      viewBox="0 0 100 100"
-      className={className}
-      onClick={onClick}
-    >
-      {(() => {
-        if (collapse) {
-          return (
-            <>
-              <line
-                stroke="currentcolor"
-                strokeWidth="14"
-                x1="50"
-                x2="90"
-                y1="17"
-                y2="17"
-              />
-              <line
-                stroke="currentcolor"
-                strokeWidth="14"
-                x1="10"
-                x2="50"
-                y1="83"
-                y2="83"
-              />
-              <line
-                stroke="currentcolor"
-                strokeWidth="14"
-                x1="17"
-                x2="17"
-                y1="50"
-                y2="90"
-              />
-              <line
-                stroke="currentcolor"
-                strokeWidth="14"
-                x1="83"
-                x2="83"
-                y1="10"
-                y2="50"
-              />
-            </>
-          );
-        } else {
-          return (
-            <>
-              <line
-                stroke="currentcolor"
-                strokeWidth="14"
-                x1="55"
-                x2="95"
-                y1="38"
-                y2="38"
-              />
-              <line
-                stroke="currentcolor"
-                strokeWidth="14"
-                x1="5"
-                x2="45"
-                y1="62"
-                y2="62"
-              />
-              <line
-                stroke="currentcolor"
-                strokeWidth="14"
-                x1="38"
-                x2="38"
-                y1="55"
-                y2="95"
-              />
-              <line
-                stroke="currentcolor"
-                strokeWidth="14"
-                x1="62"
-                x2="62"
-                y1="5"
-                y2="45"
-              />
-            </>
-          );
-        }
-      })()}
-    </svg>
-  );
-};
-
-export default CollapseButton;
diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass
index 86276701..ef0b03ba 100644
--- a/Timeline/ClientApp/src/app/index.sass
+++ b/Timeline/ClientApp/src/app/index.sass
@@ -1,8 +1,4 @@
 @import '~bootstrap/scss/bootstrap'
-$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'
-@import '~@fortawesome/fontawesome-free/scss/fontawesome'
-@import '~@fortawesome/fontawesome-free/scss/solid'
-@import '~@fortawesome/fontawesome-free/scss/brands'
 
 @import './common/common'
 @import './common/alert'
@@ -53,10 +49,10 @@ small
   margin-top: 56px
 
 .icon-button
-  font-size: 20px
+  font-size: 1.4em
 
-.large-icon
-  font-size: 26px
+.large-icon-button
+  font-size: 1.6em
 
 .cursor-pointer
   cursor: pointer
diff --git a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
index 4737fd7d..f19e70e7 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelineItem.tsx
@@ -11,6 +11,10 @@ import {
 } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import Svg from 'react-inlinesvg';
+
+import chevronDownIcon from 'bootstrap-icons/icons/chevron-down.svg';
+import trashIcon from 'bootstrap-icons/icons/trash.svg';
 
 import { TimelinePostInfo } from '../data/timeline';
 import { useAvatarUrlWithGivenVersion } from '../user/api';
@@ -110,9 +114,10 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
           </div>
           {more != null ? (
             <div className="col-auto px-2 d-flex justify-content-center align-items-center">
-              <i
-                className="fas fa-chevron-circle-down text-info icon-button"
-                onClick={(e) => {
+              <Svg
+                src={chevronDownIcon}
+                className="text-info icon-button"
+                onClick={(e: Event) => {
                   more.toggle();
                   e.stopPropagation();
                 }}
@@ -149,9 +154,10 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
             onClick={more.toggle}
           >
-            <i
-              className="fas fa-trash text-danger large-icon"
-              onClick={(e) => {
+            <Svg
+              src={trashIcon}
+              className="text-danger large-icon-button"
+              onClick={(e: Event) => {
                 toggleDeleteDialog();
                 e.stopPropagation();
               }}
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
index 5eb6a310..d5dc2346 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
@@ -2,6 +2,10 @@ import React from 'react';
 import { Spinner } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 import { fromEvent } from 'rxjs';
+import Svg from 'react-inlinesvg';
+
+import arrowsAngleContractIcon from 'bootstrap-icons/icons/arrows-angle-contract.svg';
+import arrowsAngleExpandIcon from 'bootstrap-icons/icons/arrows-angle-expand.svg';
 
 import { getAlertHost } from '../common/alert-service';
 
@@ -11,7 +15,6 @@ import Timeline, {
 } from './Timeline';
 import AppBar from '../common/AppBar';
 import TimelinePostEdit, { TimelinePostSendCallback } from './TimelinePostEdit';
-import CollapseButton from '../common/CollapseButton';
 import { useEventEmiiter } from '../common';
 
 export interface TimelineCardComponentProps<TTimeline, TManageItems> {
@@ -189,7 +192,12 @@ export default function TimelinePageTemplateUI<
             className="fixed-top mt-appbar info-card-container"
             data-collapse={infoCardCollapse ? 'true' : 'false'}
           >
-            <CollapseButton
+            <Svg
+              src={
+                infoCardCollapse
+                  ? arrowsAngleContractIcon
+                  : arrowsAngleExpandIcon
+              }
               collapse={infoCardCollapse}
               onClick={() => {
                 const newState = !infoCardCollapse;
@@ -199,7 +207,7 @@ export default function TimelinePageTemplateUI<
                   newState.toString()
                 );
               }}
-              className="float-right m-1 info-card-collapse-button text-orange"
+              className="float-right m-1 info-card-collapse-button text-primary icon-button"
             />
             <CardComponent
               timeline={timeline}
diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
index f12b6892..6501e349 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePostEdit.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import clsx from 'clsx';
 import { Button, Spinner, Row, Col } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
+import Svg from 'react-inlinesvg';
+
+import textIcon from 'bootstrap-icons/icons/card-text.svg';
+import imageIcon from 'bootstrap-icons/icons/image.svg';
 
 import { pushAlert } from '../common/alert-service';
 import { CreatePostRequest } from '../data/timeline';
@@ -199,13 +202,13 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
             if (state === 'input') {
               return (
                 <>
-                  <i
-                    className={clsx(
-                      'fas d-block text-center large-icon mt-1 mb-2',
-                      kind === 'text' ? 'fa-image' : 'fa-font'
-                    )}
-                    onClick={toggleKind}
-                  />
+                  <div className="d-block text-center mt-1 mb-2">
+                    <Svg
+                      src={kind === 'text' ? imageIcon : textIcon}
+                      className="icon-button"
+                      onClick={toggleKind}
+                    />
+                  </div>
                   <Button color="primary" onClick={onSend} disabled={!canSend}>
                     {t('timeline.send')}
                   </Button>