From b38beb5a731d5e897103aa1d8b9056a1f4b04a64 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 16 Jun 2020 16:22:42 +0800
Subject: feat(front): Use bootstrap icons.

---
 Timeline/ClientApp/src/app/timeline/TimelineItem.tsx  | 18 ++++++++++++------
 .../src/app/timeline/TimelinePageTemplateUI.tsx       | 14 +++++++++++---
 .../ClientApp/src/app/timeline/TimelinePostEdit.tsx   | 19 +++++++++++--------
 3 files changed, 34 insertions(+), 17 deletions(-)

(limited to 'Timeline/ClientApp/src/app/timeline')

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>
-- 
cgit v1.2.3