diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/timeline')
3 files changed, 34 insertions, 17 deletions
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> |