WIP: Feature/styled components

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",

src/App.tsx

@@ -1,16 +1,17 @@
 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,
   Redirect,
   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 (
     <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
-      <GlobalCss />
-      <Provider electronStore={electronStore} backupStore={backupStore}>
-        <Router>
-          <Switch>
-            <Route path={Path.CONNECTION_FAILED}>
-              <ConnectionFailed />
-            </Route>
-            <Route path={Path.DASHBOARD}>
-              <Dashboard />
-            </Route>
-            <Route exact path={Path.HOME}>
-              <Redirect to={Path.DASHBOARD} />
-            </Route>
-            <Route>
-              <NotFound />
-            </Route>
-          </Switch>
-        </Router>
-      </Provider>
+      <MaterialThemeProvider theme={darkTheme}>
+        <CssBaseline />
+        <GlobalCss />
+        <Provider electronStore={electronStore} backupStore={backupStore}>
+          <Router>
+            <Switch>
+              <Route path={Path.CONNECTION_FAILED}>
+                <ConnectionFailed />
+              </Route>
+              <Route path={Path.DASHBOARD}>
+                <Dashboard />
+              </Route>
+              <Route exact path={Path.HOME}>
+                <Redirect to={Path.DASHBOARD} />
+              </Route>
+              <Route>
+                <NotFound />
+              </Route>
+            </Switch>
+          </Router>
+        </Provider>
+      </MaterialThemeProvider>
     </ThemeProvider>
   );
 }

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;

src/common/ButtonWithLoading.tsx → 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 (
-    <div className={classes.buttonWrapper}>
+    <ButtonWrapper>
       <Button
         type={submitButton ? "submit" : "button"}
         color={color || "primary"}
@@ -60,9 +45,9 @@ const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => {
         {text}
       </Button>
       {loading && (
-        <CircularProgress size={24} className={classes.buttonProgress} />
+        <ButtonProgress size={24} />
       )}
-    </div>
+    </ButtonWrapper>
   );
 };
 

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)<ButtonProgressType>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -12px;
+  margin-left: -12px;
+`;

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 (
+    <>
+      <Left>{shrinkableText}</Left>
+      <Right>{endText}</Right>
+    </>
+  );
+}
+
+export default CenterEllipsis;

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;
+`;