diff --git a/package.json b/package.json index 9fcaa19..7f51358 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "react-scripts": "3.4.3", "rxjs": "^6.6.3", "socket.io-client": "^2.3.1", + "styled-components": "^5.2.1", "xterm": "^4.9.0", "xterm-addon-fit": "^0.4.0" }, @@ -43,6 +44,7 @@ "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", "@types/socket.io-client": "^1.4.34", + "@types/styled-components": "^5.1.7", "@typescript-eslint/eslint-plugin": "^4.2.0", "@typescript-eslint/parser": "^4.2.0", "cross-env": "^7.0.2", diff --git a/src/App.tsx b/src/App.tsx index 28e4e3c..a32ad26 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import CssBaseline from "@material-ui/core/CssBaseline"; import { Theme, withStyles } from "@material-ui/core/styles"; -import { ThemeProvider } from "@material-ui/styles"; +import { ThemeProvider } from "styled-components"; +import { ThemeProvider as MaterialThemeProvider } from "@material-ui/styles"; import React, { ReactElement, useEffect } from "react"; import { BrowserRouter as Router, @@ -8,9 +9,9 @@ import { Route, Switch, } from "react-router-dom"; -import ConnectionFailed from "./common/ConnectionFailed"; -import NotFound from "./common/NotFound"; -import Dashboard from "./dashboard/Dashboard"; +import ConnectionFailed from "./common/connectionFailed"; +import NotFound from "./common/notFound"; +import Dashboard from "./dashboard"; import { Path } from "./router/Path"; import { darkTheme } from "./themes"; import { useElectronStore } from "./stores/electronStore"; @@ -86,26 +87,28 @@ function App(): ReactElement { return ( - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/common/CenterEllipsis.tsx b/src/common/CenterEllipsis.tsx deleted file mode 100644 index 0293c14..0000000 --- a/src/common/CenterEllipsis.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { createStyles, makeStyles } from "@material-ui/core"; -import React, { ReactElement } from "react"; - -type PropsType = { - text: string; -}; - -const useStyles = makeStyles(() => - createStyles({ - left: { - flex: "0 1 auto", - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "pre", - }, - right: { - flex: "1 0 auto", - overflow: "hidden", - whiteSpace: "pre", - maxWidth: "40px", - }, - }) -); - -function CenterEllipsis(props: PropsType): ReactElement { - const { text } = props; - const splitIndex = - text.length > 4 ? text.length - 4 : Math.round(text.length * 0.75); - const classes = useStyles(); - - const shrinkableText = text.slice(0, splitIndex); - const endText = text.slice(splitIndex); - - return ( - <> - {shrinkableText} - {endText} - - ); -} - -export default CenterEllipsis; diff --git a/src/common/Loader.tsx b/src/common/Loader.tsx deleted file mode 100644 index ca6be5e..0000000 --- a/src/common/Loader.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - CircularProgress, - createStyles, - Grid, - makeStyles, -} from "@material-ui/core"; -import React, { ReactElement } from "react"; - -const useStyles = makeStyles(() => - createStyles({ - loaderContainer: { - height: "100px", - justifyContent: "center", - alignItems: "center", - }, - }) -); - -const Loader = (): ReactElement => { - const classes = useStyles(); - - return ( - - - - ); -}; - -export default Loader; diff --git a/src/common/NotFound.tsx b/src/common/NotFound.tsx deleted file mode 100644 index b97ffcb..0000000 --- a/src/common/NotFound.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { createStyles, Grid, makeStyles, Theme } from "@material-ui/core"; -import React, { ReactElement } from "react"; -import notFoundImg from "../assets/404.png"; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - container: { - height: "100vh", - padding: theme.spacing(3), - }, - }) -); -const NotFound = (): ReactElement => { - const classes = useStyles(); - - return ( - - Page not found - - ); -}; - -export default NotFound; diff --git a/src/common/PageCircularProgress.tsx b/src/common/PageCircularProgress.tsx deleted file mode 100644 index 84d8112..0000000 --- a/src/common/PageCircularProgress.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - Box, - CircularProgress, - createStyles, - makeStyles, -} from "@material-ui/core"; -import React, { ReactElement } from "react"; - -const useStyles = makeStyles(() => - createStyles({ - container: { - height: "100vh", - width: "100%", - display: "flex", - alignItems: "center", - justifyContent: "center", - }, - }) -); -const PageCircularProgress = (): ReactElement => { - const classes = useStyles(); - return ( - - - - ); -}; - -export default PageCircularProgress; diff --git a/src/common/Table.tsx b/src/common/Table.tsx index 2332368..1021c12 100644 --- a/src/common/Table.tsx +++ b/src/common/Table.tsx @@ -10,7 +10,7 @@ import { import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; import React, { ReactElement } from "react"; import { copyToClipboard } from "./appUtil"; -import CenterEllipsis from "./CenterEllipsis"; +import CenterEllipsis from "./centerEllipsis"; export type TableRow = { [key: string]: string | number | boolean | Date | ReactElement | undefined; diff --git a/src/common/ButtonWithLoading.tsx b/src/common/buttonWithLoading/index.tsx similarity index 63% rename from src/common/ButtonWithLoading.tsx rename to src/common/buttonWithLoading/index.tsx index 8822bf9..b5e3690 100644 --- a/src/common/ButtonWithLoading.tsx +++ b/src/common/buttonWithLoading/index.tsx @@ -1,11 +1,12 @@ -import { - Button, - CircularProgress, - createStyles, - makeStyles, -} from "@material-ui/core"; +import { Button } from "@material-ui/core"; import React, { ReactElement } from "react"; +//styles +import { + ButtonWrapper, + ButtonProgress +} from "./styles"; + type ButtonWithLoadingProps = { onClick: () => void; text: string; @@ -17,23 +18,7 @@ type ButtonWithLoadingProps = { color?: "primary" | "secondary"; }; -const useStyles = makeStyles(() => - createStyles({ - buttonWrapper: { - position: "relative", - }, - buttonProgress: { - position: "absolute", - top: "50%", - left: "50%", - marginTop: -12, - marginLeft: -12, - }, - }) -); - const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => { - const classes = useStyles(); const { onClick, text, @@ -46,7 +31,7 @@ const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => { } = props; return ( -
+ {loading && ( - + )} -
+ ); }; diff --git a/src/common/buttonWithLoading/styles.ts b/src/common/buttonWithLoading/styles.ts new file mode 100644 index 0000000..3b0438c --- /dev/null +++ b/src/common/buttonWithLoading/styles.ts @@ -0,0 +1,20 @@ +import styled from "styled-components"; +import { CircularProgress } from "@material-ui/core"; + +//types +type ButtonProgressType = { + size: number; +} + +//styled +export const ButtonWrapper = styled.div` + position: relative; +`; + +export const ButtonProgress = styled(CircularProgress)` + position: absolute; + top: 50%; + left: 50%; + margin-top: -12px; + margin-left: -12px; +`; \ No newline at end of file diff --git a/src/common/centerEllipsis/index.tsx b/src/common/centerEllipsis/index.tsx new file mode 100644 index 0000000..3d9ae09 --- /dev/null +++ b/src/common/centerEllipsis/index.tsx @@ -0,0 +1,29 @@ +import React, { ReactElement } from "react"; + +//styles +import { + Left, + Right +} from "./styles"; + +type PropsType = { + text: string; +}; + +function CenterEllipsis(props: PropsType): ReactElement { + const { text } = props; + const splitIndex = + text.length > 4 ? text.length - 4 : Math.round(text.length * 0.75); + + const shrinkableText = text.slice(0, splitIndex); + const endText = text.slice(splitIndex); + + return ( + <> + {shrinkableText} + {endText} + + ); +} + +export default CenterEllipsis; diff --git a/src/common/centerEllipsis/styles.ts b/src/common/centerEllipsis/styles.ts new file mode 100644 index 0000000..a0bcce9 --- /dev/null +++ b/src/common/centerEllipsis/styles.ts @@ -0,0 +1,15 @@ +import styled from "styled-components"; + +export const Left = styled.span` + flex: 0 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: pre; +`; + +export const Right = styled.span` + flex: 1 0 auto; + overflow: hidden; + white-space: pre; + max-width: 40px; +`; \ No newline at end of file diff --git a/src/common/ConnectionFailed.tsx b/src/common/connectionFailed/index.tsx similarity index 55% rename from src/common/ConnectionFailed.tsx rename to src/common/connectionFailed/index.tsx index fd392c5..ab343e1 100644 --- a/src/common/ConnectionFailed.tsx +++ b/src/common/connectionFailed/index.tsx @@ -1,31 +1,20 @@ import { Button, - createStyles, - Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import React, { ReactElement, useEffect } from "react"; import { useHistory } from "react-router-dom"; -import { Path } from "../router/Path"; -import { isElectron, sendMessageToParent } from "./appUtil"; +import { Path } from "../../router/Path"; +import { isElectron, sendMessageToParent } from "../appUtil"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - container: { - height: "100vh", - padding: theme.spacing(3), - }, - row: { - padding: theme.spacing(3), - }, - }) -); +//styles +import { + Container, + Row +} from "./styles"; const ConnectionFailed = (): ReactElement => { const history = useHistory(); - const classes = useStyles(); useEffect(() => { if (isElectron()) { @@ -34,25 +23,24 @@ const ConnectionFailed = (): ReactElement => { }, []); return ( - - + Failed to get data - - + + - - + + ); }; diff --git a/src/common/connectionFailed/styles.ts b/src/common/connectionFailed/styles.ts new file mode 100644 index 0000000..48beb5b --- /dev/null +++ b/src/common/connectionFailed/styles.ts @@ -0,0 +1,21 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type ContainerType = { + item: boolean; + container: boolean; + direction: string; + alignItems: string; + justify: string; +} + +//styled +export const Container = styled(Grid)` + height: 100vh; + padding: ${p => p.theme.spacing(3)}px; +`; + +export const Row = styled(Grid)` + padding: ${p => p.theme.spacing(3)}px; +`; \ No newline at end of file diff --git a/src/common/loader/index.tsx b/src/common/loader/index.tsx new file mode 100644 index 0000000..cb1978a --- /dev/null +++ b/src/common/loader/index.tsx @@ -0,0 +1,16 @@ +import { CircularProgress } from "@material-ui/core"; +import React, { ReactElement } from "react"; + +//styles +import { LoaderContainer } from "./styles"; + +const Loader = (): ReactElement => { + + return ( + + + + ); +}; + +export default Loader; diff --git a/src/common/loader/styles.ts b/src/common/loader/styles.ts new file mode 100644 index 0000000..5b9a9b1 --- /dev/null +++ b/src/common/loader/styles.ts @@ -0,0 +1,14 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type LoaderContainerType = { + container: boolean; +} + +//styled +export const LoaderContainer = styled(Grid)` + height: 100px; + justify-content: center; + align-items: center; +`; \ No newline at end of file diff --git a/src/common/notFound/index.tsx b/src/common/notFound/index.tsx new file mode 100644 index 0000000..64ab825 --- /dev/null +++ b/src/common/notFound/index.tsx @@ -0,0 +1,21 @@ +import React, { ReactElement } from "react"; +import notFoundImg from "../../assets/404.png"; + +//styles +import { Container } from "./styles"; + +const NotFound = (): ReactElement => { + return ( + + Page not found + + ); +}; + +export default NotFound; diff --git a/src/common/notFound/styles.ts b/src/common/notFound/styles.ts new file mode 100644 index 0000000..b80f421 --- /dev/null +++ b/src/common/notFound/styles.ts @@ -0,0 +1,17 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type ContainerType = { + item: boolean; + container: boolean; + direction: string; + alignItems: string; + justify: string; +} + +//styled +export const Container = styled(Grid)` + height: 100vh; + padding: ${p => p.theme.spacing(3)}px; +`; \ No newline at end of file diff --git a/src/common/pageCircularProgress/index.tsx b/src/common/pageCircularProgress/index.tsx new file mode 100644 index 0000000..9394e1d --- /dev/null +++ b/src/common/pageCircularProgress/index.tsx @@ -0,0 +1,15 @@ +import { CircularProgress } from "@material-ui/core"; +import React, { ReactElement } from "react"; + +//styles +import { Container } from "./styles"; + +const PageCircularProgress = (): ReactElement => { + return ( + + + + ); +}; + +export default PageCircularProgress; diff --git a/src/common/pageCircularProgress/styles.ts b/src/common/pageCircularProgress/styles.ts new file mode 100644 index 0000000..128619b --- /dev/null +++ b/src/common/pageCircularProgress/styles.ts @@ -0,0 +1,10 @@ +import styled from "styled-components"; +import { Box } from "@material-ui/core"; + +export const Container = styled(Box)` + height: 100vh; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +`; \ No newline at end of file diff --git a/src/common/QrCode.tsx b/src/common/qrCode/index.tsx similarity index 62% rename from src/common/QrCode.tsx rename to src/common/qrCode/index.tsx index 4fa2be6..2388a6c 100644 --- a/src/common/QrCode.tsx +++ b/src/common/qrCode/index.tsx @@ -1,43 +1,25 @@ import { - createStyles, Grid, IconButton, - makeStyles, - Paper, - Theme, - Typography, + Typography } from "@material-ui/core"; import CloseIcon from "@material-ui/icons/Close"; import QRCode from "qrcode.react"; import React, { ReactElement } from "react"; +//styles +import { Container } from "./styles"; + type QrCodeProps = { value: string; handleClose: () => void; size?: number; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - container: { - display: "flex", - flexDirection: "column", - width: "100%", - height: "100%", - backgroundColor: theme.palette.background.default, - padding: theme.spacing(2), - }, - content: { - height: "100%", - }, - }) -); - const QrCode = (props: QrCodeProps): ReactElement => { - const classes = useStyles(); const { value, handleClose, size } = props; return ( - + @@ -48,7 +30,7 @@ const QrCode = (props: QrCodeProps): ReactElement => { - + ); }; diff --git a/src/common/qrCode/styles.ts b/src/common/qrCode/styles.ts new file mode 100644 index 0000000..5266ca9 --- /dev/null +++ b/src/common/qrCode/styles.ts @@ -0,0 +1,11 @@ +import styled from "styled-components"; +import { Paper } from "@material-ui/core"; + +export const Container = styled(Paper)` + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background-color: ${p => p.theme.palette.background.default}; + padding: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file diff --git a/src/common/sorting/SortingOptions.tsx b/src/common/sorting/sortingOptions/index.tsx similarity index 65% rename from src/common/sorting/SortingOptions.tsx rename to src/common/sorting/sortingOptions/index.tsx index 14b0b7c..8a0b95c 100644 --- a/src/common/sorting/SortingOptions.tsx +++ b/src/common/sorting/sortingOptions/index.tsx @@ -1,23 +1,27 @@ import { - Button, ClickAwayListener, - createStyles, Fade, Grid, IconButton, - makeStyles, - Paper, Popper, - Theme, Tooltip, - Typography, + Typography } from "@material-ui/core"; -import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward"; -import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; import CloseIcon from "@material-ui/icons/Close"; import SortIcon from "@material-ui/icons/Sort"; import React, { ReactElement, useState } from "react"; -import { SortingOrder } from "./SortingUtil"; +import { SortingOrder } from "../SortingUtil"; + +//styles +import { + SortIconContainer, + SortOptionsMenu, + SortOptionButton, + SortOptionActiveGrid, + SortDirIconContainer, + StyledArrowDownwardIcon, + StyledArrowUpwardIcon +} from "./styles"; export type SortingOptionsProps = { sortOpts: SortOption[]; @@ -33,35 +37,7 @@ export type SortOption = { sortingOrder?: SortingOrder; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - sortIconContainer: { - paddingTop: theme.spacing(2), - }, - sortOptionsMenu: { - backgroundColor: theme.palette.background.default, - }, - sortOption: { - padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`, - textTransform: "none", - borderRadius: 0, - color: theme.palette.text.secondary, - }, - sortOptionActive: { - fontWeight: theme.typography.fontWeightBold, - color: theme.palette.text.primary, - }, - sortDirIconContainer: { - width: "15px", - }, - sortDirIcon: { - fontSize: theme.typography.body2.fontSize, - }, - }) -); - function SortingOptions(props: SortingOptionsProps): ReactElement { - const classes = useStyles(); const { sortOpts, orderBy, sortingOrder, onOptionSelected } = props; const [sortOptsOpen, setSortOptsOpen] = useState(false); const [sortOptsAnchorEl, setSortOptsAnchorEl] = useState( @@ -87,18 +63,17 @@ function SortingOptions(props: SortingOptionsProps): ReactElement { return null; } return sortingOrder === "desc" ? ( - + ) : ( - + ); }; return ( -
@@ -115,10 +90,10 @@ function SortingOptions(props: SortingOptionsProps): ReactElement { > {({ TransitionProps }) => ( - + {sortOpts.map((opt) => ( - + + ))} - + )}
- + ); } diff --git a/src/common/sorting/sortingOptions/styles.ts b/src/common/sorting/sortingOptions/styles.ts new file mode 100644 index 0000000..fa22a89 --- /dev/null +++ b/src/common/sorting/sortingOptions/styles.ts @@ -0,0 +1,78 @@ +import styled from "styled-components"; +import { + Button, + Grid, + Paper, + Typography +} from "@material-ui/core"; +import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward"; +import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; + +//types +type SortIconContainerType = { + item: boolean; + container: boolean; + justify: string; +} + +type SortOptionButtonType = { + fullWidth: boolean; + disableRipple: boolean; + size: string; + onClick: () => void; + key: string; +} + +type SortOptionActiveGridType = { + item: boolean; + container: boolean; + alignItems: string; + spacing: number; + wrap: string; + sortOptionActive: boolean; +} + +type SortDirIconContainerType = { + component: string; +} + +//styled +export const SortIconContainer = styled(Grid)` + padding-top: ${p => p.theme.spacing(2)}px; +`; + +export const SortOptionsMenu = styled(Paper)` + background-color: ${p => p.theme.palette.background.default}; +`; + +export const SortOptionButton = styled(Button)` + padding: ${p => `${p.theme.spacing(1)}px ${p.theme.spacing(3)}px`}; + text-transform: none; + border-radius: 0px; + color: ${p => p.theme.palette.text.secondary}; +`; + +export const SortOptionActiveGrid = styled(Grid)` + ${p => p.sortOptionActive && ` + font-weight: ${p.theme.typography.fontWeightBold}; + color: ${p.theme.palette.text.primary}; + `} +`; + +export const SortDirIconContainer = styled(Typography)` + width: 15px; +`; + +export const StyledArrowDownwardIcon = styled(ArrowDownwardIcon)` + ${p => getArrowIconStyles(p)} +`; + +export const StyledArrowUpwardIcon = styled(ArrowUpwardIcon)` + ${p => getArrowIconStyles(p)} +`; + +const getArrowIconStyles = (p: any) => { + return ` + font-size: ${p.theme.typography.body2.fontSize}; + `; +} \ No newline at end of file diff --git a/src/dashboard/console/Console.tsx b/src/dashboard/console/index.tsx similarity index 78% rename from src/dashboard/console/Console.tsx rename to src/dashboard/console/index.tsx index 5fb2c48..6d6004d 100644 --- a/src/dashboard/console/Console.tsx +++ b/src/dashboard/console/index.tsx @@ -6,19 +6,16 @@ import "xterm/css/xterm.css"; import api from "../../api"; import { combineLatest, fromEvent, Observable, Subscription } from "rxjs"; import { mergeMap, shareReplay, switchMap, take } from "rxjs/operators"; -import { - createStyles, - Theme, - Typography, - withStyles, - WithStyles, -} from "@material-ui/core"; - -type PropsType = RouteComponentProps<{ param1: string }> & - WithStyles & { - previousTerminal?: Terminal; - setTerminal: (terminal: Terminal) => void; - }; + +//styles +import { + Wrapper, + Title, + Code, + TerminalContainer +} from "./styles"; + +type PropsType = RouteComponentProps<{ param1: string }> type StateType = { connected: boolean; @@ -27,29 +24,6 @@ type StateType = { error?: string; }; -const styles = (theme: Theme) => { - return createStyles({ - wrapper: { - flex: 1, - }, - title: { - marginBottom: theme.spacing(2), - }, - code: { - backgroundColor: theme.palette.background.paper, - padding: `0px ${theme.spacing(1)}px`, - borderRadius: 5, - letterSpacing: 2, - fontFamily: "monospace", - }, - terminalContainer: { - height: "90%", - width: "100%", - overflowY: "auto", - }, - }); -}; - const consoleCreated$ = (api.sio.io$.pipe( mergeMap((io) => fromEvent(io, "created")), shareReplay({ refCount: true, bufferSize: 1 }) @@ -208,21 +182,19 @@ class Console extends Component { } render(): ReactElement { - const { classes } = this.props; - return ( -
- - Type {help} to show a list of + + + Type {<Code>help</Code>} to show a list of available commands - </Typography> + {this.state.error && (
Error: {JSON.stringify(this.state.error)}
)} -
-
+ + ); } } -export default withRouter(withStyles(styles, { withTheme: true })(Console)); +export default withRouter(Console); diff --git a/src/dashboard/console/styles.ts b/src/dashboard/console/styles.ts new file mode 100644 index 0000000..d45888b --- /dev/null +++ b/src/dashboard/console/styles.ts @@ -0,0 +1,31 @@ +import styled from "styled-components"; +import { Typography } from "@material-ui/core"; + +// types +type TitleType = { + component: string; + variant: string; +} + +//styled +export const Wrapper = styled.div` + flex: 1; +`; + +export const Title = styled(Typography)` + margin-bottom: ${p => p.theme.spacing(2)}px; +`; + +export const Code = styled.span` + background-color: ${p => p.theme.palette.background.paper}; + padding: ${p => `0px ${p.theme.spacing(1)}px`}; + border-radius: 5px; + letter-spacing: 2px; + font-family: monospace; +`; + +export const TerminalContainer = styled.div` + height: 90%; + width: 100%; + overflowY: auto; +`; \ No newline at end of file diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/index.tsx similarity index 78% rename from src/dashboard/Dashboard.tsx rename to src/dashboard/index.tsx index 30c6897..5d69567 100644 --- a/src/dashboard/Dashboard.tsx +++ b/src/dashboard/index.tsx @@ -1,8 +1,4 @@ -import { Button, Grid, Tooltip, Typography } from "@material-ui/core"; -import Box from "@material-ui/core/Box"; -import Drawer from "@material-ui/core/Drawer"; -import List from "@material-ui/core/List"; -import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; +import { Box, Grid, Tooltip } from "@material-ui/core"; import AccountBalanceWalletOutlinedIcon from "@material-ui/icons/AccountBalanceWalletOutlined"; import CachedIcon from "@material-ui/icons/Cached"; import HistoryIcon from "@material-ui/icons/History"; @@ -21,50 +17,30 @@ import { interval } from "rxjs"; import { filter, map, mergeMap, takeUntil } from "rxjs/operators"; import api from "../api"; import { isElectron, sendMessageToParent } from "../common/appUtil"; -import NotFound from "../common/NotFound"; +import NotFound from "../common/notFound"; import { SetupStatusResponse } from "../models/SetupStatusResponse"; import { Status } from "../models/Status"; import { Path } from "../router/Path"; -import Console from "./console/Console"; -import MenuItem, { MenuItemProps } from "./menu/MenuItem"; -import Overview from "./overview/Overview"; +import Console from "./console"; +import MenuItem, { MenuItemProps } from "./menu/menuItem"; +import Overview from "./overview"; // import SetupWarning from "./SetupWarning"; import Trade from "./trade/Trade"; -import Tradehistory from "./tradehistory/Tradehistory"; -import Wallets from "./wallet/Wallets"; +import Tradehistory from "./tradehistory"; +import Wallets from "./wallet/wallets"; /* import SettingsIcon from "@material-ui/icons/Settings"; import Settings from "../settings/Settings"; */ -export const drawerWidth = 200; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - drawerPaper: { - width: drawerWidth, - justifyContent: "space-between", - }, - menuContainer: { - width: "100%", - }, - header: { - padding: "16px", - }, - drawerButton: { - margin: theme.spacing(2), - }, - content: { - marginLeft: drawerWidth, - backgroundColor: theme.palette.background.default, - padding: theme.spacing(3), - height: "100vh", - display: "flex", - flexDirection: "column", - }, - }) -); +//styles +import { + DrawerPaper, + MenuContainer, + Header, + DrawerButton, + Content +} from "./styles"; const Dashboard = (): ReactElement => { - const classes = useStyles(); const history = useHistory(); const { path } = useRouteMatch(); const [syncInProgress, setSyncInProgress] = useState(false); @@ -155,23 +131,19 @@ const Dashboard = (): ReactElement => { return ( - - XUD UI - - + + {menuItems.map((item) => ( { tooltipTextRows={menuItemTooltipMsg} /> ))} - + {/* @@ -198,21 +170,20 @@ const Dashboard = (): ReactElement => { {isElectron() && ( - + )} - -
+ + {/* {} */} @@ -232,7 +203,7 @@ const Dashboard = (): ReactElement => { -
+ ); }; diff --git a/src/dashboard/menu/MenuItem.tsx b/src/dashboard/menu/menuItem/index.tsx similarity index 79% rename from src/dashboard/menu/MenuItem.tsx rename to src/dashboard/menu/menuItem/index.tsx index 97acccb..1f010cb 100644 --- a/src/dashboard/menu/MenuItem.tsx +++ b/src/dashboard/menu/menuItem/index.tsx @@ -1,15 +1,14 @@ import { ListItemIcon, - Tooltip, - Theme, - createStyles, - makeStyles, + Tooltip } from "@material-ui/core"; -import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; import React, { ComponentClass, ElementType, ReactElement } from "react"; import { NavLink, useLocation, useRouteMatch } from "react-router-dom"; -import { Path } from "../../router/Path"; +import { Path } from "../../../router/Path"; + +//styles +import { ListItem } from "./styles"; export type MenuItemProps = { path: Path; @@ -21,18 +20,9 @@ export type MenuItemProps = { tooltipTextRows?: string[]; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - disabled: { - color: theme.palette.text.disabled, - }, - }) -); - function MenuItem(props: MenuItemProps): ReactElement { const { url } = useRouteMatch(); const { pathname } = useLocation(); - const classes = useStyles(); const navigateTo = `${url}${props.path}`; const isCurrentLocation = (): boolean => { @@ -49,7 +39,7 @@ function MenuItem(props: MenuItemProps): ReactElement { } > ` + ${p => p.isDisabled && ` + color: ${p.theme.palette.text.disabled}; + `} +`; \ No newline at end of file diff --git a/src/dashboard/overview/Overview.tsx b/src/dashboard/overview/index.tsx similarity index 95% rename from src/dashboard/overview/Overview.tsx rename to src/dashboard/overview/index.tsx index 0b7e593..23cca90 100644 --- a/src/dashboard/overview/Overview.tsx +++ b/src/dashboard/overview/index.tsx @@ -3,10 +3,10 @@ import Grid from "@material-ui/core/Grid"; import React, { ReactElement } from "react"; import { RouteComponentProps, withRouter } from "react-router-dom"; import api from "../../api"; -import PageCircularProgress from "../../common/PageCircularProgress"; +import PageCircularProgress from "../../common/pageCircularProgress"; import { Status } from "../../models/Status"; import DashboardContent, { DashboardContentState } from "../DashboardContent"; -import OverviewItem from "./OverviewItem"; +import OverviewItem from "./overviewItem"; type PropsType = RouteComponentProps<{ param1: string }> & WithStyles; diff --git a/src/dashboard/overview/OverviewItem.tsx b/src/dashboard/overview/overviewItem/index.tsx similarity index 68% rename from src/dashboard/overview/OverviewItem.tsx rename to src/dashboard/overview/overviewItem/index.tsx index eef15db..41f1115 100644 --- a/src/dashboard/overview/OverviewItem.tsx +++ b/src/dashboard/overview/overviewItem/index.tsx @@ -1,28 +1,32 @@ import { Button, - createStyles, Divider, Icon, IconButton, - makeStyles, - Snackbar, - SnackbarContent, - Theme, Tooltip, } from "@material-ui/core"; import Card from "@material-ui/core/Card"; -import CardContent from "@material-ui/core/CardContent"; import Grid from "@material-ui/core/Grid"; import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; import GetAppOutlinedIcon from "@material-ui/icons/GetAppOutlined"; import React, { ReactElement, useState } from "react"; -import api from "../../api"; -import { formatDateTimeForFilename } from "../../common/dateUtil"; -import { isServiceReady } from "../../common/serviceUtil"; -import { SERVICES_WITH_ADDITIONAL_INFO } from "../../constants"; -import { Status } from "../../models/Status"; -import ServiceDetails from "./ServiceDetails"; +import api from "../../../api"; +import { formatDateTimeForFilename } from "../../../common/dateUtil"; +import { isServiceReady } from "../../../common/serviceUtil"; +import { SERVICES_WITH_ADDITIONAL_INFO } from "../../../constants"; +import { Status } from "../../../models/Status"; +import ServiceDetails from "../serviceDetails"; + +//styles +import { + StyledGrid, + CardContent, + CardCellGrid, + StatusDot, + Snackbar, + SnackbarContent +} from "./styles"; export type OverviewItemProps = { status: Status; @@ -30,45 +34,6 @@ export type OverviewItemProps = { xudNotReady?: boolean; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - cardHeader: { - padding: theme.spacing(3), - }, - cardContent: { - padding: 0, - "&:last-child": { - paddingBottom: 0, - }, - }, - cardCell: { - padding: theme.spacing(4), - textAlign: "center", - }, - statusDot: { - height: 10, - width: 10, - borderRadius: "50%", - display: "inline-block", - marginRight: 10, - }, - active: { - backgroundColor: theme.palette.success.light, - }, - inactive: { - backgroundColor: theme.palette.error.light, - }, - snackbar: { - bottom: theme.spacing(3) * 2, - right: theme.spacing(3) * 2, - }, - snackbarMessage: { - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText, - }, - }) -); - const downloadLogs = (serviceName: string, handleError: () => void): void => { api.logs$(serviceName).subscribe({ next: (resp: string) => { @@ -89,11 +54,6 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => { const { status, xudLocked, xudNotReady } = props; const [detailsOpen, setDetailsOpen] = useState(false); const [errorMsgOpen, setErrorMsgOpen] = useState(false); - const classes = useStyles(); - - const statusDotClass = `${classes.statusDot} ${ - isServiceReady(status) ? classes.active : classes.inactive - }`; const isDetailsIconVisible = (status: Status): boolean => { return ( @@ -113,12 +73,11 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => { return ( - {isDetailsIconVisible(status) && ( @@ -136,7 +95,7 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => { justify="center" wrap="nowrap" > - + {props.status.service} @@ -156,17 +115,17 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => { )} - + - + - + Status - + - + {props.status.status} - + @@ -179,14 +138,12 @@ const OverviewItem = (props: OverviewItemProps): ReactElement => { )} setErrorMsgOpen(false)} anchorOrigin={{ vertical: "bottom", horizontal: "right" }} > setErrorMsgOpen(false)}> diff --git a/src/dashboard/overview/overviewItem/styles.ts b/src/dashboard/overview/overviewItem/styles.ts new file mode 100644 index 0000000..a818109 --- /dev/null +++ b/src/dashboard/overview/overviewItem/styles.ts @@ -0,0 +1,72 @@ +import styled from "styled-components"; +import { + Grid, + CardContent as $CardContent, + Snackbar as $Snackbar, + SnackbarContent as $SnackbarContent, +} from "@material-ui/core"; + +//type +type StyledGridType = { + container: boolean; + justify: string; + alignItems: string; + wrap: string; +}; + +type CardCellGridType = { + item: boolean; + xs: number +}; + +type StatusDotType = { + isServiceReady: boolean; +} + +type SnackbarType = { + open: boolean; + autoHideDuration: number; + onClose: () => void; + anchorOrigin: object; +} + +type SnackbarContentType = { + message: string; + action: any; +} + +//styled +export const StyledGrid = styled(Grid)` + padding: ${p => p.theme.spacing(3)}px; +`; + +export const CardContent = styled($CardContent)` + padding: 0px; + &:last-child { + padding-bottom: 0px; + } +`; + +export const CardCellGrid = styled(Grid)` + padding: ${p => p.theme.spacing(4)}px; + text-align: center; +`; + +export const StatusDot = styled.span` + height: 10px; + width: 10px; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + background-color: ${p => p.isServiceReady ? p.theme.palette.success.light : p.theme.palette.error.light}; +`; + +export const Snackbar = styled($Snackbar)` + bottom: ${p => p.theme.spacing(3) * 2}px; + right: ${p => p.theme.spacing(3) * 2}px; +`; + +export const SnackbarContent = styled($SnackbarContent)` + background-color: ${p => p.theme.palette.error.main}; + color: ${p => p.theme.palette.error.contrastText}; +`; \ No newline at end of file diff --git a/src/dashboard/overview/ServiceDetails.tsx b/src/dashboard/overview/serviceDetails/index.tsx similarity index 65% rename from src/dashboard/overview/ServiceDetails.tsx rename to src/dashboard/overview/serviceDetails/index.tsx index 56f0429..3f5db4f 100644 --- a/src/dashboard/overview/ServiceDetails.tsx +++ b/src/dashboard/overview/serviceDetails/index.tsx @@ -1,50 +1,32 @@ import { - createStyles, - Dialog, DialogTitle, Divider, - Grid, - makeStyles, - Theme, + Grid } from "@material-ui/core"; import IconButton from "@material-ui/core/IconButton"; import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; import React, { ReactElement } from "react"; -import { Status } from "../../models/Status"; -import { drawerWidth } from "../Dashboard"; -import ServiceDetailsContent from "./ServiceDetailsContent"; +import { Status } from "../../../models/Status"; +import ServiceDetailsContent from "../serviceDetailsContent"; + +//styles +import { + Dialog +} from "./styles"; export type ServiceDetailsProps = { status: Status; handleClose: () => void; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - dialog: { - position: "absolute", - left: drawerWidth, - top: 0, - margin: theme.spacing(3), - width: "100%", - maxWidth: `calc(100% - ${drawerWidth + theme.spacing(3) * 2}px)`, - backgroundColor: theme.palette.background.default, - }, - }) -); - const ServiceDetails = (props: ServiceDetailsProps): ReactElement => { const { status, handleClose } = props; - const classes = useStyles(); return ( .MuiDialog-container > .MuiPaper-root { + position: absolute; + left: ${drawerWidth}px; + top: 0px; + margin: ${p => p.theme.spacing(3)}px; + width: 100%; + max-width: calc(100% - ${p => (drawerWidth + p.theme.spacing(3) * 2)}px); + background-color: ${p => p.theme.palette.background.default}; + } +`; \ No newline at end of file diff --git a/src/dashboard/overview/ServiceDetailsContent.tsx b/src/dashboard/overview/serviceDetailsContent/index.tsx similarity index 76% rename from src/dashboard/overview/ServiceDetailsContent.tsx rename to src/dashboard/overview/serviceDetailsContent/index.tsx index af2f2e6..6c5f176 100644 --- a/src/dashboard/overview/ServiceDetailsContent.tsx +++ b/src/dashboard/overview/serviceDetailsContent/index.tsx @@ -1,23 +1,26 @@ import { CircularProgress, - createStyles, - DialogContent, Divider, - Grid, - makeStyles, - Theme, - Typography, + Grid } from "@material-ui/core"; import IconButton from "@material-ui/core/IconButton"; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; import React, { ReactElement, useEffect, useState } from "react"; import { Subscription } from "rxjs"; -import api from "../../api"; -import { SERVICES_WITH_ADDITIONAL_INFO } from "../../constants"; -import { Info } from "../../models/Info"; -import { LndInfo } from "../../models/LndInfo"; -import { Status } from "../../models/Status"; -import { copyToClipboard } from "../../common/appUtil"; +import api from "../../../api"; +import { SERVICES_WITH_ADDITIONAL_INFO } from "../../../constants"; +import { Info } from "../../../models/Info"; +import { LndInfo } from "../../../models/LndInfo"; +import { Status } from "../../../models/Status"; +import { copyToClipboard } from "../../../common/appUtil"; + +//styles +import { + DialogContent, + GridCell, + TextRow, + LoadedContainer +} from "./styles"; export type ServiceDetailsContentProps = { status: Status; @@ -30,29 +33,6 @@ type InfoRow = { copyIcon?: boolean; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - content: { - padding: 0, - }, - contentCell: { - padding: theme.spacing(2), - textAlign: "center", - wordWrap: "break-word", - whiteSpace: "pre-wrap", - }, - textRow: { - padding: theme.spacing(3), - textAlign: "center", - }, - loaderContainer: { - height: "100px", - justifyContent: "center", - alignItems: "center", - }, - }) -); - const fetchInfo = ( onNext: (value: Info) => void, closeDetails: () => void @@ -136,7 +116,6 @@ const ServiceDetailsContent = ( props: ServiceDetailsContentProps ): ReactElement => { const { status, closeDetails } = props; - const classes = useStyles(); const [rows, setRows] = useState([]); const [initialLoadComplete, setInitialLoadComplete] = useState(false); @@ -153,7 +132,7 @@ const ServiceDetailsContent = ( }, [closeDetails, status]); return ( - + {initialLoadComplete ? ( rows?.map((row) => ( - + {row.label} - + - + {row.value} - - + + {row.copyIcon && ( copyToClipboard(row.value)}> )} - + )) ) : ( - + - + )} {!rows?.length && !SERVICES_WITH_ADDITIONAL_INFO.includes(status.service) && ( - + No additional information to display - + )} ); diff --git a/src/dashboard/overview/serviceDetailsContent/styles.ts b/src/dashboard/overview/serviceDetailsContent/styles.ts new file mode 100644 index 0000000..a508b24 --- /dev/null +++ b/src/dashboard/overview/serviceDetailsContent/styles.ts @@ -0,0 +1,45 @@ +import styled from "styled-components"; +import { + DialogContent as $DialogContent, + Grid, + Typography +} from "@material-ui/core"; + +//types +type GridCellType = { + item: boolean; + xs: number; + md: number; +}; + +type TextRowType = { + variant: string; + component: string; +} + +type LoadedContainerType = { + container: boolean; +} + +//styled +export const DialogContent = styled($DialogContent)` + padding: 0px; +`; + +export const GridCell = styled(Grid)` + padding: ${p => p.theme.spacing(2)}px; + text-align: center; + word-wrap: break-word; + white-space: pre-wrap; +`; + +export const TextRow = styled(Typography)` + padding: ${p => p.theme.spacing(3)}px; + text-align: center; +`; + +export const LoadedContainer = styled(Grid)` + height: 100px; + justify-content: center; + align-items: center; +`; \ No newline at end of file diff --git a/src/dashboard/styles.ts b/src/dashboard/styles.ts new file mode 100644 index 0000000..3c8587b --- /dev/null +++ b/src/dashboard/styles.ts @@ -0,0 +1,57 @@ +import styled from "styled-components"; +import { + Drawer, + List, + Typography, + Button +} from "@material-ui/core"; +import { ReactElement } from "react"; +const drawerWidth = 200; + +//types +type DrawerPaperType = { + variant: string; + anchor: string; +} + +type HeaderType = { + variant: string; + component: string; + color: string; +} + +type DrawerButtonType = { + size: string; + startIcon: ReactElement; + variant: string; + onClick: () => void; +} + +//styled +export const DrawerPaper = styled(Drawer)` + & > .MuiPaper-root { + width: ${drawerWidth}px; + justify-content: space-between; + } +`; + +export const MenuContainer = styled(List)` + width: 100%; +`; + +export const Header = styled(Typography)` + padding: 16px; +`; + +export const DrawerButton = styled(Button)` + margin: ${p => p.theme.spacing(2)}px; +`; + +export const Content = styled.main` + margin-left: ${drawerWidth}px; + background-color: ${p => p.theme.palette.background.default}; + padding: ${p => p.theme.spacing(3)}px; + height: 100vh; + display: flex; + flex-direction: column; +`; \ No newline at end of file diff --git a/src/dashboard/trade/Trade.tsx b/src/dashboard/trade/Trade.tsx index 9332fcd..1da819e 100644 --- a/src/dashboard/trade/Trade.tsx +++ b/src/dashboard/trade/Trade.tsx @@ -7,10 +7,10 @@ import { interval, timer } from "rxjs"; import { filter, mergeMap, retry, take } from "rxjs/operators"; import api from "../../api"; import { getErrorMsg } from "../../common/errorUtil"; -import PageCircularProgress from "../../common/PageCircularProgress"; +import PageCircularProgress from "../../common/pageCircularProgress"; import { Path } from "../../router/Path"; import DashboardContent, { DashboardContentState } from "../DashboardContent"; -import ViewDisabled from "../ViewDisabled"; +import ViewDisabled from "../viewDisabled"; import OpenOrders from "./openOrders/OpenOrders"; import OrderBook from "./orderBook/OrderBook"; import Select from "../../common/Select"; diff --git a/src/dashboard/trade/openOrders/CancelOrder.tsx b/src/dashboard/trade/openOrders/CancelOrder.tsx index 6a476e2..950bf7c 100644 --- a/src/dashboard/trade/openOrders/CancelOrder.tsx +++ b/src/dashboard/trade/openOrders/CancelOrder.tsx @@ -1,7 +1,7 @@ import { FormControl, FormHelperText } from "@material-ui/core"; import React, { ReactElement, useState } from "react"; import api from "../../../api"; -import ButtonWithLoading from "../../../common/ButtonWithLoading"; +import ButtonWithLoading from "../../../common/buttonWithLoading"; import { getErrorMsg } from "../../../common/errorUtil"; import { CancelledOrder, OrderRow } from "./OpenOrders"; diff --git a/src/dashboard/trade/openOrders/OpenOrders.tsx b/src/dashboard/trade/openOrders/OpenOrders.tsx index cbbae1f..48b44c7 100644 --- a/src/dashboard/trade/openOrders/OpenOrders.tsx +++ b/src/dashboard/trade/openOrders/OpenOrders.tsx @@ -8,7 +8,7 @@ import api from "../../../api"; import { satsToCoins, satsToCoinsStr } from "../../../common/currencyUtil"; import ErrorMessage from "../../../common/ErrorMessage"; import { getErrorMsg } from "../../../common/errorUtil"; -import Loader from "../../../common/Loader"; +import Loader from "../../../common/loader"; import Table, { TableHeader } from "../../../common/Table"; import { OrderOwner } from "../../../enums"; import { Order } from "../../../models/Order"; diff --git a/src/dashboard/trade/orderBook/OrderBook.tsx b/src/dashboard/trade/orderBook/OrderBook.tsx index 7bb5825..f85e87c 100644 --- a/src/dashboard/trade/orderBook/OrderBook.tsx +++ b/src/dashboard/trade/orderBook/OrderBook.tsx @@ -13,7 +13,7 @@ import api from "../../../api"; import { getErrorMsg } from "../../../common/errorUtil"; import SectionTitle from "../SectionTitle"; import { Bucket } from "../../../models/OrderBookResponse"; -import Loader from "../../../common/Loader"; +import Loader from "../../../common/loader"; import ErrorMessage from "../../../common/ErrorMessage"; import Orders from "./Orders"; import { tradeTheme } from "../../../themes"; diff --git a/src/dashboard/trade/placeOrder/PlaceOrder.tsx b/src/dashboard/trade/placeOrder/PlaceOrder.tsx index 31b5c7b..b167ad7 100644 --- a/src/dashboard/trade/placeOrder/PlaceOrder.tsx +++ b/src/dashboard/trade/placeOrder/PlaceOrder.tsx @@ -12,7 +12,7 @@ import { exhaustMap, retry } from "rxjs/operators"; import api from "../../../api"; import ErrorMessage from "../../../common/ErrorMessage"; import { getErrorMsg } from "../../../common/errorUtil"; -import Loader from "../../../common/Loader"; +import Loader from "../../../common/loader"; import { TradeStore, TRADE_STORE } from "../../../stores/tradeStore"; import { darkTheme, tradeTheme } from "../../../themes"; import SectionTitle from "../SectionTitle"; diff --git a/src/dashboard/trade/placeOrder/PlaceOrderButton.tsx b/src/dashboard/trade/placeOrder/PlaceOrderButton.tsx index 90b156c..a2fcecc 100644 --- a/src/dashboard/trade/placeOrder/PlaceOrderButton.tsx +++ b/src/dashboard/trade/placeOrder/PlaceOrderButton.tsx @@ -1,7 +1,7 @@ import { inject, observer } from "mobx-react"; import React, { ReactElement, useState } from "react"; import api from "../../../api"; -import ButtonWithLoading from "../../../common/ButtonWithLoading"; +import ButtonWithLoading from "../../../common/buttonWithLoading"; import { coinsToSats } from "../../../common/currencyUtil"; import { OrderSide } from "../../../enums"; import { TradeStore, TRADE_STORE } from "../../../stores/tradeStore"; diff --git a/src/dashboard/tradehistory/Tradehistory.tsx b/src/dashboard/tradehistory/index.tsx similarity index 88% rename from src/dashboard/tradehistory/Tradehistory.tsx rename to src/dashboard/tradehistory/index.tsx index 0ab9ef9..5dc27bc 100644 --- a/src/dashboard/tradehistory/Tradehistory.tsx +++ b/src/dashboard/tradehistory/index.tsx @@ -1,12 +1,12 @@ -import { createStyles, Grid, withStyles, WithStyles } from "@material-ui/core"; +import { Grid } from "@material-ui/core"; import React, { ReactElement } from "react"; import { RouteComponentProps, withRouter } from "react-router-dom"; import api from "../../api"; import { satsToCoins } from "../../common/currencyUtil"; -import PageCircularProgress from "../../common/PageCircularProgress"; +import PageCircularProgress from "../../common/pageCircularProgress"; import SortingOptions, { SortOption, -} from "../../common/sorting/SortingOptions"; +} from "../../common/sorting/sortingOptions"; import { getComparator, SortingOrder, @@ -17,8 +17,11 @@ import { OrderRole } from "../../enums"; import { Trade } from "../../models/Trade"; import { TradehistoryResponse } from "../../models/TradehistoryResponse"; import DashboardContent, { DashboardContentState } from "../DashboardContent"; -import ViewDisabled from "../ViewDisabled"; -import TradehistoryDownload from "./TradehistoryDownload"; +import ViewDisabled from "../viewDisabled"; +import TradehistoryDownload from "./tradehistoryDownload"; + +//styles +import { Content } from './styles'; export type TradeRow = { swapHash: string; @@ -42,8 +45,7 @@ export type TradeHeader = { gridsXl?: 1 | 2 | 3 | 4; }; -type PropsType = RouteComponentProps<{ param1: string }> & - WithStyles; +type PropsType = RouteComponentProps<{ param1: string }>; type StateType = DashboardContentState & { trades?: TradehistoryResponse; @@ -52,16 +54,6 @@ type StateType = DashboardContentState & { sortingOrder: SortingOrder; }; -const styles = () => { - return createStyles({ - content: { - flex: 1, - overflowY: "auto", - flexWrap: "nowrap", - }, - }); -}; - const getRowId = (row: TradeRow): string => { return row.swapHash ? row.swapHash : row.orderId + Math.random(); }; @@ -147,8 +139,6 @@ class Tradehistory extends DashboardContent { }; render(): ReactElement { - const { classes } = this.props; - return ( {this.state.xudLocked || this.state.xudNotReady ? ( @@ -158,7 +148,7 @@ class Tradehistory extends DashboardContent { /> ) : this.state.rows?.length ? ( <> - + { defaultGridXs={2} defaultGridXl={2} /> - + { } } -export default withRouter( - withStyles(styles, { withTheme: true })(Tradehistory) -); +export default withRouter(Tradehistory); \ No newline at end of file diff --git a/src/dashboard/tradehistory/styles.ts b/src/dashboard/tradehistory/styles.ts new file mode 100644 index 0000000..24c58a6 --- /dev/null +++ b/src/dashboard/tradehistory/styles.ts @@ -0,0 +1,15 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type ContentType = { + container: boolean; + direction: string; +} + +//styled +export const Content = styled(Grid)` + flex: 1; + overflow-y: auto; + flex-wrap: nowrap; +`; \ No newline at end of file diff --git a/src/dashboard/tradehistory/TradehistoryDownload.tsx b/src/dashboard/tradehistory/tradehistoryDownload/index.tsx similarity index 52% rename from src/dashboard/tradehistory/TradehistoryDownload.tsx rename to src/dashboard/tradehistory/tradehistoryDownload/index.tsx index 948522b..ea0839a 100644 --- a/src/dashboard/tradehistory/TradehistoryDownload.tsx +++ b/src/dashboard/tradehistory/tradehistoryDownload/index.tsx @@ -1,56 +1,41 @@ -import { - Button, - createStyles, - Grid, - makeStyles, - Theme, -} from "@material-ui/core"; +import { Button } from "@material-ui/core"; import GetAppOutlinedIcon from "@material-ui/icons/GetAppOutlined"; import React, { ReactElement } from "react"; -import CSVLink from "../../common/csv/CsvLink"; -import { formatDateTimeForFilename } from "../../common/dateUtil"; -import { TradeHeader, TradeRow } from "./Tradehistory"; +import { formatDateTimeForFilename } from "../../../common/dateUtil"; +import { TradeHeader, TradeRow } from ".."; + +//styles +import { + DownloadButtonContainer, + DownloadLink +} from "./styles"; export type TradehistoryDownloadProps = { rows: TradeRow[]; headers: TradeHeader[]; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - downloadButtonContainer: { - paddingTop: theme.spacing(3), - }, - downloadLink: { - textDecoration: "none", - }, - }) -); - const TradehistoryDownload = ( props: TradehistoryDownloadProps ): ReactElement => { - const classes = useStyles(); const { headers, rows } = props; return ( - - - - + + ); }; diff --git a/src/dashboard/tradehistory/tradehistoryDownload/styles.ts b/src/dashboard/tradehistory/tradehistoryDownload/styles.ts new file mode 100644 index 0000000..6348c7c --- /dev/null +++ b/src/dashboard/tradehistory/tradehistoryDownload/styles.ts @@ -0,0 +1,25 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; +import CSVLink from "../../../common/csv/CsvLink"; + +//types +type DownloadButtonContainerType = { + item: boolean; + container: boolean; + justify: string; +} + +type DownloadLinkType = { + data: any; + headers: any; + filename: string; +} + +//styled +export const DownloadButtonContainer = styled(Grid)` + padding-top: ${p => p.theme.spacing(3)}px; +`; + +export const DownloadLink = styled(CSVLink)` + text-decoration: none; +`; \ No newline at end of file diff --git a/src/dashboard/UnlockXud.tsx b/src/dashboard/unlockXud/index.tsx similarity index 75% rename from src/dashboard/UnlockXud.tsx rename to src/dashboard/unlockXud/index.tsx index 13a765c..1979320 100644 --- a/src/dashboard/UnlockXud.tsx +++ b/src/dashboard/unlockXud/index.tsx @@ -1,31 +1,20 @@ import { - createStyles, Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import React, { ReactElement, useState } from "react"; -import ButtonWithLoading from "../common/ButtonWithLoading"; -import api from "../api"; -import { getErrorMsg, XUD_ERROR_MESSAGES } from "../common/errorUtil"; -import Password from "../common/Password"; +import ButtonWithLoading from "../../common/buttonWithLoading"; +import Password from "../../common/Password"; +import api from "../../api"; +import { getErrorMsg, XUD_ERROR_MESSAGES } from "../../common/errorUtil"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - container: { - height: "50vh", - maxHeight: 500, - }, - errorMessageContainer: { - minHeight: 50, - marginTop: theme.spacing(2), - }, - }) -); +//styles +import { + Container, + ErrorMessageContainer +} from "./styles"; const UnlockXud = (): ReactElement => { - const classes = useStyles(); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const [queryInProgress, setQueryInProgress] = useState(false); @@ -55,7 +44,7 @@ const UnlockXud = (): ReactElement => { } }} > - + { onClick={unlock} /> - {!!error && ( <> @@ -101,9 +89,9 @@ const UnlockXud = (): ReactElement => { )} - + - + ); }; diff --git a/src/dashboard/unlockXud/styles.ts b/src/dashboard/unlockXud/styles.ts new file mode 100644 index 0000000..322152c --- /dev/null +++ b/src/dashboard/unlockXud/styles.ts @@ -0,0 +1,26 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type ContainerType = { + container: boolean; + justify: string; +} + +type ErrorMessageContainerType = { + item: boolean; + container: boolean; + direction: string; + alignItems: string; +} + +//styled +export const Container = styled(Grid)` + height: 50vh; + max-height: 500px; +`; + +export const ErrorMessageContainer = styled(Grid)` + min-height: 50px; + margin-top: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file diff --git a/src/dashboard/ViewDisabled.tsx b/src/dashboard/viewDisabled/index.tsx similarity index 75% rename from src/dashboard/ViewDisabled.tsx rename to src/dashboard/viewDisabled/index.tsx index d594487..6f4874c 100644 --- a/src/dashboard/ViewDisabled.tsx +++ b/src/dashboard/viewDisabled/index.tsx @@ -1,39 +1,29 @@ import { - createStyles, Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined"; import React, { ReactElement } from "react"; -import UnlockXud from "./UnlockXud"; +import UnlockXud from "../unlockXud"; + +//styles +import { Row } from "./styles"; export type ViewDisabledProps = { xudLocked?: boolean; xudStatus?: string; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - padding: theme.spacing(3), - }, - }) -); - function ViewDisabled(props: ViewDisabledProps): ReactElement { - const classes = useStyles(); const { xudLocked, xudStatus } = props; return ( - @@ -45,8 +35,8 @@ function ViewDisabled(props: ViewDisabledProps): ReactElement { {xudLocked ? "XUD is locked" : "XUD is not ready"} - - + + {xudLocked ? ( ) : ( @@ -56,7 +46,7 @@ function ViewDisabled(props: ViewDisabledProps): ReactElement { )} - + ); } diff --git a/src/dashboard/viewDisabled/styles.ts b/src/dashboard/viewDisabled/styles.ts new file mode 100644 index 0000000..d300e7e --- /dev/null +++ b/src/dashboard/viewDisabled/styles.ts @@ -0,0 +1,16 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type RowType = { + container: boolean; + item: boolean; + alignItems?: string; + justify: string; + spacing?: number; +} + +//styled +export const Row = styled(Grid)` + padding: ${p => p.theme.spacing(3)}px; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/InfoMessage.tsx b/src/dashboard/wallet/InfoMessage.tsx deleted file mode 100644 index e33db9b..0000000 --- a/src/dashboard/wallet/InfoMessage.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { - Card, - createStyles, - makeStyles, - Theme, - Typography, -} from "@material-ui/core"; -import React, { ReactElement } from "react"; - -type InfoMessageProps = { - message: string; -}; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - card: { - backgroundColor: theme.palette.info.main, - color: theme.palette.info.contrastText, - marginTop: theme.spacing(3), - padding: theme.spacing(1), - width: "100%", - }, - }) -); - -const InfoMessage = (props: InfoMessageProps): ReactElement => { - const { message } = props; - const classes = useStyles(); - - return ( - - - {message} - - - ); -}; - -export default InfoMessage; diff --git a/src/dashboard/wallet/Address.tsx b/src/dashboard/wallet/address/index.tsx similarity index 59% rename from src/dashboard/wallet/Address.tsx rename to src/dashboard/wallet/address/index.tsx index dcbca23..7775d80 100644 --- a/src/dashboard/wallet/Address.tsx +++ b/src/dashboard/wallet/address/index.tsx @@ -1,17 +1,18 @@ import { - createStyles, - Grid, Icon, IconButton, InputAdornment, - makeStyles, - OutlinedInput, - Theme, Tooltip, } from "@material-ui/core"; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; import React, { ReactElement } from "react"; -import { copyToClipboard } from "../../common/appUtil"; +import { copyToClipboard } from "../../../common/appUtil"; + +//styles +import { + AddressContainer, + AddressField +} from "./styles"; type AddressProps = { address: string; @@ -21,50 +22,21 @@ type AddressProps = { readOnly: boolean; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - addressContainer: { - margin: `${theme.spacing(2)}px 0px`, - }, - addressField: { - marginBottom: theme.spacing(2), - }, - addressFieldReadOnly: { - color: theme.palette.text.primary, - marginBottom: theme.spacing(2), - "&.MuiOutlinedInput-root.Mui-focused fieldset": { - borderColor: theme.palette.common.white, - borderWidth: 1, - }, - }, - qrButton: { - textTransform: "none", - }, - }) -); - const Address = (props: AddressProps): ReactElement => { const { address, setAddress, showQr, openQr, readOnly } = props; - const classes = useStyles(); - - const addressFieldClass = readOnly - ? `${classes.addressField} ${classes.addressFieldReadOnly}` - : classes.addressField; return ( - - + onChange={(event: any) => setAddress ? setAddress(event.target.value) : void 0 } endAdornment={ @@ -86,7 +58,7 @@ const Address = (props: AddressProps): ReactElement => { } /> - + ); }; diff --git a/src/dashboard/wallet/address/styles.ts b/src/dashboard/wallet/address/styles.ts new file mode 100644 index 0000000..d29cc0f --- /dev/null +++ b/src/dashboard/wallet/address/styles.ts @@ -0,0 +1,38 @@ +import styled from "styled-components"; +import { + Grid, + OutlinedInput +} from "@material-ui/core"; + +//types +type AddressContainerType = { + item: boolean; + container: boolean; + direction: string; +} + +type AddressFieldType = { + fullWidth: boolean; + color: string; + readOnly: boolean + value: string; + onChange: any; + endAdornment: any; +} + +//styled +export const AddressContainer = styled(Grid)` + margin: ${p => p.theme.spacing(2)}px 0px; +`; + +export const AddressField = styled(OutlinedInput)` + margin: ${p => p.theme.spacing(2)}px 0px; + ${p => p.readOnly && ` + color: ${p.theme.palette.text.primary}; + margin-bottom: ${p.theme.spacing(2)}px; + &.MuiOutlinedInput-root.Mui-focused fieldset { + border-color: ${p.theme.palette.common.white}; + border-width: 1px; + } + `} +`; \ No newline at end of file diff --git a/src/dashboard/wallet/BalanceSummary.tsx b/src/dashboard/wallet/balanceSummary/index.tsx similarity index 90% rename from src/dashboard/wallet/BalanceSummary.tsx rename to src/dashboard/wallet/balanceSummary/index.tsx index afb00ca..ffe6891 100644 --- a/src/dashboard/wallet/BalanceSummary.tsx +++ b/src/dashboard/wallet/balanceSummary/index.tsx @@ -1,9 +1,9 @@ import { Tooltip } from "@material-ui/core"; import InfoIcon from "@material-ui/icons/InfoOutlined"; import React, { ReactElement } from "react"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import Balance from "../../models/Balance"; -import WalletRow, { WalletSubrow } from "./WalletRow"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import Balance from "../../../models/Balance"; +import WalletRow, { WalletSubrow } from "../walletRow"; type BalanceSummaryProps = { balance: Balance; diff --git a/src/dashboard/wallet/BoltzFeeInfo.tsx b/src/dashboard/wallet/boltzFeeInfo/index.tsx similarity index 74% rename from src/dashboard/wallet/BoltzFeeInfo.tsx rename to src/dashboard/wallet/boltzFeeInfo/index.tsx index c0c5b50..ed9145b 100644 --- a/src/dashboard/wallet/BoltzFeeInfo.tsx +++ b/src/dashboard/wallet/boltzFeeInfo/index.tsx @@ -1,17 +1,17 @@ import { - createStyles, Grid, - makeStyles, - Theme, Tooltip, Typography, } from "@material-ui/core"; import Link from "@material-ui/core/Link"; import InfoIcon from "@material-ui/icons/InfoOutlined"; import React, { ReactElement } from "react"; -import { openLink } from "../../common/appUtil"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import { Fees } from "../../models/BoltzFees"; +import { openLink } from "../../../common/appUtil"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import { Fees } from "../../../models/BoltzFees"; + +//styles +import { IconContainer } from "./styles"; type BoltzFeeInfoProps = { fees: Fees; @@ -22,24 +22,8 @@ type BoltzFeeInfoProps = { const BOLTZ_URL = "https://boltz.exchange"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - iconContainer: { - display: "flex", - alignItems: "center", - }, - link: { - color: theme.palette.text.primary, - "a:hover": { - color: theme.palette.text.primary, - }, - }, - }) -); - const BoltzFeeInfo = (props: BoltzFeeInfoProps): ReactElement => { const { fees, currency, amount, isReverse } = props; - const classes = useStyles(); const swapFee = amount ? `${satsToCoinsStr((amount * fees.percentage) / 100, currency)} (${ @@ -56,7 +40,7 @@ const BoltzFeeInfo = (props: BoltzFeeInfoProps): ReactElement => { wrap="nowrap" spacing={1} > - + @@ -74,7 +58,7 @@ const BoltzFeeInfo = (props: BoltzFeeInfoProps): ReactElement => { > - + Boltz swap fee: {swapFee} | Miner fee:{" "} diff --git a/src/dashboard/wallet/boltzFeeInfo/styles.ts b/src/dashboard/wallet/boltzFeeInfo/styles.ts new file mode 100644 index 0000000..2a679d3 --- /dev/null +++ b/src/dashboard/wallet/boltzFeeInfo/styles.ts @@ -0,0 +1,13 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type IconContainerType = { + item: boolean; +} + +//styled +export const IconContainer = styled(Grid)` + display: flex; + align-items: center; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/CheckBoltzTransactionStatus.tsx b/src/dashboard/wallet/checkBoltzStatus/index.tsx similarity index 59% rename from src/dashboard/wallet/CheckBoltzTransactionStatus.tsx rename to src/dashboard/wallet/checkBoltzStatus/index.tsx index 8a80246..8d8de85 100644 --- a/src/dashboard/wallet/CheckBoltzTransactionStatus.tsx +++ b/src/dashboard/wallet/checkBoltzStatus/index.tsx @@ -1,81 +1,63 @@ import { - createStyles, Divider, Grid, IconButton, - makeStyles, - Theme, Tooltip, - Typography, + Typography } from "@material-ui/core"; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; import React, { ReactElement } from "react"; -import { copyToClipboard } from "../../common/appUtil"; +import { copyToClipboard } from "../../../common/appUtil"; + +//styles +import { + Row, + Code, + IconContainer +} from "./styles"; type CheckBoltzTransactionStatusProps = { currency: string; id: string; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - paddingTop: theme.spacing(1), - }, - code: { - backgroundColor: theme.palette.background.default, - padding: theme.spacing(1), - borderRadius: 5, - letterSpacing: 2, - fontFamily: "monospace", - }, - iconContainer: { - display: "flex", - alignItems: "center", - }, - }) -); - const CheckBoltzTransactionStatus = ( props: CheckBoltzTransactionStatusProps ): ReactElement => { const { currency, id } = props; - const classes = useStyles(); const command = `boltzcli ${currency} swapinfo ${id}`; return ( - + To check status, open the Console tab and run - - + - {command} - + - + copyToClipboard(command)}> - - + + ); }; diff --git a/src/dashboard/wallet/checkBoltzStatus/styles.ts b/src/dashboard/wallet/checkBoltzStatus/styles.ts new file mode 100644 index 0000000..14ecea9 --- /dev/null +++ b/src/dashboard/wallet/checkBoltzStatus/styles.ts @@ -0,0 +1,39 @@ +import styled from "styled-components"; +import { + Grid, + Typography +} from "@material-ui/core"; + +//types +type RowType = { + item: boolean; + container: boolean; + justify: string; +} + +type CodeType = { + component: string; + variant: string; +} + +type IconContainterType = { + item: boolean; +} + +//styled +export const Row = styled(Grid)` + padding-top: ${p => p.theme.spacing(1)}px; +`; + +export const Code = styled(Typography)` + background-color: ${p => p.theme.palette.background.default}; + padding: ${p => p.theme.spacing(1)}px; + border-radius: 5px; + letter-spacing: 2px; + font-family: monospace; +`; + +export const IconContainer = styled(Grid)` + display: flex; + align-items: center; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/Deposit.tsx b/src/dashboard/wallet/deposit/index.tsx similarity index 80% rename from src/dashboard/wallet/Deposit.tsx rename to src/dashboard/wallet/deposit/index.tsx index e0c57d2..57e8bc0 100644 --- a/src/dashboard/wallet/Deposit.tsx +++ b/src/dashboard/wallet/deposit/index.tsx @@ -1,25 +1,25 @@ import { - createStyles, Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import React, { ReactElement, useEffect, useState } from "react"; import { combineLatest, Observable, Subject } from "rxjs"; -import api from "../../api"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import ErrorMessage from "../../common/ErrorMessage"; -import { getErrorMsg } from "../../common/errorUtil"; -import Loader from "../../common/Loader"; -import QrCode from "../../common/QrCode"; -import WarningMessage from "../../common/WarningMessage"; -import { DepositResponse } from "../../models/DepositResponse"; -import { GetServiceInfoResponse } from "../../models/GetServiceInfoResponse"; -import { Info } from "../../models/Info"; -import Address from "./Address"; -import BoltzFeeInfo from "./BoltzFeeInfo"; -import CheckBoltzTransactionStatus from "./CheckBoltzTransactionStatus"; +import api from "../../../api"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import { getErrorMsg } from "../../../common/errorUtil"; +import Loader from "../../../common/loader"; +import QrCode from "../../../common/qrCode"; +import WarningMessage from "../../../common/WarningMessage"; +import { DepositResponse } from "../../../models/DepositResponse"; +import { GetServiceInfoResponse } from "../../../models/GetServiceInfoResponse"; +import { Info } from "../../../models/Info"; +import Address from "../address"; +import BoltzFeeInfo from "../boltzFeeInfo"; +import CheckBoltzTransactionStatus from "../checkBoltzStatus"; +import ErrorMessage from "../../../common/ErrorMessage"; + +//styles +import { Row } from "./styles"; type DepositProps = { currency: string; @@ -27,14 +27,6 @@ type DepositProps = { getInfo$: Observable; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - paddingTop: theme.spacing(2), - }, - }) -); - const getAvgMinutesBetweenBlocks = ( start: number, end: number, @@ -60,7 +52,6 @@ const getTimeString = (minutes: number): string => { const Deposit = (props: DepositProps): ReactElement => { const { currency, refreshSubject, getInfo$ } = props; - const classes = useStyles(); const [depositData, setDepositData] = useState( undefined @@ -144,13 +135,13 @@ const Deposit = (props: DepositProps): ReactElement => { openQr={() => setQrOpen(true)} readOnly={true} /> - -
+ + -
+ ) : ( diff --git a/src/dashboard/wallet/deposit/styles.ts b/src/dashboard/wallet/deposit/styles.ts new file mode 100644 index 0000000..0501ca5 --- /dev/null +++ b/src/dashboard/wallet/deposit/styles.ts @@ -0,0 +1,5 @@ +import styled from "styled-components"; + +export const Row = styled.div` + padding-top: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/infoMessage/index.tsx b/src/dashboard/wallet/infoMessage/index.tsx new file mode 100644 index 0000000..9170668 --- /dev/null +++ b/src/dashboard/wallet/infoMessage/index.tsx @@ -0,0 +1,23 @@ +import { Typography } from "@material-ui/core"; +import React, { ReactElement } from "react"; + +//styles +import { Card } from "./styles"; + +type InfoMessageProps = { + message: string; +}; + +const InfoMessage = (props: InfoMessageProps): ReactElement => { + const { message } = props; + + return ( + + + {message} + + + ); +}; + +export default InfoMessage; diff --git a/src/dashboard/wallet/infoMessage/styles.ts b/src/dashboard/wallet/infoMessage/styles.ts new file mode 100644 index 0000000..a2665b0 --- /dev/null +++ b/src/dashboard/wallet/infoMessage/styles.ts @@ -0,0 +1,16 @@ +import styled from "styled-components"; +import { Card as $Card } from "@material-ui/core"; + +//types +type CardType = { + elevation: number; +} + +//styled +export const Card = styled($Card)` + background-color: ${p => p.theme.palette.info.main}; + color: ${p => p.theme.palette.info.contrastText}; + margin-top: ${p => p.theme.spacing(3)}px; + padding: ${p => p.theme.spacing(1)}px; + width: 100%; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/LimitsSummary.tsx b/src/dashboard/wallet/limitsSummary/index.tsx similarity index 88% rename from src/dashboard/wallet/LimitsSummary.tsx rename to src/dashboard/wallet/limitsSummary/index.tsx index 812b766..f590d6b 100644 --- a/src/dashboard/wallet/LimitsSummary.tsx +++ b/src/dashboard/wallet/limitsSummary/index.tsx @@ -1,9 +1,9 @@ import { Tooltip } from "@material-ui/core"; import InfoIcon from "@material-ui/icons/InfoOutlined"; import React, { ReactElement } from "react"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import { TradingLimits } from "../../models/TradingLimits"; -import WalletRow from "./WalletRow"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import { TradingLimits } from "../../../models/TradingLimits"; +import WalletRow from "../walletRow"; type LimitsSummaryProps = { limits: TradingLimits; diff --git a/src/dashboard/wallet/WalletItem.tsx b/src/dashboard/wallet/walletItem/index.tsx similarity index 75% rename from src/dashboard/wallet/WalletItem.tsx rename to src/dashboard/wallet/walletItem/index.tsx index f3a7017..ac9961a 100644 --- a/src/dashboard/wallet/WalletItem.tsx +++ b/src/dashboard/wallet/walletItem/index.tsx @@ -1,22 +1,29 @@ -import { createStyles, makeStyles, Theme, Typography } from "@material-ui/core"; -import Card from "@material-ui/core/Card"; -import CardContent from "@material-ui/core/CardContent"; +import { Typography } from "@material-ui/core"; import Grid from "@material-ui/core/Grid"; import React, { ReactElement, useEffect, useState } from "react"; import { Observable, Subject } from "rxjs"; import { filter, mergeMap, pluck, take } from "rxjs/operators"; -import { getErrorMsg } from "../../common/errorUtil"; -import { isServiceReady } from "../../common/serviceUtil"; -import Balance from "../../models/Balance"; -import { Info } from "../../models/Info"; -import { Status } from "../../models/Status"; -import { TradingLimits } from "../../models/TradingLimits"; -import BalanceSummary from "./BalanceSummary"; -import Deposit from "./Deposit"; -import LimitsSummary from "./LimitsSummary"; -import WalletItemHeader from "./WalletItemHeader"; -import WalletTransactionButton from "./WalletTransactionButton"; -import Withdraw from "./Withdraw"; +import { getErrorMsg } from "../../../common/errorUtil"; +import { isServiceReady } from "../../../common/serviceUtil"; +import Balance from "../../../models/Balance"; +import { Info } from "../../../models/Info"; +import { Status } from "../../../models/Status"; +import { TradingLimits } from "../../../models/TradingLimits"; +import BalanceSummary from "../balanceSummary"; +import Deposit from "../deposit"; +import LimitsSummary from "../limitsSummary"; +import WalletItemHeader from "../walletItemHeader"; +import WalletTransactionButton from "../walletTransactionButton"; +import Withdraw from "../withdraw"; + +//styles +import { + Card, + CardContent, + CardBody, + ViewContent, + RowsGroup +} from "./styles"; export type WalletItemProps = { currency: string; @@ -39,35 +46,10 @@ type WalletItemView = { title?: string; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - card: { - height: 446, - minWidth: 514, - }, - cardContent: { - padding: theme.spacing(3), - height: "100%", - display: "flex", - flexDirection: "column", - }, - cardBody: { - height: "100%", - }, - viewContent: { - paddingTop: theme.spacing(3), - }, - rowsGroup: { - paddingTop: theme.spacing(2), - }, - }) -); - const transactionButtonsVisible = (currency: string): boolean => ["BTC", "LTC"].includes(currency); const WalletItem = (props: WalletItemProps): ReactElement => { - const classes = useStyles(); const { balance, currency, limits, getInfo$, getBoltzStatus$ } = props; const [activeViewType, setActiveViewType] = useState( WalletItemViewType.BALANCE @@ -154,30 +136,28 @@ const WalletItem = (props: WalletItemProps): ReactElement => { return ( - - + + - {views.map( (view) => isActive(view.type) && ( - {!!view.title && ( @@ -190,25 +170,23 @@ const WalletItem = (props: WalletItemProps): ReactElement => { )} - {view.component} - - + + ) )} {isActive(WalletItemViewType.BALANCE, WalletItemViewType.LIMITS) && transactionButtonsVisible(currency) && ( - { setActiveViewType(WalletItemViewType.WITHDRAW) } /> - + )} - + diff --git a/src/dashboard/wallet/walletItem/styles.ts b/src/dashboard/wallet/walletItem/styles.ts new file mode 100644 index 0000000..bbd6d97 --- /dev/null +++ b/src/dashboard/wallet/walletItem/styles.ts @@ -0,0 +1,54 @@ +import styled from "styled-components"; +import { + Card as $Card, + CardContent as $CardContent, + Grid +} from "@material-ui/core"; + +//types +type CardBodyType = { + item: boolean; + container: boolean; + direction: string; + justify: string; +} + +type ViewContentType = { + item: boolean; + container: boolean; + direction: string; +} + +type RowsGroupType = { + key?: string; + item: boolean; + container: boolean; + direction?: string; + justify?: string; + spacing?: number; +} + +//styled +export const Card = styled($Card)` + height: 446px; + min-width: 514px; +`; + +export const CardContent = styled($CardContent)` + padding: ${p => p.theme.spacing(3)}px; + height: 100%; + display: flex; + flex-direction: column; +`; + +export const CardBody = styled(Grid)` + height: 100%; +`; + +export const ViewContent = styled(Grid)` + padding-top: ${p => p.theme.spacing(3)}px; +`; + +export const RowsGroup = styled(Grid)` + padding-top: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/WalletItemHeader.tsx b/src/dashboard/wallet/walletItemHeader/index.tsx similarity index 97% rename from src/dashboard/wallet/WalletItemHeader.tsx rename to src/dashboard/wallet/walletItemHeader/index.tsx index 5b3d335..c2ac86b 100644 --- a/src/dashboard/wallet/WalletItemHeader.tsx +++ b/src/dashboard/wallet/walletItemHeader/index.tsx @@ -12,7 +12,7 @@ import ArrowForwardIcon from "@material-ui/icons/ArrowForward"; import RefreshIcon from "@material-ui/icons/Refresh"; import React, { ReactElement } from "react"; import { Subject } from "rxjs"; -import { WalletItemViewType } from "./WalletItem"; +import { WalletItemViewType } from "../walletItem"; type WalletItemHeaderProps = { currency: string; diff --git a/src/dashboard/wallet/walletItemHeader/styles.ts b/src/dashboard/wallet/walletItemHeader/styles.ts new file mode 100644 index 0000000..c2a8458 --- /dev/null +++ b/src/dashboard/wallet/walletItemHeader/styles.ts @@ -0,0 +1,10 @@ +import styled from "styled-components"; +import { + Grid, + Button +} from "@material-ui/core"; + +export const Header = styled(Grid)` +`; + +export const HeaderButton = styled(Button)``; \ No newline at end of file diff --git a/src/dashboard/wallet/WalletRow.tsx b/src/dashboard/wallet/walletRow/index.tsx similarity index 85% rename from src/dashboard/wallet/WalletRow.tsx rename to src/dashboard/wallet/walletRow/index.tsx index d4166aa..96d8012 100644 --- a/src/dashboard/wallet/WalletRow.tsx +++ b/src/dashboard/wallet/walletRow/index.tsx @@ -1,8 +1,10 @@ -import { createStyles, makeStyles, Theme } from "@material-ui/core"; import Grid from "@material-ui/core/Grid"; import Typography from "@material-ui/core/Typography"; import React, { ReactElement } from "react"; +//styled +import { Row } from "./styles"; + export type WalletRowProps = { label: string; value?: string; @@ -13,19 +15,10 @@ export type WalletRowProps = { export type WalletSubrow = Omit; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - paddingTop: theme.spacing(1), - }, - }) -); - function WalletRow(props: WalletRowProps): ReactElement { - const classes = useStyles(); return ( - + ))} - + ); } diff --git a/src/dashboard/wallet/walletRow/styles.ts b/src/dashboard/wallet/walletRow/styles.ts new file mode 100644 index 0000000..8c852c0 --- /dev/null +++ b/src/dashboard/wallet/walletRow/styles.ts @@ -0,0 +1,13 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type RowType = { + item: boolean; + container: boolean; +} + +//styled +export const Row = styled(Grid)` + padding-top: ${p => p.theme.spacing(1)}px; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/WalletTransactionButton.tsx b/src/dashboard/wallet/walletTransactionButton/index.tsx similarity index 100% rename from src/dashboard/wallet/WalletTransactionButton.tsx rename to src/dashboard/wallet/walletTransactionButton/index.tsx diff --git a/src/dashboard/wallet/Wallets.tsx b/src/dashboard/wallet/wallets/index.tsx similarity index 69% rename from src/dashboard/wallet/Wallets.tsx rename to src/dashboard/wallet/wallets/index.tsx index 201d0be..af4cbf2 100644 --- a/src/dashboard/wallet/Wallets.tsx +++ b/src/dashboard/wallet/wallets/index.tsx @@ -1,35 +1,26 @@ -import { createStyles, WithStyles } from "@material-ui/core"; import Grid from "@material-ui/core/Grid"; -import { withStyles } from "@material-ui/core/styles"; import React, { ReactElement } from "react"; import { RouteComponentProps, withRouter } from "react-router-dom"; import { timer } from "rxjs"; import { exhaustMap, shareReplay } from "rxjs/operators"; -import api from "../../api"; -import PageCircularProgress from "../../common/PageCircularProgress"; -import { GetbalanceResponse } from "../../models/GetbalanceResponse"; -import { TradinglimitsResponse } from "../../models/TradinglimitsResponse"; -import DashboardContent, { DashboardContentState } from "../DashboardContent"; -import ViewDisabled from "../ViewDisabled"; -import WalletItem from "./WalletItem"; +import api from "../../../api"; +import PageCircularProgress from "../../../common/pageCircularProgress"; +import { GetbalanceResponse } from "../../../models/GetbalanceResponse"; +import { TradinglimitsResponse } from "../../../models/TradinglimitsResponse"; +import DashboardContent, { DashboardContentState } from "../../DashboardContent"; +import ViewDisabled from "../../viewDisabled"; +import WalletItem from "../walletItem"; -type PropsType = RouteComponentProps<{ param1: string }> & - WithStyles; +//styles +import { ItemsContainer } from "./styles"; + +type PropsType = RouteComponentProps<{ param1: string }> type StateType = DashboardContentState & { balances: GetbalanceResponse | undefined; limits: TradinglimitsResponse | undefined; }; -const styles = () => { - return createStyles({ - itemsContainer: { - flex: 1, - overflowY: "auto", - }, - }); -}; - class Wallets extends DashboardContent { getInfo$ = timer(0, 60000).pipe( exhaustMap(() => api.getinfo$()), @@ -59,7 +50,6 @@ class Wallets extends DashboardContent { render(): ReactElement { const balances = this.state.balances?.balances; - const { classes } = this.props; return ( @@ -69,7 +59,7 @@ class Wallets extends DashboardContent { xudStatus={this.state.xudStatus} /> ) : ( - + {balances && Object.keys(balances).length ? ( Object.keys(balances).map((currency) => ( { ) : ( )} - + )} ); } } -export default withRouter(withStyles(styles, { withTheme: true })(Wallets)); +export default withRouter(Wallets); diff --git a/src/dashboard/wallet/wallets/styles.ts b/src/dashboard/wallet/wallets/styles.ts new file mode 100644 index 0000000..343b045 --- /dev/null +++ b/src/dashboard/wallet/wallets/styles.ts @@ -0,0 +1,14 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type ItemsContainerType = { + container: boolean; + spacing: number; +} + +//styled +export const ItemsContainer = styled(Grid)` + flex: 1; + overflow-y: auto; +`; \ No newline at end of file diff --git a/src/dashboard/wallet/Withdraw.tsx b/src/dashboard/wallet/withdraw/index.tsx similarity index 86% rename from src/dashboard/wallet/Withdraw.tsx rename to src/dashboard/wallet/withdraw/index.tsx index c864b7e..6549672 100644 --- a/src/dashboard/wallet/Withdraw.tsx +++ b/src/dashboard/wallet/withdraw/index.tsx @@ -1,14 +1,14 @@ import { Grid } from "@material-ui/core"; import React, { ReactElement, useEffect, useState } from "react"; -import api from "../../api"; -import { getCurrencyFullName } from "../../common/currencyUtil"; -import ErrorMessage from "../../common/ErrorMessage"; -import { getErrorMsg } from "../../common/errorUtil"; -import Loader from "../../common/Loader"; -import { GetServiceInfoResponse } from "../../models/GetServiceInfoResponse"; -import WithdrawAddress from "./WithdrawAddress"; -import WithdrawalComplete from "./WithdrawalComplete"; -import WithdrawAmount from "./WithdrawAmount"; +import api from "../../../api"; +import { getCurrencyFullName } from "../../../common/currencyUtil"; +import { getErrorMsg } from "../../../common/errorUtil"; +import ErrorMessage from "../../../common/ErrorMessage"; +import Loader from "../../../common/loader"; +import { GetServiceInfoResponse } from "../../../models/GetServiceInfoResponse"; +import WithdrawAddress from "../withdrawAddress"; +import WithdrawalComplete from "../withdrawalComplete"; +import WithdrawAmount from "../withdrawAmount"; type WithdrawProps = { currency: string; diff --git a/src/dashboard/wallet/WithdrawAddress.tsx b/src/dashboard/wallet/withdrawAddress/index.tsx similarity index 74% rename from src/dashboard/wallet/WithdrawAddress.tsx rename to src/dashboard/wallet/withdrawAddress/index.tsx index f150ff6..d57aa27 100644 --- a/src/dashboard/wallet/WithdrawAddress.tsx +++ b/src/dashboard/wallet/withdrawAddress/index.tsx @@ -1,25 +1,25 @@ import { Button, - createStyles, Grid, - makeStyles, - Theme, - Typography, + Typography } from "@material-ui/core"; import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import React, { ReactElement, useState } from "react"; -import ButtonWithLoading from "../../common/ButtonWithLoading"; -import { satsToCoinsStr } from "../../common/currencyUtil"; -import ErrorMessage from "../../common/ErrorMessage"; -import { BOLTZ_ERROR_MESSAGES, getErrorMsg } from "../../common/errorUtil"; -import QrCode from "../../common/QrCode"; -import { Fees } from "../../models/BoltzFees"; -import { CreateReverseSwapResponse } from "../../models/CreateReverseSwapResponse"; -import { GetServiceInfoResponse } from "../../models/GetServiceInfoResponse"; -import Address from "./Address"; -import BoltzFeeInfo from "./BoltzFeeInfo"; -import { withdraw } from "./walletUtil"; -import WarningMessage from "../../common/WarningMessage"; +import { satsToCoinsStr } from "../../../common/currencyUtil"; +import ErrorMessage from "../../../common/ErrorMessage"; +import { BOLTZ_ERROR_MESSAGES, getErrorMsg } from "../../../common/errorUtil"; +import ButtonWithLoading from "../../../common/buttonWithLoading"; +import QrCode from "../../../common/qrCode"; +import { Fees } from "../../../models/BoltzFees"; +import { CreateReverseSwapResponse } from "../../../models/CreateReverseSwapResponse"; +import { GetServiceInfoResponse } from "../../../models/GetServiceInfoResponse"; +import Address from "../address"; +import BoltzFeeInfo from "../boltzFeeInfo"; +import { withdraw } from "../walletUtil"; +import WarningMessage from "../../../common/WarningMessage"; + +//styles +import { ButtonContainer } from "./styles"; type WithdrawAddressProps = { currency: string; @@ -31,18 +31,6 @@ type WithdrawAddressProps = { initialAddress?: string; }; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: { - padding: `${theme.spacing(2)}px 0px`, - }, - buttonContainer: { - marginTop: 1, - marginBottom: theme.spacing(2), - }, - }) -); - const WithdrawAddress = (props: WithdrawAddressProps): ReactElement => { const { currency, @@ -59,7 +47,6 @@ const WithdrawAddress = (props: WithdrawAddressProps): ReactElement => { const [withdrawing, setWithdrawing] = useState(false); const [error, setError] = useState(""); const [warning, setWarning] = useState(""); - const classes = useStyles(); const errorHandler = (err: any) => { setWithdrawing(false); @@ -127,18 +114,12 @@ const WithdrawAddress = (props: WithdrawAddressProps): ReactElement => { readOnly={false} setAddress={setAddress} /> - - + - + ); }; diff --git a/src/dashboard/wallet/withdrawalComplete/styles.ts b/src/dashboard/wallet/withdrawalComplete/styles.ts new file mode 100644 index 0000000..164babb --- /dev/null +++ b/src/dashboard/wallet/withdrawalComplete/styles.ts @@ -0,0 +1,15 @@ +import styled from "styled-components"; +import { Grid } from "@material-ui/core"; + +//types +type RowType = { + item: boolean; + container: boolean; + justify: string; + alignItems?: string; +} + +//styled +export const Row = styled(Grid)` + margin-top: ${p => p.theme.spacing(2)}px; +`; \ No newline at end of file diff --git a/src/settings/ActionButtons.tsx b/src/settings/ActionButtons.tsx index bd168ad..07097fe 100644 --- a/src/settings/ActionButtons.tsx +++ b/src/settings/ActionButtons.tsx @@ -1,6 +1,6 @@ import { Button, createStyles, Grid, makeStyles } from "@material-ui/core"; import React, { ReactElement } from "react"; -import ButtonWithLoading from "../common/ButtonWithLoading"; +import ButtonWithLoading from "../common/buttonWithLoading"; type ActionButtonsProps = { primaryButtonOnClick: () => void; diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index f9eecd4..f2918dc 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -23,9 +23,9 @@ import { exhaustMap } from "rxjs/operators"; import api from "../api"; import ErrorMessage from "../common/ErrorMessage"; import { getErrorMsg } from "../common/errorUtil"; -import Loader from "../common/Loader"; +import Loader from "../common/loader"; import { isXudLocked, isXudReady } from "../common/serviceUtil"; -import ViewDisabled from "../dashboard/ViewDisabled"; +import ViewDisabled from "../dashboard/viewDisabled"; import { Status } from "../models/Status"; import { Path } from "../router/Path"; import { BackupStore, BACKUP_STORE } from "../stores/backupStore"; diff --git a/yarn.lock b/yarn.lock index 78828d7..93ad5c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -74,6 +74,22 @@ jsesc "^2.5.1" source-map "^0.5.0" +"@babel/generator@^7.12.10": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.11.tgz#98a7df7b8c358c9a37ab07a24056853016aba3af" + integrity sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA== + dependencies: + "@babel/types" "^7.12.11" + jsesc "^2.5.1" + source-map "^0.5.0" + +"@babel/helper-annotate-as-pure@^7.0.0": + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d" + integrity sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ== + dependencies: + "@babel/types" "^7.12.10" + "@babel/helper-annotate-as-pure@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3" @@ -182,7 +198,7 @@ dependencies: "@babel/types" "^7.12.1" -"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.8.3": +"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.8.3": version "7.12.5" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb" integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA== @@ -268,6 +284,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2" integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== +"@babel/helper-validator-identifier@^7.12.11": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed" + integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw== + "@babel/helper-validator-option@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9" @@ -306,6 +327,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.5.tgz#b4af32ddd473c0bfa643bd7ff0728b8e71b81ea0" integrity sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ== +"@babel/parser@^7.12.10": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79" + integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg== + "@babel/plugin-proposal-async-generator-functions@^7.12.1", "@babel/plugin-proposal-async-generator-functions@^7.8.3": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e" @@ -1133,6 +1159,21 @@ globals "^11.1.0" lodash "^4.17.19" +"@babel/traverse@^7.4.5": + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.10.tgz#2d1f4041e8bf42ea099e5b2dc48d6a594c00017a" + integrity sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/generator" "^7.12.10" + "@babel/helper-function-name" "^7.10.4" + "@babel/helper-split-export-declaration" "^7.11.0" + "@babel/parser" "^7.12.10" + "@babel/types" "^7.12.10" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.19" + "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.1", "@babel/types@^7.12.5", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.9.0": version "7.12.6" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.6.tgz#ae0e55ef1cce1fbc881cd26f8234eb3e657edc96" @@ -1142,6 +1183,15 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@^7.12.10", "@babel/types@^7.12.11": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.11.tgz#a86e4d71e30a9b6ee102590446c98662589283ce" + integrity sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA== + dependencies: + "@babel/helper-validator-identifier" "^7.12.11" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a" @@ -1165,6 +1215,28 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== +"@emotion/is-prop-valid@^0.8.8": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== + dependencies: + "@emotion/memoize" "0.7.4" + +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + "@fortawesome/fontawesome-common-types@^0.2.32": version "0.2.32" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259" @@ -1689,6 +1761,14 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934" integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA== +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762" @@ -1822,6 +1902,15 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== +"@types/styled-components@^5.1.7": + version "5.1.7" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710" + integrity sha512-BJzPhFygYspyefAGFZTZ/8lCEY4Tk+Iqktvnko3xmJf9LrLqs3+grxPeU3O0zLl6yjbYBopD0/VikbHgXDbJtA== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@types/testing-library__jest-dom@^5.9.1": version "5.9.5" resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz#5bf25c91ad2d7b38f264b12275e5c92a66d849b0" @@ -2608,6 +2697,21 @@ babel-plugin-named-asset-import@^0.3.6: resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd" integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw== +"babel-plugin-styled-components@>= 1": + version "1.12.0" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9" + integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.0.0" + "@babel/helper-module-imports" "^7.0.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + +babel-plugin-syntax-jsx@^6.18.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" + integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= + babel-plugin-syntax-object-rest-spread@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" @@ -3090,6 +3194,11 @@ camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0" @@ -3662,6 +3771,11 @@ css-blank-pseudo@^0.1.4: dependencies: postcss "^7.0.5" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= + css-color-names@0.0.4, css-color-names@^0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -3733,6 +3847,15 @@ css-select@^2.0.0: domutils "^1.7.0" nth-check "^1.0.2" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-tree@1.0.0-alpha.37: version "1.0.0-alpha.37" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22" @@ -5572,7 +5695,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -10130,6 +10253,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -10651,6 +10779,22 @@ style-loader@0.23.1: loader-utils "^1.1.0" schema-utils "^1.0.0" +styled-components@^5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a" + integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^0.8.8" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" @@ -10665,7 +10809,7 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^5.3.0: +supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==