From f1222cf927443fe1a10a154973ccb920e52b26a3 Mon Sep 17 00:00:00 2001 From: Nafis Zaman Date: Thu, 15 Sep 2022 18:38:53 -0700 Subject: [PATCH 1/2] Switch to FontAwesome npm package --- package.json | 4 +++ src/components/AboutDialog.tsx | 4 ++- src/components/ComboBox.tsx | 3 +- src/components/Console/ClearCharm.tsx | 4 ++- src/components/Console/index.tsx | 4 ++- src/components/EditableList.tsx | 9 ++--- src/components/Editor/Editor.tsx | 6 ++-- src/components/Editor/ErrorCharm.tsx | 4 ++- src/components/Editor/LanguageSelectCharm.tsx | 1 - src/components/Editor/PerfectCharm.tsx | 4 ++- src/components/Editor/WarningCharm.tsx | 4 ++- src/components/Fa.tsx | 18 +++++----- src/components/Feedback/SentimentCharm.tsx | 4 ++- src/components/Feedback/index.tsx | 10 +++--- src/components/Form.tsx | 6 ++-- src/components/Info/Info.tsx | 3 +- src/components/Info/SensorWidget.tsx | 5 +-- src/components/Layout/LayoutPicker.tsx | 11 ++++--- src/components/Layout/OverlayLayout.tsx | 1 - src/components/Layout/SideLayout.tsx | 8 ++--- src/components/MainMenu.tsx | 4 ++- src/components/Section.tsx | 5 +-- src/components/SelectSceneDialog.tsx | 4 ++- src/components/SimMenu.tsx | 19 ++++++----- src/components/Slider/SliderBar.tsx | 4 ++- src/components/TabBar.tsx | 3 +- src/components/Widget.tsx | 27 ++++++++------- src/components/World/AddNodeDialog.tsx | 4 ++- src/components/World/index.tsx | 5 +-- src/index.html.ejs | 1 - src/login/LoginPage.tsx | 12 ++++--- src/login/login.html.ejs | 1 - yarn.lock | 33 +++++++++++++++++++ 33 files changed, 156 insertions(+), 79 deletions(-) diff --git a/package.json b/package.json index 639f3cd8..4be3643d 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,10 @@ "webpack-merge": "^5.7.3" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-brands-svg-icons": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", "@types/react": "^16.9.25", "babylonjs": "^4.2.0", "babylonjs-loaders": "^4.2.0", diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx index 3ddd976d..9d0c8b00 100644 --- a/src/components/AboutDialog.tsx +++ b/src/components/AboutDialog.tsx @@ -5,6 +5,8 @@ import { Dialog } from './Dialog'; import { ThemeProps } from './theme'; import { Fa } from './Fa'; +import { faCopyright } from '@fortawesome/free-solid-svg-icons'; + import KIPR_LOGO_BLACK from '../assets/KIPR-Logo-Black-Text-Clear-Large.png'; import KIPR_LOGO_WHITE from '../assets/KIPR-Logo-White-Text-Clear-Large.png'; @@ -73,7 +75,7 @@ export class AboutDialog extends React.PureComponent { Version {SIMULATOR_VERSION} ({SIMULATOR_GIT_HASH})

- Copyright 2022 KISS Institute for Practical Robotics and External Contributors + Copyright 2022 KISS Institute for Practical Robotics and External Contributors

This software is licensed under the terms of the GNU General Public License v3.

diff --git a/src/components/ComboBox.tsx b/src/components/ComboBox.tsx index 8802e105..1b62457e 100644 --- a/src/components/ComboBox.tsx +++ b/src/components/ComboBox.tsx @@ -8,6 +8,7 @@ import { Color } from "../state/State/Scene/Color"; import { Fa } from "./Fa"; import { Text } from "./Text"; import { ThemeProps } from "./theme"; +import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"; const Container = styled('div', (props: ThemeProps & { $focus?: boolean; $minimal?: boolean; }) => ({ width: !props.$minimal ? '100%' : undefined, @@ -163,7 +164,7 @@ class ComboBox extends React.PureComponent { return ( - + {ReactDom.createPortal((focus && this.ref_) ? {options.map((option, i) => ( diff --git a/src/components/Console/ClearCharm.tsx b/src/components/Console/ClearCharm.tsx index abd4d672..eab06938 100644 --- a/src/components/Console/ClearCharm.tsx +++ b/src/components/Console/ClearCharm.tsx @@ -6,6 +6,8 @@ import { Fa } from '../Fa'; import { ThemeProps } from '../theme'; import { charmColor } from '../charm-util'; +import { faTimes } from '@fortawesome/free-solid-svg-icons'; + export interface ClearCharmProps extends StyleProps, ThemeProps { onClick: (event: React.MouseEvent) => void; } @@ -30,7 +32,7 @@ class ClearCharm extends React.PureComponent { return ( - Clear + Clear ); } diff --git a/src/components/Console/index.tsx b/src/components/Console/index.tsx index 934491ec..cc913baf 100644 --- a/src/components/Console/index.tsx +++ b/src/components/Console/index.tsx @@ -11,6 +11,8 @@ import { Fa } from '../Fa'; import { Button } from '../Button'; import { BarComponent } from '../Widget'; +import { faFile } from '@fortawesome/free-solid-svg-icons'; + export const createConsoleBarComponents = ( theme: Theme, onClearConsole: () => void, @@ -22,7 +24,7 @@ export const createConsoleBarComponents = ( onClick: onClearConsole, children: <> - + {' Clear'} , })); diff --git a/src/components/EditableList.tsx b/src/components/EditableList.tsx index 94cc0398..b67e2bc5 100644 --- a/src/components/EditableList.tsx +++ b/src/components/EditableList.tsx @@ -1,3 +1,4 @@ +import { faCog, faEye, faEyeSlash, faSync, faTimes } from "@fortawesome/free-solid-svg-icons"; import * as React from "react"; import { styled, withStyleDeep } from "styletron-react"; import { StyleProps } from "../style"; @@ -145,22 +146,22 @@ namespace EditableList { {onVisibilityChange && ( - + )} {onReset && ( - + )} {onSettings && ( - + )} {onRemove && ( - + )} diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 4fff976c..9c3280b8 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -13,6 +13,8 @@ import { Ivygate, Message } from 'ivygate'; import LanguageSelectCharm from './LanguageSelectCharm'; import ProgrammingLanguage from '../../ProgrammingLanguage'; +import { faFileDownload, faIndent } from '@fortawesome/free-solid-svg-icons'; + export enum EditorActionState { None, Compiling, @@ -80,7 +82,7 @@ export const createEditorBarComponents = ({ onClick: onIndentCode, children: <> - + {' Indent'} })); @@ -90,7 +92,7 @@ export const createEditorBarComponents = ({ onClick: onDownloadCode, children: <> - + {' Download'} })); diff --git a/src/components/Editor/ErrorCharm.tsx b/src/components/Editor/ErrorCharm.tsx index 06528e42..0a12642a 100644 --- a/src/components/Editor/ErrorCharm.tsx +++ b/src/components/Editor/ErrorCharm.tsx @@ -6,6 +6,8 @@ import { Fa } from '../Fa'; import { ThemeProps } from '../theme'; import { charmColor } from '../charm-util'; +import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'; + export interface ErrorCharmProps extends StyleProps, ThemeProps { count: number; @@ -33,7 +35,7 @@ class ErrorCharm extends React.PureComponent { return ( - {count} Error{count === 1 ? '' : 's'} + {count} Error{count === 1 ? '' : 's'} ); } diff --git a/src/components/Editor/LanguageSelectCharm.tsx b/src/components/Editor/LanguageSelectCharm.tsx index 653b497e..9da281ca 100644 --- a/src/components/Editor/LanguageSelectCharm.tsx +++ b/src/components/Editor/LanguageSelectCharm.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { styled, withStyleDeep } from 'styletron-react'; import { StyleProps } from '../../style'; import Charm from '../Charm'; -import { Fa } from '../Fa'; import { ThemeProps } from '../theme'; import { charmColor } from '../charm-util'; import ComboBox from '../ComboBox'; diff --git a/src/components/Editor/PerfectCharm.tsx b/src/components/Editor/PerfectCharm.tsx index 3ef5de27..be54b431 100644 --- a/src/components/Editor/PerfectCharm.tsx +++ b/src/components/Editor/PerfectCharm.tsx @@ -6,6 +6,8 @@ import { Fa } from '../Fa'; import { ThemeProps } from '../theme'; import { charmColor } from '../charm-util'; +import { faCheck } from '@fortawesome/free-solid-svg-icons'; + export interface PerfectCharmProps extends StyleProps, ThemeProps { } @@ -28,7 +30,7 @@ class PerfectCharm extends React.PureComponent { return ( - Perfect! + Perfect! ); } diff --git a/src/components/Editor/WarningCharm.tsx b/src/components/Editor/WarningCharm.tsx index d37b0503..14cddbb3 100644 --- a/src/components/Editor/WarningCharm.tsx +++ b/src/components/Editor/WarningCharm.tsx @@ -6,6 +6,8 @@ import { Fa } from '../Fa'; import { ThemeProps } from '../theme'; import { charmColor } from '../charm-util'; +import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; + export interface WarningCharmProps extends StyleProps, ThemeProps { count: number; @@ -33,7 +35,7 @@ class WarningCharm extends React.PureComponent { return ( - {count} Warning{count === 1 ? '' : 's'} + {count} Warning{count === 1 ? '' : 's'} ); } diff --git a/src/components/Fa.tsx b/src/components/Fa.tsx index d56820bb..fd758434 100644 --- a/src/components/Fa.tsx +++ b/src/components/Fa.tsx @@ -1,13 +1,14 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as React from 'react'; import { StyleProps } from '../style'; export interface FaProps extends StyleProps { - icon: string; - brand?: boolean; - onClick?: (event: React.MouseEvent) => void; - onMouseEnter?: (event: React.MouseEvent) => void; - onMouseLeave?: (event: React.MouseEvent) => void; + icon: IconProp; + onClick?: (event: React.MouseEvent) => void; + onMouseEnter?: (event: React.MouseEvent) => void; + onMouseLeave?: (event: React.MouseEvent) => void; disabled?: boolean; } @@ -16,19 +17,20 @@ type Props = FaProps; export class Fa extends React.PureComponent { render() { const { props } = this; - const { className, icon, onClick, onMouseEnter, onMouseLeave, disabled, brand } = props; + const { className, icon, onClick, onMouseEnter, onMouseLeave, disabled } = props; const style: React.CSSProperties = { ...props.style, cursor: onClick && !disabled ? 'pointer' : undefined, opacity: disabled ? 0.5 : undefined }; return ( - ); } diff --git a/src/components/Feedback/SentimentCharm.tsx b/src/components/Feedback/SentimentCharm.tsx index 8c42ef81..37278c15 100644 --- a/src/components/Feedback/SentimentCharm.tsx +++ b/src/components/Feedback/SentimentCharm.tsx @@ -6,8 +6,10 @@ import { Fa } from '../Fa'; import { ThemeProps } from '../theme'; import { charmColor } from '../charm-util'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; + export interface SentimentCharmProps extends StyleProps, ThemeProps { - icon: string; + icon: IconProp; selected: boolean; onClick: (event: React.MouseEvent) => void; } diff --git a/src/components/Feedback/index.tsx b/src/components/Feedback/index.tsx index 7f23289b..0d1af76b 100644 --- a/src/components/Feedback/index.tsx +++ b/src/components/Feedback/index.tsx @@ -9,6 +9,8 @@ import DialogBar from "../DialogBar"; import { ThemeProps } from '../theme'; import { Fa } from '../Fa'; +import { faFrown, faMeh, faPaperPlane, faSmileBeam } from '@fortawesome/free-solid-svg-icons'; + export interface FeedbackDialogProp extends ThemeProps, StyleProps { onClose: () => void; onSubmit: () => void; @@ -57,13 +59,13 @@ export class FeedbackDialog extends React.PureComponent { return ( - onFeedbackChange(getUpdatedFeedback(Sentiment.Sad)) }/> - onFeedbackChange(getUpdatedFeedback(Sentiment.Okay)) }/> - onFeedbackChange(getUpdatedFeedback(Sentiment.Happy)) }/> @@ -176,7 +178,7 @@ export class FeedbackDialog extends React.PureComponent { } - Submit + Submit ); diff --git a/src/components/Form.tsx b/src/components/Form.tsx index c4cca0e0..f5dfad81 100644 --- a/src/components/Form.tsx +++ b/src/components/Form.tsx @@ -1,5 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'; import * as React from 'react'; import { styled } from 'styletron-react'; import Dict from '../Dict'; @@ -138,7 +140,7 @@ class Form extends React.PureComponent { StyledText.component ({ component: Fa, props: { - icon: valid ? 'check' : 'times', + icon: valid ? faCheck : faTimes, style: { color: valid ? GREEN.standard : RED.standard, }, @@ -188,7 +190,7 @@ namespace Form { onFinalize: (values: { [id: string]: any }) => void; finalizeText?: string; - finalizeIcon?: string; + finalizeIcon?: IconProp; finalizeDisabled?: boolean; diff --git a/src/components/Info/Info.tsx b/src/components/Info/Info.tsx index 8ed03504..04e33273 100644 --- a/src/components/Info/Info.tsx +++ b/src/components/Info/Info.tsx @@ -13,6 +13,7 @@ import { ReferenceFrame } from '../../unit-math'; import { connect } from 'react-redux'; import { State as ReduxState } from '../../state'; import { SceneAction } from '../../state/reducer'; +import { faSync } from '@fortawesome/free-solid-svg-icons'; export interface InfoProps extends StyleProps, ThemeProps { @@ -150,7 +151,7 @@ class Info extends React.PureComponent { StyledText.component({ component: ResetIcon, props: { - icon: 'sync', + icon: faSync, onClick: this.onResetLocationClick_, theme } diff --git a/src/components/Info/SensorWidget.tsx b/src/components/Info/SensorWidget.tsx index ce7f7702..1dc58ab4 100644 --- a/src/components/Info/SensorWidget.tsx +++ b/src/components/Info/SensorWidget.tsx @@ -14,6 +14,7 @@ import { Fa } from '../Fa'; import { connect } from 'react-redux'; import { State as ReduxState } from '../../state'; import { RobotState } from '../../RobotState'; +import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'; export interface SensorWidgetProps extends ThemeProps, StyleProps { name: string; @@ -147,7 +148,7 @@ class SensorWidget extends React.PureComponent { return ( Layouts - Overlay - Side - {/* Bottom */} + Overlay + Side + {/* Bottom */} {layout === Layout.Overlay ? ( <> Layout Options - Show All - Hide All + Show All + Hide All ) : undefined} diff --git a/src/components/Layout/OverlayLayout.tsx b/src/components/Layout/OverlayLayout.tsx index 01d373c2..8e49057e 100644 --- a/src/components/Layout/OverlayLayout.tsx +++ b/src/components/Layout/OverlayLayout.tsx @@ -8,7 +8,6 @@ import { Console, createConsoleBarComponents } from '../Console'; import { Editor, createEditorBarComponents } from '../Editor'; import World, { createWorldBarComponents } from '../World'; -import { Fa } from '../Fa'; import { Info } from '../Info'; import { LayoutProps } from './Layout'; import { SimulatorArea } from '../SimulatorArea'; diff --git a/src/components/Layout/SideLayout.tsx b/src/components/Layout/SideLayout.tsx index 08149d81..5b0ed987 100644 --- a/src/components/Layout/SideLayout.tsx +++ b/src/components/Layout/SideLayout.tsx @@ -9,7 +9,6 @@ import { Console, createConsoleBarComponents } from '../Console'; import { Editor, createEditorBarComponents } from '../Editor'; import World, { createWorldBarComponents } from '../World'; -import { Fa } from '../Fa'; import { Info } from '../Info'; import { LayoutProps } from './Layout'; import { SimulatorArea } from '../SimulatorArea'; @@ -19,6 +18,7 @@ import { Slider } from '../Slider'; import { State as ReduxState } from '../../state'; import { SceneAction } from '../../state/reducer'; +import { faCode, faGlobeAmericas, faRobot } from '@fortawesome/free-solid-svg-icons'; // 3 panes: // Editor / console @@ -27,13 +27,13 @@ import { SceneAction } from '../../state/reducer'; const TABS = [{ name: 'Editor', - icon: 'code' + icon: faCode, }, { name: 'Robot', - icon: 'robot' + icon: faRobot, }, { name: 'World', - icon: 'globe-americas' + icon: faGlobeAmericas, }]; const sizeDict = (sizes: Size[]) => { diff --git a/src/components/MainMenu.tsx b/src/components/MainMenu.tsx index ceed50ae..2ff89958 100644 --- a/src/components/MainMenu.tsx +++ b/src/components/MainMenu.tsx @@ -6,6 +6,8 @@ import { Spacer } from './common'; import { Fa } from './Fa'; import { DARK, ThemeProps } from './theme'; +import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'; + export interface MenuProps extends StyleProps, ThemeProps {} interface MenuState {} @@ -99,7 +101,7 @@ export class MainMenu extends React.Component { {/* Dashboard */} - Logout + Logout ); } diff --git a/src/components/Section.tsx b/src/components/Section.tsx index 338e69fb..6c55aa77 100644 --- a/src/components/Section.tsx +++ b/src/components/Section.tsx @@ -8,6 +8,7 @@ import { AnyText } from '../util'; import { Text } from './Text'; import { Fa } from './Fa'; +import { faCaretDown, faCaretUp, faFile } from '@fortawesome/free-solid-svg-icons'; const Container = styled('div', ({ theme, $noBorder }: ThemeProps & { $noBorder: boolean }) => ({ width: '100%', @@ -57,7 +58,7 @@ export interface SectionProps extends ThemeProps, StyleProps { type Props = SectionProps; class Section extends React.PureComponent { - private onCollapseClick_ = (event: React.MouseEvent) => { + private onCollapseClick_ = () => { if (!this.props.onCollapsedChange) return; this.props.onCollapsedChange(!this.props.collapsed); }; @@ -70,7 +71,7 @@ class Section extends React.PureComponent {
- {onCollapsedChange ? : undefined} + {onCollapsedChange ? : undefined}
{!collapsed ? {children} : undefined} diff --git a/src/components/SelectSceneDialog.tsx b/src/components/SelectSceneDialog.tsx index ddacaa58..5879f3ad 100644 --- a/src/components/SelectSceneDialog.tsx +++ b/src/components/SelectSceneDialog.tsx @@ -13,6 +13,8 @@ import DialogBar from "./DialogBar"; import ScrollArea from "./ScrollArea"; import { Fa } from "./Fa"; +import { faCheck } from '@fortawesome/free-solid-svg-icons'; + export interface SelectSceneDialogProps extends ThemeProps { onClose: () => void; } @@ -116,7 +118,7 @@ class SelectSceneDialog extends React.PureComponent - Accept + Accept ); diff --git a/src/components/SimMenu.tsx b/src/components/SimMenu.tsx index 8943949f..89b360be 100644 --- a/src/components/SimMenu.tsx +++ b/src/components/SimMenu.tsx @@ -39,6 +39,7 @@ type State = MenuState; import KIPR_LOGO_BLACK from '../assets/KIPR-Logo-Black-Text-Clear-Large.png'; import KIPR_LOGO_WHITE from '../assets/KIPR-Logo-White-Text-Clear-Large.png'; +import { faBook, faClone, faCogs, faCommentDots, faPlay, faQuestion, faSignOutAlt, faStop, faSync } from '@fortawesome/free-solid-svg-icons'; const Container = styled('div', (props: ThemeProps) => ({ backgroundColor: props.theme.backgroundColor, @@ -173,7 +174,7 @@ class SimMenu extends React.PureComponent { onClick={onStopClick} disabled={false} > - + Stop ) : ( @@ -183,7 +184,7 @@ class SimMenu extends React.PureComponent { disabled={!SimulatorState.isStopped(simulatorState)} style={{ borderLeft: `1px solid ${theme.borderColor}` }} > - + Run ); @@ -194,24 +195,24 @@ class SimMenu extends React.PureComponent { {runOrStopItem} - Reset World + Reset World - Layout + Layout {layoutPicker ? ( ) : undefined} - Documentation + Documentation - Settings - About - Feedback + Settings + About + Feedback {/* Dashboard */} - Logout + Logout diff --git a/src/components/Slider/SliderBar.tsx b/src/components/Slider/SliderBar.tsx index bd3b1819..0d04637c 100644 --- a/src/components/Slider/SliderBar.tsx +++ b/src/components/Slider/SliderBar.tsx @@ -6,6 +6,8 @@ import { ThemeProps } from '../theme'; import { CanBeVertical, CanBeSelected } from './'; +import { faEquals } from '@fortawesome/free-solid-svg-icons'; + interface SliderBarProps extends CanBeVertical, CanBeSelected, ThemeProps { onMouseDownCallback: (e: React.MouseEvent) => void, onTouchStartCallback: (e: React.TouchEvent) => void, @@ -49,7 +51,7 @@ export const SliderBar = React.memo((props: SliderBarProps) => { - + diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx index 25a2e202..629430c5 100644 --- a/src/components/TabBar.tsx +++ b/src/components/TabBar.tsx @@ -1,3 +1,4 @@ +import { IconProp } from '@fortawesome/fontawesome-svg-core'; import * as React from 'react'; import { styled } from 'styletron-react'; import { StyleProps } from '../style'; @@ -98,6 +99,6 @@ export class TabBar extends React.PureComponent { export namespace TabBar { export interface TabDescription { name: string; - icon?: string; + icon?: IconProp; } } \ No newline at end of file diff --git a/src/components/Widget.tsx b/src/components/Widget.tsx index 2a4a5881..4ce3daa2 100644 --- a/src/components/Widget.tsx +++ b/src/components/Widget.tsx @@ -7,6 +7,9 @@ import { Spacer } from './common'; import { Fa } from './Fa'; import { ThemeProps } from './theme'; +import { faAngleDown, faAngleUp, faAngleLeft, faAngleRight, faAngleDoubleUp, faAngleDoubleDown, faAngleDoubleLeft, faAngleDoubleRight, faTimes, faExpand } from '@fortawesome/free-solid-svg-icons'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; + export namespace Size { export enum Type { Maximized, @@ -146,28 +149,28 @@ const Title = styled('span', (props: ThemeProps & { $hasComponents: boolean }) = borderRight: props.$hasComponents ? `1px solid ${props.theme.borderColor}` : undefined })); -const sizeIcon = (size: Size) => { +const sizeIcon = (size: Size): IconProp => { switch (size.type) { case Size.Type.Partial: { switch (size.direction) { - case Size.Direction.Up: return 'angle-up'; - case Size.Direction.Down: return 'angle-down'; - case Size.Direction.Left: return 'angle-left'; - case Size.Direction.Right: return 'angle-right'; + case Size.Direction.Up: return faAngleUp; + case Size.Direction.Down: return faAngleDown; + case Size.Direction.Left: return faAngleLeft; + case Size.Direction.Right: return faAngleRight; default: return null; } } case Size.Type.Miniature: { switch (size.direction) { - case Size.Direction.Up: return 'angle-double-up'; - case Size.Direction.Down: return 'angle-double-down'; - case Size.Direction.Left: return 'angle-double-left'; - case Size.Direction.Right: return 'angle-double-right'; + case Size.Direction.Up: return faAngleDoubleUp; + case Size.Direction.Down: return faAngleDoubleDown; + case Size.Direction.Left: return faAngleDoubleLeft; + case Size.Direction.Right: return faAngleDoubleRight; default: return null; } } - case Size.Type.Minimized: return 'times'; - case Size.Type.Maximized: return 'expand'; + case Size.Type.Minimized: return faTimes; + case Size.Type.Maximized: return faExpand; } }; @@ -176,7 +179,7 @@ class Widget extends React.PureComponent { super(props); } - private onSizeChange_ = (index: number) => (event: React.MouseEvent) => { + private onSizeChange_ = (index: number) => (event: React.MouseEvent) => { const { onSizeChange } = this.props; if (!onSizeChange) return; diff --git a/src/components/World/AddNodeDialog.tsx b/src/components/World/AddNodeDialog.tsx index ffe6b635..f8025b0a 100644 --- a/src/components/World/AddNodeDialog.tsx +++ b/src/components/World/AddNodeDialog.tsx @@ -20,6 +20,8 @@ import Scene from "../../state/State/Scene"; import Geometry from "../../state/State/Scene/Geometry"; import { Fa } from "../Fa"; +import { faCheck } from '@fortawesome/free-solid-svg-icons'; + export interface AddNodeAcceptance { node: Node; geometry?: Geometry; @@ -153,7 +155,7 @@ class AddNodeDialog extends React.PureComponent { /> - Accept + Accept ); diff --git a/src/components/World/index.tsx b/src/components/World/index.tsx index 4fa512ba..65632590 100644 --- a/src/components/World/index.tsx +++ b/src/components/World/index.tsx @@ -32,6 +32,7 @@ import Geometry from '../../state/State/Scene/Geometry'; import { Button } from '../Button'; import { BarComponent } from '../Widget'; +import { faGlobeAmericas, faPlus } from '@fortawesome/free-solid-svg-icons'; export const createWorldBarComponents = ( theme: Theme, @@ -44,7 +45,7 @@ export const createWorldBarComponents = ( onClick: onSelectScene, children: <> - + {' Select Scene'} , })); @@ -272,7 +273,7 @@ class World_ extends React.PureComponent { StyledText.component({ component: SectionIcon, props: { - icon: 'plus', + icon: faPlus, theme, onClick: this.onAddNodeClick_ } diff --git a/src/index.html.ejs b/src/index.html.ejs index 69e944a9..8a8b350c 100644 --- a/src/index.html.ejs +++ b/src/index.html.ejs @@ -8,7 +8,6 @@ -