From c7a1a3afb45e8c4a3766560ff979a83a31086e85 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sun, 23 Oct 2022 19:56:36 +0200
Subject: [PATCH 01/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20in=20LoginView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json               |   2 +-
 package.json                 |   8 +
 src/App.tsx                  |   2 -
 src/declaration.d.ts         |   1 +
 src/index.tsx                |   4 +
 src/views/LoginView.test.tsx |  83 ++++++++
 src/views/LoginView.tsx      | 131 ++++++------
 yarn.lock                    | 387 ++++++++++++++++++++++++++++++++++-
 8 files changed, 543 insertions(+), 75 deletions(-)
 create mode 100644 src/views/LoginView.test.tsx

diff --git a/.eslintrc.json b/.eslintrc.json
index ee0a01c4..b7e65979 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -27,7 +27,7 @@
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-unused-vars": "error",
     "no-console": "error",
-    "react/jsx-no-bind": "warn",
+    "react/jsx-no-bind": "off",
     "react/jsx-sort-props": [
       "warn",
       {
diff --git a/package.json b/package.json
index 6e7979b6..790b47d3 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,15 @@
     "postinstall": "semantic-ui-css-patch"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@fontsource/roboto": "^4.5.8",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/material": "^5.10.10",
     "@semantic-ui-react/css-patch": "^1.1.2",
     "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-query-devtools": "^4.11.0",
@@ -39,6 +44,8 @@
     "@babel/preset-typescript": "^7.18.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/jest": "^29.2.1",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jwt-decode": "^3.1.0",
     "@types/leaflet": "^1.9.0",
     "@types/leaflet-draw": "^1.0.5",
@@ -75,6 +82,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-transform-stub": "^2.0.0",
+    "jwt-encode": "^1.0.1",
     "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",
     "postcss-remove-google-fonts": "^1.2.0",
diff --git a/src/App.tsx b/src/App.tsx
index 4cc84b73..ce28f495 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,8 +10,6 @@ import TickerView from './views/TickerView'
 import UsersView from './views/UsersView'
 import ProtectedRoute from './components/ProtectedRoute'
 import NotFoundView from './views/NotFoundView'
-import 'semantic-ui-css/semantic.min.css'
-import './index.css'
 import '../leaflet.config.js'
 import { FeatureProvider } from './components/useFeature'
 
diff --git a/src/declaration.d.ts b/src/declaration.d.ts
index 6e9fb0ca..e3a26839 100644
--- a/src/declaration.d.ts
+++ b/src/declaration.d.ts
@@ -1,2 +1,3 @@
 declare module '*.png'
 declare module 'jwt-decode'
+declare module 'jwt-encode'
diff --git a/src/index.tsx b/src/index.tsx
index 93a00949..aad746d0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,9 @@
 import React, { createRoot } from 'react-dom/client'
 import App from './App'
+import '@fontsource/roboto/300.css'
+import '@fontsource/roboto/400.css'
+import '@fontsource/roboto/500.css'
+import '@fontsource/roboto/700.css'
 
 const container = document.getElementById('root')
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/views/LoginView.test.tsx b/src/views/LoginView.test.tsx
new file mode 100644
index 00000000..ac10265f
--- /dev/null
+++ b/src/views/LoginView.test.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router'
+import { AuthProvider } from '../components/useAuth'
+import LoginView from './LoginView'
+import * as api from '../api/Auth'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import sign from 'jwt-encode'
+
+function setup() {
+  const client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  })
+  return render(
+    <QueryClientProvider client={client}>
+      <MemoryRouter>
+        <AuthProvider>
+          <LoginView />
+        </AuthProvider>
+      </MemoryRouter>
+    </QueryClientProvider>
+  )
+}
+
+describe('LoginView', function () {
+  test('login successful', async function () {
+    const jwt = sign(
+      { id: 1, email: 'louis@systemli.org', roles: ['admin', 'user'] },
+      'secret'
+    )
+    jest
+      .spyOn(api, 'login')
+      .mockResolvedValue({ code: 200, token: jwt, expire: new Date() })
+    setup()
+
+    const email = screen
+      .getByTestId('email')
+      .querySelector('input') as HTMLInputElement
+    const password = screen
+      .getByTestId('password')
+      .querySelector('input') as HTMLInputElement
+    const submit = screen.getByTestId('submit') as HTMLElement
+
+    expect(email).toBeInTheDocument()
+    expect(password).toBeInTheDocument()
+    expect(submit).toBeInTheDocument()
+
+    await userEvent.type(email, 'louis@systemli.org')
+    await userEvent.type(password, 'password')
+    await userEvent.click(submit)
+
+    expect(api.login).toHaveBeenCalledWith('louis@systemli.org', 'password')
+  })
+
+  test('login failed', async function () {
+    jest.spyOn(api, 'login').mockRejectedValue(new Error('Login failed'))
+    setup()
+
+    const email = screen
+      .getByTestId('email')
+      .querySelector('input') as HTMLInputElement
+    const password = screen
+      .getByTestId('password')
+      .querySelector('input') as HTMLInputElement
+    const submit = screen.getByTestId('submit') as HTMLElement
+
+    expect(email).toBeInTheDocument()
+    expect(password).toBeInTheDocument()
+    expect(submit).toBeInTheDocument()
+
+    await userEvent.type(email, 'louis@systemli.org')
+    await userEvent.type(password, 'password')
+    await userEvent.click(submit)
+
+    expect(api.login).toHaveBeenCalledWith('louis@systemli.org', 'password')
+    expect(await screen.findByText('Login failed')).toBeInTheDocument()
+  })
+})
diff --git a/src/views/LoginView.tsx b/src/views/LoginView.tsx
index 22103616..23e3e58f 100644
--- a/src/views/LoginView.tsx
+++ b/src/views/LoginView.tsx
@@ -1,17 +1,18 @@
-import React, { FC, FormEvent, useCallback, useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router'
 import {
+  Alert,
+  Box,
   Button,
   Container,
-  Form,
   Grid,
-  Header,
-  Icon,
-  InputOnChangeData,
-  Message,
-} from 'semantic-ui-react'
+  Paper,
+  TextField,
+  Typography,
+} from '@mui/material'
+import React, { FC, useEffect } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { useNavigate } from 'react-router'
 import useAuth from '../components/useAuth'
+import logo from '../assets/logo.png'
 
 interface FormValues {
   email: string
@@ -19,70 +20,76 @@ interface FormValues {
 }
 
 const LoginView: FC = () => {
-  const { register, handleSubmit, setValue } = useForm<FormValues>()
+  const { getValues, handleSubmit, register, reset } = useForm<FormValues>()
   const { login, error, user } = useAuth()
   const navigate = useNavigate()
 
-  const onChange = useCallback(
-    (e: FormEvent, { name, value }: InputOnChangeData) => {
-      setValue(name, value)
-    },
-    [setValue]
-  )
-
-  const onSubmit: SubmitHandler<FormValues> = data => {
-    login(data.email, data.password)
+  const onSubmit: SubmitHandler<FormValues> = ({ email, password }) => {
+    login(email, password)
   }
 
   useEffect(() => {
     if (user) navigate('/')
-
-    register('email')
-    register('password')
   })
 
+  useEffect(() => {
+    if (error) {
+      reset({ email: getValues('email'), password: '' })
+    }
+  }, [error, getValues, reset])
+
   return (
-    <Container>
-      <Container className="app">
-        <Grid centered>
-          <Grid.Column computer={6} mobile={16}>
-            <Grid.Row>
-              <Header icon size="huge" textAlign="center">
-                <Icon name="browser" size="small" />
-                <Header.Content>Login</Header.Content>
-              </Header>
-            </Grid.Row>
-            <Grid.Row>
-              <Form onSubmit={handleSubmit(onSubmit)}>
-                {error ? (
-                  <Message content={error.message} negative size="small" />
-                ) : null}
-                <Form.Input
-                  icon="user"
-                  iconPosition="left"
-                  name="email"
-                  onChange={onChange}
-                  placeholder="Email"
-                  required
-                  type="text"
-                />
-                <Form.Input
-                  icon="lock"
-                  iconPosition="left"
-                  name="password"
-                  onChange={onChange}
-                  placeholder="Password"
-                  required
-                  type="password"
-                />
-                <Button color="teal" fluid type="submit">
-                  Login
-                </Button>
-              </Form>
-            </Grid.Row>
-          </Grid.Column>
+    <Container fixed maxWidth="sm" sx={{ mt: 5 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Box sx={{ mb: 2, textAlign: 'center' }}>
+            <img alt="Systemli Logo" src={logo} />
+            <Typography component="h4" sx={{ mt: 1 }} variant="h4">
+              Ticker Login
+            </Typography>
+          </Box>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper elevation={3} sx={{ p: 2 }}>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              {error ? (
+                <Alert severity="error" sx={{ mb: 2 }}>
+                  {error.message}
+                </Alert>
+              ) : null}
+              <TextField
+                {...register('email')}
+                autoFocus
+                data-testid="email"
+                fullWidth
+                label="E-Mail"
+                required
+                sx={{ my: 1 }}
+                type="email"
+              />
+              <TextField
+                {...register('password')}
+                data-testid="password"
+                fullWidth
+                label="Password"
+                required
+                sx={{ my: 1 }}
+                type="password"
+              />
+              <Button
+                data-testid="submit"
+                fullWidth
+                size="large"
+                sx={{ my: 1 }}
+                type="submit"
+                variant="contained"
+              >
+                Login
+              </Button>
+            </form>
+          </Paper>
         </Grid>
-      </Container>
+      </Grid>
     </Container>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 35303c31..6a59c20b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,7 +15,7 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.8.3":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.8.3":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
   integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
@@ -194,7 +194,7 @@
   dependencies:
     "@babel/types" "^7.18.9"
 
-"@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@@ -586,7 +586,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.7.2":
+"@babel/plugin-syntax-jsx@^7.17.12", "@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.7.2":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
   integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
@@ -1096,6 +1096,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
+  integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.9.2":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
@@ -1154,6 +1161,114 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@emotion/babel-plugin@^11.10.0":
+  version "11.10.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7"
+  integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.17.12"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.0"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
+
+"@emotion/cache@^11.10.0", "@emotion/cache@^11.10.3":
+  version "11.10.3"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87"
+  integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/sheet" "^1.2.0"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    stylis "4.0.13"
+
+"@emotion/hash@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+
+"@emotion/is-prop-valid@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/react@^11.10.4":
+  version "11.10.4"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199"
+  integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.0"
+    "@emotion/cache" "^11.10.0"
+    "@emotion/serialize" "^1.1.0"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8"
+  integrity sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/unitless" "^0.8.0"
+    "@emotion/utils" "^1.2.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5"
+  integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==
+
+"@emotion/styled@^11.10.4":
+  version "11.10.4"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.4.tgz#e93f84a4d54003c2acbde178c3f97b421fce1cd4"
+  integrity sha512-pRl4R8Ez3UXvOPfc2bzIoV8u9P97UedgHS4FPX594ntwEuAMA114wlaHvOK24HB48uqfXiGlYIZYCxVJ1R1ttQ==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.0"
+    "@emotion/is-prop-valid" "^1.2.0"
+    "@emotion/serialize" "^1.1.0"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
+  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
+
+"@emotion/utils@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
+  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+
+"@emotion/weak-memoize@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
+  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
+
 "@eslint/eslintrc@^1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
@@ -1184,6 +1299,11 @@
     "@babel/runtime" "^7.10.4"
     react-is "^16.6.3"
 
+"@fontsource/roboto@^4.5.8":
+  version "4.5.8"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.8.tgz#56347764786079838faf43f0eeda22dd7328437f"
+  integrity sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA==
+
 "@fortawesome/fontawesome-common-types@6.2.0":
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz#76467a94aa888aeb22aafa43eb6ff889df3a5a7f"
@@ -1526,6 +1646,99 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@mui/base@5.0.0-alpha.102":
+  version "5.0.0-alpha.102"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.102.tgz#53b07d0b73d3afe1d2a3feb3b43c8188bb821796"
+  integrity sha512-5e/qAIP+DlkrZxIt/cwnDw/A3ii22WkoEoWKHyu4+oeGs3/1Flh7qLaN4h5EAIBB9TvTEZEUzvmsTInmIj6ghg==
+  dependencies:
+    "@babel/runtime" "^7.19.0"
+    "@emotion/is-prop-valid" "^1.2.0"
+    "@mui/types" "^7.2.0"
+    "@mui/utils" "^5.10.9"
+    "@popperjs/core" "^2.11.6"
+    clsx "^1.2.1"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
+"@mui/core-downloads-tracker@^5.10.10":
+  version "5.10.10"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.10.tgz#a3e5d2f6e5146e9a85d48824c386a31be1746ba3"
+  integrity sha512-aDuE2PNEh+hAndxEWlZgq7uiFPZKJtnkPDX7v6kSCrMXA32ZaQ6rZi5olmC7DUHt/BaOSxb7N/im/ss0XBkDhA==
+
+"@mui/icons-material@^5.10.9":
+  version "5.10.9"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.10.9.tgz#f9522c49797caf30146acc576e37ecb4f95bbc38"
+  integrity sha512-sqClXdEM39WKQJOQ0ZCPTptaZgqwibhj2EFV9N0v7BU1PO8y4OcX/a2wIQHn4fNuDjIZktJIBrmU23h7aqlGgg==
+  dependencies:
+    "@babel/runtime" "^7.19.0"
+
+"@mui/material@^5.10.10":
+  version "5.10.10"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.10.10.tgz#df780d933c0aa9d4a5272f32c9cc24bf1ea72cff"
+  integrity sha512-ioLvqY7VvcePz9dnEIRhpiVvtJmAFmvG6rtLXXzVdMmAVbSaelr5Io07mPz/mCyqE+Uv8/4EuJV276DWO7etzA==
+  dependencies:
+    "@babel/runtime" "^7.19.0"
+    "@mui/base" "5.0.0-alpha.102"
+    "@mui/core-downloads-tracker" "^5.10.10"
+    "@mui/system" "^5.10.10"
+    "@mui/types" "^7.2.0"
+    "@mui/utils" "^5.10.9"
+    "@types/react-transition-group" "^4.4.5"
+    clsx "^1.2.1"
+    csstype "^3.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.10.9":
+  version "5.10.9"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.10.9.tgz#c427bfa736455703975cdb108dbde6a174ba7971"
+  integrity sha512-BN7/CnsVPVyBaQpDTij4uV2xGYHHHhOgpdxeYLlIu+TqnsVM7wUeF+37kXvHovxM6xmL5qoaVUD98gDC0IZnHg==
+  dependencies:
+    "@babel/runtime" "^7.19.0"
+    "@mui/utils" "^5.10.9"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.10.8":
+  version "5.10.8"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.10.8.tgz#2db411e4278f06f70ccb6b5cd56ace67109513f6"
+  integrity sha512-w+y8WI18EJV6zM/q41ug19cE70JTeO6sWFsQ7tgePQFpy6ToCVPh0YLrtqxUZXSoMStW5FMw0t9fHTFAqPbngw==
+  dependencies:
+    "@babel/runtime" "^7.19.0"
+    "@emotion/cache" "^11.10.3"
+    csstype "^3.1.1"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.10.10":
+  version "5.10.10"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.10.10.tgz#fbc34f29a3b62268c3d2b2be92819a35fc52de90"
+  integrity sha512-TXwtKN0adKpBrZmO+eilQWoPf2veh050HLYrN78Kps9OhlvO70v/2Kya0+mORFhu9yhpAwjHXO8JII/R4a5ZLA==
+  dependencies:
+    "@babel/runtime" "^7.19.0"
+    "@mui/private-theming" "^5.10.9"
+    "@mui/styled-engine" "^5.10.8"
+    "@mui/types" "^7.2.0"
+    "@mui/utils" "^5.10.9"
+    clsx "^1.2.1"
+    csstype "^3.1.1"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.0.tgz#91380c2d42420f51f404120f7a9270eadd6f5c23"
+  integrity sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA==
+
+"@mui/utils@^5.10.9":
+  version "5.10.9"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.10.9.tgz#9dc455f9230f43eeb81d96a9a4bdb3855bb9ea39"
+  integrity sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA==
+  dependencies:
+    "@babel/runtime" "^7.19.0"
+    "@types/prop-types" "^15.7.5"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1547,6 +1760,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.6":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
 "@popperjs/core@^2.6.0":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
@@ -1631,6 +1849,20 @@
     "@tanstack/query-core" "4.10.3"
     use-sync-external-store "^1.2.0"
 
+"@testing-library/dom@^8.5.0":
+  version "8.19.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f"
+  integrity sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^5.0.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.4.4"
+    pretty-format "^27.0.2"
+
 "@testing-library/jest-dom@^5.16.5":
   version "5.16.5"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz#3912846af19a29b2dbf32a6ae9c31ef52580074e"
@@ -1646,6 +1878,20 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
+"@testing-library/react@^13.4.0":
+  version "13.4.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.4.0.tgz#6a31e3bf5951615593ad984e96b9e5e2d9380966"
+  integrity sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^8.5.0"
+    "@types/react-dom" "^18.0.0"
+
+"@testing-library/user-event@^14.4.3":
+  version "14.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
+  integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -1676,6 +1922,11 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.2.tgz#423c77877d0569db20e1fc80885ac4118314010e"
   integrity sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==
 
+"@types/aria-query@^4.2.0":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
+  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
+
 "@types/babel__core@^7.1.14":
   version "7.1.19"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
@@ -1939,7 +2190,7 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.1.tgz#dfd20e2dc35f027cdd6c1908e80a5ddc7499670e"
   integrity sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow==
 
-"@types/prop-types@*", "@types/prop-types@^15.0.0":
+"@types/prop-types@*", "@types/prop-types@^15.0.0", "@types/prop-types@^15.7.5":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
@@ -1954,13 +2205,20 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^18.0.6":
+"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.6":
   version "18.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
   integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
   dependencies:
     "@types/react" "*"
 
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.3.3":
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
@@ -1978,6 +2236,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.5":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
+  integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-twitter-auth@^0.0.4":
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-twitter-auth/-/react-twitter-auth-0.0.4.tgz#bb1836bbbbbdfb8623c78cf3e6ce44b9930e7e45"
@@ -3030,6 +3295,11 @@ clsx@^1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3153,13 +3423,25 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.6.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+convert-source-map@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -3368,6 +3650,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
   integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
 
+csstype@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -3548,7 +3835,7 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6:
+dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
   version "0.5.14"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
   integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
@@ -3560,6 +3847,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
@@ -4272,6 +4567,11 @@ find-cache-dir@^3.3.2:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -4601,6 +4901,13 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hoist-non-react-statics@^3.3.1:
+  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==
+  dependencies:
+    react-is "^16.7.0"
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -5652,6 +5959,13 @@ jwt-decode@*, jwt-decode@^3.1.2:
   resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
   integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
 
+jwt-encode@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jwt-encode/-/jwt-encode-1.0.1.tgz#6602a0475f757c7d5d559a7e923f3d3d5ecd938c"
+  integrity sha512-QrGiNhynbAYyFdbC1GbjborzenSFs5Ga+2nE0uBokGXsH11xrgd1AX55HR7P+wGQyyZOn6LUO5iKlh74dlhBkA==
+  dependencies:
+    ts.cryptojs256 "^1.0.1"
+
 keyboard-key@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/keyboard-key/-/keyboard-key-1.1.0.tgz#6f2e8e37fa11475bb1f1d65d5174f1b35653f5b7"
@@ -5837,6 +6151,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
+
 make-dir@^3.0.0, make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -6930,7 +7249,25 @@ pretty-error@^4.0.0:
     lodash "^4.17.20"
     renderkid "^3.0.0"
 
-pretty-format@^29.0.0, pretty-format@^29.2.1:
+pretty-format@^27.0.2:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
+pretty-format@^29.0.0:
+  version "29.1.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.1.2.tgz#b1f6b75be7d699be1a051f5da36e8ae9e76a8e6a"
+  integrity sha512-CGJ6VVGXVRP2o2Dorl4mAwwvDWT25luIsYhkyVQW32E4nL+TgW939J7LlKT/npq5Cpq6j3s+sy+13yk7xYpBmg==
+  dependencies:
+    "@jest/schemas" "^29.0.0"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
+pretty-format@^29.2.1:
   version "29.2.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.2.1.tgz#86e7748fe8bbc96a6a4e04fa99172630907a9611"
   integrity sha512-Y41Sa4aLCtKAXvwuIpTvcFBkyeYp2gdFWzXGA+ZNES3VwURIB165XO/z7CjETwzCCS53MjW/rLMyyqEnTtaOfA==
@@ -7110,16 +7447,21 @@ react-image-lightbox@^5.1.4:
     prop-types "^15.7.2"
     react-modal "^3.11.1"
 
-react-is@^16.13.1, react-is@^16.6.3:
+react-is@^16.13.1, react-is@^16.6.3, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.6 || ^17.0.0 || ^18.0.0":
+"react-is@^16.8.6 || ^17.0.0 || ^18.0.0", react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-is@^17.0.1:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-is@^18.0.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
@@ -7204,6 +7546,16 @@ react-router@6.4.1, react-router@^6.4.1:
   dependencies:
     "@remix-run/router" "1.0.1"
 
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react-twitter-auth@0.0.13:
   version "0.0.13"
   resolved "https://registry.yarnpkg.com/react-twitter-auth/-/react-twitter-auth-0.0.13.tgz#73af3b43066d93682adfcbf7ecce007c7a0da1dc"
@@ -7764,6 +8116,11 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 space-separated-tokens@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
@@ -7941,6 +8298,11 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 superjson@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.10.0.tgz#279362e6c1789b0b6bdfa280e82ee43d0e0fa514"
@@ -8134,6 +8496,11 @@ ts-node@^10.9.1:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
+ts.cryptojs256@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ts.cryptojs256/-/ts.cryptojs256-1.0.1.tgz#56a3d3a3bc022ad358b3e62cd8dae3224d9384f1"
+  integrity sha512-9XtEgRVOZBCdpPcCEhfvv9I2AVXdvfI81I/KpFM0wEfbq5JVHlXH7bfIjGQmYrIHGiBEHKsIaStQ87k926J7dA==
+
 tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"

From 564abeb0d76b7117032dd157f9f7b28c0b2a73da Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Tue, 25 Oct 2022 00:15:05 +0200
Subject: [PATCH 02/31] =?UTF-8?q?=F0=9F=92=84=20Add=20ThemeProvider=20with?=
 =?UTF-8?q?=20several=20overrides?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                 |  71 ++++++------
 src/index.css               |  14 ---
 src/theme/GlobalStyles.tsx  |  54 +++++++++
 src/theme/ThemeProvider.tsx | 218 ++++++++++++++++++++++++++++++++++++
 src/theme/customShadows.ts  |  53 +++++++++
 src/theme/declaration.d.ts  |  15 +++
 src/theme/palette.ts        | 110 ++++++++++++++++++
 src/theme/shadows.ts        |  38 +++++++
 src/theme/typography.ts     | 107 ++++++++++++++++++
 src/views/LoginView.tsx     |   6 +-
 10 files changed, 639 insertions(+), 47 deletions(-)
 delete mode 100644 src/index.css
 create mode 100644 src/theme/GlobalStyles.tsx
 create mode 100644 src/theme/ThemeProvider.tsx
 create mode 100644 src/theme/customShadows.ts
 create mode 100644 src/theme/declaration.d.ts
 create mode 100644 src/theme/palette.ts
 create mode 100644 src/theme/shadows.ts
 create mode 100644 src/theme/typography.ts

diff --git a/src/App.tsx b/src/App.tsx
index ce28f495..b9dd7079 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,8 +10,9 @@ import TickerView from './views/TickerView'
 import UsersView from './views/UsersView'
 import ProtectedRoute from './components/ProtectedRoute'
 import NotFoundView from './views/NotFoundView'
-import '../leaflet.config.js'
 import { FeatureProvider } from './components/useFeature'
+import ThemeProvider from './theme/ThemeProvider'
+import '../leaflet.config.js'
 
 const App: FC = () => {
   const queryClient = new QueryClient({
@@ -19,37 +20,43 @@ const App: FC = () => {
   })
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <AuthProvider>
-          <FeatureProvider>
-            <Routes>
-              <Route
-                element={<ProtectedRoute outlet={<HomeView />} role="user" />}
-                path="/"
-              />
-              <Route
-                element={<ProtectedRoute outlet={<TickerView />} role="user" />}
-                path="/ticker/:tickerId"
-              />
-              <Route
-                element={<ProtectedRoute outlet={<UsersView />} role="admin" />}
-                path="/users"
-              />
-              <Route
-                element={
-                  <ProtectedRoute outlet={<SettingsView />} role="admin" />
-                }
-                path="/settings"
-              />
-              <Route element={<LoginView />} path="/login" />
-              <Route element={<NotFoundView />} path="*" />
-            </Routes>
-          </FeatureProvider>
-        </AuthProvider>
-      </BrowserRouter>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <AuthProvider>
+            <FeatureProvider>
+              <Routes>
+                <Route
+                  element={<ProtectedRoute outlet={<HomeView />} role="user" />}
+                  path="/"
+                />
+                <Route
+                  element={
+                    <ProtectedRoute outlet={<TickerView />} role="user" />
+                  }
+                  path="/ticker/:tickerId"
+                />
+                <Route
+                  element={
+                    <ProtectedRoute outlet={<UsersView />} role="admin" />
+                  }
+                  path="/users"
+                />
+                <Route
+                  element={
+                    <ProtectedRoute outlet={<SettingsView />} role="admin" />
+                  }
+                  path="/settings"
+                />
+                <Route element={<LoginView />} path="/login" />
+                <Route element={<NotFoundView />} path="*" />
+              </Routes>
+            </FeatureProvider>
+          </AuthProvider>
+        </BrowserRouter>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </ThemeProvider>
   )
 }
 
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 957354ec..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.ui.modal > .close {
-  top: 0.5rem;
-  right: 0.5rem;
-  color: #000;
-}
-
-.app {
-  margin-top: 50px;
-}
-
-.leaflet-container {
-  height: 400px;
-  z-index: 1;
-}
diff --git a/src/theme/GlobalStyles.tsx b/src/theme/GlobalStyles.tsx
new file mode 100644
index 00000000..b327d61a
--- /dev/null
+++ b/src/theme/GlobalStyles.tsx
@@ -0,0 +1,54 @@
+import React, { FC } from 'react'
+import { GlobalStyles as MUIGlobalStyles } from '@mui/material'
+
+const GlobalStyles: FC = () => {
+  return (
+    <MUIGlobalStyles
+      styles={{
+        '*': {
+          boxSizing: 'border-box',
+        },
+        html: {
+          margin: 0,
+          padding: 0,
+          width: '100%',
+          height: '100%',
+          WebkitOverflowScrolling: 'touch',
+        },
+        body: {
+          margin: 0,
+          padding: 0,
+          width: '100%',
+          height: '100%',
+        },
+        '#root': {
+          width: '100%',
+          height: '100%',
+        },
+        input: {
+          '&[type=number]': {
+            MozAppearance: 'textfield',
+            '&::-webkit-outer-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none',
+            },
+            '&::-webkit-inner-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none',
+            },
+          },
+        },
+        img: {
+          display: 'block',
+          maxWidth: '100%',
+        },
+        ul: {
+          margin: 0,
+          padding: 0,
+        },
+      }}
+    ></MUIGlobalStyles>
+  )
+}
+
+export default GlobalStyles
diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx
new file mode 100644
index 00000000..5e885753
--- /dev/null
+++ b/src/theme/ThemeProvider.tsx
@@ -0,0 +1,218 @@
+import React, { FC, ReactNode } from 'react'
+import {
+  ThemeProvider as MUIThemeProvider,
+  createTheme,
+  StyledEngineProvider,
+  CssBaseline,
+  alpha,
+} from '@mui/material'
+import GlobalStyles from './GlobalStyles'
+import palette from './palette'
+import shadows from './shadows'
+import typography from './typography'
+import customShadows from './customShadows'
+
+const theme = createTheme({
+  palette: palette,
+  shadows: shadows,
+  typography: typography,
+  customShadows: customShadows,
+})
+theme.components = {
+  MuiAutocomplete: {
+    styleOverrides: {
+      paper: {
+        boxShadow: customShadows.z20,
+      },
+    },
+  },
+  MuiBackdrop: {
+    styleOverrides: {
+      root: {
+        backgroundColor: alpha(palette.grey[800], 0.8),
+      },
+      invisible: {
+        background: 'transparent',
+      },
+    },
+  },
+  MuiButton: {
+    styleOverrides: {
+      root: {
+        '&:hover': {
+          boxShadow: 'none',
+        },
+      },
+      sizeLarge: {
+        height: 48,
+      },
+      containedInherit: {
+        color: palette.grey[800],
+        boxShadow: customShadows.z8,
+        '&:hover': {
+          backgroundColor: palette.grey[400],
+        },
+      },
+      containedPrimary: {
+        boxShadow: customShadows.primary,
+      },
+      containedSecondary: {
+        boxShadow: customShadows.secondary,
+      },
+      outlinedInherit: {
+        border: `1px solid ${alpha(palette.grey[500], 0.32)}`,
+        '&:hover': {
+          backgroundColor: palette.action.hover,
+        },
+      },
+      textInherit: {
+        '&:hover': {
+          backgroundColor: palette.action.hover,
+        },
+      },
+    },
+  },
+  MuiCard: {
+    styleOverrides: {
+      root: {
+        boxShadow: theme.customShadows.card,
+        borderRadius: Number(theme.shape.borderRadius) * 2,
+        position: 'relative',
+        zIndex: 0, // Fix Safari overflow: hidden with border radius
+      },
+    },
+  },
+  MuiCardHeader: {
+    defaultProps: {
+      titleTypographyProps: { variant: 'h6' },
+      subheaderTypographyProps: { variant: 'body2' },
+    },
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(3, 3, 0),
+      },
+    },
+  },
+  MuiCardContent: {
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(3),
+      },
+    },
+  },
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        '&.Mui-disabled': {
+          '& svg': { color: palette.text.disabled },
+        },
+      },
+      input: {
+        '&::placeholder': {
+          opacity: 1,
+          color: palette.text.disabled,
+        },
+      },
+    },
+  },
+  MuiInput: {
+    styleOverrides: {
+      underline: {
+        '&:before': {
+          borderBottomColor: alpha(palette.grey[500], 0.56),
+        },
+      },
+    },
+  },
+  MuiFilledInput: {
+    styleOverrides: {
+      root: {
+        backgroundColor: alpha(palette.grey[500], 0.12),
+        '&:hover': {
+          backgroundColor: alpha(palette.grey[500], 0.16),
+        },
+        '&.Mui-focused': {
+          backgroundColor: palette.action.focus,
+        },
+        '&.Mui-disabled': {
+          backgroundColor: palette.action.disabledBackground,
+        },
+      },
+      underline: {
+        '&:before': {
+          borderBottomColor: alpha(palette.grey[500], 0.56),
+        },
+      },
+    },
+  },
+  MuiOutlinedInput: {
+    styleOverrides: {
+      root: {
+        '& .MuiOutlinedInput-notchedOutline': {
+          borderColor: alpha(palette.grey[500], 0.32),
+        },
+        '&.Mui-disabled': {
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: palette.action.disabledBackground,
+          },
+        },
+      },
+    },
+  },
+  MuiPaper: {
+    defaultProps: {
+      elevation: 0,
+    },
+    styleOverrides: {
+      root: {
+        backgroundImage: 'none',
+      },
+    },
+  },
+  MuiTableCell: {
+    styleOverrides: {
+      head: {
+        color: palette.text.secondary,
+        backgroundColor: palette.background.neutral,
+      },
+    },
+  },
+  MuiTooltip: {
+    styleOverrides: {
+      tooltip: {
+        backgroundColor: palette.grey[800],
+      },
+      arrow: {
+        color: palette.grey[800],
+      },
+    },
+  },
+  MuiTypography: {
+    styleOverrides: {
+      paragraph: {
+        marginBottom: theme.spacing(2),
+      },
+      gutterBottom: {
+        marginBottom: theme.spacing(1),
+      },
+    },
+  },
+}
+
+interface Props {
+  children: ReactNode
+}
+
+const ThemeProvider: FC<Props> = ({ children }) => {
+  return (
+    <StyledEngineProvider injectFirst>
+      <MUIThemeProvider theme={theme}>
+        <CssBaseline />
+        <GlobalStyles />
+        {children}
+      </MUIThemeProvider>
+    </StyledEngineProvider>
+  )
+}
+
+export default ThemeProvider
diff --git a/src/theme/customShadows.ts b/src/theme/customShadows.ts
new file mode 100644
index 00000000..6106f3a8
--- /dev/null
+++ b/src/theme/customShadows.ts
@@ -0,0 +1,53 @@
+import { alpha } from '@mui/material/styles'
+import palette from './palette'
+
+const color = palette.grey[500]
+const transparent = alpha(color, 0.16)
+
+export interface CustomShadows {
+  z1: string
+  z4: string
+  z8: string
+  z12: string
+  z16: string
+  z20: string
+  z24: string
+  primary: string
+  info: string
+  secondary: string
+  success: string
+  warning: string
+  error: string
+  card: string
+  dialog: string
+  dropdown: string
+}
+
+const customShadows: CustomShadows = {
+  z1: `0 1px 2px 0 ${transparent}`,
+  z4: `0 4px 8px 0 ${transparent}`,
+  z8: `0 8px 16px 0 ${transparent}`,
+  z12: `0 12px 24px -4px ${transparent}`,
+  z16: `0 16px 32px -4px ${transparent}`,
+  z20: `0 20px 40px -4px ${transparent}`,
+  z24: `0 24px 48px 0 ${transparent}`,
+  //
+  primary: `0 8px 16px 0 ${alpha(palette.primary.main, 0.24)}`,
+  info: `0 8px 16px 0 ${alpha(palette.info.main, 0.24)}`,
+  secondary: `0 8px 16px 0 ${alpha(palette.secondary.main, 0.24)}`,
+  success: `0 8px 16px 0 ${alpha(palette.success.main, 0.24)}`,
+  warning: `0 8px 16px 0 ${alpha(palette.warning.main, 0.24)}`,
+  error: `0 8px 16px 0 ${alpha(palette.error.main, 0.24)}`,
+  //
+  card: `0 0 2px 0 ${alpha(color, 0.2)}, 0 12px 24px -4px ${alpha(
+    color,
+    0.12
+  )}`,
+  dialog: `-40px 40px 80px -8px ${alpha(color, 0.24)}`,
+  dropdown: `0 0 2px 0 ${alpha(color, 0.24)}, -20px 20px 40px -4px ${alpha(
+    color,
+    0.24
+  )}`,
+}
+
+export default customShadows
diff --git a/src/theme/declaration.d.ts b/src/theme/declaration.d.ts
new file mode 100644
index 00000000..0153bfd9
--- /dev/null
+++ b/src/theme/declaration.d.ts
@@ -0,0 +1,15 @@
+import { CustomShadows } from './customShadows'
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    customShadows: CustomShadows
+  }
+
+  interface ThemeOptions {
+    customShadows: CustomShadows
+  }
+
+  interface TypeBackground {
+    neutral: string
+  }
+}
diff --git a/src/theme/palette.ts b/src/theme/palette.ts
new file mode 100644
index 00000000..a7e79256
--- /dev/null
+++ b/src/theme/palette.ts
@@ -0,0 +1,110 @@
+import { Color } from '@mui/material'
+import { alpha, PaletteColor } from '@mui/material/styles'
+
+const grey: Color = {
+  50: '',
+  100: '#F9FAFB',
+  200: '#F4F6F8',
+  300: '#DFE3E8',
+  400: '#C4CDD5',
+  500: '#919EAB',
+  600: '#637381',
+  700: '#454F5B',
+  800: '#212B36',
+  900: '#161C24',
+  A100: '',
+  A200: '',
+  A400: '',
+  A700: '',
+}
+
+const primary: PaletteColor = {
+  //lighter: '#D1E9FC',
+  light: '#76B0F1',
+  main: '#2065D1',
+  dark: '#103996',
+  //darker: '#061B64',
+  contrastText: '#fff',
+}
+
+const secondary: PaletteColor = {
+  //lighter: '#D6E4FF',
+  light: '#84A9FF',
+  main: '#3366FF',
+  dark: '#1939B7',
+  //darker: '#091A7A',
+  contrastText: '#fff',
+}
+
+const info: PaletteColor = {
+  //lighter: '#D0F2FF',
+  light: '#74CAFF',
+  main: '#1890FF',
+  dark: '#0C53B7',
+  //darker: '#04297A',
+  contrastText: '#fff',
+}
+
+const success: PaletteColor = {
+  //lighter: '#E9FCD4',
+  light: '#AAF27F',
+  main: '#54D62C',
+  dark: '#229A16',
+  //darker: '#08660D',
+  contrastText: grey[800],
+}
+
+const warning: PaletteColor = {
+  //lighter: '#FFF7CD',
+  light: '#FFE16A',
+  main: '#FFC107',
+  dark: '#B78103',
+  //darker: '#7A4F01',
+  contrastText: grey[800],
+}
+
+const error: PaletteColor = {
+  //lighter: '#FFE7D9',
+  light: '#FFA48D',
+  main: '#FF4842',
+  dark: '#B72136',
+  //darker: '#7A0C2E',
+  contrastText: '#fff',
+}
+
+const palette = {
+  common: { black: '#000', white: '#fff' },
+  primary: primary,
+  secondary: secondary,
+  info: info,
+  success: success,
+  warning: warning,
+  error: error,
+  grey: grey,
+  divider: alpha(grey[500], 0.24),
+  text: {
+    primary: grey[800],
+    secondary: grey[600],
+    disabled: grey[500],
+  },
+  background: {
+    paper: '#fff',
+    default: grey[100],
+    neutral: grey[200],
+  },
+  action: {
+    activatedOpacity: 0,
+    active: grey[600],
+    disabled: alpha(grey[500], 0.8),
+    disabledBackground: alpha(grey[500], 0.24),
+    disabledOpacity: 0.48,
+    focus: alpha(grey[500], 0.24),
+    focusOpacity: 0,
+    hover: alpha(grey[500], 0.08),
+    hoverOpacity: 0.08,
+    selected: alpha(grey[500], 0.16),
+    selectedOpacity: 0,
+  },
+}
+
+export default palette
diff --git a/src/theme/shadows.ts b/src/theme/shadows.ts
new file mode 100644
index 00000000..b4bf7633
--- /dev/null
+++ b/src/theme/shadows.ts
@@ -0,0 +1,38 @@
+import { alpha, Shadows } from '@mui/material/styles'
+import palette from './palette'
+
+const color = palette.grey[500]
+
+const transparent1 = alpha(color, 0.2)
+const transparent2 = alpha(color, 0.14)
+const transparent3 = alpha(color, 0.12)
+
+const shadows: Shadows = [
+  'none',
+  `0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,
+  `0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,
+  `0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,
+  `0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,
+  `0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,
+  `0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,
+  `0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,
+  `0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,
+  `0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,
+  `0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,
+  `0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,
+  `0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,
+  `0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,
+  `0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,
+  `0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,
+  `0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,
+  `0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,
+  `0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,
+  `0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,
+  `0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,
+  `0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,
+  `0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,
+  `0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,
+  `0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`,
+]
+
+export default shadows
diff --git a/src/theme/typography.ts b/src/theme/typography.ts
new file mode 100644
index 00000000..175ca43a
--- /dev/null
+++ b/src/theme/typography.ts
@@ -0,0 +1,107 @@
+import { Typography } from '@mui/material/styles/createTypography'
+
+export function remToPx(value: number) {
+  return Math.round(value * 16)
+}
+
+export function pxToRem(value: number) {
+  return `${value / 16}rem`
+}
+
+export function responsiveFontSizes({ sm, md, lg }) {
+  return {
+    '@media (min-width:600px)': {
+      fontSize: pxToRem(sm),
+    },
+    '@media (min-width:900px)': {
+      fontSize: pxToRem(md),
+    },
+    '@media (min-width:1200px)': {
+      fontSize: pxToRem(lg),
+    },
+  }
+}
+
+// ----------------------------------------------------------------------
+
+const FONT_PRIMARY = 'Roboto, sans-serif' // Google Font
+// const FONT_SECONDARY = 'CircularStd, sans-serif'; // Local Font
+
+const typography: Typography = {
+  fontFamily: FONT_PRIMARY,
+  fontWeightRegular: 400,
+  fontWeightMedium: 600,
+  fontWeightBold: 700,
+  h1: {
+    fontWeight: 800,
+    lineHeight: 80 / 64,
+    fontSize: pxToRem(40),
+    ...responsiveFontSizes({ sm: 52, md: 58, lg: 64 }),
+  },
+  h2: {
+    fontWeight: 800,
+    lineHeight: 64 / 48,
+    fontSize: pxToRem(32),
+    ...responsiveFontSizes({ sm: 40, md: 44, lg: 48 }),
+  },
+  h3: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(24),
+    ...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }),
+  },
+  h4: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(20),
+    ...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }),
+  },
+  h5: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(18),
+    ...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }),
+  },
+  h6: {
+    fontWeight: 700,
+    lineHeight: 28 / 18,
+    fontSize: pxToRem(17),
+    ...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }),
+  },
+  subtitle1: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: pxToRem(16),
+  },
+  subtitle2: {
+    fontWeight: 600,
+    lineHeight: 22 / 14,
+    fontSize: pxToRem(14),
+  },
+  body1: {
+    lineHeight: 1.5,
+    fontSize: pxToRem(16),
+  },
+  body2: {
+    lineHeight: 22 / 14,
+    fontSize: pxToRem(14),
+  },
+  caption: {
+    lineHeight: 1.5,
+    fontSize: pxToRem(12),
+  },
+  overline: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(12),
+    textTransform: 'uppercase',
+  },
+  button: {
+    fontWeight: 700,
+    lineHeight: 24 / 14,
+    fontSize: pxToRem(14),
+    textTransform: 'capitalize',
+  },
+}
+
+export default typography
diff --git a/src/views/LoginView.tsx b/src/views/LoginView.tsx
index 23e3e58f..29de2bcc 100644
--- a/src/views/LoginView.tsx
+++ b/src/views/LoginView.tsx
@@ -43,7 +43,11 @@ const LoginView: FC = () => {
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Box sx={{ mb: 2, textAlign: 'center' }}>
-            <img alt="Systemli Logo" src={logo} />
+            <img
+              alt="Systemli Logo"
+              src={logo}
+              style={{ marginLeft: 'auto', marginRight: 'auto' }}
+            />
             <Typography component="h4" sx={{ mt: 1 }} variant="h4">
               Ticker Login
             </Typography>

From 6c896913db4fd2934d8919d2aba481972ba903aa Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Tue, 25 Oct 2022 16:33:38 +0200
Subject: [PATCH 03/31] =?UTF-8?q?=F0=9F=92=84=20Rework=20the=20Layout=20an?=
 =?UTF-8?q?d=20Navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/navigation/Clock.tsx        | 25 --------
 src/components/navigation/Nav.tsx          | 25 ++++++++
 src/components/navigation/NavItem.tsx      | 33 ++++++++++
 src/components/navigation/Navigation.tsx   | 74 ----------------------
 src/components/navigation/UserDropdown.tsx | 51 +++++++++++++++
 src/views/Layout.tsx                       | 53 ++++++++++++++--
 6 files changed, 156 insertions(+), 105 deletions(-)
 delete mode 100644 src/components/navigation/Clock.tsx
 create mode 100644 src/components/navigation/Nav.tsx
 create mode 100644 src/components/navigation/NavItem.tsx
 delete mode 100644 src/components/navigation/Navigation.tsx
 create mode 100644 src/components/navigation/UserDropdown.tsx

diff --git a/src/components/navigation/Clock.tsx b/src/components/navigation/Clock.tsx
deleted file mode 100644
index b572eceb..00000000
--- a/src/components/navigation/Clock.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { FC, useEffect, useState } from 'react'
-import Moment from 'react-moment'
-
-interface Props {
-  format?: string
-}
-
-const Clock: FC<Props> = props => {
-  const [date, setDate] = useState(new Date())
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDate(new Date())
-    }, 1000)
-    return () => clearInterval(interval)
-  }, [])
-
-  return (
-    <React.Fragment>
-      <Moment format={props.format}>{date}</Moment>
-    </React.Fragment>
-  )
-}
-
-export default Clock
diff --git a/src/components/navigation/Nav.tsx b/src/components/navigation/Nav.tsx
new file mode 100644
index 00000000..c7ea8e45
--- /dev/null
+++ b/src/components/navigation/Nav.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react'
+import { colors, Container } from '@mui/material'
+
+interface Props {
+  children: React.ReactNode
+}
+
+const Nav: FC<Props> = ({ children }) => {
+  return (
+    <Container
+      fixed
+      sx={{
+        my: 2,
+        pb: 1,
+        display: 'flex',
+        borderBottom: 1,
+        borderColor: colors.grey[200],
+      }}
+    >
+      {children}
+    </Container>
+  )
+}
+
+export default Nav
diff --git a/src/components/navigation/NavItem.tsx b/src/components/navigation/NavItem.tsx
new file mode 100644
index 00000000..85ffde9c
--- /dev/null
+++ b/src/components/navigation/NavItem.tsx
@@ -0,0 +1,33 @@
+import { Box, Button, colors } from '@mui/material'
+import React, { FC } from 'react'
+import { Link } from 'react-router-dom'
+
+interface Props {
+  active: boolean
+  icon: React.ReactNode
+  title: string
+  to: string
+}
+
+const NavItem: FC<Props> = ({ active, icon, title, to }) => {
+  return (
+    <Link to={to}>
+      <Button
+        size="large"
+        sx={{
+          mx: 1,
+          px: 4,
+          backgroundColor: active ? colors.blue[50] : colors.grey[100],
+          borderRadius: 4,
+          color: colors.common['black'],
+          fontSize: '1rem',
+        }}
+      >
+        <Box sx={{ mr: 1 }}>{icon}</Box>
+        {title}
+      </Button>
+    </Link>
+  )
+}
+
+export default NavItem
diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx
deleted file mode 100644
index 9f86ec87..00000000
--- a/src/components/navigation/Navigation.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { FC, useCallback } from 'react'
-import { Container, Dropdown, Image, Menu } from 'semantic-ui-react'
-import Clock from './Clock'
-import logo from '../../assets/logo.png'
-import { useNavigate, useLocation } from 'react-router-dom'
-import useAuth from '../useAuth'
-
-const Navigation: FC = () => {
-  const { user, logout } = useAuth()
-  const navigate = useNavigate()
-  const location = useLocation()
-
-  const userItem = (
-    <Dropdown item text={user?.email}>
-      <Dropdown.Menu>
-        <Dropdown.Item
-          onClick={useCallback(() => {
-            logout()
-          }, [logout])}
-        >
-          Logout
-        </Dropdown.Item>
-      </Dropdown.Menu>
-    </Dropdown>
-  )
-
-  const usersItem = (
-    <Menu.Item
-      active={location.pathname === '/users'}
-      onClick={useCallback(() => navigate('/users'), [navigate])}
-    >
-      <strong>Users</strong>
-    </Menu.Item>
-  )
-
-  const settingsItem = (
-    <Menu.Item
-      active={location.pathname === '/settings'}
-      onClick={useCallback(() => navigate('/settings'), [navigate])}
-    >
-      <strong>Settings</strong>
-    </Menu.Item>
-  )
-
-  return (
-    <Menu fixed="top" inverted size="tiny">
-      <Container>
-        <Menu.Item>
-          <Image
-            spaced="right"
-            src={logo}
-            style={{ position: 'absolute', right: 0 }}
-          />
-        </Menu.Item>
-        <Menu.Item
-          active={window.location.pathname === '/'}
-          onClick={useCallback(() => navigate('/'), [navigate])}
-        >
-          <strong>Home</strong>
-        </Menu.Item>
-        {user?.roles.includes('admin') ? usersItem : null}
-        {user?.roles.includes('admin') ? settingsItem : null}
-        <Menu.Menu position="right">
-          <Menu.Item>
-            <Clock format="dddd, YY/MM/DD, HH:mm:ss" />
-          </Menu.Item>
-          {user ? userItem : null}
-        </Menu.Menu>
-      </Container>
-    </Menu>
-  )
-}
-
-export default Navigation
diff --git a/src/components/navigation/UserDropdown.tsx b/src/components/navigation/UserDropdown.tsx
new file mode 100644
index 00000000..ff9c0338
--- /dev/null
+++ b/src/components/navigation/UserDropdown.tsx
@@ -0,0 +1,51 @@
+import React, { FC, useCallback, useState } from 'react'
+import { AccountCircle } from '@mui/icons-material'
+import { IconButton, Menu, MenuItem } from '@mui/material'
+import useAuth from '../useAuth'
+
+const UserDropdown: FC = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const { user, logout } = useAuth()
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleLogout = useCallback(() => {
+    logout()
+  }, [logout])
+
+  return (
+    <>
+      <IconButton onClick={handleMenu} size="large">
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        keepMounted
+        onClose={handleClose}
+        open={Boolean(anchorEl)}
+        sx={{ mt: '45px' }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      >
+        <MenuItem disabled divider>
+          {user?.email}
+        </MenuItem>
+        <MenuItem onClick={handleLogout}>Logout</MenuItem>
+      </Menu>
+    </>
+  )
+}
+
+export default UserDropdown
diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx
index 814a3b26..4b42f5c8 100644
--- a/src/views/Layout.tsx
+++ b/src/views/Layout.tsx
@@ -1,17 +1,58 @@
 import React, { FC } from 'react'
-import { Container } from 'semantic-ui-react'
-import Navigation from '../components/navigation/Navigation'
+import { Box, Container } from '@mui/material'
+import Nav from '../components/navigation/Nav'
+import NavItem from '../components/navigation/NavItem'
+import UserDropdown from '../components/navigation/UserDropdown'
+import useAuth from '../components/useAuth'
+import { useLocation } from 'react-router-dom'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faGaugeHigh,
+  faGears,
+  faUsers,
+} from '@fortawesome/free-solid-svg-icons'
 
 interface Props {
   children: React.ReactNode
 }
 
 const Layout: FC<Props> = ({ children }) => {
+  const { user } = useAuth()
+  const location = useLocation()
+
   return (
-    <Container>
-      <Navigation />
-      <Container className="app">{children}</Container>
-    </Container>
+    <>
+      <Nav>
+        <Box sx={{ flexGrow: 1 }}>
+          <NavItem
+            active={location.pathname === '/'}
+            icon={<FontAwesomeIcon icon={faGaugeHigh} />}
+            title="Dashboard"
+            to="/"
+          />
+          {!user?.roles.includes('admin') || (
+            <NavItem
+              active={location.pathname === '/users'}
+              icon={<FontAwesomeIcon icon={faUsers} />}
+              title="Users"
+              to="/users"
+            />
+          )}
+          {!user?.roles.includes('admin') || (
+            <NavItem
+              active={location.pathname === '/settings'}
+              icon={<FontAwesomeIcon icon={faGears} />}
+              title="Settings"
+              to="/settings"
+            />
+          )}
+        </Box>
+        <Box>
+          <UserDropdown />
+        </Box>
+      </Nav>
+      <Container fixed>{children}</Container>
+    </>
   )
 }
 

From 5de496a37824f4536445da1311abe4fe78966df1 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Wed, 26 Oct 2022 22:51:38 +0200
Subject: [PATCH 04/31] =?UTF-8?q?=F0=9F=92=84=20Improve=20NavItem=20for=20?=
 =?UTF-8?q?smaller=20Screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/navigation/NavItem.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation/NavItem.tsx b/src/components/navigation/NavItem.tsx
index 85ffde9c..f38b6a3d 100644
--- a/src/components/navigation/NavItem.tsx
+++ b/src/components/navigation/NavItem.tsx
@@ -16,15 +16,15 @@ const NavItem: FC<Props> = ({ active, icon, title, to }) => {
         size="large"
         sx={{
           mx: 1,
-          px: 4,
+          px: { xs: 0, md: 4 },
           backgroundColor: active ? colors.blue[50] : colors.grey[100],
           borderRadius: 4,
           color: colors.common['black'],
           fontSize: '1rem',
         }}
       >
-        <Box sx={{ mr: 1 }}>{icon}</Box>
-        {title}
+        <Box sx={{ mr: { sx: 0, md: 1 } }}>{icon}</Box>
+        <Box sx={{ display: { xs: 'none', md: 'inherit' } }}>{title}</Box>
       </Button>
     </Link>
   )

From cdd91d5a705e696919030b470d853f9978a07edc Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Wed, 26 Oct 2022 22:51:56 +0200
Subject: [PATCH 05/31] =?UTF-8?q?=F0=9F=92=84=20Add=20Loader=20Component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Loader.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/components/Loader.tsx

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
new file mode 100644
index 00000000..c4b09310
--- /dev/null
+++ b/src/components/Loader.tsx
@@ -0,0 +1,15 @@
+import { CircularProgress, Stack, Typography } from '@mui/material'
+import React, { FC } from 'react'
+
+const Loader: FC = () => {
+  return (
+    <Stack alignItems="center" justifyContent="center" sx={{ m: 10 }}>
+      <CircularProgress size="3rem" />
+      <Typography component="span" sx={{ pt: 2 }} variant="h5">
+        Loading
+      </Typography>
+    </Stack>
+  )
+}
+
+export default Loader

From 1a144c028ce1021780989412130953e6383a749e Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Wed, 26 Oct 2022 23:29:23 +0200
Subject: [PATCH 06/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20for=20UsersVie?=
 =?UTF-8?q?w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/TickersDropdown.tsx | 103 +++++++-----
 src/components/user/UserForm.tsx          | 187 ++++++++++++----------
 src/components/user/UserList.tsx          |  71 ++++----
 src/components/user/UserListItem.tsx      | 125 +++++++++++----
 src/components/user/UserListItems.tsx     |   6 +-
 src/components/user/UserModalDelete.tsx   |  70 +++++---
 src/components/user/UserModalForm.tsx     |  86 +++++-----
 src/views/UsersView.test.tsx              |  56 +++++++
 src/views/UsersView.tsx                   |  51 ++++--
 9 files changed, 485 insertions(+), 270 deletions(-)
 create mode 100644 src/views/UsersView.test.tsx

diff --git a/src/components/ticker/TickersDropdown.tsx b/src/components/ticker/TickersDropdown.tsx
index 1966594f..95a7bc4c 100644
--- a/src/components/ticker/TickersDropdown.tsx
+++ b/src/components/ticker/TickersDropdown.tsx
@@ -1,59 +1,84 @@
-import React, {
-  FC,
-  SyntheticEvent,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react'
-import { Dropdown, DropdownItemProps, DropdownProps } from 'semantic-ui-react'
-import { useTickerApi } from '../../api/Ticker'
+import React, { FC, useEffect, useState } from 'react'
+import {
+  Box,
+  Chip,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  SelectChangeEvent,
+  SxProps,
+} from '@mui/material'
+import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 
 interface Props {
   name: string
-  defaultValue?: Array<number>
-  onChange: (event: SyntheticEvent, input: DropdownProps) => void
+  defaultValue: Array<number>
+  onChange: (tickers: number[]) => void
+  sx?: SxProps
 }
 
-const TickersDropdown: FC<Props> = props => {
-  const [options, setOptions] = useState<DropdownItemProps[]>([])
+const TickersDropdown: FC<Props> = ({ name, defaultValue, onChange, sx }) => {
+  const [options, setOptions] = useState<Array<Ticker>>([])
+  const [tickers, setTickers] = useState<Array<number>>(defaultValue)
   const { token } = useAuth()
   const { getTickers } = useTickerApi(token)
 
-  const onChange = useCallback(
-    (event: SyntheticEvent, input: DropdownProps) => {
-      props.onChange(event, input)
-    },
-    [props]
-  )
+  const handleChange = (event: SelectChangeEvent<typeof tickers>) => {
+    if (typeof event.target.value !== 'string') {
+      setTickers(event.target.value)
+      onChange(event.target.value)
+    }
+  }
 
   useEffect(() => {
     getTickers()
       .then(response => response.data.tickers)
       .then(tickers => {
-        const availableOptions: DropdownItemProps[] = []
-        tickers.map(ticker => {
-          availableOptions.push({
-            key: ticker.id,
-            text: ticker.title,
-            value: ticker.id,
-          })
-        })
-        setOptions(availableOptions)
+        setOptions(tickers)
       })
-  }, [getTickers])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const renderValue = (selected: number[]) => {
+    const selectedTickers = options.filter(ticker => {
+      return selected.includes(ticker.id)
+    })
+
+    return (
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+        {selectedTickers.map(ticker => (
+          <Chip key={ticker.id} label={ticker.title} />
+        ))}
+      </Box>
+    )
+  }
 
   return (
-    <Dropdown
-      defaultValue={props.defaultValue}
-      fluid
-      multiple
-      name={props.name}
-      onChange={onChange}
-      options={options}
-      placeholder="Select a Ticker"
-      selection
-    />
+    <FormControl sx={sx}>
+      <InputLabel>Tickers</InputLabel>
+      <Select
+        input={<OutlinedInput label="Tickers" />}
+        label="Tickers"
+        multiple
+        name={name}
+        onChange={handleChange}
+        renderValue={renderValue}
+        value={tickers}
+      >
+        {options.map(ticker => (
+          <MenuItem
+            key={ticker.id}
+            selected={tickers.includes(ticker.id)}
+            value={ticker.id}
+          >
+            {ticker.title}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
   )
 }
 
diff --git a/src/components/user/UserForm.tsx b/src/components/user/UserForm.tsx
index c630f15b..c3d2cc29 100644
--- a/src/components/user/UserForm.tsx
+++ b/src/components/user/UserForm.tsx
@@ -1,25 +1,21 @@
-import React, {
-  ChangeEvent,
-  FC,
-  FormEvent,
-  SyntheticEvent,
-  useCallback,
-  useEffect,
-} from 'react'
-import {
-  CheckboxProps,
-  DropdownProps,
-  Form,
-  Header,
-  InputOnChangeData,
-} from 'semantic-ui-react'
+import React, { FC, useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { User, useUserApi } from '../../api/User'
 import { useQueryClient } from '@tanstack/react-query'
-import TickersDropdown from '../ticker/TickersDropdown'
 import useAuth from '../useAuth'
+import {
+  FormControlLabel,
+  Checkbox,
+  FormGroup,
+  TextField,
+  Typography,
+  Grid,
+  Divider,
+} from '@mui/material'
+import TickersDropdown from '../ticker/TickersDropdown'
 
 interface Props {
+  id: string
   user?: User
   callback: () => void
 }
@@ -32,35 +28,25 @@ interface FormValues {
   tickers: Array<number>
 }
 
-const UserForm: FC<Props> = props => {
-  const user = props.user
+const UserForm: FC<Props> = ({ id, user, callback }) => {
   const { token } = useAuth()
   const { postUser, putUser } = useUserApi(token)
-  const { handleSubmit, register, setValue } = useForm<FormValues>({
+  const {
+    formState: { errors },
+    handleSubmit,
+    register,
+    setValue,
+    watch,
+  } = useForm<FormValues>({
     defaultValues: {
       email: user?.email,
       is_super_admin: user?.is_super_admin,
+      tickers: user?.tickers,
     },
   })
   const queryClient = useQueryClient()
-
-  const onChange = useCallback(
-    (
-      e: ChangeEvent | FormEvent | SyntheticEvent,
-      {
-        name,
-        value,
-        checked,
-      }: InputOnChangeData | CheckboxProps | DropdownProps
-    ) => {
-      if (checked !== undefined) {
-        setValue(name, checked)
-      } else {
-        setValue(name, value)
-      }
-    },
-    [setValue]
-  )
+  const isSuperAdminChecked = watch('is_super_admin')
+  const password = watch('password', '')
 
   const onSubmit: SubmitHandler<FormValues> = data => {
     const formData = {
@@ -73,67 +59,98 @@ const UserForm: FC<Props> = props => {
     if (user) {
       putUser(formData, user).finally(() => {
         queryClient.invalidateQueries(['users'])
-        props.callback()
+        callback()
       })
     } else {
       postUser(formData).finally(() => {
         queryClient.invalidateQueries(['users'])
-        props.callback()
+        callback()
       })
     }
   }
 
   useEffect(() => {
-    register('email')
-    register('is_super_admin')
-    register('password')
-    register('password_validate')
     register('tickers')
   })
 
   return (
-    <Form id="userForm" onSubmit={handleSubmit(onSubmit)}>
-      <Form.Group widths="2">
-        <Form.Input
-          defaultValue={user ? user.email : ''}
-          label="Email"
-          name="email"
-          onChange={onChange}
-          required
-        />
-      </Form.Group>
-      <Form.Checkbox
-        defaultChecked={user ? user.is_super_admin : false}
-        label="Super Admin"
-        name="is_super_admin"
-        onChange={onChange}
-        toggle
-      />
-      <Form.Group widths="equal">
-        <Form.Input
-          label="Password"
-          name="password"
-          onChange={onChange}
-          type="password"
-        />
-        <Form.Input
-          label="Repeat Password"
-          name="password_validate"
-          onChange={onChange}
-          type="password"
-        />
-      </Form.Group>
-      {!user?.is_super_admin ? (
-        <>
-          <Header>Permissions</Header>
-          <TickersDropdown
-            defaultValue={user?.tickers}
-            name="tickers"
-            onChange={onChange}
-          />
-        </>
-      ) : null}
-    </Form>
+    <form id={id} onSubmit={handleSubmit(onSubmit)}>
+      <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
+        <Grid item md={6} xs={12}>
+          <FormGroup>
+            <TextField
+              error={errors.email !== undefined}
+              margin="normal"
+              {...register('email')}
+              defaultValue={user ? user.email : ''}
+              label="E-Mail"
+              name="email"
+              required
+              type="email"
+            />
+          </FormGroup>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  {...register('is_super_admin')}
+                  defaultChecked={user?.is_super_admin}
+                />
+              }
+              label="Super Admin"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <FormGroup>
+            <TextField
+              error={errors.password !== undefined}
+              margin="normal"
+              {...register('password', {
+                minLength: {
+                  value: 8,
+                  message: 'Password must have at least 8 characters',
+                },
+              })}
+              helperText={errors.password?.message}
+              label="Password"
+              name="password"
+              required={!user}
+              type="password"
+            />
+            <TextField
+              error={errors.password_validate !== undefined}
+              margin="dense"
+              {...register('password_validate', {
+                validate: value =>
+                  value === password || 'The passwords do not match',
+              })}
+              helperText={errors.password_validate?.message}
+              label="Repeat Password"
+              name="password_validate"
+              required={!user}
+              type="password"
+            />
+          </FormGroup>
+        </Grid>
+        {!isSuperAdminChecked ? (
+          <Grid item xs={12}>
+            <Divider />
+            <Typography component="h6" sx={{ my: 1 }} variant="h6">
+              Permissions
+            </Typography>
+            <TickersDropdown
+              defaultValue={user?.tickers || []}
+              name="tickers"
+              onChange={tickers => {
+                setValue('tickers', tickers)
+              }}
+              sx={{ width: '100%' }}
+            />
+          </Grid>
+        ) : null}
+      </Grid>
+    </form>
   )
 }
 
diff --git a/src/components/user/UserList.tsx b/src/components/user/UserList.tsx
index 756c2529..7bca5acf 100644
--- a/src/components/user/UserList.tsx
+++ b/src/components/user/UserList.tsx
@@ -1,11 +1,17 @@
 import React, { FC } from 'react'
-import { Button, Dimmer, Loader, Table } from 'semantic-ui-react'
 import { useQuery } from '@tanstack/react-query'
 import UserListItems from './UserListItems'
-import UserModalForm from './UserModalForm'
 import useAuth from '../useAuth'
 import { useUserApi } from '../../api/User'
 import ErrorView from '../../views/ErrorView'
+import {
+  Table,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material'
+import Loader from '../Loader'
 
 const UserList: FC = () => {
   const { token } = useAuth()
@@ -13,11 +19,7 @@ const UserList: FC = () => {
   const { isLoading, error, data } = useQuery(['users'], getUsers)
 
   if (isLoading) {
-    return (
-      <Dimmer active inverted>
-        <Loader inverted>Loading</Loader>
-      </Dimmer>
-    )
+    return <Loader />
   }
 
   if (error || data === undefined || data.status === 'error') {
@@ -27,41 +29,32 @@ const UserList: FC = () => {
   const users = data.data.users
 
   return (
-    <React.Fragment>
+    <TableContainer>
       <Table>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>ID</Table.HeaderCell>
-            <Table.HeaderCell>Admin</Table.HeaderCell>
-            <Table.HeaderCell>Email</Table.HeaderCell>
-            <Table.HeaderCell>Creation Time</Table.HeaderCell>
-            <Table.HeaderCell />
-          </Table.Row>
-        </Table.Header>
+        <TableHead>
+          <TableRow>
+            <TableCell align="center" size="small">
+              ID
+            </TableCell>
+            <TableCell align="center" size="small">
+              Admin
+            </TableCell>
+            <TableCell align="left" size="medium">
+              E-Mail
+            </TableCell>
+            <TableCell
+              align="left"
+              size="small"
+              sx={{ display: { xs: 'none', md: 'table-cell' } }}
+            >
+              Creation Time
+            </TableCell>
+            <TableCell />
+          </TableRow>
+        </TableHead>
         <UserListItems users={users} />
-        <Table.Footer fullWidth>
-          <Table.Row>
-            <Table.HeaderCell />
-            <Table.HeaderCell />
-            <Table.HeaderCell />
-            <Table.HeaderCell />
-            <Table.HeaderCell>
-              <UserModalForm
-                trigger={
-                  <Button
-                    content="Create"
-                    floated="right"
-                    icon="user"
-                    primary
-                    size="small"
-                  />
-                }
-              />
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Footer>
       </Table>
-    </React.Fragment>
+    </TableContainer>
   )
 }
 
diff --git a/src/components/user/UserListItem.tsx b/src/components/user/UserListItem.tsx
index e2a621ac..d7cf4799 100644
--- a/src/components/user/UserListItem.tsx
+++ b/src/components/user/UserListItem.tsx
@@ -1,6 +1,22 @@
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
+import {
+  faCheck,
+  faPencil,
+  faTrash,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { MoreVert } from '@mui/icons-material'
+import {
+  colors,
+  IconButton,
+  MenuItem,
+  Popover,
+  TableCell,
+  TableRow,
+  Typography,
+} from '@mui/material'
 import Moment from 'react-moment'
-import { Button, Icon, Label, Table } from 'semantic-ui-react'
 import { User } from '../../api/User'
 import UserModalDelete from './UserModalDelete'
 import UserModalForm from './UserModalForm'
@@ -9,35 +25,88 @@ interface Props {
   user: User
 }
 
-const UserListItem: FC<Props> = props => {
-  const user = props.user
+const UserListItem: FC<Props> = ({ user }) => {
+  const [formModalOpen, setFormModalOpen] = useState<boolean>(false)
+  const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false)
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
 
   return (
-    <Table.Row>
-      <Table.Cell>{user.id}</Table.Cell>
-      <Table.Cell>
-        <Label color={user.is_super_admin ? 'yellow' : 'green'}>
-          <Icon name={user.is_super_admin ? 'check circle' : 'remove circle'} />
-          {user.is_super_admin ? 'Yes' : 'No'}
-        </Label>
-      </Table.Cell>
-      <Table.Cell>{user.email}</Table.Cell>
-      <Table.Cell>
+    <TableRow hover>
+      <TableCell align="center" padding="none">
+        {user.id}
+      </TableCell>
+      <TableCell align="center" padding="none">
+        {user.is_super_admin ? (
+          <FontAwesomeIcon icon={faCheck} />
+        ) : (
+          <FontAwesomeIcon icon={faXmark} />
+        )}
+      </TableCell>
+      <TableCell>{user.email}</TableCell>
+      <TableCell sx={{ display: { xs: 'none', md: 'table-cell' } }}>
         <Moment date={user.creation_date} fromNow />
-      </Table.Cell>
-      <Table.Cell textAlign="right">
-        <Button.Group size="small">
-          <UserModalForm
-            trigger={<Button color="black" content="Edit" icon="edit" />}
-            user={user}
-          />
-          <UserModalDelete
-            trigger={<Button color="red" content="Delete" icon="delete" />}
-            user={user}
-          />
-        </Button.Group>
-      </Table.Cell>
-    </Table.Row>
+      </TableCell>
+      <TableCell align="right">
+        <IconButton onClick={handleMenu} size="large">
+          <MoreVert />
+        </IconButton>
+        <Popover
+          PaperProps={{
+            sx: {
+              p: 1,
+              width: 140,
+              '& .MuiMenuItem-root': {
+                px: 1,
+                borderRadius: 0.75,
+              },
+            },
+          }}
+          anchorEl={anchorEl}
+          anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+          onClose={handleClose}
+          open={Boolean(anchorEl)}
+          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        >
+          <MenuItem
+            onClick={() => {
+              handleClose()
+              setFormModalOpen(true)
+            }}
+          >
+            <FontAwesomeIcon icon={faPencil} />
+            <Typography sx={{ ml: 2 }}>Edit</Typography>
+          </MenuItem>
+          <MenuItem
+            onClick={() => {
+              handleClose()
+              setDeleteModalOpen(true)
+            }}
+            sx={{ color: colors.red[400] }}
+          >
+            <FontAwesomeIcon icon={faTrash} />
+            <Typography sx={{ ml: 2 }}>Delete</Typography>
+          </MenuItem>
+        </Popover>
+        <UserModalForm
+          onClose={() => setFormModalOpen(false)}
+          open={formModalOpen}
+          user={user}
+        />
+        <UserModalDelete
+          onClose={() => setDeleteModalOpen(false)}
+          open={deleteModalOpen}
+          user={user}
+        />
+      </TableCell>
+    </TableRow>
   )
 }
 
diff --git a/src/components/user/UserListItems.tsx b/src/components/user/UserListItems.tsx
index e49cff05..0912132a 100644
--- a/src/components/user/UserListItems.tsx
+++ b/src/components/user/UserListItems.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { Table } from 'semantic-ui-react'
+import { TableBody } from '@mui/material'
 import { User } from '../../api/User'
 import UserListItem from './UserListItem'
 
@@ -9,11 +9,11 @@ interface Props {
 
 const UserListItems: FC<Props> = ({ users }: Props) => {
   return (
-    <Table.Body>
+    <TableBody>
       {users.map(user => (
         <UserListItem key={user.id} user={user} />
       ))}
-    </Table.Body>
+    </TableBody>
   )
 }
 
diff --git a/src/components/user/UserModalDelete.tsx b/src/components/user/UserModalDelete.tsx
index fa43cc2e..bd939b70 100644
--- a/src/components/user/UserModalDelete.tsx
+++ b/src/components/user/UserModalDelete.tsx
@@ -1,46 +1,66 @@
-import React, { FC, useCallback, useState } from 'react'
+import React, { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { Confirm } from 'semantic-ui-react'
 import { User, useUserApi } from '../../api/User'
 import useAuth from '../useAuth'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
+import { Close } from '@mui/icons-material'
 
 interface Props {
+  onClose: () => void
+  open: boolean
   user: User
-  trigger: React.ReactNode
 }
 
-const UserModalDelete: FC<Props> = props => {
+const UserModalDelete: FC<Props> = ({ onClose, open, user }) => {
   const { token } = useAuth()
   const { deleteUser } = useUserApi(token)
-  const [open, setOpen] = useState<boolean>(false)
   const queryClient = useQueryClient()
-  const user = props.user
 
-  const handleCancel = useCallback(() => {
-    setOpen(false)
-  }, [])
+  const handleClose = () => {
+    onClose()
+  }
 
-  const handleConfirm = useCallback(() => {
+  const handleDelete = useCallback(() => {
     deleteUser(user).finally(() => {
       queryClient.invalidateQueries(['users'])
-      setOpen(false)
+      onClose()
     })
-  }, [deleteUser, user, queryClient])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+  }, [deleteUser, user, queryClient, onClose])
 
   return (
-    <Confirm
-      dimmer
-      onCancel={handleCancel}
-      onConfirm={handleConfirm}
-      onOpen={handleOpen}
-      open={open}
-      size="mini"
-      trigger={props.trigger}
-    />
+    <Dialog maxWidth="md" open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Delete User
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        Are you sure to delete the user? This action cannot be undone.
+      </DialogContent>
+      <DialogActions>
+        <Button color="error" onClick={handleDelete} variant="contained">
+          Delete
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/components/user/UserModalForm.tsx b/src/components/user/UserModalForm.tsx
index 5f88a4dd..edc2e72e 100644
--- a/src/components/user/UserModalForm.tsx
+++ b/src/components/user/UserModalForm.tsx
@@ -1,51 +1,59 @@
-import React, { FC, useCallback, useState } from 'react'
-import { Button, Header, Modal } from 'semantic-ui-react'
+import React, { FC } from 'react'
+import { Close } from '@mui/icons-material'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
 import { User } from '../../api/User'
 import UserForm from './UserForm'
 
 interface Props {
+  onClose: () => void
+  open: boolean
   user?: User
-  trigger: React.ReactNode
 }
 
-const UserModalForm: FC<Props> = props => {
-  const [open, setOpen] = useState<boolean>(false)
-
-  const handleClose = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+const UserModalForm: FC<Props> = ({ open, onClose, user }) => {
+  const handleClose = () => {
+    onClose()
+  }
 
   return (
-    <Modal
-      closeIcon
-      dimmer
-      onClose={handleClose}
-      onOpen={handleOpen}
-      open={open}
-      size="small"
-      trigger={props.trigger}
-    >
-      <Header>{props.user ? 'Edit User' : 'Create User'}</Header>
-      <Modal.Content>
-        <UserForm callback={handleClose} user={props.user} />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            color="green"
-            content={props.user ? 'Update' : 'Create'}
-            form="userForm"
-            type="submit"
-          />
-          <Button.Or />
-          <Button color="red" content="Close" onClick={handleClose} />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
+    <Dialog fullWidth maxWidth="md" open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          {user ? 'Update User' : 'Create User'}
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        <UserForm callback={handleClose} id="userForm" user={user} />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color="primary"
+          form="userForm"
+          type="submit"
+          variant="contained"
+        >
+          Save
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/views/UsersView.test.tsx b/src/views/UsersView.test.tsx
new file mode 100644
index 00000000..d74d8868
--- /dev/null
+++ b/src/views/UsersView.test.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+import { AuthProvider } from '../components/useAuth'
+import UsersView from './UsersView'
+import sign from 'jwt-encode'
+import fetchMock from 'jest-fetch-mock'
+
+describe('UsersView', function () {
+  const jwt = sign(
+    { id: 1, email: 'louis@systemli.org', roles: ['admin', 'user'] },
+    'secret'
+  )
+
+  function setup() {
+    const client = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    })
+    return render(
+      <QueryClientProvider client={client}>
+        <MemoryRouter>
+          <AuthProvider>
+            <UsersView />
+          </AuthProvider>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+  }
+
+  test('renders list', async function () {
+    jest.spyOn(window.localStorage.__proto__, 'getItem').mockReturnValue(jwt)
+    fetchMock.mockResponseOnce(
+      JSON.stringify({
+        data: {
+          users: [
+            {
+              id: 1,
+              creation_date: new Date(),
+              email: 'admin@systemli.org',
+              is_super_admin: true,
+            },
+          ],
+        },
+      })
+    )
+    setup()
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+    expect(await screen.findByText('admin@systemli.org')).toBeInTheDocument()
+  })
+})
diff --git a/src/views/UsersView.tsx b/src/views/UsersView.tsx
index 6baab93c..5315663d 100644
--- a/src/views/UsersView.tsx
+++ b/src/views/UsersView.tsx
@@ -1,22 +1,49 @@
-import React, { FC } from 'react'
-import { Grid, Header } from 'semantic-ui-react'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Button, Card, Grid, Stack, Typography } from '@mui/material'
+import React, { FC, useState } from 'react'
 import UserList from '../components/user/UserList'
+import UserModalForm from '../components/user/UserModalForm'
 import Layout from './Layout'
 
 const UsersView: FC = () => {
+  const [formModalOpen, setFormModalOpen] = useState<boolean>(false)
+
   return (
     <Layout>
-      <Grid>
-        <Grid.Row>
-          <Grid.Column>
-            <Header dividing>Users</Header>
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row>
-          <Grid.Column>
+      <Grid container>
+        <Grid item xs={12}>
+          <Stack
+            alignItems="center"
+            direction="row"
+            justifyContent="space-between"
+            mb={5}
+          >
+            <Typography component="h2" gutterBottom variant="h3">
+              Users
+            </Typography>
+            <Button
+              onClick={() => {
+                setFormModalOpen(true)
+              }}
+              startIcon={<FontAwesomeIcon icon={faPlus} />}
+              variant="contained"
+            >
+              New User
+            </Button>
+            <UserModalForm
+              onClose={() => {
+                setFormModalOpen(false)
+              }}
+              open={formModalOpen}
+            />
+          </Stack>
+        </Grid>
+        <Grid item xs={12}>
+          <Card>
             <UserList />
-          </Grid.Column>
-        </Grid.Row>
+          </Card>
+        </Grid>
       </Grid>
     </Layout>
   )

From 640cba6e72823a3bd4d9ec71347a7a12fdc5280c Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Thu, 27 Oct 2022 18:14:23 +0200
Subject: [PATCH 07/31] =?UTF-8?q?=F0=9F=90=9B=20Fix=20types=20in=20typogra?=
 =?UTF-8?q?phy.ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/theme/typography.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/theme/typography.ts b/src/theme/typography.ts
index 175ca43a..8aa25ea5 100644
--- a/src/theme/typography.ts
+++ b/src/theme/typography.ts
@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material/styles/createTypography'
+import { TypographyOptions } from '@mui/material/styles/createTypography'
 
 export function remToPx(value: number) {
   return Math.round(value * 16)
@@ -8,7 +8,15 @@ export function pxToRem(value: number) {
   return `${value / 16}rem`
 }
 
-export function responsiveFontSizes({ sm, md, lg }) {
+export function responsiveFontSizes({
+  sm,
+  md,
+  lg,
+}: {
+  sm: number
+  md: number
+  lg: number
+}) {
   return {
     '@media (min-width:600px)': {
       fontSize: pxToRem(sm),
@@ -27,7 +35,7 @@ export function responsiveFontSizes({ sm, md, lg }) {
 const FONT_PRIMARY = 'Roboto, sans-serif' // Google Font
 // const FONT_SECONDARY = 'CircularStd, sans-serif'; // Local Font
 
-const typography: Typography = {
+const typography: TypographyOptions = {
   fontFamily: FONT_PRIMARY,
   fontWeightRegular: 400,
   fontWeightMedium: 600,

From 49ac683e195e676f17ad8144257652f87b3d3eac Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Thu, 27 Oct 2022 19:14:22 +0200
Subject: [PATCH 08/31] =?UTF-8?q?=E2=9C=85=20Add=20Tests=20for=20UsersView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/UserListItem.tsx |   4 +-
 src/views/UsersView.test.tsx         | 105 ++++++++++++++++++++++++++-
 2 files changed, 107 insertions(+), 2 deletions(-)

diff --git a/src/components/user/UserListItem.tsx b/src/components/user/UserListItem.tsx
index d7cf4799..3c002589 100644
--- a/src/components/user/UserListItem.tsx
+++ b/src/components/user/UserListItem.tsx
@@ -55,7 +55,7 @@ const UserListItem: FC<Props> = ({ user }) => {
         <Moment date={user.creation_date} fromNow />
       </TableCell>
       <TableCell align="right">
-        <IconButton onClick={handleMenu} size="large">
+        <IconButton data-testid="usermenu" onClick={handleMenu} size="large">
           <MoreVert />
         </IconButton>
         <Popover
@@ -76,6 +76,7 @@ const UserListItem: FC<Props> = ({ user }) => {
           transformOrigin={{ vertical: 'top', horizontal: 'right' }}
         >
           <MenuItem
+            data-testid="usermenu-edit"
             onClick={() => {
               handleClose()
               setFormModalOpen(true)
@@ -85,6 +86,7 @@ const UserListItem: FC<Props> = ({ user }) => {
             <Typography sx={{ ml: 2 }}>Edit</Typography>
           </MenuItem>
           <MenuItem
+            data-testid="usermenu-delete"
             onClick={() => {
               handleClose()
               setDeleteModalOpen(true)
diff --git a/src/views/UsersView.test.tsx b/src/views/UsersView.test.tsx
index d74d8868..4c62ab2c 100644
--- a/src/views/UsersView.test.tsx
+++ b/src/views/UsersView.test.tsx
@@ -6,6 +6,7 @@ import { AuthProvider } from '../components/useAuth'
 import UsersView from './UsersView'
 import sign from 'jwt-encode'
 import fetchMock from 'jest-fetch-mock'
+import userEvent from '@testing-library/user-event'
 
 describe('UsersView', function () {
   const jwt = sign(
@@ -13,6 +14,11 @@ describe('UsersView', function () {
     'secret'
   )
 
+  beforeEach(() => {
+    jest.spyOn(window.localStorage.__proto__, 'getItem').mockReturnValue(jwt)
+    fetchMock.resetMocks()
+  })
+
   function setup() {
     const client = new QueryClient({
       defaultOptions: {
@@ -33,7 +39,6 @@ describe('UsersView', function () {
   }
 
   test('renders list', async function () {
-    jest.spyOn(window.localStorage.__proto__, 'getItem').mockReturnValue(jwt)
     fetchMock.mockResponseOnce(
       JSON.stringify({
         data: {
@@ -53,4 +58,102 @@ describe('UsersView', function () {
     expect(screen.getByText(/loading/i)).toBeInTheDocument()
     expect(await screen.findByText('admin@systemli.org')).toBeInTheDocument()
   })
+
+  test('open new users dialog', async function () {
+    setup()
+    fetchMock.mockIf(
+      /\/v1\/admin\/users/i,
+      JSON.stringify({
+        data: {
+          users: [],
+        },
+      })
+    )
+    fetchMock.mockIf(
+      /\/v1\/admin\/tickers/i,
+      JSON.stringify({
+        data: {
+          tickers: [],
+        },
+      })
+    )
+
+    const button = await screen.findByRole('button', { name: /new user/i })
+    expect(button).toBeInTheDocument()
+
+    await userEvent.click(button)
+
+    const dialogTitle = await screen.findByText(/create user/i)
+    expect(dialogTitle).toBeInTheDocument()
+
+    const close = screen.getByRole('button', { name: /close/i })
+    expect(close).toBeInTheDocument()
+
+    await userEvent.click(close)
+
+    expect(dialogTitle).not.toBeVisible()
+  })
+
+  test('open dialog for existing user', async function () {
+    fetchMock.mockIf(
+      /\/v1\/admin\/users/i,
+      JSON.stringify({
+        data: {
+          users: [
+            {
+              id: 1,
+              creation_date: new Date(),
+              email: 'admin@systemli.org',
+              is_super_admin: true,
+            },
+          ],
+        },
+      })
+    )
+    setup()
+
+    expect(await screen.findByText('admin@systemli.org')).toBeInTheDocument()
+
+    const menuButton = screen.getByTestId('usermenu')
+
+    await userEvent.click(menuButton)
+
+    const editButton = screen.getByTestId('usermenu-edit')
+
+    expect(editButton).toBeVisible()
+
+    await userEvent.click(editButton)
+
+    expect(editButton).not.toBeVisible()
+
+    const editTitle = screen.getByText(/update user/i)
+    const editClose = screen.getByRole('button', { name: /close/i })
+
+    expect(editTitle).toBeInTheDocument()
+    expect(editClose).toBeInTheDocument()
+
+    await userEvent.click(editClose)
+
+    expect(editTitle).not.toBeVisible()
+
+    await userEvent.click(menuButton)
+
+    const deleteButton = screen.getByTestId('usermenu-delete')
+
+    expect(deleteButton).toBeVisible()
+
+    await userEvent.click(deleteButton)
+
+    expect(deleteButton).not.toBeVisible()
+
+    const deleteTitle = screen.getByText(/delete user/i)
+    const deleteClose = screen.getByRole('button', { name: /close/i })
+
+    expect(deleteTitle).toBeInTheDocument()
+    expect(deleteClose).toBeInTheDocument()
+
+    await userEvent.click(deleteClose)
+
+    expect(deleteClose).not.toBeVisible()
+  })
 })

From 724f195bbfb1a199135ab8f6b9da4968774ab88d Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Thu, 27 Oct 2022 21:14:12 +0200
Subject: [PATCH 09/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20for=20Settings?=
 =?UTF-8?q?View?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/InactiveSettingsCard.tsx         | 162 ++++++++------
 .../settings/InactiveSettingsForm.tsx         | 197 +++++++++---------
 .../settings/InactiveSettingsModalForm.tsx    |  90 ++++----
 .../settings/RefreshIntervalCard.tsx          |  83 +++++---
 .../settings/RefreshIntervalForm.tsx          |  50 +++--
 .../settings/RefreshIntervalModalForm.tsx     |  90 ++++----
 src/views/Layout.tsx                          |   4 +-
 src/views/SettingsView.tsx                    |  37 ++--
 src/views/UsersView.tsx                       |   4 +-
 9 files changed, 401 insertions(+), 316 deletions(-)

diff --git a/src/components/settings/InactiveSettingsCard.tsx b/src/components/settings/InactiveSettingsCard.tsx
index 19efab5d..79400848 100644
--- a/src/components/settings/InactiveSettingsCard.tsx
+++ b/src/components/settings/InactiveSettingsCard.tsx
@@ -1,21 +1,25 @@
-import React, { FC } from 'react'
-import ReactMarkdown from 'react-markdown'
+import React, { FC, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { useSettingsApi } from '../../api/Settings'
+import ErrorView from '../../views/ErrorView'
+import useAuth from '../useAuth'
+import Loader from '../Loader'
 import {
+  Box,
   Button,
   Card,
-  Dimmer,
-  Header,
-  Icon,
-  List,
-  Loader,
-} from 'semantic-ui-react'
-import { useSettingsApi } from '../../api/Settings'
-import ErrorView from '../../views/ErrorView'
+  CardContent,
+  Divider,
+  Grid,
+  Typography,
+} from '@mui/material'
+import { Stack } from '@mui/system'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPencil } from '@fortawesome/free-solid-svg-icons'
 import InactiveSettingsModalForm from './InactiveSettingsModalForm'
-import useAuth from '../useAuth'
 
 const InactiveSettingsCard: FC = () => {
+  const [formOpen, setFormOpen] = useState<boolean>(false)
   const { token } = useAuth()
   const { getInactiveSettings } = useSettingsApi(token)
   const { isLoading, error, data } = useQuery(
@@ -23,12 +27,16 @@ const InactiveSettingsCard: FC = () => {
     getInactiveSettings
   )
 
+  const handleFormOpen = () => {
+    setFormOpen(true)
+  }
+
+  const handleFormClose = () => {
+    setFormOpen(false)
+  }
+
   if (isLoading) {
-    return (
-      <Dimmer active inverted>
-        <Loader inverted>Loading</Loader>
-      </Dimmer>
-    )
+    return <Loader />
   }
 
   if (error || data === undefined || data.status === 'error') {
@@ -39,58 +47,84 @@ const InactiveSettingsCard: FC = () => {
 
   return (
     <Card>
-      <Card.Content>
-        <Card.Header>
-          <Icon name="question circle" />
-          Inactive Settings
-        </Card.Header>
-        <Card.Meta>
+      <CardContent>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          <Typography component="h3" variant="h5">
+            Inactive Settings
+          </Typography>
+          <Button onClick={handleFormOpen}>
+            <FontAwesomeIcon icon={faPencil} />
+            <Typography sx={{ ml: 1 }}>Edit</Typography>
+          </Button>
+        </Stack>
+        <Typography color="GrayText" component="span" variant="body2">
           These settings have affect for inactive or non-configured tickers.
-        </Card.Meta>
-      </Card.Content>
-      <Card.Content>
-        <Card.Description>
-          <List>
-            <List.Item>
-              <List.Header>Headline</List.Header>
-              {setting.value.headline}
-            </List.Item>
-            <List.Item>
-              <List.Header>Subheadline</List.Header>
-              {setting.value.sub_headline}
-            </List.Item>
-            <List.Item>
-              <List.Header>Description</List.Header>
-              <ReactMarkdown>{setting.value.description}</ReactMarkdown>
-            </List.Item>
-          </List>
-          <Header size="medium">Information</Header>
-          <List>
-            <List.Item>
-              <List.Icon name="users" />
-              <List.Content>{setting.value.author}</List.Content>
-            </List.Item>
-            <List.Item>
-              <List.Icon name="mail" />
-              <List.Content>{setting.value.email}</List.Content>
-            </List.Item>
-            <List.Item>
-              <List.Icon name="linkify" />
-              <List.Content>{setting.value.homepage}</List.Content>
-            </List.Item>
-            <List.Item>
-              <List.Icon name="twitter" />
-              <List.Content>{setting.value.twitter}</List.Content>
-            </List.Item>
-          </List>
-        </Card.Description>
-      </Card.Content>
-      <Card.Content>
+        </Typography>
+      </CardContent>
+      <Divider variant="middle" />
+      <CardContent>
+        <Box sx={{ mb: 1 }}>
+          <Typography color="GrayText" component="span" variant="body2">
+            Headline
+          </Typography>
+          <Typography>{setting.value.headline}</Typography>
+        </Box>
+        <Box sx={{ mb: 1 }}>
+          <Typography color="GrayText" component="span" variant="body2">
+            Subheadline
+          </Typography>
+          <Typography>{setting.value.sub_headline}</Typography>
+        </Box>
+        <Box sx={{ mb: 1 }}>
+          <Typography color="GrayText" component="span" variant="body2">
+            Description
+          </Typography>
+          <Typography>{setting.value.description}</Typography>
+        </Box>
+        <Grid container>
+          <Grid item lg={6} xs={12}>
+            <Box sx={{ mb: 1 }}>
+              <Typography color="GrayText" component="span" variant="body2">
+                Author
+              </Typography>
+              <Typography>{setting.value.author}</Typography>
+            </Box>
+          </Grid>
+          <Grid item lg={6} xs={12}>
+            <Box sx={{ mb: 1 }}>
+              <Typography color="GrayText" component="span" variant="body2">
+                Homepage
+              </Typography>
+              <Typography>{setting.value.homepage}</Typography>
+            </Box>
+          </Grid>
+          <Grid item lg={6} xs={12}>
+            <Box sx={{ mb: 1 }}>
+              <Typography color="GrayText" component="span" variant="body2">
+                E-Mail
+              </Typography>
+              <Typography>{setting.value.email}</Typography>
+            </Box>
+          </Grid>
+          <Grid item lg={6} xs={12}>
+            <Box sx={{ mb: 1 }}>
+              <Typography color="GrayText" component="span" variant="body2">
+                Twitter
+              </Typography>
+              <Typography>{setting.value.twitter}</Typography>
+            </Box>
+          </Grid>
+        </Grid>
         <InactiveSettingsModalForm
+          onClose={handleFormClose}
+          open={formOpen}
           setting={setting}
-          trigger={<Button color="black" content="edit" icon="edit" />}
         />
-      </Card.Content>
+      </CardContent>
     </Card>
   )
 }
diff --git a/src/components/settings/InactiveSettingsForm.tsx b/src/components/settings/InactiveSettingsForm.tsx
index 98c0f1e9..21300109 100644
--- a/src/components/settings/InactiveSettingsForm.tsx
+++ b/src/components/settings/InactiveSettingsForm.tsx
@@ -1,22 +1,12 @@
-import React, {
-  ChangeEvent,
-  FC,
-  FormEvent,
-  useCallback,
-  useEffect,
-} from 'react'
+import React, { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
-import {
-  Form,
-  Header,
-  InputOnChangeData,
-  TextAreaProps,
-} from 'semantic-ui-react'
 import { InactiveSetting, Setting, useSettingsApi } from '../../api/Settings'
 import useAuth from '../useAuth'
+import { FormGroup, Grid, TextField } from '@mui/material'
 
 interface Props {
+  name: string
   setting: Setting<InactiveSetting>
   callback: () => void
 }
@@ -31,9 +21,8 @@ interface FormValues {
   twitter: string
 }
 
-const InactiveSettingsForm: FC<Props> = props => {
-  const setting = props.setting
-  const { handleSubmit, register, setValue } = useForm<FormValues>({
+const InactiveSettingsForm: FC<Props> = ({ name, setting, callback }) => {
+  const { handleSubmit, register } = useForm<FormValues>({
     defaultValues: {
       headline: setting.value.headline,
       sub_headline: setting.value.sub_headline,
@@ -48,95 +37,105 @@ const InactiveSettingsForm: FC<Props> = props => {
   const { putInactiveSettings } = useSettingsApi(token)
   const queryClient = useQueryClient()
 
-  const onChange = useCallback(
-    (
-      e: FormEvent | ChangeEvent,
-      { name, value }: InputOnChangeData | TextAreaProps
-    ) => {
-      setValue(name, value)
-    },
-    [setValue]
-  )
-
   const onSubmit: SubmitHandler<FormValues> = data => {
     putInactiveSettings(data)
       .then(() => queryClient.invalidateQueries(['inactive_settings']))
-      .finally(() => props.callback())
+      .finally(() => callback())
   }
 
-  useEffect(() => {
-    register('headline')
-    register('sub_headline')
-    register('description')
-    register('author')
-    register('email')
-    register('homepage')
-    register('twitter')
-  })
-
   return (
-    <Form id="inactiveSettingsForm" onSubmit={handleSubmit(onSubmit)}>
-      <Form.Group widths="equal">
-        <Form.Input
-          defaultValue={setting.value.headline}
-          label="Headline"
-          name="headline"
-          onChange={onChange}
-        />
-        <Form.Input
-          defaultValue={setting.value.sub_headline}
-          label="Subheadline"
-          name="sub_headline"
-          onChange={onChange}
-        />
-      </Form.Group>
-      <Form.TextArea
-        defaultValue={setting.value.description}
-        label="Description"
-        name="description"
-        onChange={onChange}
-        rows="5"
-      />
-      <Header dividing>Information</Header>
-      <Form.Group widths="equal">
-        <Form.Input
-          defaultValue={setting.value.author}
-          icon="users"
-          iconPosition="left"
-          label="Author"
-          name="author"
-          onChange={onChange}
-          placeholder="Author"
-        />
-        <Form.Input
-          defaultValue={setting.value.homepage}
-          icon="home"
-          iconPosition="left"
-          label="Homepage"
-          name="homepage"
-          onChange={onChange}
-        />
-      </Form.Group>
-      <Form.Group widths="equal">
-        <Form.Input
-          defaultValue={setting.value.email}
-          icon="at"
-          iconPosition="left"
-          label="Email"
-          name="email"
-          onChange={onChange}
-          placeholder="Email"
-        />
-        <Form.Input
-          defaultValue={setting.value.twitter}
-          icon="twitter"
-          iconPosition="left"
-          label="Twitter"
-          name="twitter"
-          onChange={onChange}
-        />
-      </Form.Group>
-    </Form>
+    <form id={name} onSubmit={handleSubmit(onSubmit)}>
+      <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              margin="dense"
+              {...register('headline')}
+              defaultValue={setting.value.headline}
+              label="Headline"
+              name="headline"
+              required
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              margin="dense"
+              {...register('sub_headline')}
+              defaultValue={setting.value.sub_headline}
+              label="Subheadline"
+              name="sub_headline"
+              required
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              margin="normal"
+              maxRows={10}
+              multiline
+              {...register('description')}
+              defaultValue={setting.value.description}
+              label="Description"
+              name="description"
+              required
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              margin="dense"
+              {...register('author')}
+              defaultValue={setting.value.author}
+              label="Author"
+              name="author"
+              required
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              margin="dense"
+              {...register('homepage')}
+              defaultValue={setting.value.homepage}
+              label="Homepage"
+              name="homepage"
+              required
+              type="url"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              margin="dense"
+              {...register('email')}
+              defaultValue={setting.value.email}
+              label="E-Mail"
+              name="email"
+              required
+              type="email"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              margin="dense"
+              {...register('twitter')}
+              defaultValue={setting.value.twitter}
+              label="Twitter"
+              name="twitter"
+              required
+            />
+          </FormGroup>
+        </Grid>
+      </Grid>
+    </form>
   )
 }
 
diff --git a/src/components/settings/InactiveSettingsModalForm.tsx b/src/components/settings/InactiveSettingsModalForm.tsx
index 9c5fdf0e..74df2082 100644
--- a/src/components/settings/InactiveSettingsModalForm.tsx
+++ b/src/components/settings/InactiveSettingsModalForm.tsx
@@ -1,51 +1,63 @@
-import React, { FC, useCallback, useState } from 'react'
-import { Button, Header, Modal } from 'semantic-ui-react'
+import { Close } from '@mui/icons-material'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
+import React, { FC } from 'react'
 import { InactiveSetting, Setting } from '../../api/Settings'
 import InactiveSettingsForm from './InactiveSettingsForm'
 
 interface Props {
+  open: boolean
+  onClose: () => void
   setting: Setting<InactiveSetting>
-  trigger: React.ReactNode
 }
 
-const InactiveSettingsModalForm: FC<Props> = props => {
-  const [open, setOpen] = useState<boolean>(false)
-
-  const handleClose = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+const InactiveSettingsModalForm: FC<Props> = ({ open, onClose, setting }) => {
+  const handleClose = () => {
+    onClose()
+  }
 
   return (
-    <Modal
-      closeIcon
-      dimmer
-      onClose={handleClose}
-      onOpen={handleOpen}
-      open={open}
-      size="small"
-      trigger={props.trigger}
-    >
-      <Header>Edit Inactive Settings</Header>
-      <Modal.Content>
-        <InactiveSettingsForm callback={handleClose} setting={props.setting} />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            color="green"
-            content="Update"
-            form="inactiveSettingsForm"
-            type="submit"
-          />
-          <Button.Or />
-          <Button color="red" content="Close" onClick={handleClose} />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
+    <Dialog fullWidth maxWidth="md" open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Edit Inactive Settings
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        <InactiveSettingsForm
+          callback={handleClose}
+          name="inactiveSettingForm"
+          setting={setting}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color="primary"
+          form="inactiveSettingForm"
+          type="submit"
+          variant="contained"
+        >
+          Save
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/components/settings/RefreshIntervalCard.tsx b/src/components/settings/RefreshIntervalCard.tsx
index 4272ff82..e4739866 100644
--- a/src/components/settings/RefreshIntervalCard.tsx
+++ b/src/components/settings/RefreshIntervalCard.tsx
@@ -1,12 +1,24 @@
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Button, Card, Dimmer, Icon, List, Loader } from 'semantic-ui-react'
 import { useSettingsApi } from '../../api/Settings'
 import ErrorView from '../../views/ErrorView'
-import RefreshIntervalModalForm from './RefreshIntervalModalForm'
 import useAuth from '../useAuth'
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Divider,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPencil } from '@fortawesome/free-solid-svg-icons'
+import Loader from '../Loader'
+import RefreshIntervalModalForm from './RefreshIntervalModalForm'
 
 const RefreshIntervalCard: FC = () => {
+  const [formOpen, setFormOpen] = useState<boolean>(false)
   const { token } = useAuth()
   const { getRefreshInterval } = useSettingsApi(token)
   const { isLoading, error, data } = useQuery(
@@ -14,12 +26,16 @@ const RefreshIntervalCard: FC = () => {
     getRefreshInterval
   )
 
+  const handleFormOpen = () => {
+    setFormOpen(true)
+  }
+
+  const handleFormClose = () => {
+    setFormOpen(false)
+  }
+
   if (isLoading) {
-    return (
-      <Dimmer active inverted>
-        <Loader inverted>Loading</Loader>
-      </Dimmer>
-    )
+    return <Loader />
   }
 
   if (error || data === undefined || data.status === 'error') {
@@ -34,31 +50,38 @@ const RefreshIntervalCard: FC = () => {
 
   return (
     <Card>
-      <Card.Content>
-        <Card.Header>
-          <Icon name="refresh" />
-          Refresh Interval
-        </Card.Header>
-        <Card.Meta>
-          These setting configures the reload interval for the frontend
-        </Card.Meta>
-      </Card.Content>
-      <Card.Content>
-        <Card.Description>
-          <List>
-            <List.Item>
-              <List.Icon name="rocket" />
-              <List.Content>{setting.value} ms</List.Content>
-            </List.Item>
-          </List>
-        </Card.Description>
-      </Card.Content>
-      <Card.Content>
+      <CardContent>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          <Typography component="h3" variant="h5">
+            Refresh Interval
+          </Typography>
+          <Button onClick={handleFormOpen}>
+            <FontAwesomeIcon icon={faPencil} />
+            <Typography sx={{ ml: 1 }}>Edit</Typography>
+          </Button>
+        </Stack>
+        <Typography color="GrayText" component="span" variant="body2">
+          These settings have affect for inactive or non-configured tickers.
+        </Typography>
+      </CardContent>
+      <Divider variant="middle" />
+      <CardContent>
+        <Box sx={{ mb: 1 }}>
+          <Typography color="GrayText" component="span" variant="body2">
+            Refresh Interval
+          </Typography>
+          <Typography>{setting.value} ms</Typography>
+        </Box>
         <RefreshIntervalModalForm
+          onClose={handleFormClose}
+          open={formOpen}
           setting={setting}
-          trigger={<Button color="black" content="edit" icon="edit" />}
         />
-      </Card.Content>
+      </CardContent>
     </Card>
   )
 }
diff --git a/src/components/settings/RefreshIntervalForm.tsx b/src/components/settings/RefreshIntervalForm.tsx
index 8dab6e35..9206da0a 100644
--- a/src/components/settings/RefreshIntervalForm.tsx
+++ b/src/components/settings/RefreshIntervalForm.tsx
@@ -1,11 +1,13 @@
-import React, { FC, FormEvent, useCallback, useEffect } from 'react'
+import React, { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
-import { Form, InputOnChangeData } from 'semantic-ui-react'
 import { Setting, useSettingsApi } from '../../api/Settings'
 import useAuth from '../useAuth'
+import { FormGroup, TextField } from '@mui/material'
+import { Grid } from 'semantic-ui-react'
 
 interface Props {
+  name: string
   setting: Setting<string>
   callback: () => void
 }
@@ -14,9 +16,8 @@ interface FormValues {
   refresh_interval: number
 }
 
-const RefreshIntervalForm: FC<Props> = props => {
-  const setting = props.setting
-  const { handleSubmit, register, setValue } = useForm<FormValues>({
+const RefreshIntervalForm: FC<Props> = ({ name, setting, callback }) => {
+  const { handleSubmit, register } = useForm<FormValues>({
     defaultValues: {
       refresh_interval: parseInt(setting.value, 10),
     },
@@ -25,33 +26,30 @@ const RefreshIntervalForm: FC<Props> = props => {
   const { putRefreshInterval } = useSettingsApi(token)
   const queryClient = useQueryClient()
 
-  const onChange = useCallback(
-    (e: FormEvent, { name, value }: InputOnChangeData) => {
-      setValue(name, value)
-    },
-    [setValue]
-  )
-
   const onSubmit: SubmitHandler<FormValues> = data => {
     putRefreshInterval(data.refresh_interval)
       .then(() => queryClient.invalidateQueries(['refresh_interval_setting']))
-      .finally(() => props.callback())
+      .finally(() => callback())
   }
 
-  useEffect(() => {
-    register('refresh_interval', { valueAsNumber: true })
-  })
-
   return (
-    <Form id="refreshIntervalForm" onSubmit={handleSubmit(onSubmit)}>
-      <Form.Input
-        defaultValue={setting.value}
-        label="Interval"
-        name="refresh_interval"
-        onChange={onChange}
-        type="number"
-      />
-    </Form>
+    <form id={name} onSubmit={handleSubmit(onSubmit)}>
+      <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              margin="dense"
+              {...register('refresh_interval', { valueAsNumber: true })}
+              defaultValue={setting.value}
+              label="Interval"
+              name="refresh_interval"
+              required
+              type="number"
+            />
+          </FormGroup>
+        </Grid>
+      </Grid>
+    </form>
   )
 }
 
diff --git a/src/components/settings/RefreshIntervalModalForm.tsx b/src/components/settings/RefreshIntervalModalForm.tsx
index cad247fc..65a0f189 100644
--- a/src/components/settings/RefreshIntervalModalForm.tsx
+++ b/src/components/settings/RefreshIntervalModalForm.tsx
@@ -1,51 +1,63 @@
-import React, { FC, useCallback, useState } from 'react'
-import { Button, Header, Modal } from 'semantic-ui-react'
+import { Close } from '@mui/icons-material'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+} from '@mui/material'
+import { Stack } from '@mui/system'
+import React, { FC } from 'react'
 import { Setting } from '../../api/Settings'
 import RefreshIntervalForm from './RefreshIntervalForm'
 
 interface Props {
+  open: boolean
+  onClose: () => void
   setting: Setting<string>
-  trigger: React.ReactNode
 }
 
-const RefreshIntervalModalForm: FC<Props> = props => {
-  const [open, setOpen] = useState<boolean>(false)
-
-  const handleClose = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+const RefreshIntervalModalForm: FC<Props> = ({ open, onClose, setting }) => {
+  const handleClose = () => {
+    onClose()
+  }
 
   return (
-    <Modal
-      closeIcon
-      dimmer
-      onClose={handleClose}
-      onOpen={handleOpen}
-      open={open}
-      size="small"
-      trigger={props.trigger}
-    >
-      <Header>Edit Refresh Interval</Header>
-      <Modal.Content>
-        <RefreshIntervalForm callback={handleClose} setting={props.setting} />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            color="green"
-            content="Update"
-            form="refreshIntervalForm"
-            type="submit"
-          />
-          <Button.Or />
-          <Button color="red" content="Close" onClick={handleClose} />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
+    <Dialog fullWidth maxWidth="md" open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Edit Refresh Interval
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        <RefreshIntervalForm
+          callback={handleClose}
+          name="refreshIntervalForm"
+          setting={setting}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color="primary"
+          form="refreshIntervalForm"
+          type="submit"
+          variant="contained"
+        >
+          Save
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx
index 4b42f5c8..a5ef3658 100644
--- a/src/views/Layout.tsx
+++ b/src/views/Layout.tsx
@@ -51,7 +51,9 @@ const Layout: FC<Props> = ({ children }) => {
           <UserDropdown />
         </Box>
       </Nav>
-      <Container fixed>{children}</Container>
+      <Container fixed sx={{ mb: 4 }}>
+        {children}
+      </Container>
     </>
   )
 }
diff --git a/src/views/SettingsView.tsx b/src/views/SettingsView.tsx
index a950315e..2af5dc49 100644
--- a/src/views/SettingsView.tsx
+++ b/src/views/SettingsView.tsx
@@ -1,26 +1,31 @@
 import React, { FC } from 'react'
-import { Grid, Header } from 'semantic-ui-react'
+import Layout from './Layout'
+import { Grid, Stack, Typography } from '@mui/material'
 import RefreshIntervalCard from '../components/settings/RefreshIntervalCard'
 import InactiveSettingsCard from '../components/settings/InactiveSettingsCard'
-import Layout from './Layout'
 
 const SettingsView: FC = () => {
   return (
     <Layout>
-      <Grid>
-        <Grid.Row>
-          <Grid.Column>
-            <Header dividing>Settings</Header>
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row columns={4}>
-          <Grid.Column>
-            <InactiveSettingsCard />
-          </Grid.Column>
-          <Grid.Column>
-            <RefreshIntervalCard />
-          </Grid.Column>
-        </Grid.Row>
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Stack
+            alignItems="center"
+            direction="row"
+            justifyContent="space-between"
+            mb={2}
+          >
+            <Typography component="h2" gutterBottom variant="h3">
+              Settings
+            </Typography>
+          </Stack>
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <InactiveSettingsCard />
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <RefreshIntervalCard />
+        </Grid>
       </Grid>
     </Layout>
   )
diff --git a/src/views/UsersView.tsx b/src/views/UsersView.tsx
index 5315663d..b2bd2b8a 100644
--- a/src/views/UsersView.tsx
+++ b/src/views/UsersView.tsx
@@ -11,13 +11,13 @@ const UsersView: FC = () => {
 
   return (
     <Layout>
-      <Grid container>
+      <Grid container spacing={2}>
         <Grid item xs={12}>
           <Stack
             alignItems="center"
             direction="row"
             justifyContent="space-between"
-            mb={5}
+            mb={2}
           >
             <Typography component="h2" gutterBottom variant="h3">
               Users

From 65d34b1b1d8e282444429122247141fde0b3c0d0 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Fri, 28 Oct 2022 11:58:11 +0200
Subject: [PATCH 10/31] =?UTF-8?q?=E2=9C=85=20Add=20Tests=20for=20SettingsV?=
 =?UTF-8?q?iew?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/InactiveSettingsCard.tsx         |   2 +-
 .../settings/RefreshIntervalCard.tsx          |   2 +-
 src/views/SettingsView.test.tsx               | 121 ++++++++++++++++++
 3 files changed, 123 insertions(+), 2 deletions(-)
 create mode 100644 src/views/SettingsView.test.tsx

diff --git a/src/components/settings/InactiveSettingsCard.tsx b/src/components/settings/InactiveSettingsCard.tsx
index 79400848..1e55353c 100644
--- a/src/components/settings/InactiveSettingsCard.tsx
+++ b/src/components/settings/InactiveSettingsCard.tsx
@@ -56,7 +56,7 @@ const InactiveSettingsCard: FC = () => {
           <Typography component="h3" variant="h5">
             Inactive Settings
           </Typography>
-          <Button onClick={handleFormOpen}>
+          <Button data-testid="inactivesetting-edit" onClick={handleFormOpen}>
             <FontAwesomeIcon icon={faPencil} />
             <Typography sx={{ ml: 1 }}>Edit</Typography>
           </Button>
diff --git a/src/components/settings/RefreshIntervalCard.tsx b/src/components/settings/RefreshIntervalCard.tsx
index e4739866..2ea9f247 100644
--- a/src/components/settings/RefreshIntervalCard.tsx
+++ b/src/components/settings/RefreshIntervalCard.tsx
@@ -59,7 +59,7 @@ const RefreshIntervalCard: FC = () => {
           <Typography component="h3" variant="h5">
             Refresh Interval
           </Typography>
-          <Button onClick={handleFormOpen}>
+          <Button data-testid="refreshinterval-edit" onClick={handleFormOpen}>
             <FontAwesomeIcon icon={faPencil} />
             <Typography sx={{ ml: 1 }}>Edit</Typography>
           </Button>
diff --git a/src/views/SettingsView.test.tsx b/src/views/SettingsView.test.tsx
new file mode 100644
index 00000000..48000179
--- /dev/null
+++ b/src/views/SettingsView.test.tsx
@@ -0,0 +1,121 @@
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+import { AuthProvider } from '../components/useAuth'
+import sign from 'jwt-encode'
+import fetchMock from 'jest-fetch-mock'
+import SettingsView from './SettingsView'
+import userEvent from '@testing-library/user-event'
+
+describe('SettingsView', function () {
+  const jwt = sign(
+    { id: 1, email: 'louis@systemli.org', roles: ['admin', 'user'] },
+    'secret'
+  )
+  const inactiveSettingsResponse = JSON.stringify({
+    data: {
+      setting: {
+        id: 1,
+        name: 'inactive_settings',
+        value: {
+          headline: 'headline',
+          sub_headline: 'sub_headline',
+          description: 'description',
+          author: 'author',
+          email: 'email',
+          homepage: 'homepage',
+          twitter: 'twitter',
+        },
+      },
+    },
+  })
+  const refreshIntervalResponse = JSON.stringify({
+    data: {
+      setting: {
+        id: 2,
+        name: 'refresh_interval',
+        value: 10000,
+      },
+    },
+  })
+
+  beforeEach(() => {
+    jest.spyOn(window.localStorage.__proto__, 'getItem').mockReturnValue(jwt)
+    fetchMock.resetMocks()
+  })
+
+  function setup() {
+    const client = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    })
+    return render(
+      <QueryClientProvider client={client}>
+        <MemoryRouter>
+          <AuthProvider>
+            <SettingsView />
+          </AuthProvider>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+  }
+
+  test('renders settings and open dialogs', async function () {
+    fetchMock.mockIf(/^http:\/\/localhost:8080\/.*$/, (request: Request) => {
+      if (request.url.endsWith('/admin/settings/inactive_settings')) {
+        return Promise.resolve(inactiveSettingsResponse)
+      }
+      if (request.url.endsWith('/admin/settings/refresh_interval')) {
+        return Promise.resolve(refreshIntervalResponse)
+      }
+
+      return Promise.resolve(
+        JSON.stringify({
+          data: [],
+          status: 'error',
+          error: 'error message',
+        })
+      )
+    })
+
+    setup()
+
+    const loaders = screen.getAllByText(/loading/i)
+    expect(loaders).toHaveLength(2)
+    loaders.forEach(loader => {
+      expect(loader).toBeInTheDocument()
+    })
+
+    expect(await screen.findByText('headline')).toBeInTheDocument()
+
+    const inactiveSettingEditButton = screen.getByTestId('inactivesetting-edit')
+    expect(inactiveSettingEditButton).toBeInTheDocument()
+
+    await userEvent.click(inactiveSettingEditButton)
+
+    const inactiveSettingsDialogTitle = screen.getByText(
+      'Edit Inactive Settings'
+    )
+    expect(inactiveSettingsDialogTitle).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: /close/i }))
+
+    expect(inactiveSettingsDialogTitle).not.toBeVisible()
+
+    const refreshIntervalEditButton = screen.getByTestId('refreshinterval-edit')
+    expect(refreshIntervalEditButton).toBeInTheDocument()
+
+    await userEvent.click(refreshIntervalEditButton)
+
+    const refreshIntervalDialogTitle = screen.getByText('Edit Refresh Interval')
+    expect(refreshIntervalDialogTitle).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: /close/i }))
+
+    expect(refreshIntervalDialogTitle).not.toBeVisible()
+  })
+})

From 170abf877836417c0317ff7b6087b12390810b41 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Fri, 28 Oct 2022 12:28:31 +0200
Subject: [PATCH 11/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20for=20ErrorVie?=
 =?UTF-8?q?w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/InactiveSettingsCard.tsx         |  6 ++-
 .../settings/RefreshIntervalCard.tsx          |  2 +-
 src/components/user/UserList.tsx              |  6 ++-
 src/views/ErrorView.tsx                       | 52 ++++++++++++++-----
 src/views/HomeView.tsx                        |  4 +-
 src/views/SettingsView.test.tsx               | 14 +++++
 src/views/TickerView.tsx                      |  6 ++-
 src/views/UsersView.test.tsx                  | 10 ++++
 8 files changed, 83 insertions(+), 17 deletions(-)

diff --git a/src/components/settings/InactiveSettingsCard.tsx b/src/components/settings/InactiveSettingsCard.tsx
index 1e55353c..1baadc30 100644
--- a/src/components/settings/InactiveSettingsCard.tsx
+++ b/src/components/settings/InactiveSettingsCard.tsx
@@ -40,7 +40,11 @@ const InactiveSettingsCard: FC = () => {
   }
 
   if (error || data === undefined || data.status === 'error') {
-    return <ErrorView>Unable to fetch inactive settings from server.</ErrorView>
+    return (
+      <ErrorView queryKey={['inactive_settings']}>
+        Unable to fetch inactive settings from server.
+      </ErrorView>
+    )
   }
 
   const setting = data.data.setting
diff --git a/src/components/settings/RefreshIntervalCard.tsx b/src/components/settings/RefreshIntervalCard.tsx
index 2ea9f247..e4a54a5a 100644
--- a/src/components/settings/RefreshIntervalCard.tsx
+++ b/src/components/settings/RefreshIntervalCard.tsx
@@ -40,7 +40,7 @@ const RefreshIntervalCard: FC = () => {
 
   if (error || data === undefined || data.status === 'error') {
     return (
-      <ErrorView>
+      <ErrorView queryKey={['refresh_interval_setting']}>
         Unable to fetch refresh interval setting from server.
       </ErrorView>
     )
diff --git a/src/components/user/UserList.tsx b/src/components/user/UserList.tsx
index 7bca5acf..e697edda 100644
--- a/src/components/user/UserList.tsx
+++ b/src/components/user/UserList.tsx
@@ -23,7 +23,11 @@ const UserList: FC = () => {
   }
 
   if (error || data === undefined || data.status === 'error') {
-    return <ErrorView>Unable to fetch users from server.</ErrorView>
+    return (
+      <ErrorView queryKey={['users']}>
+        Unable to fetch users from server.
+      </ErrorView>
+    )
   }
 
   const users = data.data.users
diff --git a/src/views/ErrorView.tsx b/src/views/ErrorView.tsx
index ac15341b..7fe34d20 100644
--- a/src/views/ErrorView.tsx
+++ b/src/views/ErrorView.tsx
@@ -1,22 +1,50 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  colors,
+  Divider,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { QueryKey, useQueryClient } from '@tanstack/react-query'
 import React, { FC } from 'react'
-import { Icon, Message } from 'semantic-ui-react'
 
 interface Props {
   children: React.ReactNode
+  queryKey: QueryKey
 }
 
-const ErrorView: FC<Props> = ({ children }) => {
+const ErrorView: FC<Props> = ({ children, queryKey }) => {
+  const queryClient = useQueryClient()
+
+  const handleClick = () => {
+    queryClient.invalidateQueries(queryKey)
+  }
+
   return (
-    <Message error icon>
-      <Icon name="thumbs down outline" />
-      <Message.Content>
-        <Message.Header>Oh no! An error occured</Message.Header>
-        <p>{children}</p>
-        <p>
-          <small>Please try again later or contact your administrator.</small>
-        </p>
-      </Message.Content>
-    </Message>
+    <Card>
+      <CardContent>
+        <Typography component="h2" variant="h4">
+          Oh no! An error occured
+        </Typography>
+        <Divider sx={{ mt: 1, mb: 2 }} />
+        <Stack alignItems="center" direction="row" spacing={2}>
+          <Box>
+            <Button color="secondary" onClick={handleClick} variant="contained">
+              Reload
+            </Button>
+          </Box>
+          <Box>
+            <Typography variant="body1">{children}</Typography>
+            <Typography color={colors.grey[700]} component="p" variant="body2">
+              Please try again later or contact your administrator.
+            </Typography>
+          </Box>
+        </Stack>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/src/views/HomeView.tsx b/src/views/HomeView.tsx
index ef21da7e..e0c0f8be 100644
--- a/src/views/HomeView.tsx
+++ b/src/views/HomeView.tsx
@@ -32,7 +32,9 @@ const HomeView: FC = () => {
   if (error || data === undefined || data.status === 'error') {
     return (
       <Layout>
-        <ErrorView>Unable to fetch tickers from server.</ErrorView>
+        <ErrorView queryKey={['tickers']}>
+          Unable to fetch tickers from server.
+        </ErrorView>
       </Layout>
     )
   }
diff --git a/src/views/SettingsView.test.tsx b/src/views/SettingsView.test.tsx
index 48000179..f49d2e67 100644
--- a/src/views/SettingsView.test.tsx
+++ b/src/views/SettingsView.test.tsx
@@ -118,4 +118,18 @@ describe('SettingsView', function () {
 
     expect(refreshIntervalDialogTitle).not.toBeVisible()
   })
+
+  test('settings could not fetched', async function () {
+    fetchMock.mockReject(new Error('network error'))
+    setup()
+
+    const loaders = screen.getAllByText(/loading/i)
+    expect(loaders).toHaveLength(2)
+    loaders.forEach(loader => {
+      expect(loader).toBeInTheDocument()
+    })
+    expect(
+      await screen.findByText('Oh no! An error occured')
+    ).toBeInTheDocument()
+  })
 })
diff --git a/src/views/TickerView.tsx b/src/views/TickerView.tsx
index cc713f2a..d8dfbcf7 100644
--- a/src/views/TickerView.tsx
+++ b/src/views/TickerView.tsx
@@ -27,7 +27,11 @@ const TickerView: FC = () => {
   }
 
   if (error || data === undefined || data.status === 'error') {
-    return <ErrorView>Unable to fetch the ticker from server.</ErrorView>
+    return (
+      <ErrorView queryKey={['ticker', tickerIdNum]}>
+        Unable to fetch the ticker from server.
+      </ErrorView>
+    )
   }
 
   const ticker = data.data.ticker
diff --git a/src/views/UsersView.test.tsx b/src/views/UsersView.test.tsx
index 4c62ab2c..0ed7545c 100644
--- a/src/views/UsersView.test.tsx
+++ b/src/views/UsersView.test.tsx
@@ -156,4 +156,14 @@ describe('UsersView', function () {
 
     expect(deleteClose).not.toBeVisible()
   })
+
+  test('user list could not fetched', async function () {
+    fetchMock.mockReject(new Error('network error'))
+    setup()
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+    expect(
+      await screen.findByText('Oh no! An error occured')
+    ).toBeInTheDocument()
+  })
 })

From 875f451c8b098259c0c6f8461394d09bcfcdb1f5 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sat, 29 Oct 2022 00:38:05 +0200
Subject: [PATCH 12/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20for=20HomeView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/LocationSearch.tsx    | 163 ++------
 src/components/ticker/TickerCard.tsx        |  20 +-
 src/components/ticker/TickerForm.tsx        | 395 +++++++++++---------
 src/components/ticker/TickerList.tsx        | 122 +++---
 src/components/ticker/TickerListItem.tsx    | 145 +++++--
 src/components/ticker/TickerListItems.tsx   |   6 +-
 src/components/ticker/TickerModalDelete.tsx |  66 ++--
 src/components/ticker/TickerModalForm.tsx   |  87 +++--
 src/views/HomeView.tsx                      | 126 +++----
 9 files changed, 584 insertions(+), 546 deletions(-)

diff --git a/src/components/ticker/LocationSearch.tsx b/src/components/ticker/LocationSearch.tsx
index dbdf17b7..01de1682 100644
--- a/src/components/ticker/LocationSearch.tsx
+++ b/src/components/ticker/LocationSearch.tsx
@@ -1,12 +1,5 @@
-import React, {
-  FC,
-  MouseEvent,
-  useCallback,
-  useEffect,
-  useReducer,
-  useRef,
-} from 'react'
-import { Search, SearchProps } from 'semantic-ui-react'
+import React, { FC, useRef, useState } from 'react'
+import { Autocomplete, TextField } from '@mui/material'
 
 interface SearchResult {
   place_id: number
@@ -21,136 +14,60 @@ export interface Result {
   lon: number
 }
 
-interface State {
-  loading: boolean
-  results: Result[]
-  value: string
-}
-
-const initialState: State = {
-  loading: false,
-  results: [],
-  value: '',
-}
-
-enum SearchActionType {
-  CLEAN_QUERY = 'CLEAN_QUERY',
-  START_SEARCH = 'START_SEARCH',
-  FINISH_SEARCH = 'FINISH_SEARCH',
-  UPDATE_SELECTION = 'UPDATE_SELECTION',
-}
-
-interface SearchAction {
-  type: SearchActionType
-  query?: string
-  results?: Result[]
-  selection?: string
-}
-
-async function api(value: string): Promise<SearchResult[]> {
+async function api(
+  value: string,
+  signal: AbortSignal
+): Promise<SearchResult[]> {
   const url =
     'https://nominatim.openstreetmap.org/search?format=json&limit=5&q=' + value
 
-  const timeout = (time: number) => {
-    const controller = new AbortController()
-    setTimeout(() => controller.abort(), time * 1000)
-    return controller
-  }
-
-  return fetch(url, { signal: timeout(30).signal }).then(res => res.json())
-}
-
-function searchReducer(state: any, action: SearchAction) {
-  switch (action.type) {
-    case SearchActionType.CLEAN_QUERY:
-      return initialState
-    case SearchActionType.START_SEARCH:
-      return { ...state, loading: true, value: action.query, results: [] }
-    case SearchActionType.FINISH_SEARCH:
-      return { ...state, loading: false, results: action.results }
-    case SearchActionType.UPDATE_SELECTION:
-      return { ...state, value: action.selection }
-
-    default:
-      throw new Error()
-  }
+  return fetch(url, { signal }).then(res => res.json())
 }
 
 interface Props {
   callback: (result: Result) => void
 }
 
-const LocationSearch: FC<Props> = props => {
-  const [state, dispatch] = useReducer(searchReducer, initialState)
-  const { loading, results, value } = state
-  const timeoutRef: { current: NodeJS.Timeout | null } = useRef(null)
-
-  const handleResultSelect = useCallback(
-    (event: MouseEvent, data: any) => {
-      dispatch({
-        type: SearchActionType.UPDATE_SELECTION,
-        selection: data.result.title,
-      })
-
-      props.callback(data.result)
-    },
-    [props]
-  )
-
-  const handleSearchChange = useCallback(
-    (event: MouseEvent, data: SearchProps) => {
-      const value = data.value
-      if (value === undefined) {
-        return
-      }
+const LocationSearch: FC<Props> = ({ callback }) => {
+  const [options, setOptions] = useState<SearchResult[]>([])
+  const previousController = useRef<AbortController>()
 
-      clearTimeout(timeoutRef.current as NodeJS.Timeout)
-      dispatch({ type: SearchActionType.START_SEARCH, query: value })
+  const handleInputChange = (event: React.SyntheticEvent, value: string) => {
+    if (previousController.current) {
+      previousController.current.abort()
+    }
 
-      timeoutRef.current = setTimeout(() => {
-        if (value.length === 0) {
-          dispatch({ type: SearchActionType.CLEAN_QUERY })
-          return
-        }
+    const controller = new AbortController()
+    const signal = controller.signal
+    previousController.current = controller
 
-        const results: Result[] = []
-        api(value)
-          .then(data => {
-            data.forEach(entry => {
-              results.push({
-                title: entry.display_name,
-                lat: entry.lat,
-                lon: entry.lon,
-              })
-            })
-          })
-          .finally(() => {
-            dispatch({
-              type: SearchActionType.FINISH_SEARCH,
-              results: results,
-            })
-          })
-      }, 300)
-    },
-    []
-  )
+    api(value, signal)
+      .then(options => setOptions(options))
+      .catch(() => {
+        // We ignore the error
+      })
+  }
 
-  useEffect(() => {
-    return () => {
-      clearTimeout(timeoutRef.current as NodeJS.Timeout)
+  const handleChange = (
+    event: React.SyntheticEvent,
+    value: SearchResult | null
+  ) => {
+    if (value) {
+      callback({ title: value?.display_name, lat: value?.lat, lon: value?.lon })
     }
-  }, [])
+  }
 
   return (
-    <React.Fragment>
-      <Search
-        loading={loading}
-        onResultSelect={handleResultSelect}
-        onSearchChange={handleSearchChange}
-        results={results}
-        value={value}
-      />
-    </React.Fragment>
+    <Autocomplete
+      fullWidth
+      getOptionLabel={option => option.display_name}
+      onChange={handleChange}
+      onInputChange={handleInputChange}
+      options={options}
+      renderInput={params => (
+        <TextField {...params} label="Location" variant="outlined" />
+      )}
+    />
   )
 }
 
diff --git a/src/components/ticker/TickerCard.tsx b/src/components/ticker/TickerCard.tsx
index 8833d332..74d74bbf 100644
--- a/src/components/ticker/TickerCard.tsx
+++ b/src/components/ticker/TickerCard.tsx
@@ -1,10 +1,7 @@
 import React, { FC } from 'react'
 import { Button, Card, Icon, Label } from 'semantic-ui-react'
 import ReactMarkdown from 'react-markdown'
-import TickerModalForm from './TickerModalForm'
 import { Ticker } from '../../api/Ticker'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGear } from '@fortawesome/free-solid-svg-icons'
 
 interface Props {
   ticker: Ticker
@@ -40,22 +37,7 @@ const TickerCard: FC<Props> = props => {
         </Card.Description>
       </Card.Content>
       <Card.Content>
-        <Button.Group compact size="tiny">
-          <TickerModalForm
-            ticker={props.ticker}
-            trigger={
-              <Button
-                color="black"
-                content="Configure"
-                icon={
-                  <Icon>
-                    <FontAwesomeIcon icon={faGear} />
-                  </Icon>
-                }
-              />
-            }
-          />
-        </Button.Group>
+        <Button.Group compact size="tiny"></Button.Group>
       </Card.Content>
     </Card>
   )
diff --git a/src/components/ticker/TickerForm.tsx b/src/components/ticker/TickerForm.tsx
index a9e8a689..d58fef90 100644
--- a/src/components/ticker/TickerForm.tsx
+++ b/src/components/ticker/TickerForm.tsx
@@ -1,29 +1,36 @@
-import React, {
-  ChangeEvent,
-  FC,
-  FormEvent,
-  useCallback,
-  useEffect,
-} from 'react'
-import {
-  Button,
-  CheckboxProps,
-  Form,
-  Header,
-  Icon,
-  Input,
-  InputOnChangeData,
-  Message,
-  TextAreaProps,
-} from 'semantic-ui-react'
+import React, { FC, useCallback, useEffect } from 'react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
 import useAuth from '../useAuth'
 import LocationSearch, { Result } from './LocationSearch'
 import { MapContainer, Marker, TileLayer } from 'react-leaflet'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  Alert,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  Grid,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material'
+import {
+  faComputerMouse,
+  faEnvelope,
+  faUser,
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faFacebook,
+  faTelegram,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons'
 
 interface Props {
+  id: string
   ticker?: Ticker
   callback: () => void
 }
@@ -47,8 +54,7 @@ interface FormValues {
   }
 }
 
-const TickerForm: FC<Props> = props => {
-  const ticker = props.ticker
+const TickerForm: FC<Props> = ({ callback, id, ticker }) => {
   const { handleSubmit, register, setValue, watch } = useForm<FormValues>({
     defaultValues: {
       title: ticker?.title,
@@ -69,7 +75,7 @@ const TickerForm: FC<Props> = props => {
       },
     },
   })
-  const { token, user } = useAuth()
+  const { token } = useAuth()
   const { postTicker, putTicker } = useTickerApi(token)
   const queryClient = useQueryClient()
 
@@ -91,35 +97,17 @@ const TickerForm: FC<Props> = props => {
     [setValue]
   )
 
-  const onChange = useCallback(
-    (
-      e: ChangeEvent | FormEvent,
-      {
-        name,
-        value,
-        checked,
-      }: InputOnChangeData | CheckboxProps | TextAreaProps
-    ) => {
-      if (checked !== undefined) {
-        setValue(name, checked)
-      } else {
-        setValue(name, value)
-      }
-    },
-    [setValue]
-  )
-
   const onSubmit: SubmitHandler<FormValues> = data => {
     if (ticker) {
       putTicker(data, ticker.id).finally(() => {
         queryClient.invalidateQueries(['tickers'])
         queryClient.invalidateQueries(['ticker', ticker.id])
-        props.callback()
+        callback()
       })
     } else {
       postTicker(data).finally(() => {
         queryClient.invalidateQueries(['tickers'])
-        props.callback()
+        callback()
       })
     }
   }
@@ -132,143 +120,194 @@ const TickerForm: FC<Props> = props => {
   const position = watch('location')
 
   return (
-    <Form id="editTicker" onSubmit={handleSubmit(onSubmit)}>
-      <Form.Group widths="equal">
-        <Form.Input
-          defaultValue={ticker ? ticker.title : ''}
-          label="Title"
-          name="title"
-          onChange={onChange}
-          required
-        />
-        <Form.Input
-          defaultValue={ticker ? ticker.domain : ''}
-          disabled={!user?.roles.includes('admin')}
-          label="Domain"
-          name="domain"
-          onChange={onChange}
-          required
-        />
-      </Form.Group>
-      <Form.Checkbox
-        defaultChecked={ticker ? ticker.active : false}
-        label="Active"
-        name="active"
-        onChange={onChange}
-        toggle
-      />
-      <Form.TextArea
-        defaultValue={ticker ? ticker.description : ''}
-        label="Description"
-        name="description"
-        onChange={onChange}
-        required
-        rows="5"
-      />
-      <Header dividing>Information</Header>
-      <Form.Group widths="equal">
-        <Form.Input label="Author">
-          <Input
-            defaultValue={ticker ? ticker.information.author : ''}
-            iconPosition="left"
-            name="information.author"
-            onChange={onChange}
-            placeholder="Author"
-          >
-            <Icon name="users" />
-            <input />
-          </Input>
-        </Form.Input>
-        <Form.Input label="Homepage">
-          <Input
-            defaultValue={ticker ? ticker.information.url : ''}
-            iconPosition="left"
-            name="information.url"
-            onChange={onChange}
-          >
-            <Icon name="home" />
-            <input />
-          </Input>
-        </Form.Input>
-        <Form.Input label="Email">
-          <Input
-            defaultValue={ticker ? ticker.information.email : ''}
-            iconPosition="left"
-            name="information.email"
-            onChange={onChange}
-            placeholder="Email"
-          >
-            <Icon name="at" />
-            <input />
-          </Input>
-        </Form.Input>
-      </Form.Group>
-      <Form.Group widths="equal">
-        <Form.Input label="Twitter">
-          <Input
-            defaultValue={ticker ? ticker.information.twitter : ''}
-            iconPosition="left"
-            name="information.twitter"
-            onChange={onChange}
-          >
-            <Icon name="twitter" />
-            <input />
-          </Input>
-        </Form.Input>
-        <Form.Input label="Facebook">
-          <Input
-            defaultValue={ticker ? ticker.information.facebook : ''}
-            iconPosition="left"
-            name="information.facebook"
-            onChange={onChange}
-          >
-            <Icon name="facebook" />
-            <input />
-          </Input>
-        </Form.Input>
-        <Form.Input label="Telegram">
-          <Input
-            defaultValue={ticker ? ticker.information.telegram : ''}
-            iconPosition="left"
-            name="information.telegram"
-            onChange={onChange}
-          >
-            <Icon name="telegram" />
-            <input />
-          </Input>
-        </Form.Input>
-      </Form.Group>
-      <Header dividing>Location</Header>
-      <Message info size="small">
-        You can add a default location to the ticker. This will help you to have
-        a pre-selected location when you add a map to a message. <br />
-        Current Location: {position.lat.toFixed(2)},{position.lon.toFixed(2)}
-      </Message>
-      <Form.Group widths="equal">
-        <Form.Field width="15">
-          <LocationSearch callback={onLocationChange} />
-        </Form.Field>
-        <Form.Field width="1">
-          <Button
-            color="red"
-            disabled={ticker?.location.lat === 0 && ticker.location.lon === 0}
-            icon="delete"
-            onClick={onLoctionReset}
-          />
-        </Form.Field>
-      </Form.Group>
-      {position.lat !== 0 && position.lon !== 0 ? (
-        <MapContainer
-          center={[position.lat, position.lon]}
-          scrollWheelZoom={false}
-          style={{ height: 200 }}
-          zoom={10}
-        >
-          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-          <Marker position={[position.lat, position.lon]} />
-        </MapContainer>
-      ) : null}
-    </Form>
+    <form id={id} onSubmit={handleSubmit(onSubmit)}>
+      <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('title')}
+              label="Title"
+              margin="dense"
+              required
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('domain')}
+              label="Domain"
+              margin="dense"
+              required
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  {...register('active')}
+                  defaultChecked={ticker?.active}
+                />
+              }
+              label="Active"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              margin="dense"
+              maxRows={10}
+              multiline
+              {...register('description')}
+              label="Description"
+              required
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <Typography component="h6" variant="h6">
+            Information
+          </Typography>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('information.author')}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <FontAwesomeIcon icon={faUser} />
+                  </InputAdornment>
+                ),
+              }}
+              label="Author"
+              margin="dense"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('information.url')}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <FontAwesomeIcon icon={faComputerMouse} />
+                  </InputAdornment>
+                ),
+              }}
+              label="Homepage"
+              margin="dense"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('information.email')}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <FontAwesomeIcon icon={faEnvelope} />
+                  </InputAdornment>
+                ),
+              }}
+              label="E-Mail"
+              margin="dense"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('information.twitter')}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <FontAwesomeIcon icon={faTwitter} />
+                  </InputAdornment>
+                ),
+              }}
+              label="Twitter"
+              margin="dense"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('information.facebook')}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <FontAwesomeIcon icon={faFacebook} />
+                  </InputAdornment>
+                ),
+              }}
+              label="Facebook"
+              margin="dense"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item sm={6} xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('information.telegram')}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <FontAwesomeIcon icon={faTelegram} />
+                  </InputAdornment>
+                ),
+              }}
+              label="Telegram"
+              margin="dense"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <Typography component="h6" variant="h6">
+            Location
+          </Typography>
+          <Alert severity="info" variant="outlined">
+            You can add a default location to the ticker. This will help you to
+            have a pre-selected location when you add a map to a message. <br />
+            Current Location:{' '}
+            <code>
+              {position.lat.toFixed(2)},{position.lon.toFixed(2)}
+            </code>
+          </Alert>
+        </Grid>
+        <Grid item xs={12}>
+          <Stack direction="row" spacing={1}>
+            <LocationSearch callback={onLocationChange} />
+            <Button
+              disabled={ticker?.location.lat === 0 && ticker.location.lon === 0}
+              onClick={onLoctionReset}
+              variant="outlined"
+            >
+              Reset
+            </Button>
+          </Stack>
+        </Grid>
+        {position.lat !== 0 && position.lon !== 0 ? (
+          <Grid item xs={12}>
+            <MapContainer
+              center={[position.lat, position.lon]}
+              scrollWheelZoom={false}
+              style={{ height: 200 }}
+              zoom={10}
+            >
+              <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+              <Marker position={[position.lat, position.lon]} />
+            </MapContainer>
+          </Grid>
+        ) : null}
+      </Grid>
+    </form>
   )
 }
 
diff --git a/src/components/ticker/TickerList.tsx b/src/components/ticker/TickerList.tsx
index a4eaaf9a..57333108 100644
--- a/src/components/ticker/TickerList.tsx
+++ b/src/components/ticker/TickerList.tsx
@@ -1,54 +1,92 @@
 import React, { FC } from 'react'
-import { Ticker } from '../../api/Ticker'
-import { Button, Table } from 'semantic-ui-react'
-import TickerModalForm from './TickerModalForm'
+import { useTickerApi } from '../../api/Ticker'
 import TickerListItems from './TickerListItems'
 import useAuth from '../useAuth'
+import { useQuery } from '@tanstack/react-query'
+import Loader from '../Loader'
+import ErrorView from '../../views/ErrorView'
+import { Navigate } from 'react-router'
+import {
+  Card,
+  CardContent,
+  Table,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material'
 
-interface Props {
-  tickers: Ticker[]
-}
+const TickerList: FC = () => {
+  const { token, user } = useAuth()
+  const { getTickers } = useTickerApi(token)
+  const { isLoading, error, data } = useQuery(['tickers'], getTickers)
+
+  if (isLoading) {
+    return <Loader />
+  }
+
+  if (error || data === undefined || data.status === 'error') {
+    return (
+      <ErrorView queryKey={['tickers']}>
+        Unable to fetch tickers from server.
+      </ErrorView>
+    )
+  }
+
+  const tickers = data.data.tickers
+
+  if (tickers.length === 0 && user?.roles.includes('admin')) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography component="h2" variant="h4">
+            Welcome!
+          </Typography>
+          <Typography sx={{ mt: 2 }} variant="body1">
+            There are no tickers yet. To start with a ticker, create one.
+          </Typography>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (tickers.length === 0 && !user?.roles.includes('admin')) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography component="h2" variant="h4">
+            Oh no! Something unexpected happened
+          </Typography>
+          <Typography sx={{ mt: 2 }} variant="body1">
+            Currently there are no tickers for you. Contact your administrator
+            if that should be different.
+          </Typography>
+        </CardContent>
+      </Card>
+    )
+  }
 
-const TickerList: FC<Props> = props => {
-  const { user } = useAuth()
+  if (tickers.length === 1 && !user?.roles.includes('admin')) {
+    return <Navigate replace to={`/ticker/${tickers[0].id}`} />
+  }
 
   return (
-    <React.Fragment>
+    <TableContainer>
       <Table>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell />
-            <Table.HeaderCell>Title</Table.HeaderCell>
-            <Table.HeaderCell>Domain</Table.HeaderCell>
-            <Table.HeaderCell />
-          </Table.Row>
-        </Table.Header>
-        <TickerListItems tickers={props.tickers} />
-        {user?.roles.includes('admin') ? (
-          <Table.Footer fullWidth>
-            <Table.Row>
-              <Table.HeaderCell />
-              <Table.HeaderCell />
-              <Table.HeaderCell />
-              <Table.HeaderCell>
-                <TickerModalForm
-                  trigger={
-                    <Button
-                      color="green"
-                      content="Create Ticker"
-                      floated="right"
-                      icon="plus"
-                      labelPosition="left"
-                      size="small"
-                    />
-                  }
-                />
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Footer>
-        ) : null}
+        <TableHead>
+          <TableRow>
+            <TableCell align="center" size="small">
+              Active
+            </TableCell>
+            <TableCell>Title</TableCell>
+            <TableCell>Domain</TableCell>
+            <TableCell />
+          </TableRow>
+        </TableHead>
+        <TickerListItems tickers={tickers} />
       </Table>
-    </React.Fragment>
+    </TableContainer>
   )
 }
 
diff --git a/src/components/ticker/TickerListItem.tsx b/src/components/ticker/TickerListItem.tsx
index 27b56882..1ea51a62 100644
--- a/src/components/ticker/TickerListItem.tsx
+++ b/src/components/ticker/TickerListItem.tsx
@@ -1,10 +1,27 @@
-import React, { FC, useCallback } from 'react'
+import React, { FC, useState } from 'react'
 import { useNavigate } from 'react-router'
-import { Button, Icon, Table } from 'semantic-ui-react'
 import { Ticker } from '../../api/Ticker'
+import useAuth from '../useAuth'
+import {
+  colors,
+  IconButton,
+  MenuItem,
+  Popover,
+  TableCell,
+  TableRow,
+  Typography,
+} from '@mui/material'
+import { MoreVert } from '@mui/icons-material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faCheck,
+  faHandPointer,
+  faPencil,
+  faTrash,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons'
 import TickerModalDelete from './TickerModalDelete'
 import TickerModalForm from './TickerModalForm'
-import useAuth from '../useAuth'
 
 interface Props {
   ticker: Ticker
@@ -13,43 +30,99 @@ interface Props {
 const TickerListItem: FC<Props> = ({ ticker }: Props) => {
   const { user } = useAuth()
   const navigate = useNavigate()
+  const [formModalOpen, setFormModalOpen] = useState<boolean>(false)
+  const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false)
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleUse = () => {
+    navigate(`/ticker/${ticker.id}`)
+  }
 
   return (
-    <Table.Row key={ticker.id}>
-      <Table.Cell collapsing>
-        <Icon
-          color={ticker.active ? 'green' : 'red'}
-          name={ticker.active ? 'toggle on' : 'toggle off'}
-          size={'large'}
-        />
-      </Table.Cell>
-      <Table.Cell>{ticker.title}</Table.Cell>
-      <Table.Cell>{ticker.domain}</Table.Cell>
-      <Table.Cell collapsing textAlign="right">
-        <Button.Group size="small">
-          <Button
-            color="teal"
-            content="Use"
-            icon="rocket"
-            onClick={useCallback(
-              () => navigate(`/ticker/${ticker.id}`),
-              [navigate, ticker.id]
-            )}
-            ticker={ticker}
-          />
-          <TickerModalForm
-            ticker={ticker}
-            trigger={<Button color="black" content="Edit" icon="edit" />}
-          />
+    <TableRow hover>
+      <TableCell align="center" onClick={handleUse} padding="none" size="small">
+        {ticker.active ? (
+          <FontAwesomeIcon icon={faCheck} />
+        ) : (
+          <FontAwesomeIcon icon={faXmark} />
+        )}
+      </TableCell>
+      <TableCell onClick={handleUse}>{ticker.title}</TableCell>
+      <TableCell onClick={handleUse}>{ticker.domain}</TableCell>
+      <TableCell align="right">
+        <IconButton data-testid="tickermenu" onClick={handleMenu} size="large">
+          <MoreVert />
+        </IconButton>
+        <Popover
+          PaperProps={{
+            sx: {
+              p: 1,
+              width: 140,
+              '& .MuiMenuItem-root': {
+                px: 1,
+                borderRadius: 0.75,
+              },
+            },
+          }}
+          anchorEl={anchorEl}
+          anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+          onClose={handleClose}
+          open={Boolean(anchorEl)}
+          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        >
+          <MenuItem
+            onClick={() => {
+              handleClose()
+              handleUse()
+            }}
+          >
+            <FontAwesomeIcon icon={faHandPointer} />
+            <Typography sx={{ ml: 2 }}>Use</Typography>
+          </MenuItem>
+          <MenuItem
+            onClick={() => {
+              handleClose()
+              setFormModalOpen(true)
+            }}
+          >
+            <FontAwesomeIcon icon={faPencil} />
+            <Typography sx={{ ml: 2 }}>Edit</Typography>
+          </MenuItem>
           {user?.roles.includes('admin') ? (
-            <TickerModalDelete
-              ticker={ticker}
-              trigger={<Button color="red" content="Delete" icon="delete" />}
-            />
+            <>
+              <MenuItem
+                onClick={() => {
+                  handleClose()
+                  setDeleteModalOpen(true)
+                }}
+                sx={{ color: colors.red[400] }}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+                <Typography sx={{ ml: 2 }}>Delete</Typography>
+              </MenuItem>
+            </>
           ) : null}
-        </Button.Group>
-      </Table.Cell>
-    </Table.Row>
+        </Popover>
+        <TickerModalForm
+          onClose={() => setFormModalOpen(false)}
+          open={formModalOpen}
+          ticker={ticker}
+        />
+        <TickerModalDelete
+          onClose={() => setDeleteModalOpen(false)}
+          open={deleteModalOpen}
+          ticker={ticker}
+        />
+      </TableCell>
+    </TableRow>
   )
 }
 
diff --git a/src/components/ticker/TickerListItems.tsx b/src/components/ticker/TickerListItems.tsx
index f06785f1..0f000c56 100644
--- a/src/components/ticker/TickerListItems.tsx
+++ b/src/components/ticker/TickerListItems.tsx
@@ -1,5 +1,5 @@
+import { TableBody } from '@mui/material'
 import React, { FC } from 'react'
-import { Table } from 'semantic-ui-react'
 import { Ticker } from '../../api/Ticker'
 import TickerListItem from './TickerListItem'
 
@@ -9,11 +9,11 @@ interface Props {
 
 const TickerListItems: FC<Props> = ({ tickers }: Props) => {
   return (
-    <Table.Body>
+    <TableBody>
       {tickers.map(ticker => (
         <TickerListItem key={ticker.id} ticker={ticker} />
       ))}
-    </Table.Body>
+    </TableBody>
   )
 }
 
diff --git a/src/components/ticker/TickerModalDelete.tsx b/src/components/ticker/TickerModalDelete.tsx
index d03ab64f..0d41984d 100644
--- a/src/components/ticker/TickerModalDelete.tsx
+++ b/src/components/ticker/TickerModalDelete.tsx
@@ -1,45 +1,65 @@
-import React, { FC, useCallback, useState } from 'react'
+import React, { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { Confirm } from 'semantic-ui-react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
+import { Close } from '@mui/icons-material'
 
 interface Props {
+  onClose: () => void
+  open: boolean
   ticker: Ticker
-  trigger: React.ReactNode
 }
 
-const TickerModalDelete: FC<Props> = props => {
-  const [open, setOpen] = useState<boolean>(false)
+const TickerModalDelete: FC<Props> = ({ open, onClose, ticker }) => {
   const { token } = useAuth()
   const { deleteTicker } = useTickerApi(token)
   const queryClient = useQueryClient()
-  const ticker = props.ticker
 
-  const handleCancel = useCallback(() => {
-    setOpen(false)
-  }, [])
+  const handleClose = () => {
+    onClose()
+  }
 
-  const handleConfirm = useCallback(() => {
+  const handleDelete = useCallback(() => {
     deleteTicker(ticker).finally(() => {
       queryClient.invalidateQueries(['tickers'])
     })
   }, [deleteTicker, ticker, queryClient])
 
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
-
   return (
-    <Confirm
-      dimmer
-      onCancel={handleCancel}
-      onConfirm={handleConfirm}
-      onOpen={handleOpen}
-      open={open}
-      size="mini"
-      trigger={props.trigger}
-    />
+    <Dialog maxWidth="md" open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Delete Ticker
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        Are you sure to delete the ticker? This action cannot be undone.
+      </DialogContent>
+      <DialogActions>
+        <Button color="error" onClick={handleDelete} variant="contained">
+          Delete
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/components/ticker/TickerModalForm.tsx b/src/components/ticker/TickerModalForm.tsx
index 7d438bb0..0892fa18 100644
--- a/src/components/ticker/TickerModalForm.tsx
+++ b/src/components/ticker/TickerModalForm.tsx
@@ -1,52 +1,59 @@
-import React, { FC, useCallback, useState } from 'react'
-import { Button, Header, Modal } from 'semantic-ui-react'
+import { Close } from '@mui/icons-material'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
+import React, { FC } from 'react'
 import { Ticker } from '../../api/Ticker'
 import TickerForm from './TickerForm'
 
 interface Props {
+  onClose: () => void
+  open: boolean
   ticker?: Ticker
-  trigger: React.ReactNode
 }
 
-const TickerModalForm: FC<Props> = props => {
-  const [open, setOpen] = useState<boolean>(false)
-
-  const handleClose = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+const TickerModalForm: FC<Props> = ({ onClose, open, ticker }) => {
+  const handleClose = () => {
+    onClose()
+  }
 
   return (
-    <Modal
-      closeIcon
-      onClose={handleClose}
-      onOpen={handleOpen}
-      open={open}
-      trigger={props.trigger}
-    >
-      {' '}
-      <Header>
-        {props.ticker ? `Edit ${props.ticker.title}` : 'Create Ticker'}
-      </Header>
-      <Modal.Content>
-        <TickerForm callback={handleClose} ticker={props.ticker} />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            color="green"
-            content={props.ticker ? 'Save' : 'Create'}
-            form="editTicker"
-            type="submit"
-          />
-          <Button.Or />
-          <Button color="red" content="Close" onClick={handleClose} />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
+    <Dialog fullWidth maxWidth="md" open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          {ticker ? 'Update Ticker' : 'Create Ticker'}
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        <TickerForm callback={handleClose} id="tickerForm" ticker={ticker} />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color="primary"
+          form="tickerForm"
+          type="submit"
+          variant="contained"
+        >
+          Save
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/views/HomeView.tsx b/src/views/HomeView.tsx
index e0c0f8be..568957fe 100644
--- a/src/views/HomeView.tsx
+++ b/src/views/HomeView.tsx
@@ -1,93 +1,55 @@
-import React, { FC } from 'react'
-import {
-  Button,
-  Dimmer,
-  Grid,
-  Header,
-  Loader,
-  Message,
-} from 'semantic-ui-react'
+import React, { FC, useState } from 'react'
 import TickerList from '../components/ticker/TickerList'
 import useAuth from '../components/useAuth'
-import { useTickerApi } from '../api/Ticker'
-import { useQuery } from '@tanstack/react-query'
-import TickerModalForm from '../components/ticker/TickerModalForm'
 import Layout from './Layout'
-import ErrorView from './ErrorView'
-import { Navigate } from 'react-router'
+import { Button, Card, Grid, Stack, Typography } from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import TickerModalForm from '../components/ticker/TickerModalForm'
 
 const HomeView: FC = () => {
-  const { token, user } = useAuth()
-  const { getTickers } = useTickerApi(token)
-  const { isLoading, error, data } = useQuery(['tickers'], getTickers)
-
-  if (isLoading) {
-    return (
-      <Dimmer active inverted>
-        <Loader inverted>Loading</Loader>
-      </Dimmer>
-    )
-  }
-
-  if (error || data === undefined || data.status === 'error') {
-    return (
-      <Layout>
-        <ErrorView queryKey={['tickers']}>
-          Unable to fetch tickers from server.
-        </ErrorView>
-      </Layout>
-    )
-  }
-
-  const tickers = data.data.tickers
-
-  if (tickers.length === 0 && user?.roles.includes('admin')) {
-    return (
-      <Layout>
-        <Grid centered>
-          <Grid.Row>
-            <Grid.Column width={6}>
-              <Message info>
-                <Message.Header>Welcome!</Message.Header>
-                <p>You need to create a your first ticker.</p>
-                <p>
-                  <TickerModalForm
-                    trigger={
-                      <Button
-                        color="green"
-                        content="Create"
-                        icon="plus"
-                        labelPosition="left"
-                        size="small"
-                      />
-                    }
-                  />
-                </p>
-              </Message>
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </Layout>
-    )
-  }
-
-  if (tickers.length === 1 && !user?.roles.includes('admin')) {
-    return <Navigate replace to={`/ticker/${tickers[0].id}`} />
-  }
+  const { user } = useAuth()
+  const [formModalOpen, setFormModalOpen] = useState<boolean>(false)
 
   return (
     <Layout>
-      <Grid>
-        <Grid.Row>
-          <Grid.Column>
-            <Header dividing>Available Configurations</Header>
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row>
-          <Grid.Column>
-            <TickerList tickers={tickers} />
-          </Grid.Column>
-        </Grid.Row>
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Stack
+            alignItems="center"
+            direction="row"
+            justifyContent="space-between"
+            mb={2}
+          >
+            <Typography component="h2" gutterBottom variant="h3">
+              Tickers
+            </Typography>
+            {user?.roles.includes('admin') ? (
+              <>
+                <Button
+                  onClick={() => {
+                    setFormModalOpen(true)
+                  }}
+                  startIcon={<FontAwesomeIcon icon={faPlus} />}
+                  variant="contained"
+                >
+                  New Ticker
+                </Button>
+                <TickerModalForm
+                  onClose={() => {
+                    setFormModalOpen(false)
+                  }}
+                  open={formModalOpen}
+                />
+              </>
+            ) : null}
+          </Stack>
+        </Grid>
+        <Grid item xs={12}>
+          <Card>
+            <TickerList />
+          </Card>
+        </Grid>
       </Grid>
     </Layout>
   )

From ac8618c2b1c8df92390e2ef8ad9747e6e92f92cc Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sat, 29 Oct 2022 19:20:16 +0200
Subject: [PATCH 13/31] =?UTF-8?q?=E2=9C=85=20Add=20Tests=20for=20HomeView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jest.config.ts                       |   4 +-
 src/__mocks__/react-leaflet.tsx      |  13 ++
 src/components/ticker/TickerList.tsx |  58 ++++----
 src/views/HomeView.test.tsx          | 201 +++++++++++++++++++++++++++
 4 files changed, 245 insertions(+), 31 deletions(-)
 create mode 100644 src/__mocks__/react-leaflet.tsx
 create mode 100644 src/views/HomeView.test.tsx

diff --git a/jest.config.ts b/jest.config.ts
index 4fed3752..a14cd0eb 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -5,7 +5,7 @@ const config: Config.InitialOptions = {
   testEnvironment: 'jsdom',
   preset: 'ts-jest',
   moduleNameMapper: {
-    'react-markdown': '<rootDir>/src/__mocks_/react-markdown.js',
+    'react-leaflet': '<rootDir>/src/__mocks__/react-leaflet.tsx',
     '^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
   },
@@ -15,7 +15,7 @@ const config: Config.InitialOptions = {
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
   },
-  transformIgnorePatterns: ['<rootDir>/node_modules/(?!react-markdown/)'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!react-leaflet)'],
   setupFilesAfterEnv: ['./jest-setup.ts'],
   collectCoverageFrom: ['src/**/*.{ts,tsx}'],
 }
diff --git a/src/__mocks__/react-leaflet.tsx b/src/__mocks__/react-leaflet.tsx
new file mode 100644
index 00000000..c002b669
--- /dev/null
+++ b/src/__mocks__/react-leaflet.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export function MapContainer({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+export function Marker({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+export function TileLayer({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
diff --git a/src/components/ticker/TickerList.tsx b/src/components/ticker/TickerList.tsx
index 57333108..0800ed62 100644
--- a/src/components/ticker/TickerList.tsx
+++ b/src/components/ticker/TickerList.tsx
@@ -36,35 +36,35 @@ const TickerList: FC = () => {
 
   const tickers = data.data.tickers
 
-  if (tickers.length === 0 && user?.roles.includes('admin')) {
-    return (
-      <Card>
-        <CardContent>
-          <Typography component="h2" variant="h4">
-            Welcome!
-          </Typography>
-          <Typography sx={{ mt: 2 }} variant="body1">
-            There are no tickers yet. To start with a ticker, create one.
-          </Typography>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  if (tickers.length === 0 && !user?.roles.includes('admin')) {
-    return (
-      <Card>
-        <CardContent>
-          <Typography component="h2" variant="h4">
-            Oh no! Something unexpected happened
-          </Typography>
-          <Typography sx={{ mt: 2 }} variant="body1">
-            Currently there are no tickers for you. Contact your administrator
-            if that should be different.
-          </Typography>
-        </CardContent>
-      </Card>
-    )
+  if (tickers.length === 0) {
+    if (user?.roles.includes('admin')) {
+      return (
+        <Card>
+          <CardContent>
+            <Typography component="h2" variant="h4">
+              Welcome!
+            </Typography>
+            <Typography sx={{ mt: 2 }} variant="body1">
+              There are no tickers yet. To start with a ticker, create one.
+            </Typography>
+          </CardContent>
+        </Card>
+      )
+    } else {
+      return (
+        <Card>
+          <CardContent>
+            <Typography component="h2" variant="h4">
+              Oh no! Something unexpected happened
+            </Typography>
+            <Typography sx={{ mt: 2 }} variant="body1">
+              Currently there are no tickers for you. Contact your administrator
+              if that should be different.
+            </Typography>
+          </CardContent>
+        </Card>
+      )
+    }
   }
 
   if (tickers.length === 1 && !user?.roles.includes('admin')) {
diff --git a/src/views/HomeView.test.tsx b/src/views/HomeView.test.tsx
new file mode 100644
index 00000000..807c8922
--- /dev/null
+++ b/src/views/HomeView.test.tsx
@@ -0,0 +1,201 @@
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import sign from 'jwt-encode'
+import { MemoryRouter } from 'react-router'
+import { AuthProvider } from '../components/useAuth'
+import HomeView from './HomeView'
+import userEvent from '@testing-library/user-event'
+
+describe('HomeView', function () {
+  beforeEach(() => {
+    fetchMock.resetMocks()
+  })
+
+  function jwt(role: string): string {
+    return sign(
+      {
+        id: 1,
+        email: 'louis@systemli.org',
+        roles: role === 'admin' ? ['admin', 'user'] : ['user'],
+        exp: new Date().getTime() / 1000 + 600,
+      },
+      'secret'
+    )
+  }
+
+  const emptyTickerResponse = JSON.stringify({
+    data: { tickers: [] },
+    status: 'success',
+  })
+
+  const singleTickerResponse = JSON.stringify({
+    data: {
+      tickers: [
+        {
+          id: 1,
+          creation_date: new Date(),
+          domain: 'localhost',
+          title: 'title',
+          description: 'description',
+          active: true,
+        },
+      ],
+    },
+    status: 'success',
+  })
+
+  function setup() {
+    const client = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    })
+    return render(
+      <QueryClientProvider client={client}>
+        <MemoryRouter>
+          <AuthProvider>
+            <HomeView />
+          </AuthProvider>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+  }
+
+  test('render empty list for admins', async function () {
+    jest
+      .spyOn(window.localStorage.__proto__, 'getItem')
+      .mockReturnValue(jwt('admin'))
+    fetchMock.mockIf(/^http:\/\/localhost:8080\/.*$/, (request: Request) => {
+      if (request.url.endsWith('/admin/tickers')) {
+        return Promise.resolve(emptyTickerResponse)
+      }
+
+      return Promise.resolve(
+        JSON.stringify({
+          data: {},
+          status: 'error',
+          error: 'error message',
+        })
+      )
+    })
+    setup()
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+    expect(
+      await screen.findByText(
+        'There are no tickers yet. To start with a ticker, create one.'
+      )
+    ).toBeInTheDocument()
+  })
+
+  test('render empty list for user', async function () {
+    jest
+      .spyOn(window.localStorage.__proto__, 'getItem')
+      .mockReturnValue(jwt('user'))
+    fetchMock.mockIf(/^http:\/\/localhost:8080\/.*$/, (request: Request) => {
+      if (request.url.endsWith('/admin/tickers')) {
+        return Promise.resolve(emptyTickerResponse)
+      }
+
+      return Promise.resolve(
+        JSON.stringify({
+          data: {},
+          status: 'error',
+          error: 'error message',
+        })
+      )
+    })
+    setup()
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+    expect(
+      await screen.findByText(
+        'Currently there are no tickers for you. Contact your administrator if that should be different.'
+      )
+    ).toBeInTheDocument()
+  })
+
+  test('render ticker view for user with 1 ticker', async function () {
+    jest
+      .spyOn(window.localStorage.__proto__, 'getItem')
+      .mockReturnValue(jwt('user'))
+    fetchMock.mockIf(/^http:\/\/localhost:8080\/.*$/, (request: Request) => {
+      if (request.url.endsWith('/admin/tickers')) {
+        return Promise.resolve(singleTickerResponse)
+      }
+
+      return Promise.resolve(
+        JSON.stringify({
+          data: {},
+          status: 'error',
+          error: 'error message',
+        })
+      )
+    })
+    setup()
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+  })
+
+  test('renders list with entries', async function () {
+    jest
+      .spyOn(window.localStorage.__proto__, 'getItem')
+      .mockReturnValue(jwt('admin'))
+    fetchMock.mockIf(/^http:\/\/localhost:8080\/.*$/, (request: Request) => {
+      if (request.url.endsWith('/admin/tickers')) {
+        return Promise.resolve(singleTickerResponse)
+      }
+
+      return Promise.resolve(
+        JSON.stringify({
+          data: {},
+          status: 'error',
+          error: 'error message',
+        })
+      )
+    })
+    setup()
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+    expect(await screen.findByText('localhost')).toBeInTheDocument()
+  })
+
+  test('open create ticker form', async function () {
+    jest
+      .spyOn(window.localStorage.__proto__, 'getItem')
+      .mockReturnValue(jwt('admin'))
+    fetchMock.mockIf(/^http:\/\/localhost:8080\/.*$/, (request: Request) => {
+      if (request.url.endsWith('/admin/tickers')) {
+        return Promise.resolve(emptyTickerResponse)
+      }
+
+      return Promise.resolve(
+        JSON.stringify({
+          data: {},
+          status: 'error',
+          error: 'error message',
+        })
+      )
+    })
+    setup()
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument()
+
+    const button = screen.getByRole('button', { name: 'New Ticker' })
+    expect(button).toBeInTheDocument()
+
+    await userEvent.click(button)
+
+    const dialogTitle = screen.getByText(/create ticker/i)
+    expect(dialogTitle).toBeInTheDocument()
+
+    const closeButton = screen.getByRole('button', { name: /close/i })
+    expect(closeButton).toBeInTheDocument()
+
+    await userEvent.click(closeButton)
+    expect(dialogTitle).not.toBeVisible()
+  })
+})

From 89af64859c2b04acf92d6c5ce9996aea11ec296a Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Tue, 17 Jan 2023 17:52:29 -0800
Subject: [PATCH 14/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20for=20Message?=
 =?UTF-8?q?=20Form=20&=20Ticker=20Card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/NamedListItem.tsx       |  20 +++
 src/components/message/AttachmentPreview.tsx  |  35 ++++
 src/components/message/AttachmentsPreview.tsx |  33 ++++
 .../message/MessageAttachmentsButton.tsx      |  54 ------
 .../message/MessageAttachmentsPreview.tsx     |  49 ------
 src/components/message/MessageForm.tsx        | 156 +++++++++---------
 src/components/message/MessageFormCounter.tsx |  37 +++--
 src/components/message/MessageMapModal.tsx    | 109 ++++++------
 src/components/message/UploadButton.tsx       |  54 ++++++
 src/components/ticker/MastodonCard.tsx        | 115 ++++++-------
 .../ticker/SocialConnectionChip.tsx           |  25 +++
 src/components/ticker/Ticker.tsx              | 142 ++++++++--------
 src/components/ticker/TickerCard.tsx          |  99 +++++++----
 13 files changed, 515 insertions(+), 413 deletions(-)
 create mode 100644 src/components/common/NamedListItem.tsx
 create mode 100644 src/components/message/AttachmentPreview.tsx
 create mode 100644 src/components/message/AttachmentsPreview.tsx
 delete mode 100644 src/components/message/MessageAttachmentsButton.tsx
 delete mode 100644 src/components/message/MessageAttachmentsPreview.tsx
 create mode 100644 src/components/message/UploadButton.tsx
 create mode 100644 src/components/ticker/SocialConnectionChip.tsx

diff --git a/src/components/common/NamedListItem.tsx b/src/components/common/NamedListItem.tsx
new file mode 100644
index 00000000..8938403f
--- /dev/null
+++ b/src/components/common/NamedListItem.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react'
+import { Box, Typography } from '@mui/material'
+
+interface Props {
+  title: string
+  children: React.ReactNode
+}
+
+const NamedListItem: FC<Props> = ({ title, children }) => {
+  return (
+    <Box sx={{ mb: 1 }}>
+      <Typography color="GrayText" component="span" variant="body2">
+        {title}
+      </Typography>
+      {children}
+    </Box>
+  )
+}
+
+export default NamedListItem
diff --git a/src/components/message/AttachmentPreview.tsx b/src/components/message/AttachmentPreview.tsx
new file mode 100644
index 00000000..64bd6c94
--- /dev/null
+++ b/src/components/message/AttachmentPreview.tsx
@@ -0,0 +1,35 @@
+import React, { FC } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconButton, ImageListItem } from '@mui/material'
+import { Upload } from '../../api/Upload'
+import { faXmarkSquare } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  onDelete: (upload: Upload) => void
+  upload: Upload
+}
+
+const AttachmentPreview: FC<Props> = ({ onDelete, upload }) => {
+  const handleDelete = () => {
+    onDelete(upload)
+  }
+
+  return (
+    <ImageListItem sx={{ position: 'relative' }}>
+      <img
+        src={upload.url}
+        style={{
+          objectFit: 'cover',
+        }}
+      />
+      <IconButton
+        onClick={handleDelete}
+        sx={{ position: 'absolute', right: 0 }}
+      >
+        <FontAwesomeIcon icon={faXmarkSquare} />
+      </IconButton>
+    </ImageListItem>
+  )
+}
+
+export default AttachmentPreview
diff --git a/src/components/message/AttachmentsPreview.tsx b/src/components/message/AttachmentsPreview.tsx
new file mode 100644
index 00000000..21bf698b
--- /dev/null
+++ b/src/components/message/AttachmentsPreview.tsx
@@ -0,0 +1,33 @@
+import { ImageList } from '@mui/material'
+import React, { FC } from 'react'
+import { Upload } from '../../api/Upload'
+import AttachmentPreview from './AttachmentPreview'
+
+interface Props {
+  attachments: Upload[]
+  onDelete: (upload: Upload) => void
+}
+
+const AttachmentsPreview: FC<Props> = ({ attachments, onDelete }) => {
+  const images = attachments.map((upload, key) => {
+    return (
+      <AttachmentPreview
+        key={key}
+        onDelete={() => onDelete(upload)}
+        upload={upload}
+      />
+    )
+  })
+
+  if (images.length === 0) {
+    return null
+  }
+
+  return (
+    <ImageList cols={3} sx={{ mt: 1 }}>
+      {images}
+    </ImageList>
+  )
+}
+
+export default AttachmentsPreview
diff --git a/src/components/message/MessageAttachmentsButton.tsx b/src/components/message/MessageAttachmentsButton.tsx
deleted file mode 100644
index 3618eb56..00000000
--- a/src/components/message/MessageAttachmentsButton.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { createRef, FC, useCallback } from 'react'
-import { Button } from 'semantic-ui-react'
-import { Ticker } from '../../api/Ticker'
-import { useUploadApi, Upload } from '../../api/Upload'
-import useAuth from '../useAuth'
-
-interface Props {
-  ticker: Ticker
-  onUpload: (uploads: Upload[]) => void
-}
-
-const MessageAttachmentsButton: FC<Props> = props => {
-  const ref = createRef<HTMLInputElement>()
-  const { token } = useAuth()
-  const { postUpload } = useUploadApi(token)
-
-  const refClick = useCallback(() => {
-    ref.current?.click()
-  }, [ref])
-
-  const onUpload = useCallback(
-    (e: React.FormEvent<HTMLInputElement>) => {
-      e.preventDefault()
-      // @ts-ignore
-      const files = e.target.files as Array<FileList>
-      const formData = new FormData()
-      for (let i = 0; i < files.length; i++) {
-        // @ts-ignore
-        formData.append('files', files[i])
-      }
-      formData.append('ticker', props.ticker.id.toString())
-
-      postUpload(formData).then(response => {
-        props.onUpload(response.data.uploads)
-      })
-    },
-    [postUpload, props]
-  )
-
-  return (
-    <React.Fragment>
-      <Button
-        color="violet"
-        content="Add Media"
-        icon="images outline"
-        onClick={refClick}
-        type="button"
-      />
-      <input ref={ref} hidden multiple onChange={onUpload} type="file" />
-    </React.Fragment>
-  )
-}
-
-export default MessageAttachmentsButton
diff --git a/src/components/message/MessageAttachmentsPreview.tsx b/src/components/message/MessageAttachmentsPreview.tsx
deleted file mode 100644
index 15341765..00000000
--- a/src/components/message/MessageAttachmentsPreview.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { FC, useCallback } from 'react'
-import { Button, ButtonProps, Image } from 'semantic-ui-react'
-import { Upload } from '../../api/Upload'
-
-interface Props {
-  attachments: Upload[]
-  onDelete: (upload: Upload) => void
-}
-
-const MessageAttachmentsPreview: FC<Props> = props => {
-  const onClick = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, data: ButtonProps) => {
-      const upload = data.upload as Upload
-      props.onDelete(upload)
-    },
-    [props]
-  )
-
-  const images = props.attachments.map((upload, key) => {
-    return (
-      <div key={key} style={{ display: 'inline-block', position: 'relative' }}>
-        <Image
-          bordered
-          src={upload.url}
-          style={{ width: 150, height: 150, objectFit: 'cover' }}
-        />
-        <Button
-          circular
-          color="black"
-          compact
-          icon="delete"
-          onClick={onClick}
-          size="mini"
-          style={{ position: 'absolute', right: 5, top: 5 }}
-          type="button"
-          upload={upload}
-        />
-      </div>
-    )
-  })
-
-  if (images.length === 0) {
-    return null
-  }
-
-  return <Image.Group>{images}</Image.Group>
-}
-
-export default MessageAttachmentsPreview
diff --git a/src/components/message/MessageForm.tsx b/src/components/message/MessageForm.tsx
index 216f0a9c..50ce6591 100644
--- a/src/components/message/MessageForm.tsx
+++ b/src/components/message/MessageForm.tsx
@@ -1,28 +1,29 @@
-import React, {
-  ChangeEvent,
-  FC,
-  FormEvent,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react'
+import React, { FC, useCallback, useEffect, useState } from 'react'
 import { useMessageApi } from '../../api/Message'
-import {
-  Button,
-  Form,
-  Message as Error,
-  TextAreaProps,
-} from 'semantic-ui-react'
 import { Ticker } from '../../api/Ticker'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
 import MessageFormCounter from './MessageFormCounter'
 import useAuth from '../useAuth'
 import { Upload } from '../../api/Upload'
-import MessageAttachmentsButton from './MessageAttachmentsButton'
-import MessageAttachmentsPreview from './MessageAttachmentsPreview'
+import UploadButton from './UploadButton'
+import AttachmentsPreview from './AttachmentsPreview'
 import MessageMapModal from './MessageMapModal'
 import { FeatureCollection, Geometry } from 'geojson'
+import {
+  Box,
+  Button,
+  FormGroup,
+  IconButton,
+  Stack,
+  TextField,
+} from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faMapLocationDot,
+  faPaperPlane,
+} from '@fortawesome/free-solid-svg-icons'
+import palette from '../../theme/palette'
 
 interface Props {
   ticker: Ticker
@@ -36,23 +37,23 @@ export const MESSAGE_LIMIT = 280
 
 const MessageForm: FC<Props> = ({ ticker }) => {
   const {
-    formState: { isSubmitSuccessful },
+    formState: { isSubmitSuccessful, errors },
     handleSubmit,
     reset,
-    setValue,
+    register,
     watch,
-  } = useForm<FormValues>()
+  } = useForm<FormValues>({ mode: 'onSubmit' })
   const { token } = useAuth()
   const { postMessage } = useMessageApi(token)
   const queryClient = useQueryClient()
-  const watchMessage = watch('message', '')
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
   const [attachments, setAttachments] = useState<Upload[]>([])
+  const [mapDialogOpen, setMapDialogOpen] = useState<boolean>(false)
   const emptyMap: FeatureCollection<Geometry, any> = {
     type: 'FeatureCollection',
     features: [],
   }
   const [map, setMap] = useState<FeatureCollection<Geometry, any>>(emptyMap)
-  const [errorMessage, setErrorMessage] = useState<string>('')
 
   const onUpload = useCallback(
     (uploads: Upload[]) => {
@@ -81,23 +82,8 @@ const MessageForm: FC<Props> = ({ ticker }) => {
     []
   )
 
-  const onChange = useCallback(
-    (e: ChangeEvent | FormEvent, { name, value }: TextAreaProps) => {
-      setValue(name, value)
-      if (watchMessage?.length > MESSAGE_LIMIT) {
-        setErrorMessage(
-          `The message is too long. You must remove ${
-            watchMessage?.length - MESSAGE_LIMIT
-          } characters.`
-        )
-      } else if (errorMessage !== '') {
-        setErrorMessage('')
-      }
-    },
-    [errorMessage, setValue, watchMessage?.length]
-  )
-
   const onSubmit: SubmitHandler<FormValues> = data => {
+    setIsSubmitting(true)
     const uploads = attachments.map(upload => {
       return upload.id
     })
@@ -106,6 +92,7 @@ const MessageForm: FC<Props> = ({ ticker }) => {
       () => {
         queryClient.invalidateQueries(['messages', ticker.id])
         setAttachments([])
+        setIsSubmitting(false)
       }
     )
   }
@@ -116,47 +103,66 @@ const MessageForm: FC<Props> = ({ ticker }) => {
     })
   }, [isSubmitSuccessful, reset])
 
+  const message = watch('message')
+
   return (
-    <Form id="sendMessage" onSubmit={handleSubmit(onSubmit)}>
-      <Form.Field>
-        <Form.TextArea
-          name="message"
-          onChange={onChange}
+    <form id="sendMessage" onSubmit={handleSubmit(onSubmit)}>
+      <FormGroup sx={{ mb: 1 }}>
+        <TextField
+          {...register('message', {
+            required: true,
+            maxLength: MESSAGE_LIMIT,
+          })}
+          color={errors.message ? 'error' : 'primary'}
+          error={!!errors.message}
+          helperText={
+            errors.message?.type === 'maxLength'
+              ? 'The message is too long.'
+              : errors.message?.type === 'required'
+              ? 'The message is required.'
+              : null
+          }
+          multiline
           placeholder="Write a message"
-          rows="5"
-          value={watchMessage}
+          rows="3"
+        />
+      </FormGroup>
+      <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Box>
+          <Button
+            disabled={isSubmitting}
+            startIcon={<FontAwesomeIcon icon={faPaperPlane} />}
+            sx={{ mr: 1 }}
+            type="submit"
+            variant="outlined"
+          >
+            Send
+          </Button>
+          <UploadButton onUpload={onUpload} ticker={ticker} />
+          <IconButton component="span" onClick={() => setMapDialogOpen(true)}>
+            <FontAwesomeIcon
+              color={palette.primary['main']}
+              icon={faMapLocationDot}
+              size="xs"
+            />
+          </IconButton>
+          <MessageMapModal
+            map={map}
+            onChange={onMapUpdate}
+            onClose={() => setMapDialogOpen(false)}
+            open={mapDialogOpen}
+            ticker={ticker}
+          />
+        </Box>
+        <MessageFormCounter letterCount={message?.length || 0} />
+      </Stack>
+      <Box>
+        <AttachmentsPreview
+          attachments={attachments}
+          onDelete={onUploadDelete}
         />
-      </Form.Field>
-      <Error
-        content={errorMessage}
-        header="Error"
-        hidden={!errorMessage}
-        icon="ban"
-        negative
-      />
-      <MessageAttachmentsPreview
-        attachments={attachments}
-        onDelete={onUploadDelete}
-      />
-      <Button
-        color="teal"
-        content="Send"
-        disabled={errorMessage !== '' || watchMessage === ''}
-        form="sendMessage"
-        icon="send"
-        type="submit"
-      />
-      <MessageAttachmentsButton onUpload={onUpload} ticker={ticker} />
-      <MessageMapModal
-        callback={onMapUpdate}
-        map={map}
-        ticker={ticker}
-        trigger={
-          <Button color="orange" content="Add Map" toggle type="button" />
-        }
-      />
-      <MessageFormCounter letterCount={watchMessage?.length || 0} />
-    </Form>
+      </Box>
+    </form>
   )
 }
 
diff --git a/src/components/message/MessageFormCounter.tsx b/src/components/message/MessageFormCounter.tsx
index ba79fe97..f13c719c 100644
--- a/src/components/message/MessageFormCounter.tsx
+++ b/src/components/message/MessageFormCounter.tsx
@@ -1,5 +1,6 @@
+import { ChipPropsColorOverrides, Chip } from '@mui/material'
+import { OverridableStringUnion } from '@mui/types'
 import React, { FC, useEffect, useState } from 'react'
-import { Label, SemanticCOLORS } from 'semantic-ui-react'
 import { MESSAGE_LIMIT } from './MessageForm'
 
 interface Props {
@@ -7,26 +8,38 @@ interface Props {
 }
 
 const MessageFormCounter: FC<Props> = ({ letterCount }) => {
-  const [color, setColor] = useState<SemanticCOLORS>('green')
+  const [color, setColor] =
+    useState<
+      OverridableStringUnion<
+        | 'default'
+        | 'primary'
+        | 'secondary'
+        | 'error'
+        | 'info'
+        | 'success'
+        | 'warning',
+        ChipPropsColorOverrides
+      >
+    >('default')
 
-  //TODO: Calculate length for Twitter (cutting links to 20 characters)
   useEffect(() => {
     if (letterCount > MESSAGE_LIMIT) {
-      setColor('red')
-    } else if (letterCount >= 260) {
-      setColor('orange')
-    } else if (letterCount >= 220) {
-      setColor('yellow')
+      setColor('error')
+    } else if (letterCount >= 240) {
+      setColor('warning')
+    } else if (letterCount === 0) {
+      setColor('default')
     } else {
-      setColor('green')
+      setColor('success')
     }
   }, [letterCount])
 
   return (
-    <Label
+    <Chip
       color={color}
-      content={`${letterCount}/${MESSAGE_LIMIT}`}
-      style={{ float: 'right' }}
+      label={`${letterCount}/${MESSAGE_LIMIT}`}
+      size="small"
+      variant="outlined"
     />
   )
 }
diff --git a/src/components/message/MessageMapModal.tsx b/src/components/message/MessageMapModal.tsx
index d7b22956..e9ade0a5 100644
--- a/src/components/message/MessageMapModal.tsx
+++ b/src/components/message/MessageMapModal.tsx
@@ -1,62 +1,77 @@
-import React, { FC, useCallback, useState } from 'react'
+import React, { FC, useState } from 'react'
 import L, { FeatureGroup as FG, latLng } from 'leaflet'
 import { FeatureGroup, GeoJSON, MapContainer, TileLayer } from 'react-leaflet'
 import { EditControl } from 'react-leaflet-draw'
-import { Button, Modal } from 'semantic-ui-react'
 import { FeatureCollection, Geometry } from 'geojson'
 import { Ticker } from '../../api/Ticker'
 import { leafletOnDataAddFitToBounds } from '../../lib/leafletFitBoundsHelper'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
+import { Close } from '@mui/icons-material'
 
 interface Props {
-  callback: (features: FeatureCollection<Geometry, any>) => void
+  open: boolean
+  onClose: () => void
+  onChange: (features: FeatureCollection<Geometry, any>) => void
   map: FeatureCollection<Geometry, any>
   ticker: Ticker
-  trigger: React.ReactElement
 }
 
-const MessageMapModal: FC<Props> = props => {
-  const [open, setOpen] = useState<boolean>(false)
+const MessageMapModal: FC<Props> = ({
+  open,
+  onChange,
+  onClose,
+  map,
+  ticker,
+}) => {
   const [featureGroup, setFeatureGroup] = useState<FG>(new L.FeatureGroup())
-  const position = latLng(props.ticker.location.lat, props.ticker.location.lon)
+  const position = latLng(ticker.location.lat, ticker.location.lon)
   const zoom = 7
 
-  const onClose = useCallback(() => {
-    setOpen(false)
-  }, [])
+  const handleClose = () => {
+    onClose()
+  }
 
-  const onOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
-
-  const onFeatureGroupUpdate = useCallback((ref: FG) => {
+  const onFeatureGroupUpdate = (ref: FG) => {
     if (ref !== null) {
       setFeatureGroup(ref)
     }
-  }, [])
+  }
 
-  const onSubmit = useCallback(() => {
-    const geoJSON = new L.GeoJSON(props.map)
+  const handleChange = () => {
+    const geoJSON = new L.GeoJSON(map)
     geoJSON.eachLayer(layer => featureGroup.addLayer(layer))
     // @ts-ignore
-    props.callback(featureGroup.toGeoJSON())
-    setOpen(false)
-  }, [featureGroup, props])
+    onChange(featureGroup.toGeoJSON())
+    onClose()
+  }
 
   return (
-    <Modal
-      closeIcon
-      dimmer
-      onClose={onClose}
-      onOpen={onOpen}
-      open={open}
-      trigger={props.trigger}
-    >
-      <Modal.Header>Add Map</Modal.Header>
-      <Modal.Content style={{ padding: 0 }}>
+    <Dialog fullWidth maxWidth="md" open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Edit Map
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent sx={{ px: 0 }}>
         <MapContainer center={position} style={{ height: 600 }} zoom={zoom}>
           <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
           <GeoJSON
-            data={props.map}
+            data={map}
             eventHandlers={{
               add: leafletOnDataAddFitToBounds,
             }}
@@ -69,20 +84,22 @@ const MessageMapModal: FC<Props> = props => {
             />
           </FeatureGroup>
         </MapContainer>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            color="green"
-            content="Save"
-            onClick={onSubmit}
-            type="button"
-          />
-          <Button.Or />
-          <Button color="red" content="Close" onClick={onClose} type="button" />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color="primary"
+          form="inactiveSettingForm"
+          onClick={handleChange}
+          type="submit"
+          variant="contained"
+        >
+          Save
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/components/message/UploadButton.tsx b/src/components/message/UploadButton.tsx
new file mode 100644
index 00000000..7d996f0d
--- /dev/null
+++ b/src/components/message/UploadButton.tsx
@@ -0,0 +1,54 @@
+import React, { createRef, FC, useCallback } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconButton } from '@mui/material'
+import { Ticker } from '../../api/Ticker'
+import { useUploadApi, Upload } from '../../api/Upload'
+import useAuth from '../useAuth'
+import { faImages } from '@fortawesome/free-solid-svg-icons'
+import palette from '../../theme/palette'
+
+interface Props {
+  ticker: Ticker
+  onUpload: (uploads: Upload[]) => void
+}
+
+const UploadButton: FC<Props> = ({ onUpload, ticker }) => {
+  const ref = createRef<HTMLInputElement>()
+  const { token } = useAuth()
+  const { postUpload } = useUploadApi(token)
+
+  const refClick = useCallback(() => {
+    ref.current?.click()
+  }, [ref])
+
+  const handleUpload = (e: React.FormEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    // @ts-ignore
+    const files = e.target.files as Array<FileList>
+    const formData = new FormData()
+    for (let i = 0; i < files.length; i++) {
+      // @ts-ignore
+      formData.append('files', files[i])
+    }
+    formData.append('ticker', ticker.id.toString())
+
+    postUpload(formData).then(response => {
+      onUpload(response.data.uploads)
+    })
+  }
+
+  return (
+    <React.Fragment>
+      <IconButton onClick={refClick} sx={{ mr: 1 }}>
+        <FontAwesomeIcon
+          color={palette.primary['main']}
+          icon={faImages}
+          size="xs"
+        />
+      </IconButton>
+      <input ref={ref} hidden multiple onChange={handleUpload} type="file" />
+    </React.Fragment>
+  )
+}
+
+export default UploadButton
diff --git a/src/components/ticker/MastodonCard.tsx b/src/components/ticker/MastodonCard.tsx
index 81245236..a6348606 100644
--- a/src/components/ticker/MastodonCard.tsx
+++ b/src/components/ticker/MastodonCard.tsx
@@ -1,11 +1,19 @@
+import React, { FC, useCallback } from 'react'
 import { faMastodon } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useQueryClient } from '@tanstack/react-query'
-import React, { FC, useCallback } from 'react'
-import { Button, Card, Container, Icon, Image } from 'semantic-ui-react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 import MastodonModalForm from './MastodonModalForm'
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Stack,
+  Typography,
+} from '@mui/material'
 
 interface Props {
   ticker: Ticker
@@ -41,75 +49,46 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
   )
 
   return mastodon.connected ? (
-    <Container>
-      <Card fluid>
-        <Card.Content>
-          {mastodon.image_url != '' && (
-            <Image floated="right" size="mini" src={mastodon.image_url} />
-          )}
-          <Card.Header>
-            <Icon
-              color={mastodon.active ? 'green' : 'red'}
-              name={mastodon.active ? 'toggle on' : 'toggle off'}
-            />
-            {mastodon.screen_name}
-          </Card.Header>
-          <Card.Meta>{profileLink}</Card.Meta>
-        </Card.Content>
-        <Card.Content extra>
-          <Button.Group compact size="tiny">
-            {mastodon.active ? (
-              <Button
-                color="yellow"
-                content="Disable"
-                icon="pause"
-                onClick={handleToggle}
-              />
-            ) : (
-              <Button
-                color="green"
-                content="Enable"
-                icon="play"
-                onClick={handleToggle}
-              />
-            )}
-            <Button
-              color="red"
-              content="Disconnect"
-              icon="delete"
-              onClick={handleDisconnect}
-            />
-          </Button.Group>
-        </Card.Content>
-      </Card>
-    </Container>
+    <Box>
+      <Stack>
+        <Typography component="h5" variant="h5">
+          Mastodon
+        </Typography>
+        <Button
+          size="small"
+          startIcon={<FontAwesomeIcon icon={faMastodon} />}
+          variant="outlined"
+        >
+          Configure
+        </Button>
+      </Stack>
+    </Box>
   ) : (
-    <Container>
-      <Card fluid>
-        <Card.Content>
+    <Card>
+      <CardContent>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          <Typography component="h5" variant="h5">
+            Mastodon
+          </Typography>
+          <Button
+            size="small"
+            startIcon={<FontAwesomeIcon icon={faMastodon} />}
+            variant="outlined"
+          >
+            Configure
+          </Button>
+        </Stack>
+        <Typography component="p" variant="body2">
           You are currently not connected to Mastodon. New messages will not be
           published to your account and old messages can not be deleted anymore.
-        </Card.Content>
-        <Card.Content extra>
-          <MastodonModalForm
-            ticker={ticker}
-            trigger={
-              <Button
-                color="blue"
-                compact
-                content="Configure"
-                icon={
-                  <Icon>
-                    <FontAwesomeIcon icon={faMastodon} />
-                  </Icon>
-                }
-                size="tiny"
-              />
-            }
-          />
-        </Card.Content>
-      </Card>
-    </Container>
+        </Typography>
+      </CardContent>
+      <CardActions></CardActions>
+    </Card>
   )
 }
 
diff --git a/src/components/ticker/SocialConnectionChip.tsx b/src/components/ticker/SocialConnectionChip.tsx
new file mode 100644
index 00000000..57263e23
--- /dev/null
+++ b/src/components/ticker/SocialConnectionChip.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react'
+import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Chip } from '@mui/material'
+
+interface Props {
+  active: boolean
+  label: string
+}
+
+const SocialConnectionChip: FC<Props> = ({ active, label }) => {
+  return (
+    <>
+      <Chip
+        avatar={<FontAwesomeIcon icon={active ? faCheck : faXmark} />}
+        label={label}
+        size="small"
+        sx={{ mr: 1 }}
+        variant="outlined"
+      />
+    </>
+  )
+}
+
+export default SocialConnectionChip
diff --git a/src/components/ticker/Ticker.tsx b/src/components/ticker/Ticker.tsx
index 2e790d73..4a86ef1a 100644
--- a/src/components/ticker/Ticker.tsx
+++ b/src/components/ticker/Ticker.tsx
@@ -1,92 +1,82 @@
-import React, { FC } from 'react'
-import { Button, Grid, Header } from 'semantic-ui-react'
+import React, { FC, useState } from 'react'
 import { Ticker as Model } from '../../api/Ticker'
 import MessageForm from '../message/MessageForm'
 import TickerCard from './TickerCard'
 import MessageList from '../message/MessageList'
-import useAuth from '../useAuth'
-import TickerUsersCard from './TickerUserCard'
-import TickerResetModal from './TickerResetModal'
-import TwitterCard from './TwitterCard'
-import TelegramCard from './TelegramCard'
-import useFeature from '../useFeature'
-import MastodonCard from './MastodonCard'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGear } from '@fortawesome/free-solid-svg-icons'
 import {
-  faMastodon,
-  faTelegram,
-  faTwitter,
-} from '@fortawesome/free-brands-svg-icons'
-import { faGear, faRadiation, faUsers } from '@fortawesome/free-solid-svg-icons'
+  Button,
+  Card,
+  CardContent,
+  Grid,
+  Stack,
+  Typography,
+} from '@mui/material'
+import TickerModalForm from './TickerModalForm'
 
 interface Props {
   ticker: Model
 }
 
-const Ticker: FC<Props> = props => {
-  const { user } = useAuth()
-  const ticker = props.ticker
-  const { telegram_enabled, twitter_enabled } = useFeature()
+const Ticker: FC<Props> = ({ ticker }) => {
+  const [formModalOpen, setFormModalOpen] = useState<boolean>(false)
 
   return (
-    <Grid columns={2}>
-      <Grid.Row>
-        <Grid.Column width={10}>
-          <Header dividing>Messages</Header>
-          <MessageForm ticker={ticker} />
-          <MessageList ticker={ticker} />
-        </Grid.Column>
-        <Grid.Column width={6}>
-          <Header dividing>
-            <FontAwesomeIcon icon={faGear} /> Settings
-          </Header>
-          <TickerCard ticker={ticker} />
-          <Header dividing>
-            <FontAwesomeIcon icon={faMastodon} /> Mastodon
-          </Header>
-          <MastodonCard ticker={ticker} />
-          {twitter_enabled && (
-            <>
-              <Header dividing>
-                <FontAwesomeIcon icon={faTwitter} /> Twitter
-              </Header>
-              <TwitterCard ticker={ticker} />
-            </>
-          )}
-
-          {telegram_enabled && (
-            <>
-              <Header dividing>
-                <FontAwesomeIcon icon={faTelegram} /> Telegram
-              </Header>
-              <TelegramCard ticker={ticker} />
-            </>
-          )}
-          {user?.roles.includes('admin') && (
-            <React.Fragment>
-              <Header dividing>
-                <FontAwesomeIcon icon={faUsers} /> Users
-              </Header>
-              <TickerUsersCard ticker={ticker} />
-              <Header dividing>
-                <FontAwesomeIcon icon={faRadiation} /> Danger Zone
-              </Header>
-              <TickerResetModal
-                ticker={ticker}
-                trigger={
-                  <Button
-                    content="Reset"
-                    icon="remove"
-                    labelPosition="left"
-                    negative
-                    size="tiny"
-                  />
-                }
-              />
-            </React.Fragment>
-          )}
-        </Grid.Column>
-      </Grid.Row>
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+          mb={2}
+        >
+          <Typography component="h2" gutterBottom variant="h3">
+            Ticker
+          </Typography>
+          <Button
+            onClick={() => {
+              setFormModalOpen(true)
+            }}
+            startIcon={<FontAwesomeIcon icon={faGear} />}
+            variant="contained"
+          >
+            Configure
+          </Button>
+          <TickerModalForm
+            onClose={() => {
+              setFormModalOpen(false)
+            }}
+            open={formModalOpen}
+            ticker={ticker}
+          />
+        </Stack>
+      </Grid>
+      <Grid
+        display={{ xs: 'none', md: 'block' }}
+        item
+        md={4}
+        spacing={2}
+        xs={12}
+      >
+        <TickerCard ticker={ticker} />
+      </Grid>
+      <Grid container item md={8} rowSpacing={2} xs={12}>
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <MessageForm ticker={ticker} />
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <MessageList ticker={ticker} />
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
     </Grid>
   )
 }
diff --git a/src/components/ticker/TickerCard.tsx b/src/components/ticker/TickerCard.tsx
index 74d74bbf..c948e93d 100644
--- a/src/components/ticker/TickerCard.tsx
+++ b/src/components/ticker/TickerCard.tsx
@@ -1,44 +1,77 @@
 import React, { FC } from 'react'
-import { Button, Card, Icon, Label } from 'semantic-ui-react'
-import ReactMarkdown from 'react-markdown'
+import { Box, Card, CardContent, Typography } from '@mui/material'
 import { Ticker } from '../../api/Ticker'
+import NamedListItem from '../common/NamedListItem'
+import SocialConnectionChip from './SocialConnectionChip'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faCheck,
+  faHeading,
+  faLink,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons'
 
 interface Props {
   ticker: Ticker
 }
 
-const TickerCard: FC<Props> = props => {
+const TickerCard: FC<Props> = ({ ticker }) => {
   return (
-    <Card fluid>
-      <Card.Content>
-        <Card.Header>
-          <Icon
-            color={props.ticker.active ? 'green' : 'red'}
-            name={props.ticker.active ? 'toggle on' : 'toggle off'}
-          />
-          {props.ticker.title}
-          <Label
-            content={props.ticker.id}
-            size="mini"
-            style={{ float: 'right' }}
-          />
-        </Card.Header>
-        <Card.Meta>
-          <a
-            href={'https://' + props.ticker.domain}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            {props.ticker.domain}
-          </a>
-        </Card.Meta>
-        <Card.Description>
-          <ReactMarkdown>{props.ticker.description}</ReactMarkdown>
-        </Card.Description>
-      </Card.Content>
-      <Card.Content>
-        <Button.Group compact size="tiny"></Button.Group>
-      </Card.Content>
+    <Card>
+      <CardContent>
+        <NamedListItem title="Title">
+          <Typography>
+            <FontAwesomeIcon
+              color="GrayText"
+              icon={faHeading}
+              style={{ width: 16, paddingRight: 2 }}
+            />
+            {ticker.title}
+          </Typography>
+        </NamedListItem>
+        <NamedListItem title="Status">
+          <Typography>
+            <FontAwesomeIcon
+              color="GrayText"
+              icon={ticker.active ? faCheck : faXmark}
+              style={{ width: 16, paddingRight: 2 }}
+            />
+            {ticker.active ? 'Active' : 'Inactive'}
+          </Typography>
+        </NamedListItem>
+        <NamedListItem title="Domain">
+          <Typography>
+            <FontAwesomeIcon
+              color="GrayText"
+              icon={faLink}
+              style={{ width: 16, paddingRight: 2 }}
+            />
+            <a
+              href={'https://' + ticker.domain}
+              rel="noreferrer"
+              target="_blank"
+            >
+              {ticker.domain}
+            </a>
+          </Typography>
+        </NamedListItem>
+        <NamedListItem title="Social Connections">
+          <Box>
+            <SocialConnectionChip
+              active={ticker.mastodon.active}
+              label="Mastodon"
+            />
+            <SocialConnectionChip
+              active={ticker.twitter.active}
+              label="Twitter"
+            />
+            <SocialConnectionChip
+              active={ticker.telegram.active}
+              label="Telegram"
+            />
+          </Box>
+        </NamedListItem>
+      </CardContent>
     </Card>
   )
 }

From 7fe86bcbc80ad64fa197b68850e841b9d76fbc9c Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Tue, 17 Jan 2023 20:48:20 -0800
Subject: [PATCH 15/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20for=20MessageL?=
 =?UTF-8?q?ist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/message/Message.tsx            | 151 +++---------------
 src/components/message/MessageAttachments.tsx |  63 ++++++++
 src/components/message/MessageFooter.tsx      |  46 ++++++
 src/components/message/MessageList.tsx        |  22 +--
 src/components/message/MessageModalDelete.tsx |  80 ++++++----
 src/components/ticker/Ticker.tsx              |   6 +-
 6 files changed, 192 insertions(+), 176 deletions(-)
 create mode 100644 src/components/message/MessageAttachments.tsx
 create mode 100644 src/components/message/MessageFooter.tsx

diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index e841dc19..7e9a5493 100644
--- a/src/components/message/Message.tsx
+++ b/src/components/message/Message.tsx
@@ -1,19 +1,13 @@
-import React, { FC, useCallback, useState } from 'react'
-import { Card, Icon, Image } from 'semantic-ui-react'
-import Moment from 'react-moment'
+import React, { FC, useState } from 'react'
 import { Message as MessageType } from '../../api/Message'
-import Lightbox from 'react-image-lightbox'
-import 'react-image-lightbox/style.css'
 import { replaceMagic } from '../../lib/replaceLinksHelper'
 import MessageModalDelete from './MessageModalDelete'
 import MessageMap from './MessageMap'
 import { Ticker } from '../../api/Ticker'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faMastodon,
-  faTelegram,
-  faTwitter,
-} from '@fortawesome/free-brands-svg-icons'
+import { Card, CardContent, IconButton, useTheme } from '@mui/material'
+import MessageAttachements from './MessageAttachments'
+import MessageFooter from './MessageFooter'
+import { Close } from '@mui/icons-material'
 
 interface Props {
   message: MessageType
@@ -21,133 +15,34 @@ interface Props {
 }
 
 const Message: FC<Props> = ({ message, ticker }) => {
-  const [imageLightboxOpen, setImageLightboxOpen] = useState<boolean>(false)
-  const [imageIndex, setImageIndex] = useState<number>(0)
-
-  const openImageLightbox = useCallback(() => setImageLightboxOpen(true), [])
-  const closeImageLightbox = useCallback(() => setImageLightboxOpen(false), [])
-
-  const twitterIcon = useCallback(() => {
-    if (message.twitter_url) {
-      return (
-        <a href={message.twitter_url} rel="noopener noreferrer" target="_blank">
-          <Icon>
-            <FontAwesomeIcon icon={faTwitter} />
-          </Icon>
-        </a>
-      )
-    }
-
-    return null
-  }, [message.twitter_url])
-
-  const telegramIcon = useCallback(() => {
-    if (message.telegram_url) {
-      return (
-        <a
-          href={message.telegram_url}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <Icon>
-            <FontAwesomeIcon icon={faTelegram} />
-          </Icon>
-        </a>
-      )
-    }
-
-    return null
-  }, [message.telegram_url])
-
-  const mastodonIcon = useCallback(() => {
-    if (message.mastodon_url) {
-      return (
-        <a
-          href={message.mastodon_url}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <Icon>
-            <FontAwesomeIcon icon={faMastodon} />
-          </Icon>
-        </a>
-      )
-    }
-
-    return null
-  }, [message.mastodon_url])
-
-  const renderAttachments = () => {
-    const attachments = message.attachments
-
-    if (attachments === null || attachments.length === 0) {
-      return null
-    }
-
-    const images = attachments.map((image, key) => (
-      <Image
-        key={key}
-        onClick={() => {
-          openImageLightbox()
-          setImageIndex(key)
-        }}
-        rounded
-        src={image.url}
-        style={{ width: 200, height: 200, objectFit: 'cover' }}
-      />
-    ))
-    const urls = attachments.map(image => image.url)
-
-    return (
-      <Card.Content align="center">
-        {imageLightboxOpen && (
-          <Lightbox
-            mainSrc={urls[imageIndex]}
-            nextSrc={urls[(imageIndex + 1) % urls.length]}
-            onCloseRequest={closeImageLightbox}
-            onMoveNextRequest={() =>
-              setImageIndex((imageIndex + 1) % urls.length)
-            }
-            onMovePrevRequest={() =>
-              setImageIndex((imageIndex + urls.length - 1) % urls.length)
-            }
-            prevSrc={urls[(imageIndex + urls.length - 1) % urls.length]}
-          />
-        )}
-        <Image.Group size="medium">{images}</Image.Group>
-      </Card.Content>
-    )
-  }
+  const theme = useTheme()
+  const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false)
 
   return (
-    <Card fluid>
-      <Card.Content>
+    <Card sx={{ mt: 2 }}>
+      <CardContent>
+        <IconButton
+          onClick={() => {
+            setDeleteModalOpen(true)
+          }}
+          sx={{ position: 'absolute', right: theme.spacing(3) }}
+        >
+          <Close />
+        </IconButton>
         <MessageModalDelete
           message={message}
-          trigger={
-            <Icon
-              color="grey"
-              fitted
-              link
-              name="close"
-              style={{ float: 'right' }}
-            />
-          }
+          onClose={() => setDeleteModalOpen(false)}
+          open={deleteModalOpen}
         />
         <p
           dangerouslySetInnerHTML={{
             __html: replaceMagic(message.text),
           }}
         />
-      </Card.Content>
-      {renderAttachments()}
-      <MessageMap message={message} ticker={ticker} />
-      <Card.Content extra>
-        {twitterIcon()}
-        {telegramIcon()}
-        {mastodonIcon()}
-        <Moment fromNow>{message.creation_date}</Moment>
-      </Card.Content>
+        <MessageAttachements message={message} />
+        <MessageMap message={message} ticker={ticker} />
+        <MessageFooter message={message} />
+      </CardContent>
     </Card>
   )
 }
diff --git a/src/components/message/MessageAttachments.tsx b/src/components/message/MessageAttachments.tsx
new file mode 100644
index 00000000..d788440b
--- /dev/null
+++ b/src/components/message/MessageAttachments.tsx
@@ -0,0 +1,63 @@
+import { ImageList, ImageListItem } from '@mui/material'
+import React, { FC, useCallback, useState } from 'react'
+import Lightbox from 'react-image-lightbox'
+import { Message } from '../../api/Message'
+import 'react-image-lightbox/style.css'
+
+interface Props {
+  message: Message
+}
+
+const MessageAttachements: FC<Props> = ({ message }) => {
+  const [imageLightboxOpen, setImageLightboxOpen] = useState<boolean>(false)
+  const [imageIndex, setImageIndex] = useState<number>(0)
+  const attachments = message.attachments
+
+  const openImageLightbox = useCallback(() => setImageLightboxOpen(true), [])
+  const closeImageLightbox = useCallback(() => setImageLightboxOpen(false), [])
+
+  if (attachments === null || attachments.length === 0) {
+    return null
+  }
+
+  const images = attachments.map((image, key) => (
+    <ImageListItem
+      key={key}
+      onClick={() => {
+        openImageLightbox()
+        setImageIndex(key)
+      }}
+      sx={{ position: 'relative' }}
+    >
+      <img
+        src={image.url}
+        style={{
+          objectFit: 'cover',
+        }}
+      />
+    </ImageListItem>
+  ))
+  const urls = attachments.map(image => image.url)
+
+  return (
+    <>
+      {imageLightboxOpen && (
+        <Lightbox
+          mainSrc={urls[imageIndex]}
+          nextSrc={urls[(imageIndex + 1) % urls.length]}
+          onCloseRequest={closeImageLightbox}
+          onMoveNextRequest={() =>
+            setImageIndex((imageIndex + 1) % urls.length)
+          }
+          onMovePrevRequest={() =>
+            setImageIndex((imageIndex + urls.length - 1) % urls.length)
+          }
+          prevSrc={urls[(imageIndex + urls.length - 1) % urls.length]}
+        />
+      )}
+      <ImageList>{images}</ImageList>
+    </>
+  )
+}
+
+export default MessageAttachements
diff --git a/src/components/message/MessageFooter.tsx b/src/components/message/MessageFooter.tsx
new file mode 100644
index 00000000..73b8f0fa
--- /dev/null
+++ b/src/components/message/MessageFooter.tsx
@@ -0,0 +1,46 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import {
+  faMastodon,
+  faTelegram,
+  faTwitter,
+} from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Box, Stack, Typography } from '@mui/material'
+import React, { FC } from 'react'
+import Moment from 'react-moment'
+import { Message } from '../../api/Message'
+
+interface Props {
+  message: Message
+}
+const MessageFooter: FC<Props> = ({ message }) => {
+  return (
+    <Stack alignItems="center" direction="row" justifyContent="space-between">
+      <Box>
+        <Typography variant="caption">
+          <Moment fromNow>{message.creation_date}</Moment>
+        </Typography>
+      </Box>
+      <Box>
+        <Icon icon={faTwitter} url={message.twitter_url} />
+        <Icon icon={faTelegram} url={message.telegram_url} />
+        <Icon icon={faMastodon} url={message.mastodon_url} />
+      </Box>
+    </Stack>
+  )
+}
+
+interface IconProps {
+  url?: string
+  icon: IconProp
+}
+
+const Icon: FC<IconProps> = ({ url, icon }) => {
+  return url ? (
+    <a href={url} rel="noopener noreferrer" target="_blank">
+      <FontAwesomeIcon icon={icon} />
+    </a>
+  ) : null
+}
+
+export default MessageFooter
diff --git a/src/components/message/MessageList.tsx b/src/components/message/MessageList.tsx
index bb257861..159c9ea8 100644
--- a/src/components/message/MessageList.tsx
+++ b/src/components/message/MessageList.tsx
@@ -1,10 +1,11 @@
 import React, { FC } from 'react'
-import { Dimmer, Feed, Loader } from 'semantic-ui-react'
+import { useQuery } from '@tanstack/react-query'
 import { Ticker } from '../../api/Ticker'
 import { useMessageApi } from '../../api/Message'
 import Message from './Message'
-import { useQuery } from '@tanstack/react-query'
 import useAuth from '../useAuth'
+import ErrorView from '../../views/ErrorView'
+import Loader from '../Loader'
 
 interface Props {
   ticker: Ticker
@@ -18,24 +19,23 @@ const MessageList: FC<Props> = ({ ticker }) => {
   )
 
   if (isLoading) {
-    return (
-      <Dimmer active inverted>
-        <Loader inverted>Loading</Loader>
-      </Dimmer>
-    )
+    return <Loader />
   }
 
   if (error || data === undefined) {
-    //TODO: Generic Error View
-    return <React.Fragment>Error occured</React.Fragment>
+    return (
+      <ErrorView queryKey={['messages', ticker.id]}>
+        Unable to fetch messages from server.
+      </ErrorView>
+    )
   }
 
   return (
-    <Feed>
+    <>
       {data.data.messages.map(message => (
         <Message key={message.id} message={message} ticker={ticker} />
       ))}
-    </Feed>
+    </>
   )
 }
 
diff --git a/src/components/message/MessageModalDelete.tsx b/src/components/message/MessageModalDelete.tsx
index 8e9e2539..48861231 100644
--- a/src/components/message/MessageModalDelete.tsx
+++ b/src/components/message/MessageModalDelete.tsx
@@ -1,49 +1,65 @@
-import React, { FC, useCallback, useState } from 'react'
+import React, { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { Confirm } from 'semantic-ui-react'
 import { Message, useMessageApi } from '../../api/Message'
 import useAuth from '../useAuth'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
+import { Close } from '@mui/icons-material'
 
 interface Props {
+  onClose: () => void
+  open: boolean
   message: Message
-  trigger: React.ReactNode
 }
-
-const MessageModalDelete: FC<Props> = props => {
+const MessageModalDelete: FC<Props> = ({ message, onClose, open }) => {
   const { token } = useAuth()
   const { deleteMessage } = useMessageApi(token)
-  const [open, setOpen] = useState<boolean>(false)
   const queryClient = useQueryClient()
-  const message = props.message
-
-  const handleCancel = useCallback(() => {
-    setOpen(false)
-  }, [])
 
-  const handleConfirm = useCallback(() => {
-    deleteMessage(message)
-      .then(() => {
-        queryClient.invalidateQueries(['messages', message.ticker])
-      })
-      .finally(() => {
-        setOpen(false)
-      })
-  }, [deleteMessage, message, queryClient])
+  const handleClose = () => {
+    onClose()
+  }
 
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+  const handleDelete = useCallback(() => {
+    deleteMessage(message).then(() => {
+      queryClient.invalidateQueries(['messages', message.ticker])
+      onClose()
+    })
+  }, [deleteMessage, message, onClose, queryClient])
 
   return (
-    <Confirm
-      dimmer
-      onCancel={handleCancel}
-      onConfirm={handleConfirm}
-      onOpen={handleOpen}
-      open={open}
-      size="mini"
-      trigger={props.trigger}
-    />
+    <Dialog open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Delete Message
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        Are you sure to delete the message? This action cannot be undone.
+      </DialogContent>
+      <DialogActions>
+        <Button color="error" onClick={handleDelete} variant="contained">
+          Delete
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/components/ticker/Ticker.tsx b/src/components/ticker/Ticker.tsx
index 4a86ef1a..506830d2 100644
--- a/src/components/ticker/Ticker.tsx
+++ b/src/components/ticker/Ticker.tsx
@@ -70,11 +70,7 @@ const Ticker: FC<Props> = ({ ticker }) => {
           </Card>
         </Grid>
         <Grid item xs={12}>
-          <Card>
-            <CardContent>
-              <MessageList ticker={ticker} />
-            </CardContent>
-          </Card>
+          <MessageList ticker={ticker} />
         </Grid>
       </Grid>
     </Grid>

From 1ce724349c9341b7719da54e6fbae696691ed3e2 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Wed, 18 Jan 2023 09:46:10 -0800
Subject: [PATCH 16/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20for=20Ticker?=
 =?UTF-8?q?=20DangerZone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/Ticker.tsx              |  5 ++
 .../ticker/TickerDangerZoneCard.tsx           | 42 +++++++++
 src/components/ticker/TickerResetModal.tsx    | 86 ++++++++++---------
 3 files changed, 93 insertions(+), 40 deletions(-)
 create mode 100644 src/components/ticker/TickerDangerZoneCard.tsx

diff --git a/src/components/ticker/Ticker.tsx b/src/components/ticker/Ticker.tsx
index 506830d2..a63bb83c 100644
--- a/src/components/ticker/Ticker.tsx
+++ b/src/components/ticker/Ticker.tsx
@@ -6,6 +6,7 @@ import MessageList from '../message/MessageList'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGear } from '@fortawesome/free-solid-svg-icons'
 import {
+  Box,
   Button,
   Card,
   CardContent,
@@ -14,6 +15,7 @@ import {
   Typography,
 } from '@mui/material'
 import TickerModalForm from './TickerModalForm'
+import TickerDangerZoneCard from './TickerDangerZoneCard'
 
 interface Props {
   ticker: Model
@@ -60,6 +62,9 @@ const Ticker: FC<Props> = ({ ticker }) => {
         xs={12}
       >
         <TickerCard ticker={ticker} />
+        <Box sx={{ mt: 2 }}>
+          <TickerDangerZoneCard ticker={ticker} />
+        </Box>
       </Grid>
       <Grid container item md={8} rowSpacing={2} xs={12}>
         <Grid item xs={12}>
diff --git a/src/components/ticker/TickerDangerZoneCard.tsx b/src/components/ticker/TickerDangerZoneCard.tsx
new file mode 100644
index 00000000..ea3a4efb
--- /dev/null
+++ b/src/components/ticker/TickerDangerZoneCard.tsx
@@ -0,0 +1,42 @@
+import React, { FC, useState } from 'react'
+import { Box, Button, Card, CardContent, Typography } from '@mui/material'
+import { Ticker } from '../../api/Ticker'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBiohazard, faTrash } from '@fortawesome/free-solid-svg-icons'
+import TickerResetModal from './TickerResetModal'
+import useAuth from '../useAuth'
+
+interface Props {
+  ticker: Ticker
+}
+const TickerDangerZoneCard: FC<Props> = ({ ticker }) => {
+  const { user } = useAuth()
+  const [resetOpen, setResetOpen] = useState<boolean>(false)
+
+  return user?.roles.includes('admin') ? (
+    <Card>
+      <CardContent>
+        <Typography component="h5" variant="h5">
+          <FontAwesomeIcon icon={faBiohazard} /> Danger Zone
+        </Typography>
+        <Box sx={{ mt: 2 }}>
+          <Button
+            color="error"
+            onClick={() => setResetOpen(true)}
+            startIcon={<FontAwesomeIcon icon={faTrash} />}
+            variant="outlined"
+          >
+            Reset Ticker
+          </Button>
+          <TickerResetModal
+            onClose={() => setResetOpen(false)}
+            open={resetOpen}
+            ticker={ticker}
+          />
+        </Box>
+      </CardContent>
+    </Card>
+  ) : null
+}
+
+export default TickerDangerZoneCard
diff --git a/src/components/ticker/TickerResetModal.tsx b/src/components/ticker/TickerResetModal.tsx
index bbead9a3..59026ecc 100644
--- a/src/components/ticker/TickerResetModal.tsx
+++ b/src/components/ticker/TickerResetModal.tsx
@@ -1,50 +1,60 @@
-import React, { FC, useCallback, useState } from 'react'
-import { Button, Modal } from 'semantic-ui-react'
+import React, { FC, useCallback } from 'react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 import { useQueryClient } from '@tanstack/react-query'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
+import { Close } from '@mui/icons-material'
 
 interface Props {
+  onClose: () => void
+  open: boolean
   ticker: Ticker
-  trigger: React.ReactNode
 }
 
-const TickerResetModal: FC<Props> = props => {
-  const [open, setOpen] = useState<boolean>(false)
+const TickerResetModal: FC<Props> = ({ onClose, open, ticker }) => {
   const { token } = useAuth()
   const { putTickerReset } = useTickerApi(token)
   const queryClient = useQueryClient()
 
-  const handleCancel = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+  const handleClose = () => {
+    onClose()
+  }
 
   const handleReset = useCallback(() => {
-    putTickerReset(props.ticker)
+    putTickerReset(ticker)
       .then(() => {
-        queryClient.invalidateQueries(['messages', props.ticker.id])
-        queryClient.invalidateQueries(['tickerUsers', props.ticker.id])
-        queryClient.invalidateQueries(['ticker', props.ticker.id])
+        queryClient.invalidateQueries(['messages', ticker.id])
+        queryClient.invalidateQueries(['tickerUsers', ticker.id])
+        queryClient.invalidateQueries(['ticker', ticker.id])
       })
       .finally(() => {
-        setOpen(false)
+        onClose()
       })
-  }, [props.ticker, putTickerReset, queryClient])
+  }, [onClose, putTickerReset, queryClient, ticker])
 
   return (
-    <Modal
-      onClose={handleCancel}
-      onOpen={handleOpen}
-      open={open}
-      size="mini"
-      trigger={props.trigger}
-    >
-      <Modal.Header>Reset Ticker</Modal.Header>
-      <Modal.Content>
+    <Dialog open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Reset Ticker
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
         <p>
           <strong>Are you sure you want to reset the ticker?</strong>
         </p>
@@ -52,20 +62,16 @@ const TickerResetModal: FC<Props> = props => {
           This will remove all messages, descriptions, the connection to twitter
           and disable the ticker.
         </p>
-      </Modal.Content>
-      <Modal.Actions>
-        <Button negative onClick={handleCancel}>
-          No
+      </DialogContent>
+      <DialogActions>
+        <Button color="error" onClick={handleReset} variant="contained">
+          Reset
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
         </Button>
-        <Button
-          content="Yes"
-          icon="checkmark"
-          labelPosition="right"
-          onClick={handleReset}
-          positive
-        />
-      </Modal.Actions>
-    </Modal>
+      </DialogActions>
+    </Dialog>
   )
 }
 

From 522a13c17057b97469400e24b20ad35a9524a2cb Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Wed, 18 Jan 2023 11:30:16 -0800
Subject: [PATCH 17/31] =?UTF-8?q?=F0=9F=92=84=20Small=20UI=20Improvements?=
 =?UTF-8?q?=20for=20Messages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/message/Message.tsx    | 1 +
 src/components/message/MessageMap.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index 7e9a5493..2508843b 100644
--- a/src/components/message/Message.tsx
+++ b/src/components/message/Message.tsx
@@ -38,6 +38,7 @@ const Message: FC<Props> = ({ message, ticker }) => {
           dangerouslySetInnerHTML={{
             __html: replaceMagic(message.text),
           }}
+          style={{ paddingRight: theme.spacing(6) }}
         />
         <MessageAttachements message={message} />
         <MessageMap message={message} ticker={ticker} />
diff --git a/src/components/message/MessageMap.tsx b/src/components/message/MessageMap.tsx
index 85e5d46b..46dff56d 100644
--- a/src/components/message/MessageMap.tsx
+++ b/src/components/message/MessageMap.tsx
@@ -28,7 +28,12 @@ const MessageMap: FC<Props> = ({ message, ticker }) => {
   }
 
   return (
-    <MapContainer center={position} scrollWheelZoom={false} zoom={7}>
+    <MapContainer
+      center={position}
+      scrollWheelZoom={false}
+      style={{ height: 300 }}
+      zoom={7}
+    >
       <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
       <GeoJSON
         data={JSON.parse(message.geo_information)}

From e36aa2c6c08d4d535f42868825ae205b52ea3253 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Fri, 20 Jan 2023 15:05:21 -0800
Subject: [PATCH 18/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20for=20Social?=
 =?UTF-8?q?=20Connections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TabPanel.tsx            |  23 +++
 src/components/ticker/MastodonCard.tsx        |  79 ++++++---
 src/components/ticker/MastodonForm.tsx        | 149 ++++++++--------
 src/components/ticker/MastodonModalForm.tsx   |  87 +++++-----
 src/components/ticker/TelegramCard.tsx        | 142 ++++++++-------
 src/components/ticker/TelegramForm.tsx        | 115 ++++++-------
 src/components/ticker/TelegramModalForm.tsx   |  87 +++++-----
 src/components/ticker/TickerForm.tsx          |  19 +++
 src/components/ticker/TickerModalForm.tsx     |  42 +++--
 .../ticker/TickerSocialConnections.tsx        |  28 +++
 src/components/ticker/TwitterCard.tsx         | 161 +++++++++---------
 11 files changed, 524 insertions(+), 408 deletions(-)
 create mode 100644 src/components/common/TabPanel.tsx
 create mode 100644 src/components/ticker/TickerSocialConnections.tsx

diff --git a/src/components/common/TabPanel.tsx b/src/components/common/TabPanel.tsx
new file mode 100644
index 00000000..e1526332
--- /dev/null
+++ b/src/components/common/TabPanel.tsx
@@ -0,0 +1,23 @@
+import { Box } from '@mui/material'
+import React, { FC } from 'react'
+
+interface Props {
+  children?: React.ReactNode
+  index: number
+  value: number
+}
+
+const TabPanel: FC<Props> = ({ children, index, value }) => {
+  return (
+    <div
+      aria-labelledby={`simple-tab-${index}`}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      role="tabpanel"
+    >
+      {value === index && <Box sx={{ py: 2 }}>{children}</Box>}
+    </div>
+  )
+}
+
+export default TabPanel
diff --git a/src/components/ticker/MastodonCard.tsx b/src/components/ticker/MastodonCard.tsx
index a6348606..bbcfbb24 100644
--- a/src/components/ticker/MastodonCard.tsx
+++ b/src/components/ticker/MastodonCard.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from 'react'
+import React, { FC, useCallback, useState } from 'react'
 import { faMastodon } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useQueryClient } from '@tanstack/react-query'
@@ -14,6 +14,7 @@ import {
   Stack,
   Typography,
 } from '@mui/material'
+import { faBan, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
 
 interface Props {
   ticker: Ticker
@@ -22,6 +23,8 @@ interface Props {
 const MastodonCard: FC<Props> = ({ ticker }) => {
   const { token } = useAuth()
   const { deleteTickerMastodon, putTickerMastodon } = useTickerApi(token)
+  const [open, setOpen] = useState<boolean>(false)
+
   const queryClient = useQueryClient()
 
   const mastodon = ticker.mastodon
@@ -48,22 +51,7 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
     </a>
   )
 
-  return mastodon.connected ? (
-    <Box>
-      <Stack>
-        <Typography component="h5" variant="h5">
-          Mastodon
-        </Typography>
-        <Button
-          size="small"
-          startIcon={<FontAwesomeIcon icon={faMastodon} />}
-          variant="outlined"
-        >
-          Configure
-        </Button>
-      </Stack>
-    </Box>
-  ) : (
+  return (
     <Card>
       <CardContent>
         <Stack
@@ -72,22 +60,57 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
           justifyContent="space-between"
         >
           <Typography component="h5" variant="h5">
-            Mastodon
+            <FontAwesomeIcon icon={faMastodon} /> Mastodon
           </Typography>
-          <Button
-            size="small"
-            startIcon={<FontAwesomeIcon icon={faMastodon} />}
-            variant="outlined"
-          >
+          <Button onClick={() => setOpen(true)} size="small" variant="outlined">
             Configure
           </Button>
         </Stack>
-        <Typography component="p" variant="body2">
-          You are currently not connected to Mastodon. New messages will not be
-          published to your account and old messages can not be deleted anymore.
-        </Typography>
+        {mastodon.connected ? (
+          <Box>
+            <Typography variant="body2">
+              You are connected to Mastodon.
+            </Typography>
+            <Typography variant="body2">Profile: {profileLink}</Typography>
+          </Box>
+        ) : (
+          <Typography component="p" variant="body2">
+            You are currently not connected to Mastodon. New messages will not
+            be published to your account and old messages can not be deleted
+            anymore.
+          </Typography>
+        )}
       </CardContent>
-      <CardActions></CardActions>
+      {mastodon.connected ? (
+        <CardActions>
+          {mastodon.active ? (
+            <Button
+              onClick={handleToggle}
+              startIcon={<FontAwesomeIcon icon={faPause} />}
+            >
+              Disable
+            </Button>
+          ) : (
+            <Button
+              onClick={handleToggle}
+              startIcon={<FontAwesomeIcon icon={faPlay} />}
+            >
+              Enable
+            </Button>
+          )}
+          <Button
+            onClick={handleDisconnect}
+            startIcon={<FontAwesomeIcon icon={faBan} />}
+          >
+            Disconnect
+          </Button>
+        </CardActions>
+      ) : null}
+      <MastodonModalForm
+        onClose={() => setOpen(false)}
+        open={open}
+        ticker={ticker}
+      />
     </Card>
   )
 }
diff --git a/src/components/ticker/MastodonForm.tsx b/src/components/ticker/MastodonForm.tsx
index f582cddb..afcc3210 100644
--- a/src/components/ticker/MastodonForm.tsx
+++ b/src/components/ticker/MastodonForm.tsx
@@ -1,12 +1,14 @@
+import {
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  Grid,
+  TextField,
+  Typography,
+} from '@mui/material'
 import { useQueryClient } from '@tanstack/react-query'
-import React, { ChangeEvent, FC, FormEvent, useCallback } from 'react'
+import React, { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import {
-  CheckboxProps,
-  Form,
-  InputOnChangeData,
-  Message,
-} from 'semantic-ui-react'
 import { Ticker, TickerMastodonFormData, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 
@@ -19,7 +21,7 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
   const mastodon = ticker.mastodon
   const { token } = useAuth()
   const { putTickerMastodon } = useTickerApi(token)
-  const { handleSubmit, setValue } = useForm<TickerMastodonFormData>({
+  const { handleSubmit, register } = useForm<TickerMastodonFormData>({
     defaultValues: {
       active: mastodon.active,
       server: mastodon.server,
@@ -27,20 +29,6 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
   })
   const queryClient = useQueryClient()
 
-  const onChange = useCallback(
-    (
-      e: ChangeEvent | FormEvent,
-      { name, value, checked }: InputOnChangeData | CheckboxProps
-    ) => {
-      if (checked !== undefined) {
-        setValue(name, checked)
-      } else {
-        setValue(name, value)
-      }
-    },
-    [setValue]
-  )
-
   const onSubmit: SubmitHandler<TickerMastodonFormData> = data => {
     putTickerMastodon(data, ticker).finally(() => {
       queryClient.invalidateQueries(['ticker', ticker.id])
@@ -49,56 +37,73 @@ const MastodonForm: FC<Props> = ({ callback, ticker }) => {
   }
 
   return (
-    <Form id="configureMastodon" onSubmit={handleSubmit(onSubmit)}>
-      <Message info>
-        <Message.Header>Information</Message.Header>
-        <Message.Content>
-          You need to create a Application for Ticker in Mastodon. Go to your
-          profile settings in Mastodon. You find a menu point {`"`}Developer
-          {`"`} where you need to create an Application. After saving you see
-          the required secrets and tokens.
-        </Message.Content>
-        <Message.Content>
-          Required Scopes: <code>read write write:media write:statuses</code>
-        </Message.Content>
-      </Message>
-      <Form.Checkbox
-        defaultChecked={mastodon.active}
-        label="Active"
-        name="active"
-        onChange={onChange}
-        toggle
-      />
-      <Form.Input
-        defaultValue={mastodon.server}
-        label="Server"
-        name="server"
-        onChange={onChange}
-        placeholder="https://mastodon.social"
-        required
-      />
-      <Form.Input
-        label="Token"
-        name="token"
-        onChange={onChange}
-        required
-        type="password"
-      />
-      <Form.Input
-        label="Secret"
-        name="secret"
-        onChange={onChange}
-        required
-        type="password"
-      />
-      <Form.Input
-        label="Access Token"
-        name="access_token"
-        onChange={onChange}
-        required
-        type="password"
-      />
-    </Form>
+    <form id="configureMastodon" onSubmit={handleSubmit(onSubmit)}>
+      <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
+        <Grid item xs={12}>
+          <Typography>
+            You need to create a Application for Ticker in Mastodon. Go to your
+            profile settings in Mastodon. You find a menu point {`"`}Developer
+            {`"`} where you need to create an Application. After saving you see
+            the required secrets and tokens. Required Scopes:{' '}
+            <code>read write write:media write:statuses</code>
+          </Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  {...register('active')}
+                  defaultChecked={ticker.mastodon.active}
+                />
+              }
+              label="Active"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('server')}
+              defaultValue={ticker.mastodon.server}
+              label="Server"
+              placeholder="https://mastodon.social"
+              required
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('token')}
+              label="Token"
+              required
+              type="password"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('secret')}
+              label="Secret"
+              required
+              type="password"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('access_token')}
+              label="Access Token"
+              required
+              type="password"
+            />
+          </FormGroup>
+        </Grid>
+      </Grid>
+    </form>
   )
 }
 
diff --git a/src/components/ticker/MastodonModalForm.tsx b/src/components/ticker/MastodonModalForm.tsx
index 9b3ed3fc..1a7c27c8 100644
--- a/src/components/ticker/MastodonModalForm.tsx
+++ b/src/components/ticker/MastodonModalForm.tsx
@@ -1,54 +1,59 @@
-import React, { FC, useCallback, useState } from 'react'
-import { Button, Modal } from 'semantic-ui-react'
+import React, { FC } from 'react'
+import { Close } from '@mui/icons-material'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
 import { Ticker } from '../../api/Ticker'
 import MastodonForm from './MastodonForm'
 
 interface Props {
+  onClose: () => void
+  open: boolean
   ticker: Ticker
-  trigger: React.ReactNode
 }
 
-const MastodonModalForm: FC<Props> = ({ ticker, trigger }) => {
-  const [open, setOpen] = useState<boolean>(false)
-
-  const handleClose = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+const MastodonModalForm: FC<Props> = ({ onClose, open, ticker }) => {
+  const handleClose = () => {
+    onClose()
+  }
 
   return (
-    <Modal
-      closeIcon
-      onClose={handleClose}
-      onOpen={handleOpen}
-      open={open}
-      trigger={trigger}
-    >
-      <Modal.Header>Configure Mastodon</Modal.Header>
-      <Modal.Content>
+    <Dialog open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Configure Mastodon
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
         <MastodonForm callback={handleClose} ticker={ticker} />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            color="green"
-            content="Save"
-            form="configureMastodon"
-            type="submit"
-          />
-          <Button.Or />
-          <Button
-            color="red"
-            content="Close"
-            onClick={handleClose}
-            type="button"
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color="secondary"
+          form="configureMastodon"
+          type="submit"
+          variant="contained"
+        >
+          Save
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/components/ticker/TelegramCard.tsx b/src/components/ticker/TelegramCard.tsx
index f82f21c5..b023e5f4 100644
--- a/src/components/ticker/TelegramCard.tsx
+++ b/src/components/ticker/TelegramCard.tsx
@@ -1,8 +1,17 @@
 import { faTelegram } from '@fortawesome/free-brands-svg-icons'
+import { faBan, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Stack,
+  Typography,
+} from '@mui/material'
 import { useQueryClient } from '@tanstack/react-query'
-import React, { FC, useCallback } from 'react'
-import { Button, Card, Container, Icon } from 'semantic-ui-react'
+import React, { FC, useCallback, useState } from 'react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 import TelegramModalForm from './TelegramModalForm'
@@ -14,6 +23,7 @@ interface Props {
 const TelegramCard: FC<Props> = ({ ticker }) => {
   const { token } = useAuth()
   const { deleteTickerTelegram, putTickerTelegram } = useTickerApi(token)
+  const [open, setOpen] = useState<boolean>(false)
   const queryClient = useQueryClient()
 
   const telegram = ticker.telegram
@@ -30,70 +40,72 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
     })
   }, [deleteTickerTelegram, queryClient, ticker])
 
-  return telegram.connected ? (
-    <Container>
-      <Card fluid>
-        <Card.Content>
-          <Card.Header>
-            <Icon color="green" name="toggle on" />
-            {telegram.channel_name}
-          </Card.Header>
-          <Card.Meta>Bot: {telegram.bot_username}</Card.Meta>
-        </Card.Content>
-        <Card.Content extra>
-          <Button.Group compact size="tiny">
-            {telegram.active ? (
-              <Button
-                color="yellow"
-                content="Disable"
-                icon="pause"
-                onClick={handleToggle}
-              />
-            ) : (
-              <Button
-                color="green"
-                content="Enable"
-                icon="play"
-                onClick={handleToggle}
-              />
-            )}
+  return (
+    <Card>
+      <CardContent>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          <Typography component="h5" variant="h5">
+            <FontAwesomeIcon icon={faTelegram} /> Telegram
+          </Typography>
+          <Button onClick={() => setOpen(true)} size="small" variant="outlined">
+            Configure
+          </Button>
+        </Stack>
+        {telegram.connected ? (
+          <Box>
+            <Typography variant="body2">
+              You are connected to Telegram.
+            </Typography>
+            <Typography variant="body2">
+              Your Channel: {telegram.channel_name}
+            </Typography>
+            <Typography variant="body2">
+              Bot: {telegram.bot_username}
+            </Typography>
+          </Box>
+        ) : (
+          <>
+            You are currently not connected to Telegram. New messages will not
+            be published to your channel and old messages can not be deleted
+            anymore.
+          </>
+        )}
+      </CardContent>
+      {telegram.connected ? (
+        <CardActions>
+          {telegram.active ? (
             <Button
-              color="red"
-              content="Disconnect"
-              icon="delete"
-              onClick={handleDisconnect}
-            />
-          </Button.Group>
-        </Card.Content>
-      </Card>
-    </Container>
-  ) : (
-    <Container>
-      <Card fluid>
-        <Card.Content>
-          You are currently not connected to Telegram. New messages will not be
-          published to your channel and old messages can not be deleted anymore.
-        </Card.Content>
-        <Card.Content extra>
-          <TelegramModalForm
-            ticker={ticker}
-            trigger={
-              <Button
-                color="blue"
-                compact
-                content="Configure"
-                icon={
-                  <Icon>
-                    <FontAwesomeIcon icon={faTelegram} />
-                  </Icon>
-                }
-                size="tiny"
-              />
-            }
-          />
-        </Card.Content>
-      </Card>
-    </Container>
+              onClick={handleToggle}
+              startIcon={<FontAwesomeIcon icon={faPause} />}
+            >
+              Disable
+            </Button>
+          ) : (
+            <Button
+              onClick={handleToggle}
+              startIcon={<FontAwesomeIcon icon={faPlay} />}
+            >
+              Enable
+            </Button>
+          )}
+          <Button
+            onClick={handleDisconnect}
+            startIcon={<FontAwesomeIcon icon={faBan} />}
+          >
+            Disconnect
+          </Button>
+        </CardActions>
+      ) : null}
+      <TelegramModalForm
+        onClose={() => setOpen(false)}
+        open={open}
+        ticker={ticker}
+      />
+    </Card>
   )
 }
 
diff --git a/src/components/ticker/TelegramForm.tsx b/src/components/ticker/TelegramForm.tsx
index fcea7fed..d4999de1 100644
--- a/src/components/ticker/TelegramForm.tsx
+++ b/src/components/ticker/TelegramForm.tsx
@@ -1,20 +1,16 @@
-import React, {
-  ChangeEvent,
-  FC,
-  FormEvent,
-  useCallback,
-  useEffect,
-} from 'react'
+import React, { FC } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
-import {
-  CheckboxProps,
-  Form,
-  InputOnChangeData,
-  Message,
-} from 'semantic-ui-react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
+import {
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  Grid,
+  TextField,
+  Typography,
+} from '@mui/material'
 
 interface Props {
   callback: () => void
@@ -30,12 +26,7 @@ const TelegramForm: FC<Props> = ({ callback, ticker }) => {
   const telegram = ticker.telegram
   const { token } = useAuth()
   const { putTickerTelegram } = useTickerApi(token)
-  const {
-    formState: { errors },
-    handleSubmit,
-    register,
-    setValue,
-  } = useForm<FormValues>({
+  const { handleSubmit, register } = useForm<FormValues>({
     defaultValues: {
       active: telegram.active,
       channel_name: telegram.channel_name,
@@ -43,26 +34,6 @@ const TelegramForm: FC<Props> = ({ callback, ticker }) => {
   })
   const queryClient = useQueryClient()
 
-  useEffect(() => {
-    register('channel_name', {
-      pattern: { value: /@\w+/i, message: 'The Channel must start with an @' },
-    })
-  }, [register])
-
-  const onChange = useCallback(
-    (
-      e: ChangeEvent | FormEvent,
-      { name, value, checked }: InputOnChangeData | CheckboxProps
-    ) => {
-      if (checked !== undefined) {
-        setValue(name, checked)
-      } else {
-        setValue(name, value)
-      }
-    },
-    [setValue]
-  )
-
   const onSubmit: SubmitHandler<FormValues> = data => {
     putTickerTelegram(data, ticker).finally(() => {
       queryClient.invalidateQueries(['ticker', ticker.id])
@@ -71,34 +42,44 @@ const TelegramForm: FC<Props> = ({ callback, ticker }) => {
   }
 
   return (
-    <Form id="configureTelegram" onSubmit={handleSubmit(onSubmit)}>
-      <Message info size="small">
-        <Message.Header>Information</Message.Header>
-        <Message.Content>
-          Only public Telegram Channels are supported. The name of the Channel
-          is prefixed with an @ (e.g. @channel).
-        </Message.Content>
-      </Message>
-      <Form.Checkbox
-        defaultChecked={telegram.active}
-        label="Active"
-        name="active"
-        onChange={onChange}
-        toggle
-      />
-      <Form.Input
-        defaultValue={telegram.channel_name}
-        error={
-          errors?.channel_name?.message
-            ? { content: errors?.channel_name?.message, pointer: 'bottom' }
-            : null
-        }
-        label="Channel"
-        name="channel_name"
-        onChange={onChange}
-        required
-      />
-    </Form>
+    <form id="configureTelegram" onSubmit={handleSubmit(onSubmit)}>
+      <Grid columnSpacing={{ xs: 1, sm: 2, md: 3 }} container rowSpacing={1}>
+        <Grid item xs={12}>
+          <Typography>
+            Only public Telegram Channels are supported. The name of the Channel
+            is prefixed with an @ (e.g. @channel).
+          </Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  {...register('active')}
+                  defaultChecked={ticker.telegram.active}
+                />
+              }
+              label="Active"
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item xs={12}>
+          <FormGroup>
+            <TextField
+              {...register('channel_name', {
+                pattern: {
+                  value: /@\w+/i,
+                  message: 'The Channel must start with an @',
+                },
+              })}
+              defaultValue={telegram.channel_name}
+              label="Channel"
+              required
+            />
+          </FormGroup>
+        </Grid>
+      </Grid>
+    </form>
   )
 }
 
diff --git a/src/components/ticker/TelegramModalForm.tsx b/src/components/ticker/TelegramModalForm.tsx
index 1f8d30cc..a84043b3 100644
--- a/src/components/ticker/TelegramModalForm.tsx
+++ b/src/components/ticker/TelegramModalForm.tsx
@@ -1,54 +1,59 @@
-import React, { FC, useCallback, useState } from 'react'
-import { Button, Modal } from 'semantic-ui-react'
+import React, { FC } from 'react'
+import { Close } from '@mui/icons-material'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
 import { Ticker } from '../../api/Ticker'
 import TelegramForm from './TelegramForm'
 
 interface Props {
+  onClose: () => void
+  open: boolean
   ticker: Ticker
-  trigger: React.ReactNode
 }
 
-const TelegramModalForm: FC<Props> = ({ ticker, trigger }) => {
-  const [open, setOpen] = useState<boolean>(false)
-
-  const handleClose = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+const TelegramModalForm: FC<Props> = ({ onClose, open, ticker }) => {
+  const handleClose = () => {
+    onClose()
+  }
 
   return (
-    <Modal
-      closeIcon
-      onClose={handleClose}
-      onOpen={handleOpen}
-      open={open}
-      trigger={trigger}
-    >
-      <Modal.Header>Configure Telegram</Modal.Header>
-      <Modal.Content>
+    <Dialog open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Configure Telegram
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
         <TelegramForm callback={handleClose} ticker={ticker} />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            color="green"
-            content="Save"
-            form="configureTelegram"
-            type="submit"
-          />
-          <Button.Or />
-          <Button
-            color="red"
-            content="Close"
-            onClick={handleClose}
-            type="button"
-          />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color="secondary"
+          form="configureTelegram"
+          type="submit"
+          variant="contained"
+        >
+          Save
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/components/ticker/TickerForm.tsx b/src/components/ticker/TickerForm.tsx
index d58fef90..455a57ba 100644
--- a/src/components/ticker/TickerForm.tsx
+++ b/src/components/ticker/TickerForm.tsx
@@ -8,6 +8,7 @@ import { MapContainer, Marker, TileLayer } from 'react-leaflet'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   Alert,
+  Box,
   Button,
   Checkbox,
   FormControlLabel,
@@ -17,6 +18,7 @@ import {
   Stack,
   TextField,
   Typography,
+  useTheme,
 } from '@mui/material'
 import {
   faComputerMouse,
@@ -78,6 +80,7 @@ const TickerForm: FC<Props> = ({ callback, id, ticker }) => {
   const { token } = useAuth()
   const { postTicker, putTicker } = useTickerApi(token)
   const queryClient = useQueryClient()
+  const theme = useTheme()
 
   const onLocationChange = useCallback(
     (result: Result) => {
@@ -307,6 +310,22 @@ const TickerForm: FC<Props> = ({ callback, id, ticker }) => {
           </Grid>
         ) : null}
       </Grid>
+      <Grid item textAlign="right" xs={12}>
+        <Box sx={{ pt: theme.spacing(2) }}>
+          <Button
+            color="primary"
+            form="tickerForm"
+            sx={{ mr: theme.spacing(1) }}
+            type="submit"
+            variant="contained"
+          >
+            Save
+          </Button>
+          <Button color="secondary" onClick={() => callback()}>
+            Close
+          </Button>
+        </Box>
+      </Grid>
     </form>
   )
 }
diff --git a/src/components/ticker/TickerModalForm.tsx b/src/components/ticker/TickerModalForm.tsx
index 0892fa18..3a795cf4 100644
--- a/src/components/ticker/TickerModalForm.tsx
+++ b/src/components/ticker/TickerModalForm.tsx
@@ -1,16 +1,18 @@
 import { Close } from '@mui/icons-material'
 import {
-  Button,
   Dialog,
-  DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
   Stack,
+  Tab,
+  Tabs,
 } from '@mui/material'
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
 import { Ticker } from '../../api/Ticker'
+import TabPanel from '../common/TabPanel'
 import TickerForm from './TickerForm'
+import TickerSocialConnections from './TickerSocialConnections'
 
 interface Props {
   onClose: () => void
@@ -19,10 +21,16 @@ interface Props {
 }
 
 const TickerModalForm: FC<Props> = ({ onClose, open, ticker }) => {
+  const [tabValue, setTabValue] = useState<number>(0)
+
   const handleClose = () => {
     onClose()
   }
 
+  const handleTabChange = (e: React.SyntheticEvent, value: number) => {
+    setTabValue(value)
+  }
+
   return (
     <Dialog fullWidth maxWidth="md" open={open}>
       <DialogTitle>
@@ -31,28 +39,26 @@ const TickerModalForm: FC<Props> = ({ onClose, open, ticker }) => {
           direction="row"
           justifyContent="space-between"
         >
-          {ticker ? 'Update Ticker' : 'Create Ticker'}
+          {ticker ? 'Configure Ticker' : 'Create Ticker'}
           <IconButton onClick={handleClose}>
             <Close />
           </IconButton>
         </Stack>
       </DialogTitle>
       <DialogContent>
-        <TickerForm callback={handleClose} id="tickerForm" ticker={ticker} />
+        <Tabs onChange={handleTabChange} value={tabValue}>
+          <Tab label="General" />
+          <Tab label="Social Connections" />
+        </Tabs>
+        <TabPanel index={0} value={tabValue}>
+          <TickerForm callback={handleClose} id="tickerForm" ticker={ticker} />
+        </TabPanel>
+        {ticker ? (
+          <TabPanel index={1} value={tabValue}>
+            <TickerSocialConnections ticker={ticker} />
+          </TabPanel>
+        ) : null}
       </DialogContent>
-      <DialogActions>
-        <Button
-          color="primary"
-          form="tickerForm"
-          type="submit"
-          variant="contained"
-        >
-          Save
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
     </Dialog>
   )
 }
diff --git a/src/components/ticker/TickerSocialConnections.tsx b/src/components/ticker/TickerSocialConnections.tsx
new file mode 100644
index 00000000..a32d38af
--- /dev/null
+++ b/src/components/ticker/TickerSocialConnections.tsx
@@ -0,0 +1,28 @@
+import { Grid } from '@mui/material'
+import React, { FC } from 'react'
+import { Ticker } from '../../api/Ticker'
+import MastodonCard from './MastodonCard'
+import TelegramCard from './TelegramCard'
+import TwitterCard from './TwitterCard'
+
+interface Props {
+  ticker: Ticker
+}
+
+const TickerSocialConnections: FC<Props> = ({ ticker }) => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item md={6} xs={12}>
+        <MastodonCard ticker={ticker} />
+      </Grid>
+      <Grid item md={6} xs={12}>
+        <TwitterCard ticker={ticker} />
+      </Grid>
+      <Grid item md={6} xs={12}>
+        <TelegramCard ticker={ticker} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default TickerSocialConnections
diff --git a/src/components/ticker/TwitterCard.tsx b/src/components/ticker/TwitterCard.tsx
index 0797e1f6..5cbfe590 100644
--- a/src/components/ticker/TwitterCard.tsx
+++ b/src/components/ticker/TwitterCard.tsx
@@ -1,12 +1,22 @@
 import React, { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import TwitterLogin from 'react-twitter-auth'
-import { Button, Card, Container, Icon, Image } from 'semantic-ui-react'
 import { ApiUrl } from '../../api/Api'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTwitter } from '@fortawesome/free-brands-svg-icons'
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Icon,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { faBan, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
 
 interface Props {
   ticker: Ticker
@@ -18,9 +28,9 @@ interface TwitterAuthResponseData {
 }
 
 const TwitterCard: FC<Props> = ({ ticker }) => {
-  const queryClient = useQueryClient()
   const { token } = useAuth()
   const { deleteTickerTwitter, putTickerTwitter } = useTickerApi(token)
+  const queryClient = useQueryClient()
 
   const twitter = ticker.twitter || {}
   const requestTokenUrl = `${ApiUrl}/admin/auth/twitter/request_token?callback=${encodeURI(
@@ -62,83 +72,82 @@ const TwitterCard: FC<Props> = ({ ticker }) => {
     alert(error)
   }, [])
 
-  return twitter.connected ? (
-    <Container>
-      <Card fluid>
-        <Card.Content>
-          {twitter.image_url != '' && (
-            <Image floated="right" size="mini" src={twitter.image_url} />
-          )}
-          <Card.Header>
-            <Icon
-              color={twitter.active ? 'green' : 'red'}
-              name={twitter.active ? 'toggle on' : 'toggle off'}
-            />
-            {twitter.name}
-          </Card.Header>
-          <Card.Meta>
-            <a
-              href={'https://twitter.com/' + twitter.screen_name}
-              rel="noopener noreferrer"
-              target="_blank"
+  return (
+    <Card>
+      <CardContent>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          <Typography component="h5" variant="h5">
+            <FontAwesomeIcon icon={faTwitter} /> Twitter
+          </Typography>
+          {twitter.connected === false ? (
+            //TODO: Reimplement and remove the dependency
+            <TwitterLogin
+              // @ts-ignore
+              loginUrl={loginUrl}
+              onFailure={alertError}
+              onSuccess={handleConnect}
+              requestTokenUrl={requestTokenUrl}
+              showIcon={false}
+              text="Connect"
             >
-              @{twitter.screen_name}
-            </a>
-          </Card.Meta>
-          <Card.Description>{twitter.description}</Card.Description>
-        </Card.Content>
-        <Card.Content extra>
-          <Button.Group compact size="tiny">
-            {twitter.active ? (
-              <Button
-                color="yellow"
-                content="Disable"
-                icon="pause"
-                onClick={handleToggle}
-              />
-            ) : (
-              <Button
-                color="green"
-                content="Enable"
-                icon="play"
-                onClick={handleToggle}
-              />
-            )}
+              <Icon>
+                <FontAwesomeIcon icon={faTwitter} />
+              </Icon>
+              Connect
+            </TwitterLogin>
+          ) : null}
+        </Stack>
+        {twitter.connected ? (
+          <Box>
+            <Typography>
+              <a
+                href={'https://twitter.com/' + twitter.screen_name}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                @{twitter.screen_name}
+              </a>
+            </Typography>
+            <Typography>{twitter.description}</Typography>
+          </Box>
+        ) : (
+          <>
+            You are currently not connected to Twitter. New messages will not be
+            published to your account and old messages can not be deleted
+            anymore.
+          </>
+        )}
+      </CardContent>
+      {twitter.connected ? (
+        <CardActions>
+          {twitter.active ? (
             <Button
-              color="red"
-              content="Disconnect"
-              icon="delete"
-              onClick={handleDisconnect}
-            />
-          </Button.Group>
-        </Card.Content>
-      </Card>
-    </Container>
-  ) : (
-    <Container>
-      <Card fluid>
-        <Card.Content>
-          You are currently not connected to Twitter. New messages will not be
-          published to your account and old messages can not be deleted anymore.
-        </Card.Content>
-        <Card.Content extra>
-          <TwitterLogin
-            // @ts-ignore
-            className="ui button blue tiny compact"
-            loginUrl={loginUrl}
-            onFailure={alertError}
-            onSuccess={handleConnect}
-            requestTokenUrl={requestTokenUrl}
-            showIcon={false}
+              onClick={handleToggle}
+              startIcon={<FontAwesomeIcon icon={faPause} />}
+            >
+              Disable
+            </Button>
+          ) : (
+            <Button
+              onClick={handleToggle}
+              startIcon={<FontAwesomeIcon icon={faPlay} />}
+            >
+              Enable
+            </Button>
+          )}
+          <Button
+            onClick={handleDisconnect}
+            startIcon={<FontAwesomeIcon icon={faBan} />}
           >
-            <Icon>
-              <FontAwesomeIcon icon={faTwitter} />
-            </Icon>
-            Connect
-          </TwitterLogin>
-        </Card.Content>
-      </Card>
-    </Container>
+            Disconnect
+          </Button>
+        </CardActions>
+      ) : null}
+    </Card>
   )
 }
 

From 61730136e863ff8d0bbe7e37a1996e1f544d2ba6 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Fri, 20 Jan 2023 21:53:16 -0800
Subject: [PATCH 19/31] =?UTF-8?q?=F0=9F=92=84=20Remove=20some=20references?=
 =?UTF-8?q?=20for=20semantic-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/settings/RefreshIntervalForm.tsx | 3 +--
 src/views/NotFoundView.tsx                      | 4 ++--
 src/views/TickerView.tsx                        | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/settings/RefreshIntervalForm.tsx b/src/components/settings/RefreshIntervalForm.tsx
index 9206da0a..53b422eb 100644
--- a/src/components/settings/RefreshIntervalForm.tsx
+++ b/src/components/settings/RefreshIntervalForm.tsx
@@ -3,8 +3,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { useQueryClient } from '@tanstack/react-query'
 import { Setting, useSettingsApi } from '../../api/Settings'
 import useAuth from '../useAuth'
-import { FormGroup, TextField } from '@mui/material'
-import { Grid } from 'semantic-ui-react'
+import { FormGroup, Grid, TextField } from '@mui/material'
 
 interface Props {
   name: string
diff --git a/src/views/NotFoundView.tsx b/src/views/NotFoundView.tsx
index bd827c02..45390921 100644
--- a/src/views/NotFoundView.tsx
+++ b/src/views/NotFoundView.tsx
@@ -1,11 +1,11 @@
+import { Alert } from '@mui/material'
 import React, { FC } from 'react'
-import { Message } from 'semantic-ui-react'
 import Layout from './Layout'
 
 const NotFoundView: FC = () => {
   return (
     <Layout>
-      <Message>Not Found</Message>
+      <Alert severity="error">Not found</Alert>
     </Layout>
   )
 }
diff --git a/src/views/TickerView.tsx b/src/views/TickerView.tsx
index d8dfbcf7..ade0c0e6 100644
--- a/src/views/TickerView.tsx
+++ b/src/views/TickerView.tsx
@@ -1,5 +1,4 @@
 import React, { FC } from 'react'
-import { Loader } from 'semantic-ui-react'
 import { useTickerApi } from '../api/Ticker'
 import { useQuery } from '@tanstack/react-query'
 import { useParams } from 'react-router-dom'
@@ -7,6 +6,7 @@ import useAuth from '../components/useAuth'
 import Ticker from '../components/ticker/Ticker'
 import Layout from './Layout'
 import ErrorView from './ErrorView'
+import Loader from '../components/Loader'
 
 interface TickerViewParams {
   tickerId: string
@@ -23,7 +23,7 @@ const TickerView: FC = () => {
   )
 
   if (isLoading) {
-    return <Loader size="large" />
+    return <Loader />
   }
 
   if (error || data === undefined || data.status === 'error') {

From 5afda6b710dd5a7cb84a87a757ab5ea709963b1d Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Fri, 20 Jan 2023 21:53:50 -0800
Subject: [PATCH 20/31] =?UTF-8?q?=F0=9F=92=84=20Use=20MUI=20for=20TickerUs?=
 =?UTF-8?q?erCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/Ticker.tsx              |  4 +
 src/components/ticker/TickerAddUserForm.tsx   | 89 ++++++++++++++++++
 src/components/ticker/TickerAddUserModal.tsx  | 60 ++++++++++++
 .../ticker/TickerDangerZoneCard.tsx           |  4 +-
 src/components/ticker/TickerUserAddForm.tsx   | 93 -------------------
 src/components/ticker/TickerUserCard.tsx      | 60 ------------
 src/components/ticker/TickerUserList.tsx      | 20 ++--
 src/components/ticker/TickerUserListItem.tsx  | 46 ++++-----
 src/components/ticker/TickerUserModalAdd.tsx  | 58 ------------
 .../ticker/TickerUserModalDelete.tsx          | 69 +++++++++-----
 src/components/ticker/TickerUsersCard.tsx     | 71 ++++++++++++++
 11 files changed, 304 insertions(+), 270 deletions(-)
 create mode 100644 src/components/ticker/TickerAddUserForm.tsx
 create mode 100644 src/components/ticker/TickerAddUserModal.tsx
 delete mode 100644 src/components/ticker/TickerUserAddForm.tsx
 delete mode 100644 src/components/ticker/TickerUserCard.tsx
 delete mode 100644 src/components/ticker/TickerUserModalAdd.tsx
 create mode 100644 src/components/ticker/TickerUsersCard.tsx

diff --git a/src/components/ticker/Ticker.tsx b/src/components/ticker/Ticker.tsx
index a63bb83c..5b2a8970 100644
--- a/src/components/ticker/Ticker.tsx
+++ b/src/components/ticker/Ticker.tsx
@@ -16,6 +16,7 @@ import {
 } from '@mui/material'
 import TickerModalForm from './TickerModalForm'
 import TickerDangerZoneCard from './TickerDangerZoneCard'
+import TickerUsersCard from './TickerUsersCard'
 
 interface Props {
   ticker: Model
@@ -62,6 +63,9 @@ const Ticker: FC<Props> = ({ ticker }) => {
         xs={12}
       >
         <TickerCard ticker={ticker} />
+        <Box sx={{ mt: 2 }}>
+          <TickerUsersCard ticker={ticker} />
+        </Box>
         <Box sx={{ mt: 2 }}>
           <TickerDangerZoneCard ticker={ticker} />
         </Box>
diff --git a/src/components/ticker/TickerAddUserForm.tsx b/src/components/ticker/TickerAddUserForm.tsx
new file mode 100644
index 00000000..da4d6d33
--- /dev/null
+++ b/src/components/ticker/TickerAddUserForm.tsx
@@ -0,0 +1,89 @@
+import React, { FC } from 'react'
+import { Controller, SubmitHandler, useForm } from 'react-hook-form'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { Ticker, useTickerApi } from '../../api/Ticker'
+import { User, useUserApi } from '../../api/User'
+import useAuth from '../useAuth'
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'
+
+interface Props {
+  ticker: Ticker
+  onSubmit: () => void
+  users: User[]
+}
+
+interface Option {
+  key: number
+  text: string
+  value: number
+}
+
+interface FormValues {
+  users: Array<number>
+}
+
+const TickerAddUserForm: FC<Props> = ({ onSubmit, ticker, users }) => {
+  const { token } = useAuth()
+  const { getUsers } = useUserApi(token)
+  const { putTickerUsers } = useTickerApi(token)
+  const { isLoading, data, error } = useQuery(
+    ['tickerUsersAvailable'],
+    getUsers
+  )
+  const { control, handleSubmit } = useForm<FormValues>()
+  const queryClient = useQueryClient()
+
+  const updateTickerUsers: SubmitHandler<FormValues> = data => {
+    putTickerUsers(ticker, data.users).then(() => {
+      queryClient.invalidateQueries(['tickerUsers', ticker.id])
+      onSubmit()
+    })
+  }
+
+  if (isLoading) {
+    return <>Loading</>
+  }
+
+  if (error || data === undefined) {
+    return <>error</>
+  }
+
+  const options: Array<Option> = data.data.users
+    .filter(user => {
+      return !user.is_super_admin
+    })
+    .map(user => {
+      return { key: user.id, text: user.email, value: user.id }
+    })
+
+  const value: number[] =
+    users !== null
+      ? users.map(user => {
+          return user.id
+        })
+      : []
+
+  return (
+    <form id="tickerUsersForm" onSubmit={handleSubmit(updateTickerUsers)}>
+      <FormControl sx={{ m: 1, width: 300 }}>
+        <InputLabel id="users">Users</InputLabel>
+        <Controller
+          control={control}
+          defaultValue={value}
+          name="users"
+          render={({ field }) => (
+            <Select {...field} label="Users" multiple>
+              {options.map(option => (
+                <MenuItem key={option.key} value={option.value}>
+                  {option.text}
+                </MenuItem>
+              ))}
+            </Select>
+          )}
+        />
+      </FormControl>
+    </form>
+  )
+}
+
+export default TickerAddUserForm
diff --git a/src/components/ticker/TickerAddUserModal.tsx b/src/components/ticker/TickerAddUserModal.tsx
new file mode 100644
index 00000000..ac0121c9
--- /dev/null
+++ b/src/components/ticker/TickerAddUserModal.tsx
@@ -0,0 +1,60 @@
+import { Close } from '@mui/icons-material'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
+import React, { FC } from 'react'
+import { Ticker } from '../../api/Ticker'
+import { User } from '../../api/User'
+import TickerAddUserForm from './TickerAddUserForm'
+
+interface Props {
+  onClose: () => void
+  open: boolean
+  ticker: Ticker
+  users: User[]
+}
+
+const TickerAddUserModal: FC<Props> = ({ onClose, open, ticker, users }) => {
+  const handleClose = () => {
+    onClose()
+  }
+
+  return (
+    <Dialog open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Add Users
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        <TickerAddUserForm
+          onSubmit={handleClose}
+          ticker={ticker}
+          users={users}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button form="tickerUsersForm" type="submit">
+          Add
+        </Button>
+
+        <Button onClick={handleClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default TickerAddUserModal
diff --git a/src/components/ticker/TickerDangerZoneCard.tsx b/src/components/ticker/TickerDangerZoneCard.tsx
index ea3a4efb..bbea9d8d 100644
--- a/src/components/ticker/TickerDangerZoneCard.tsx
+++ b/src/components/ticker/TickerDangerZoneCard.tsx
@@ -16,10 +16,10 @@ const TickerDangerZoneCard: FC<Props> = ({ ticker }) => {
   return user?.roles.includes('admin') ? (
     <Card>
       <CardContent>
-        <Typography component="h5" variant="h5">
+        <Typography component="h5" sx={{ mb: 2 }} variant="h5">
           <FontAwesomeIcon icon={faBiohazard} /> Danger Zone
         </Typography>
-        <Box sx={{ mt: 2 }}>
+        <Box>
           <Button
             color="error"
             onClick={() => setResetOpen(true)}
diff --git a/src/components/ticker/TickerUserAddForm.tsx b/src/components/ticker/TickerUserAddForm.tsx
deleted file mode 100644
index 744b774b..00000000
--- a/src/components/ticker/TickerUserAddForm.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { FC, useCallback, useEffect } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Dropdown, DropdownProps, Form } from 'semantic-ui-react'
-import { Ticker, useTickerApi } from '../../api/Ticker'
-import { User, useUserApi } from '../../api/User'
-import useAuth from '../useAuth'
-
-interface Props {
-  ticker: Ticker
-  callback: () => void
-  users: User[] | null
-}
-
-interface Option {
-  key: number
-  text: string
-  value: number
-}
-
-interface FormValues {
-  users: Array<number>
-}
-
-const TickerUserAddForm: FC<Props> = props => {
-  const { token } = useAuth()
-  const { getUsers } = useUserApi(token)
-  const { putTickerUsers } = useTickerApi(token)
-  const { isLoading, data, error } = useQuery(
-    ['tickerUsersAvailable'],
-    getUsers
-  )
-  const { handleSubmit, register, setValue } = useForm<FormValues>()
-  const queryClient = useQueryClient()
-
-  const onSubmit: SubmitHandler<FormValues> = data => {
-    putTickerUsers(props.ticker, data.users).then(() => {
-      queryClient.invalidateQueries(['tickerUsers', props.ticker.id])
-      props.callback()
-    })
-  }
-
-  const handleChange = useCallback(
-    (event: React.SyntheticEvent, data: DropdownProps) => {
-      // @ts-ignore
-      setValue('users', data.value)
-    },
-    [setValue]
-  )
-
-  useEffect(() => {
-    register('users')
-  })
-
-  if (isLoading) {
-    return <>Loading</>
-  }
-
-  if (error || data === undefined) {
-    return <>error</>
-  }
-
-  const options: Array<Option> = data.data.users
-    .filter(user => {
-      return !user.is_super_admin
-    })
-    .map(user => {
-      return { key: user.id, text: user.email, value: user.id }
-    })
-
-  const value: number[] =
-    props.users !== null
-      ? props.users.map(user => {
-          return user.id
-        })
-      : []
-
-  return (
-    <Form id="tickerUsersForm" onSubmit={handleSubmit(onSubmit)}>
-      <Dropdown
-        defaultValue={value}
-        fluid
-        multiple
-        name="users"
-        onChange={handleChange}
-        options={options}
-        selection
-      />
-    </Form>
-  )
-}
-
-export default TickerUserAddForm
diff --git a/src/components/ticker/TickerUserCard.tsx b/src/components/ticker/TickerUserCard.tsx
deleted file mode 100644
index 8fea888a..00000000
--- a/src/components/ticker/TickerUserCard.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { FC } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { Button, Card, Dimmer, Loader } from 'semantic-ui-react'
-import { Ticker, useTickerApi } from '../../api/Ticker'
-import TickerUserList from './TickerUserList'
-import TickerUserModalAdd from './TickerUserModalAdd'
-import useAuth from '../useAuth'
-
-interface Props {
-  ticker: Ticker
-}
-
-const TickerUsersCard: FC<Props> = props => {
-  const { token } = useAuth()
-  const { getTickerUsers } = useTickerApi(token)
-  const { isLoading, error, data } = useQuery(
-    ['tickerUsers', props.ticker.id],
-    () => {
-      return getTickerUsers(props.ticker)
-    }
-  )
-
-  if (isLoading) {
-    return (
-      <Dimmer active inverted>
-        <Loader inverted>Loading</Loader>
-      </Dimmer>
-    )
-  }
-
-  if (error || data === undefined) {
-    //TODO: Generic Error View
-    return <React.Fragment>Error occured</React.Fragment>
-  }
-
-  const users = data.data.users
-
-  return (
-    <Card fluid>
-      <Card.Content>
-        List of all granted users to this ticker. Only Admins can manage this
-        list.
-      </Card.Content>
-      <Card.Content>
-        <TickerUserList ticker={props.ticker} users={users} />
-      </Card.Content>
-      <Card.Content extra>
-        <TickerUserModalAdd
-          ticker={props.ticker}
-          trigger={
-            <Button color="teal" compact content="Add" icon="add" size="tiny" />
-          }
-          users={users}
-        />
-      </Card.Content>
-    </Card>
-  )
-}
-
-export default TickerUsersCard
diff --git a/src/components/ticker/TickerUserList.tsx b/src/components/ticker/TickerUserList.tsx
index 9208a7ba..90fff4af 100644
--- a/src/components/ticker/TickerUserList.tsx
+++ b/src/components/ticker/TickerUserList.tsx
@@ -1,29 +1,29 @@
+import { MenuList, Typography } from '@mui/material'
 import React, { FC } from 'react'
-import { List } from 'semantic-ui-react'
 import { Ticker } from '../../api/Ticker'
 import { User } from '../../api/User'
 import TickerUsersListItem from './TickerUserListItem'
 
 interface Props {
   ticker: Ticker
-  users: User[] | null
+  users: User[]
 }
 
-const TickerUserList: FC<Props> = props => {
-  if (props.users === null || props.users.length === 0) {
+const TickerUserList: FC<Props> = ({ ticker, users }) => {
+  if (users.length === 0) {
     return (
-      <React.Fragment>
+      <Typography variant="body2">
         There are no users granted access this ticker.
-      </React.Fragment>
+      </Typography>
     )
   }
 
   return (
-    <List divided relaxed verticalAlign="middle">
-      {props.users.map(user => (
-        <TickerUsersListItem key={user.id} ticker={props.ticker} user={user} />
+    <MenuList>
+      {users.map(user => (
+        <TickerUsersListItem key={user.id} ticker={ticker} user={user} />
       ))}
-    </List>
+    </MenuList>
   )
 }
 
diff --git a/src/components/ticker/TickerUserListItem.tsx b/src/components/ticker/TickerUserListItem.tsx
index 5177058e..b067ed36 100644
--- a/src/components/ticker/TickerUserListItem.tsx
+++ b/src/components/ticker/TickerUserListItem.tsx
@@ -1,7 +1,10 @@
-import React, { FC } from 'react'
-import { Button, List } from 'semantic-ui-react'
+import React, { FC, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconButton, ListItem, ListItemIcon, ListItemText } from '@mui/material'
 import { Ticker } from '../../api/Ticker'
 import { User } from '../../api/User'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { Close } from '@mui/icons-material'
 import TickerUserModalDelete from './TickerUserModalDelete'
 
 interface Props {
@@ -9,28 +12,25 @@ interface Props {
   user: User
 }
 
-const TickerUsersListItem: FC<Props> = props => {
+const TickerUsersListItem: FC<Props> = ({ ticker, user }) => {
+  const [deleteOpen, setDeleteOpen] = useState<boolean>(false)
+
   return (
-    <List.Item key={props.user.id}>
-      <List.Content floated="right">
-        <TickerUserModalDelete
-          ticker={props.ticker}
-          trigger={
-            <Button
-              basic
-              color="red"
-              compact
-              content="Remove"
-              icon="delete"
-              size="tiny"
-            />
-          }
-          user={props.user}
-        />
-      </List.Content>
-      <List.Icon name="user" size="large" verticalAlign="middle" />
-      <List.Content>{props.user.email}</List.Content>
-    </List.Item>
+    <ListItem disableGutters disablePadding>
+      <ListItemIcon>
+        <FontAwesomeIcon icon={faUser} />
+      </ListItemIcon>
+      <ListItemText>{user.email}</ListItemText>
+      <IconButton onClick={() => setDeleteOpen(true)}>
+        <Close />
+      </IconButton>
+      <TickerUserModalDelete
+        onClose={() => setDeleteOpen(false)}
+        open={deleteOpen}
+        ticker={ticker}
+        user={user}
+      />
+    </ListItem>
   )
 }
 
diff --git a/src/components/ticker/TickerUserModalAdd.tsx b/src/components/ticker/TickerUserModalAdd.tsx
deleted file mode 100644
index 92a498d3..00000000
--- a/src/components/ticker/TickerUserModalAdd.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { FC, useCallback, useState } from 'react'
-import { Button, Modal } from 'semantic-ui-react'
-import { Ticker } from '../../api/Ticker'
-import { User } from '../../api/User'
-import TickerUserAddForm from './TickerUserAddForm'
-
-interface Props {
-  ticker: Ticker
-  trigger: React.ReactNode
-  users: User[]
-}
-
-const TickerUserModalAdd: FC<Props> = props => {
-  const [open, setOpen] = useState<boolean>(false)
-
-  const handleClose = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
-
-  return (
-    <Modal
-      closeIcon
-      dimmer
-      onClose={handleClose}
-      onOpen={handleOpen}
-      open={open}
-      size="small"
-      trigger={props.trigger}
-    >
-      <Modal.Header>Add Users</Modal.Header>
-      <Modal.Content>
-        <TickerUserAddForm
-          callback={handleClose}
-          ticker={props.ticker}
-          users={props.users}
-        />
-      </Modal.Content>
-      <Modal.Actions>
-        <Button.Group>
-          <Button
-            color="green"
-            content="Add"
-            form="tickerUsersForm"
-            type="submit"
-          />
-          <Button.Or />
-          <Button color="red" content="Close" onClick={handleClose} />
-        </Button.Group>
-      </Modal.Actions>
-    </Modal>
-  )
-}
-
-export default TickerUserModalAdd
diff --git a/src/components/ticker/TickerUserModalDelete.tsx b/src/components/ticker/TickerUserModalDelete.tsx
index b11a11a6..76b69a78 100644
--- a/src/components/ticker/TickerUserModalDelete.tsx
+++ b/src/components/ticker/TickerUserModalDelete.tsx
@@ -1,47 +1,68 @@
-import React, { FC, useCallback, useState } from 'react'
+import React, { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { Confirm } from 'semantic-ui-react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import { User } from '../../api/User'
 import useAuth from '../useAuth'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+} from '@mui/material'
+import { Close } from '@mui/icons-material'
 
 interface Props {
   ticker: Ticker
   user: User
-  trigger: React.ReactNode
+  open: boolean
+  onClose: () => void
 }
 
-const TickerUserModalDelete: FC<Props> = ({ ticker, trigger, user }) => {
+const TickerUserModalDelete: FC<Props> = ({ open, onClose, ticker, user }) => {
   const { token } = useAuth()
   const { deleteTickerUser } = useTickerApi(token)
-  const [open, setOpen] = useState<boolean>(false)
   const queryClient = useQueryClient()
 
-  const handleCancel = useCallback(() => {
-    setOpen(false)
-  }, [])
+  const handleClose = () => {
+    onClose()
+  }
 
-  const handleConfirm = useCallback(() => {
+  const handleDelete = useCallback(() => {
     deleteTickerUser(ticker, user).finally(() => {
       queryClient.invalidateQueries(['tickerUsers', ticker.id])
-      setOpen(false)
+      onClose()
     })
-  }, [deleteTickerUser, ticker, user, queryClient])
-
-  const handleOpen = useCallback(() => {
-    setOpen(true)
-  }, [])
+  }, [deleteTickerUser, ticker, user, queryClient, onClose])
 
   return (
-    <Confirm
-      dimmer
-      onCancel={handleCancel}
-      onConfirm={handleConfirm}
-      onOpen={handleOpen}
-      open={open}
-      size="mini"
-      trigger={trigger}
-    />
+    <Dialog maxWidth="md" open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          Delete User from Ticker
+          <IconButton onClick={handleClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        Are you sure to remove <strong>{user.email}</strong> from this ticker?
+      </DialogContent>
+      <DialogActions>
+        <Button color="error" onClick={handleDelete} variant="contained">
+          Delete
+        </Button>
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
 
diff --git a/src/components/ticker/TickerUsersCard.tsx b/src/components/ticker/TickerUsersCard.tsx
new file mode 100644
index 00000000..98b3585a
--- /dev/null
+++ b/src/components/ticker/TickerUsersCard.tsx
@@ -0,0 +1,71 @@
+import React, { FC, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Ticker, useTickerApi } from '../../api/Ticker'
+import TickerUserList from './TickerUserList'
+import TickerAddUserModal from './TickerAddUserModal'
+import useAuth from '../useAuth'
+import Loader from '../Loader'
+import ErrorView from '../../views/ErrorView'
+import { Button, Card, CardContent, Typography } from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faUsers } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  ticker: Ticker
+}
+
+const TickerUsersCard: FC<Props> = ({ ticker }) => {
+  const { token } = useAuth()
+  const { getTickerUsers } = useTickerApi(token)
+  const [formOpen, setFormOpen] = useState<boolean>(false)
+  const { isLoading, error, data } = useQuery(
+    ['tickerUsers', ticker.id],
+    () => {
+      return getTickerUsers(ticker)
+    }
+  )
+
+  if (isLoading) {
+    return <Loader />
+  }
+
+  if (error || data === undefined || data.status === 'error') {
+    return (
+      <ErrorView queryKey={['tickerUsers', ticker.id]}>
+        Unable to fetch users from server.
+      </ErrorView>
+    )
+  }
+
+  const users = data.data.users
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography component="h5" sx={{ mb: 2 }} variant="h5">
+          <FontAwesomeIcon icon={faUsers} /> Users
+        </Typography>
+        <Typography variant="body2">
+          List of all granted users to this ticker. Only Admins can manage this
+          list.
+        </Typography>
+        <TickerUserList ticker={ticker} users={users} />
+        <Button
+          onClick={() => setFormOpen(true)}
+          startIcon={<FontAwesomeIcon icon={faPlus} />}
+          variant="outlined"
+        >
+          Add Users
+        </Button>
+        <TickerAddUserModal
+          onClose={() => setFormOpen(false)}
+          open={formOpen}
+          ticker={ticker}
+          users={users}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export default TickerUsersCard

From 98e84ef4fd1277faf1e23a0c9575499f892977e7 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Fri, 20 Jan 2023 21:54:03 -0800
Subject: [PATCH 21/31] =?UTF-8?q?=F0=9F=92=84=20Remove=20semantic-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |   8 +---
 yarn.lock    | 124 +++++----------------------------------------------
 2 files changed, 13 insertions(+), 119 deletions(-)

diff --git a/package.json b/package.json
index 790b47d3..ad1cd8f2 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,7 @@
   "scripts": {
     "start": "webpack serve --config webpack.dev.config.ts",
     "test": "jest",
-    "build": "webpack --config webpack.prod.config.ts",
-    "postinstall": "semantic-ui-css-patch"
+    "build": "webpack --config webpack.prod.config.ts"
   },
   "dependencies": {
     "@emotion/react": "^11.10.4",
@@ -16,7 +15,6 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.10.10",
-    "@semantic-ui-react/css-patch": "^1.1.2",
     "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-query-devtools": "^4.11.0",
     "jwt-decode": "^3.1.2",
@@ -43,9 +41,9 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@testing-library/jest-dom": "^5.16.5",
-    "@types/jest": "^29.2.1",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.1",
     "@types/jwt-decode": "^3.1.0",
     "@types/leaflet": "^1.9.0",
     "@types/leaflet-draw": "^1.0.5",
@@ -90,8 +88,6 @@
     "react-dev-utils": "^12.0.1",
     "resolve": "^1.22.1",
     "resolve-url-loader": "^5.0.0",
-    "semantic-ui-css": "^2.5.0",
-    "semantic-ui-react": "^2.1.3",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.3",
     "ts-jest": "^29.0.3",
diff --git a/yarn.lock b/yarn.lock
index 6a59c20b..590ff3cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1089,7 +1089,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -1284,21 +1284,6 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@fluentui/react-component-event-listener@~0.63.0":
-  version "0.63.1"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-component-event-listener/-/react-component-event-listener-0.63.1.tgz#c2af94893671f1d6bfe2a8a07dcfa2cb01b85f52"
-  integrity sha512-gSMdOh6tI3IJKZFqxfQwbTpskpME0CvxdxGM2tdglmf6ZPVDi0L4+KKIm+2dN8nzb8Ya1A8ZT+Ddq0KmZtwVQg==
-  dependencies:
-    "@babel/runtime" "^7.10.4"
-
-"@fluentui/react-component-ref@~0.63.0":
-  version "0.63.1"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-component-ref/-/react-component-ref-0.63.1.tgz#a7778e2a5c724d12e828afd994c93fa2da44f64e"
-  integrity sha512-8MkXX4+R3i80msdbD4rFpEB4WWq2UDvGwG386g3ckIWbekdvN9z2kWAd9OXhRGqB7QeOsoAGWocp6gAMCivRlw==
-  dependencies:
-    "@babel/runtime" "^7.10.4"
-    react-is "^16.6.3"
-
 "@fontsource/roboto@^4.5.8":
   version "4.5.8"
   resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.8.tgz#56347764786079838faf43f0eeda22dd7328437f"
@@ -1765,11 +1750,6 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
-"@popperjs/core@^2.6.0":
-  version "2.11.5"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
-  integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
-
 "@react-leaflet/core@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
@@ -1785,22 +1765,6 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27"
   integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==
 
-"@semantic-ui-react/css-patch@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@semantic-ui-react/css-patch/-/css-patch-1.1.2.tgz#e0a57367e526e97659979732023f0e1db3e4049d"
-  integrity sha512-yRv//h2+aGrOAFWp4Dv6mKDG+9KOjF1ko0tOs1Yhm42quHtMwSerMISePYb5X91U+viYKQwV8yj/6UKxFtwhVg==
-  dependencies:
-    chalk "^3.0.0"
-    log-symbols "^3.0.0"
-
-"@semantic-ui-react/event-stack@^3.1.3":
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/@semantic-ui-react/event-stack/-/event-stack-3.1.3.tgz#2862d2631d67dd846c705db2fc1ede1c468be3a1"
-  integrity sha512-FdTmJyWvJaYinHrKRsMLDrz4tTMGdFfds299Qory53hBugiDvGC0tEJf+cHsi5igDwWb/CLOgOiChInHwq8URQ==
-  dependencies:
-    exenv "^1.2.2"
-    prop-types "^15.6.2"
-
 "@sinclair/typebox@^0.24.1":
   version "0.24.44"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.44.tgz#0a0aa3bf4a155a678418527342a3ee84bd8caa5c"
@@ -3198,7 +3162,7 @@ caniuse-lite@^1.0.30001400:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz#5f1715e506e71860b4b07c50060ea6462217611e"
   integrity sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg==
 
-chalk@^2.0.0, chalk@^2.4.2:
+chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3290,11 +3254,6 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
-
 clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
@@ -4398,7 +4357,7 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-exenv@^1.2.0, exenv@^1.2.2:
+exenv@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
   integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
@@ -5832,11 +5791,6 @@ jest@^29.2.2:
     import-local "^3.0.2"
     jest-cli "^29.2.2"
 
-jquery@x.*:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.0.tgz#9980b97d9e4194611c36530e7dc46a58d7340fc9"
-  integrity sha512-Xb7SVYMvygPxbFMpTFQiHh1J7HClEaThguL15N/Gg37Lri/qKyhRGZYzHRyLH8Stq3Aow0LsHO2O2ci86fCrNQ==
-
 js-sdsl@^4.1.4:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.5.tgz#1ff1645e6b4d1b028cd3f862db88c9d887f26e2a"
@@ -5966,11 +5920,6 @@ jwt-encode@^1.0.1:
   dependencies:
     ts.cryptojs256 "^1.0.1"
 
-keyboard-key@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/keyboard-key/-/keyboard-key-1.1.0.tgz#6f2e8e37fa11475bb1f1d65d5174f1b35653f5b7"
-  integrity sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ==
-
 kind-of@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
@@ -6093,7 +6042,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.15, lodash-es@^4.17.21:
+lodash-es@^4.17.15:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -6123,13 +6072,6 @@ lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-log-symbols@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
-  integrity sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==
-  dependencies:
-    chalk "^2.4.2"
-
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -7417,11 +7359,6 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-fast-compare@^3.0.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
-
 react-hook-form@^7.41.3:
   version "7.41.3"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.41.3.tgz#1b85e95e70cb743d41cd9230ea2df71359d00151"
@@ -7447,16 +7384,11 @@ react-image-lightbox@^5.1.4:
     prop-types "^15.7.2"
     react-modal "^3.11.1"
 
-react-is@^16.13.1, react-is@^16.6.3, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.6 || ^17.0.0 || ^18.0.0", react-is@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
-  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
-
 react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -7467,6 +7399,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
   integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
+react-is@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-leaflet-draw@^0.20.1:
   version "0.20.1"
   resolved "https://registry.yarnpkg.com/react-leaflet-draw/-/react-leaflet-draw-0.20.1.tgz#f0d119c2b2d413f04e79eb278befcab233935889"
@@ -7523,14 +7460,6 @@ react-moment@^1.1.2:
   resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-1.1.2.tgz#a9b157c58ddd226a2f746e5ca43415b24a17b6af"
   integrity sha512-lfb+shYXI2tXlQrNUpNr05/1D/kzFj8Isbfp89DQrpZk0fs2JIAnLHWETR0hQS9zvtzwLWlVv0wKLffbue5HoA==
 
-react-popper@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
-  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
-  dependencies:
-    react-fast-compare "^3.0.1"
-    warning "^4.0.2"
-
 react-router-dom@^6.4.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.1.tgz#99c9b7c4967890701c888517475aa5d54d25760e"
@@ -7926,32 +7855,6 @@ selfsigned@^2.0.1:
   dependencies:
     node-forge "^1"
 
-semantic-ui-css@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.5.0.tgz#b3b7b58b5ffbe6d6fb6549beded16e79a9aa64eb"
-  integrity sha512-jIWn3WXXE2uSaWCcB+gVJVRG3masIKtTMNEP2X8Aw909H2rHpXGneYOxzO3hT8TpyvB5/dEEo9mBFCitGwoj1A==
-  dependencies:
-    jquery x.*
-
-semantic-ui-react@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-2.1.3.tgz#1eee4e3f6dd4dbc673a4b9dd9757f8fba2d6591c"
-  integrity sha512-dd2pqalMk0ycJoHf7hn4mYd0xohg0NMk7ohlpPVOigCfMLrKk2e3NZdRk0yBetvD+qJXPqZ04jA43bDwqOM5OA==
-  dependencies:
-    "@babel/runtime" "^7.10.5"
-    "@fluentui/react-component-event-listener" "~0.63.0"
-    "@fluentui/react-component-ref" "~0.63.0"
-    "@popperjs/core" "^2.6.0"
-    "@semantic-ui-react/event-stack" "^3.1.3"
-    clsx "^1.1.1"
-    keyboard-key "^1.1.0"
-    lodash "^4.17.21"
-    lodash-es "^4.17.21"
-    prop-types "^15.7.2"
-    react-is "^16.8.6 || ^17.0.0 || ^18.0.0"
-    react-popper "^2.3.0"
-    shallowequal "^1.1.0"
-
 semver@7.x, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
@@ -8030,11 +7933,6 @@ 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@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -8836,7 +8734,7 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warning@^4.0.2, warning@^4.0.3:
+warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==

From 9d97344d3d7be9895165ee7ac079eb3684e19aff Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Fri, 20 Jan 2023 22:05:23 -0800
Subject: [PATCH 22/31] =?UTF-8?q?=F0=9F=92=84=20Improve=20Social=20Connect?=
 =?UTF-8?q?ion=20Cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/MastodonCard.tsx | 17 +++++++++++++++--
 src/components/ticker/TelegramCard.tsx | 17 +++++++++++++++--
 src/components/ticker/TwitterCard.tsx  |  8 ++++++--
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/ticker/MastodonCard.tsx b/src/components/ticker/MastodonCard.tsx
index bbcfbb24..5cf85a46 100644
--- a/src/components/ticker/MastodonCard.tsx
+++ b/src/components/ticker/MastodonCard.tsx
@@ -11,10 +11,16 @@ import {
   Card,
   CardActions,
   CardContent,
+  Divider,
   Stack,
   Typography,
 } from '@mui/material'
-import { faBan, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
+import {
+  faBan,
+  faGear,
+  faPause,
+  faPlay,
+} from '@fortawesome/free-solid-svg-icons'
 
 interface Props {
   ticker: Ticker
@@ -62,10 +68,17 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
           <Typography component="h5" variant="h5">
             <FontAwesomeIcon icon={faMastodon} /> Mastodon
           </Typography>
-          <Button onClick={() => setOpen(true)} size="small" variant="outlined">
+          <Button
+            onClick={() => setOpen(true)}
+            size="small"
+            startIcon={<FontAwesomeIcon icon={faGear} />}
+          >
             Configure
           </Button>
         </Stack>
+      </CardContent>
+      <Divider variant="middle" />
+      <CardContent>
         {mastodon.connected ? (
           <Box>
             <Typography variant="body2">
diff --git a/src/components/ticker/TelegramCard.tsx b/src/components/ticker/TelegramCard.tsx
index b023e5f4..d8812732 100644
--- a/src/components/ticker/TelegramCard.tsx
+++ b/src/components/ticker/TelegramCard.tsx
@@ -1,5 +1,10 @@
 import { faTelegram } from '@fortawesome/free-brands-svg-icons'
-import { faBan, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
+import {
+  faBan,
+  faGear,
+  faPause,
+  faPlay,
+} from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   Box,
@@ -7,6 +12,7 @@ import {
   Card,
   CardActions,
   CardContent,
+  Divider,
   Stack,
   Typography,
 } from '@mui/material'
@@ -51,10 +57,17 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
           <Typography component="h5" variant="h5">
             <FontAwesomeIcon icon={faTelegram} /> Telegram
           </Typography>
-          <Button onClick={() => setOpen(true)} size="small" variant="outlined">
+          <Button
+            onClick={() => setOpen(true)}
+            size="small"
+            startIcon={<FontAwesomeIcon icon={faGear} />}
+          >
             Configure
           </Button>
         </Stack>
+      </CardContent>
+      <Divider variant="middle" />
+      <CardContent>
         {telegram.connected ? (
           <Box>
             <Typography variant="body2">
diff --git a/src/components/ticker/TwitterCard.tsx b/src/components/ticker/TwitterCard.tsx
index 5cbfe590..16c5af60 100644
--- a/src/components/ticker/TwitterCard.tsx
+++ b/src/components/ticker/TwitterCard.tsx
@@ -12,6 +12,7 @@ import {
   Card,
   CardActions,
   CardContent,
+  Divider,
   Icon,
   Stack,
   Typography,
@@ -101,6 +102,9 @@ const TwitterCard: FC<Props> = ({ ticker }) => {
             </TwitterLogin>
           ) : null}
         </Stack>
+      </CardContent>
+      <Divider variant="middle" />
+      <CardContent>
         {twitter.connected ? (
           <Box>
             <Typography>
@@ -115,11 +119,11 @@ const TwitterCard: FC<Props> = ({ ticker }) => {
             <Typography>{twitter.description}</Typography>
           </Box>
         ) : (
-          <>
+          <Typography variant="body2">
             You are currently not connected to Twitter. New messages will not be
             published to your account and old messages can not be deleted
             anymore.
-          </>
+          </Typography>
         )}
       </CardContent>
       {twitter.connected ? (

From be5fcc2ae3672650e68cfa670114415022df943f Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Fri, 20 Jan 2023 22:17:00 -0800
Subject: [PATCH 23/31] =?UTF-8?q?=F0=9F=92=84=20Disable=20Social=20Connect?=
 =?UTF-8?q?ion=20Tab=20for=20new=20Tickers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/TickerModalForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ticker/TickerModalForm.tsx b/src/components/ticker/TickerModalForm.tsx
index 3a795cf4..1c613f54 100644
--- a/src/components/ticker/TickerModalForm.tsx
+++ b/src/components/ticker/TickerModalForm.tsx
@@ -48,7 +48,7 @@ const TickerModalForm: FC<Props> = ({ onClose, open, ticker }) => {
       <DialogContent>
         <Tabs onChange={handleTabChange} value={tabValue}>
           <Tab label="General" />
-          <Tab label="Social Connections" />
+          <Tab disabled={ticker ? false : true} label="Social Connections" />
         </Tabs>
         <TabPanel index={0} value={tabValue}>
           <TickerForm callback={handleClose} id="tickerForm" ticker={ticker} />

From 515d2178a17342a5dbf96a5b5b9e966fddbd2369 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sat, 21 Jan 2023 17:18:04 -0800
Subject: [PATCH 24/31] =?UTF-8?q?=F0=9F=92=84=20Use=20pointer=20when=20hov?=
 =?UTF-8?q?ering=20a=20Ticker=20in=20List?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/TickerListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ticker/TickerListItem.tsx b/src/components/ticker/TickerListItem.tsx
index 1ea51a62..3b61447c 100644
--- a/src/components/ticker/TickerListItem.tsx
+++ b/src/components/ticker/TickerListItem.tsx
@@ -47,7 +47,7 @@ const TickerListItem: FC<Props> = ({ ticker }: Props) => {
   }
 
   return (
-    <TableRow hover>
+    <TableRow hover style={{ cursor: 'pointer' }}>
       <TableCell align="center" onClick={handleUse} padding="none" size="small">
         {ticker.active ? (
           <FontAwesomeIcon icon={faCheck} />

From 09c99c3bcba7fb578ee56933b37d0696ef858744 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sat, 21 Jan 2023 17:34:44 -0800
Subject: [PATCH 25/31] =?UTF-8?q?=F0=9F=92=84=20Minor=20style=20improvemen?=
 =?UTF-8?q?ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/message/Message.tsx               |  2 +-
 src/components/settings/InactiveSettingsCard.tsx | 10 +++++++---
 src/components/settings/RefreshIntervalCard.tsx  | 10 +++++++---
 src/components/ticker/TickerUserList.tsx         |  2 +-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index 2508843b..9de32da7 100644
--- a/src/components/message/Message.tsx
+++ b/src/components/message/Message.tsx
@@ -19,7 +19,7 @@ const Message: FC<Props> = ({ message, ticker }) => {
   const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false)
 
   return (
-    <Card sx={{ mt: 2 }}>
+    <Card sx={{ mb: 2 }}>
       <CardContent>
         <IconButton
           onClick={() => {
diff --git a/src/components/settings/InactiveSettingsCard.tsx b/src/components/settings/InactiveSettingsCard.tsx
index 1baadc30..0cd34095 100644
--- a/src/components/settings/InactiveSettingsCard.tsx
+++ b/src/components/settings/InactiveSettingsCard.tsx
@@ -60,9 +60,13 @@ const InactiveSettingsCard: FC = () => {
           <Typography component="h3" variant="h5">
             Inactive Settings
           </Typography>
-          <Button data-testid="inactivesetting-edit" onClick={handleFormOpen}>
-            <FontAwesomeIcon icon={faPencil} />
-            <Typography sx={{ ml: 1 }}>Edit</Typography>
+          <Button
+            data-testid="inactivesetting-edit"
+            onClick={handleFormOpen}
+            size="small"
+            startIcon={<FontAwesomeIcon icon={faPencil} />}
+          >
+            Edit
           </Button>
         </Stack>
         <Typography color="GrayText" component="span" variant="body2">
diff --git a/src/components/settings/RefreshIntervalCard.tsx b/src/components/settings/RefreshIntervalCard.tsx
index e4a54a5a..2adc33a5 100644
--- a/src/components/settings/RefreshIntervalCard.tsx
+++ b/src/components/settings/RefreshIntervalCard.tsx
@@ -59,9 +59,13 @@ const RefreshIntervalCard: FC = () => {
           <Typography component="h3" variant="h5">
             Refresh Interval
           </Typography>
-          <Button data-testid="refreshinterval-edit" onClick={handleFormOpen}>
-            <FontAwesomeIcon icon={faPencil} />
-            <Typography sx={{ ml: 1 }}>Edit</Typography>
+          <Button
+            data-testid="refreshinterval-edit"
+            onClick={handleFormOpen}
+            size="small"
+            startIcon={<FontAwesomeIcon icon={faPencil} />}
+          >
+            Edit
           </Button>
         </Stack>
         <Typography color="GrayText" component="span" variant="body2">
diff --git a/src/components/ticker/TickerUserList.tsx b/src/components/ticker/TickerUserList.tsx
index 90fff4af..0566c8fd 100644
--- a/src/components/ticker/TickerUserList.tsx
+++ b/src/components/ticker/TickerUserList.tsx
@@ -12,7 +12,7 @@ interface Props {
 const TickerUserList: FC<Props> = ({ ticker, users }) => {
   if (users.length === 0) {
     return (
-      <Typography variant="body2">
+      <Typography sx={{ my: 2 }}>
         There are no users granted access this ticker.
       </Typography>
     )

From 54c151326e811ad3cdc5fb831e563279837b4906 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Sat, 21 Jan 2023 20:34:33 -0800
Subject: [PATCH 26/31] =?UTF-8?q?=F0=9F=92=84=20Use=20Link=20Components=20?=
 =?UTF-8?q?for=20externals=20refs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/message/MessageFooter.tsx | 13 ++++++++++---
 src/components/ticker/MastodonCard.tsx   |  9 +++++----
 src/components/ticker/TelegramCard.tsx   | 18 +++++++++++++-----
 src/components/ticker/TickerCard.tsx     |  6 +++---
 src/components/ticker/TwitterCard.tsx    | 23 ++++++++++++++---------
 5 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/src/components/message/MessageFooter.tsx b/src/components/message/MessageFooter.tsx
index 73b8f0fa..bf053333 100644
--- a/src/components/message/MessageFooter.tsx
+++ b/src/components/message/MessageFooter.tsx
@@ -5,7 +5,7 @@ import {
   faTwitter,
 } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Box, Stack, Typography } from '@mui/material'
+import { Box, Link, Stack, Typography, useTheme } from '@mui/material'
 import React, { FC } from 'react'
 import Moment from 'react-moment'
 import { Message } from '../../api/Message'
@@ -36,10 +36,17 @@ interface IconProps {
 }
 
 const Icon: FC<IconProps> = ({ url, icon }) => {
+  const theme = useTheme()
+
   return url ? (
-    <a href={url} rel="noopener noreferrer" target="_blank">
+    <Link
+      href={url}
+      rel="noopener noreferrer"
+      style={{ marginLeft: theme.spacing(1) }}
+      target="_blank"
+    >
       <FontAwesomeIcon icon={icon} />
-    </a>
+    </Link>
   ) : null
 }
 
diff --git a/src/components/ticker/MastodonCard.tsx b/src/components/ticker/MastodonCard.tsx
index 5cf85a46..8cb9e7d2 100644
--- a/src/components/ticker/MastodonCard.tsx
+++ b/src/components/ticker/MastodonCard.tsx
@@ -12,6 +12,7 @@ import {
   CardActions,
   CardContent,
   Divider,
+  Link,
   Stack,
   Typography,
 } from '@mui/material'
@@ -48,13 +49,13 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
   }, [mastodon.active, putTickerMastodon, queryClient, ticker])
 
   const profileLink = (
-    <a
+    <Link
       href={mastodon.server + '/web/@' + mastodon.name}
       rel="noreferrer"
       target="_blank"
     >
       @{mastodon.name}@{mastodon.server.replace(/^https?:\/\//, '')}
-    </a>
+    </Link>
   )
 
   return (
@@ -82,9 +83,9 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
         {mastodon.connected ? (
           <Box>
             <Typography variant="body2">
-              You are connected to Mastodon.
+              You are connected with Mastodon.
             </Typography>
-            <Typography variant="body2">Profile: {profileLink}</Typography>
+            <Typography variant="body2">Your Profile: {profileLink}</Typography>
           </Box>
         ) : (
           <Typography component="p" variant="body2">
diff --git a/src/components/ticker/TelegramCard.tsx b/src/components/ticker/TelegramCard.tsx
index d8812732..2808c650 100644
--- a/src/components/ticker/TelegramCard.tsx
+++ b/src/components/ticker/TelegramCard.tsx
@@ -13,6 +13,7 @@ import {
   CardActions,
   CardContent,
   Divider,
+  Link,
   Stack,
   Typography,
 } from '@mui/material'
@@ -46,6 +47,16 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
     })
   }, [deleteTickerTelegram, queryClient, ticker])
 
+  const channelLink = (
+    <Link
+      href={`https://t.me/${telegram.channel_name}`}
+      rel="noreferrer"
+      target="_blank"
+    >
+      {telegram.channel_name}
+    </Link>
+  )
+
   return (
     <Card>
       <CardContent>
@@ -71,13 +82,10 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
         {telegram.connected ? (
           <Box>
             <Typography variant="body2">
-              You are connected to Telegram.
-            </Typography>
-            <Typography variant="body2">
-              Your Channel: {telegram.channel_name}
+              You are connected with Telegram.
             </Typography>
             <Typography variant="body2">
-              Bot: {telegram.bot_username}
+              Your Channel: {channelLink} (Bot: {telegram.bot_username})
             </Typography>
           </Box>
         ) : (
diff --git a/src/components/ticker/TickerCard.tsx b/src/components/ticker/TickerCard.tsx
index c948e93d..71dc1a1d 100644
--- a/src/components/ticker/TickerCard.tsx
+++ b/src/components/ticker/TickerCard.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { Box, Card, CardContent, Typography } from '@mui/material'
+import { Box, Card, CardContent, Link, Typography } from '@mui/material'
 import { Ticker } from '../../api/Ticker'
 import NamedListItem from '../common/NamedListItem'
 import SocialConnectionChip from './SocialConnectionChip'
@@ -46,13 +46,13 @@ const TickerCard: FC<Props> = ({ ticker }) => {
               icon={faLink}
               style={{ width: 16, paddingRight: 2 }}
             />
-            <a
+            <Link
               href={'https://' + ticker.domain}
               rel="noreferrer"
               target="_blank"
             >
               {ticker.domain}
-            </a>
+            </Link>
           </Typography>
         </NamedListItem>
         <NamedListItem title="Social Connections">
diff --git a/src/components/ticker/TwitterCard.tsx b/src/components/ticker/TwitterCard.tsx
index 16c5af60..b2bc6150 100644
--- a/src/components/ticker/TwitterCard.tsx
+++ b/src/components/ticker/TwitterCard.tsx
@@ -14,6 +14,7 @@ import {
   CardContent,
   Divider,
   Icon,
+  Link,
   Stack,
   Typography,
 } from '@mui/material'
@@ -73,6 +74,16 @@ const TwitterCard: FC<Props> = ({ ticker }) => {
     alert(error)
   }, [])
 
+  const profileLink = (
+    <Link
+      href={'https://twitter.com/' + twitter.screen_name}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      @{twitter.screen_name}
+    </Link>
+  )
+
   return (
     <Card>
       <CardContent>
@@ -107,16 +118,10 @@ const TwitterCard: FC<Props> = ({ ticker }) => {
       <CardContent>
         {twitter.connected ? (
           <Box>
-            <Typography>
-              <a
-                href={'https://twitter.com/' + twitter.screen_name}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                @{twitter.screen_name}
-              </a>
+            <Typography variant="body2">
+              You are connected with Twitter.
             </Typography>
-            <Typography>{twitter.description}</Typography>
+            <Typography variant="body2">Your Profile: {profileLink}</Typography>
           </Box>
         ) : (
           <Typography variant="body2">

From 9feed7c3f3d4f2b5dbaa7fd53f881f2bd2807b7d Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Tue, 24 Jan 2023 14:41:16 -0800
Subject: [PATCH 27/31] =?UTF-8?q?=F0=9F=92=84=20Align=20Dropdowns=20for=20?=
 =?UTF-8?q?Tickers=20and=20Users?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/TickerAddUserForm.tsx   |  89 ------------
 src/components/ticker/TickerUsersCard.tsx     |  10 +-
 src/components/ticker/TickerUsersForm.tsx     | 129 ++++++++++++++++++
 ...rAddUserModal.tsx => TickerUsersModal.tsx} |  18 +--
 src/components/ticker/TickersDropdown.tsx     |  27 +++-
 5 files changed, 170 insertions(+), 103 deletions(-)
 delete mode 100644 src/components/ticker/TickerAddUserForm.tsx
 create mode 100644 src/components/ticker/TickerUsersForm.tsx
 rename src/components/ticker/{TickerAddUserModal.tsx => TickerUsersModal.tsx} (73%)

diff --git a/src/components/ticker/TickerAddUserForm.tsx b/src/components/ticker/TickerAddUserForm.tsx
deleted file mode 100644
index da4d6d33..00000000
--- a/src/components/ticker/TickerAddUserForm.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { FC } from 'react'
-import { Controller, SubmitHandler, useForm } from 'react-hook-form'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Ticker, useTickerApi } from '../../api/Ticker'
-import { User, useUserApi } from '../../api/User'
-import useAuth from '../useAuth'
-import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'
-
-interface Props {
-  ticker: Ticker
-  onSubmit: () => void
-  users: User[]
-}
-
-interface Option {
-  key: number
-  text: string
-  value: number
-}
-
-interface FormValues {
-  users: Array<number>
-}
-
-const TickerAddUserForm: FC<Props> = ({ onSubmit, ticker, users }) => {
-  const { token } = useAuth()
-  const { getUsers } = useUserApi(token)
-  const { putTickerUsers } = useTickerApi(token)
-  const { isLoading, data, error } = useQuery(
-    ['tickerUsersAvailable'],
-    getUsers
-  )
-  const { control, handleSubmit } = useForm<FormValues>()
-  const queryClient = useQueryClient()
-
-  const updateTickerUsers: SubmitHandler<FormValues> = data => {
-    putTickerUsers(ticker, data.users).then(() => {
-      queryClient.invalidateQueries(['tickerUsers', ticker.id])
-      onSubmit()
-    })
-  }
-
-  if (isLoading) {
-    return <>Loading</>
-  }
-
-  if (error || data === undefined) {
-    return <>error</>
-  }
-
-  const options: Array<Option> = data.data.users
-    .filter(user => {
-      return !user.is_super_admin
-    })
-    .map(user => {
-      return { key: user.id, text: user.email, value: user.id }
-    })
-
-  const value: number[] =
-    users !== null
-      ? users.map(user => {
-          return user.id
-        })
-      : []
-
-  return (
-    <form id="tickerUsersForm" onSubmit={handleSubmit(updateTickerUsers)}>
-      <FormControl sx={{ m: 1, width: 300 }}>
-        <InputLabel id="users">Users</InputLabel>
-        <Controller
-          control={control}
-          defaultValue={value}
-          name="users"
-          render={({ field }) => (
-            <Select {...field} label="Users" multiple>
-              {options.map(option => (
-                <MenuItem key={option.key} value={option.value}>
-                  {option.text}
-                </MenuItem>
-              ))}
-            </Select>
-          )}
-        />
-      </FormControl>
-    </form>
-  )
-}
-
-export default TickerAddUserForm
diff --git a/src/components/ticker/TickerUsersCard.tsx b/src/components/ticker/TickerUsersCard.tsx
index 98b3585a..93795558 100644
--- a/src/components/ticker/TickerUsersCard.tsx
+++ b/src/components/ticker/TickerUsersCard.tsx
@@ -2,13 +2,13 @@ import React, { FC, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import TickerUserList from './TickerUserList'
-import TickerAddUserModal from './TickerAddUserModal'
 import useAuth from '../useAuth'
 import Loader from '../Loader'
 import ErrorView from '../../views/ErrorView'
 import { Button, Card, CardContent, Typography } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faUsers } from '@fortawesome/free-solid-svg-icons'
+import { faShieldDog, faUsers } from '@fortawesome/free-solid-svg-icons'
+import TickerUsersModal from './TickerUsersModal'
 
 interface Props {
   ticker: Ticker
@@ -52,12 +52,12 @@ const TickerUsersCard: FC<Props> = ({ ticker }) => {
         <TickerUserList ticker={ticker} users={users} />
         <Button
           onClick={() => setFormOpen(true)}
-          startIcon={<FontAwesomeIcon icon={faPlus} />}
+          startIcon={<FontAwesomeIcon icon={faShieldDog} />}
           variant="outlined"
         >
-          Add Users
+          Manage Users
         </Button>
-        <TickerAddUserModal
+        <TickerUsersModal
           onClose={() => setFormOpen(false)}
           open={formOpen}
           ticker={ticker}
diff --git a/src/components/ticker/TickerUsersForm.tsx b/src/components/ticker/TickerUsersForm.tsx
new file mode 100644
index 00000000..22e5f540
--- /dev/null
+++ b/src/components/ticker/TickerUsersForm.tsx
@@ -0,0 +1,129 @@
+import React, { FC, useEffect, useState } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { useQueryClient } from '@tanstack/react-query'
+import { Ticker, useTickerApi } from '../../api/Ticker'
+import { User, useUserApi } from '../../api/User'
+import useAuth from '../useAuth'
+import {
+  Box,
+  Chip,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  SelectChangeEvent,
+  useTheme,
+} from '@mui/material'
+
+interface Props {
+  ticker: Ticker
+  onSubmit: () => void
+  defaultValue: number[]
+}
+
+interface FormValues {
+  users: Array<number>
+}
+
+const TickerUsersForm: FC<Props> = ({ onSubmit, ticker, defaultValue }) => {
+  const [users, setUsers] = useState<Array<number>>(defaultValue)
+  const [options, setOptions] = useState<Array<User>>([])
+  const { token } = useAuth()
+  const { getUsers } = useUserApi(token)
+  const theme = useTheme()
+  const { putTickerUsers } = useTickerApi(token)
+  const { handleSubmit } = useForm<FormValues>()
+  const queryClient = useQueryClient()
+
+  const handleChange = (event: SelectChangeEvent<typeof users>) => {
+    if (typeof event.target.value !== 'string') {
+      setUsers(event.target.value)
+    }
+  }
+
+  const updateTickerUsers: SubmitHandler<FormValues> = () => {
+    putTickerUsers(ticker, users).then(() => {
+      queryClient.invalidateQueries(['tickerUsers', ticker.id])
+      onSubmit()
+    })
+  }
+
+  useEffect(() => {
+    getUsers()
+      .then(response => response.data.users)
+      .then(users =>
+        setOptions(
+          users.filter(user => {
+            return !user.is_super_admin
+          })
+        )
+      )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const renderValue = (selected: number[]) => {
+    const selectedUsers = options.filter(user => {
+      return selected.includes(user.id)
+    })
+
+    return (
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+        {selectedUsers.map(user => (
+          <Chip
+            key={user.id}
+            label={user.email}
+            onDelete={() => {
+              const reduced = users.filter(id => {
+                return id !== user.id
+              })
+              setUsers(reduced)
+            }}
+            onMouseDown={e => {
+              e.stopPropagation()
+            }}
+          />
+        ))}
+      </Box>
+    )
+  }
+
+  const getStyle = (value: number, users: number[]) => {
+    return {
+      fontWeight:
+        users.indexOf(value) === -1
+          ? theme.typography.fontWeightRegular
+          : theme.typography.fontWeightMedium,
+    }
+  }
+
+  return (
+    <form id="tickerUsersForm" onSubmit={handleSubmit(updateTickerUsers)}>
+      <FormControl sx={{ width: '100%', mt: 1 }}>
+        <InputLabel>Users</InputLabel>
+        <Select
+          input={<OutlinedInput label="Users" />}
+          label="Users"
+          multiple
+          name="users"
+          onChange={handleChange}
+          renderValue={renderValue}
+          value={users}
+        >
+          {options.map(user => (
+            <MenuItem
+              key={user.id}
+              selected={users.includes(user.id)}
+              style={getStyle(user.id, users)}
+              value={user.id}
+            >
+              {user.email}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </form>
+  )
+}
+
+export default TickerUsersForm
diff --git a/src/components/ticker/TickerAddUserModal.tsx b/src/components/ticker/TickerUsersModal.tsx
similarity index 73%
rename from src/components/ticker/TickerAddUserModal.tsx
rename to src/components/ticker/TickerUsersModal.tsx
index ac0121c9..efa8e92a 100644
--- a/src/components/ticker/TickerAddUserModal.tsx
+++ b/src/components/ticker/TickerUsersModal.tsx
@@ -11,7 +11,7 @@ import {
 import React, { FC } from 'react'
 import { Ticker } from '../../api/Ticker'
 import { User } from '../../api/User'
-import TickerAddUserForm from './TickerAddUserForm'
+import TickerUsersForm from './TickerUsersForm'
 
 interface Props {
   onClose: () => void
@@ -20,35 +20,37 @@ interface Props {
   users: User[]
 }
 
-const TickerAddUserModal: FC<Props> = ({ onClose, open, ticker, users }) => {
+const TickerUsersModal: FC<Props> = ({ onClose, open, ticker, users }) => {
   const handleClose = () => {
     onClose()
   }
 
   return (
-    <Dialog open={open}>
+    <Dialog fullWidth maxWidth="md" open={open}>
       <DialogTitle>
         <Stack
           alignItems="center"
           direction="row"
           justifyContent="space-between"
         >
-          Add Users
+          Manage User Access
           <IconButton onClick={handleClose}>
             <Close />
           </IconButton>
         </Stack>
       </DialogTitle>
       <DialogContent>
-        <TickerAddUserForm
+        <TickerUsersForm
+          defaultValue={users.map(user => {
+            return user.id
+          })}
           onSubmit={handleClose}
           ticker={ticker}
-          users={users}
         />
       </DialogContent>
       <DialogActions>
         <Button form="tickerUsersForm" type="submit">
-          Add
+          Save
         </Button>
 
         <Button onClick={handleClose}>Close</Button>
@@ -57,4 +59,4 @@ const TickerAddUserModal: FC<Props> = ({ onClose, open, ticker, users }) => {
   )
 }
 
-export default TickerAddUserModal
+export default TickerUsersModal
diff --git a/src/components/ticker/TickersDropdown.tsx b/src/components/ticker/TickersDropdown.tsx
index 95a7bc4c..0381d759 100644
--- a/src/components/ticker/TickersDropdown.tsx
+++ b/src/components/ticker/TickersDropdown.tsx
@@ -9,6 +9,7 @@ import {
   Select,
   SelectChangeEvent,
   SxProps,
+  useTheme,
 } from '@mui/material'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
@@ -25,6 +26,7 @@ const TickersDropdown: FC<Props> = ({ name, defaultValue, onChange, sx }) => {
   const [tickers, setTickers] = useState<Array<number>>(defaultValue)
   const { token } = useAuth()
   const { getTickers } = useTickerApi(token)
+  const theme = useTheme()
 
   const handleChange = (event: SelectChangeEvent<typeof tickers>) => {
     if (typeof event.target.value !== 'string') {
@@ -50,12 +52,34 @@ const TickersDropdown: FC<Props> = ({ name, defaultValue, onChange, sx }) => {
     return (
       <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
         {selectedTickers.map(ticker => (
-          <Chip key={ticker.id} label={ticker.title} />
+          <Chip
+            key={ticker.id}
+            label={ticker.title}
+            onDelete={() => {
+              const reduced = tickers.filter(id => {
+                return id !== ticker.id
+              })
+              setTickers(reduced)
+              onChange(reduced)
+            }}
+            onMouseDown={e => {
+              e.stopPropagation()
+            }}
+          />
         ))}
       </Box>
     )
   }
 
+  const getStyle = (value: number, tickers: number[]) => {
+    return {
+      fontWeight:
+        tickers.indexOf(value) === -1
+          ? theme.typography.fontWeightRegular
+          : theme.typography.fontWeightMedium,
+    }
+  }
+
   return (
     <FormControl sx={sx}>
       <InputLabel>Tickers</InputLabel>
@@ -72,6 +96,7 @@ const TickersDropdown: FC<Props> = ({ name, defaultValue, onChange, sx }) => {
           <MenuItem
             key={ticker.id}
             selected={tickers.includes(ticker.id)}
+            style={getStyle(ticker.id, tickers)}
             value={ticker.id}
           >
             {ticker.title}

From 4d87196f3b1d4615448b4505dd831b4e80fa77f4 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Tue, 24 Jan 2023 14:44:58 -0800
Subject: [PATCH 28/31] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F=20Show=20TickerUser?=
 =?UTF-8?q?Card=20only=20for=20Admins?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/TickerUsersCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ticker/TickerUsersCard.tsx b/src/components/ticker/TickerUsersCard.tsx
index 93795558..0bf07b93 100644
--- a/src/components/ticker/TickerUsersCard.tsx
+++ b/src/components/ticker/TickerUsersCard.tsx
@@ -15,7 +15,7 @@ interface Props {
 }
 
 const TickerUsersCard: FC<Props> = ({ ticker }) => {
-  const { token } = useAuth()
+  const { token, user } = useAuth()
   const { getTickerUsers } = useTickerApi(token)
   const [formOpen, setFormOpen] = useState<boolean>(false)
   const { isLoading, error, data } = useQuery(
@@ -39,7 +39,7 @@ const TickerUsersCard: FC<Props> = ({ ticker }) => {
 
   const users = data.data.users
 
-  return (
+  return user?.roles.includes('admin') ? (
     <Card>
       <CardContent>
         <Typography component="h5" sx={{ mb: 2 }} variant="h5">
@@ -65,7 +65,7 @@ const TickerUsersCard: FC<Props> = ({ ticker }) => {
         />
       </CardContent>
     </Card>
-  )
+  ) : null
 }
 
 export default TickerUsersCard

From 5045a9765a6c369394fa4545d176c72ff3cf2c9c Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Tue, 24 Jan 2023 14:46:30 -0800
Subject: [PATCH 29/31] =?UTF-8?q?=F0=9F=92=84=20Use=20correct=20Typography?=
 =?UTF-8?q?=20for=20TelegramCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/TelegramCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ticker/TelegramCard.tsx b/src/components/ticker/TelegramCard.tsx
index 2808c650..0daa760d 100644
--- a/src/components/ticker/TelegramCard.tsx
+++ b/src/components/ticker/TelegramCard.tsx
@@ -89,11 +89,11 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
             </Typography>
           </Box>
         ) : (
-          <>
+          <Typography variant="body2">
             You are currently not connected to Telegram. New messages will not
             be published to your channel and old messages can not be deleted
             anymore.
-          </>
+          </Typography>
         )}
       </CardContent>
       {telegram.connected ? (

From 052a336045b3f1d434c463db0faaa9f737961a74 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Tue, 24 Jan 2023 15:17:22 -0800
Subject: [PATCH 30/31] =?UTF-8?q?=F0=9F=92=84=20Align=20Save/Close=20Butto?=
 =?UTF-8?q?n=20for=20TickerModalForm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ticker/TickerForm.tsx      | 19 -------------------
 src/components/ticker/TickerModalForm.tsx | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/ticker/TickerForm.tsx b/src/components/ticker/TickerForm.tsx
index 455a57ba..d58fef90 100644
--- a/src/components/ticker/TickerForm.tsx
+++ b/src/components/ticker/TickerForm.tsx
@@ -8,7 +8,6 @@ import { MapContainer, Marker, TileLayer } from 'react-leaflet'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   Alert,
-  Box,
   Button,
   Checkbox,
   FormControlLabel,
@@ -18,7 +17,6 @@ import {
   Stack,
   TextField,
   Typography,
-  useTheme,
 } from '@mui/material'
 import {
   faComputerMouse,
@@ -80,7 +78,6 @@ const TickerForm: FC<Props> = ({ callback, id, ticker }) => {
   const { token } = useAuth()
   const { postTicker, putTicker } = useTickerApi(token)
   const queryClient = useQueryClient()
-  const theme = useTheme()
 
   const onLocationChange = useCallback(
     (result: Result) => {
@@ -310,22 +307,6 @@ const TickerForm: FC<Props> = ({ callback, id, ticker }) => {
           </Grid>
         ) : null}
       </Grid>
-      <Grid item textAlign="right" xs={12}>
-        <Box sx={{ pt: theme.spacing(2) }}>
-          <Button
-            color="primary"
-            form="tickerForm"
-            sx={{ mr: theme.spacing(1) }}
-            type="submit"
-            variant="contained"
-          >
-            Save
-          </Button>
-          <Button color="secondary" onClick={() => callback()}>
-            Close
-          </Button>
-        </Box>
-      </Grid>
     </form>
   )
 }
diff --git a/src/components/ticker/TickerModalForm.tsx b/src/components/ticker/TickerModalForm.tsx
index 1c613f54..3d3d2cdb 100644
--- a/src/components/ticker/TickerModalForm.tsx
+++ b/src/components/ticker/TickerModalForm.tsx
@@ -1,6 +1,8 @@
 import { Close } from '@mui/icons-material'
 import {
+  Button,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
@@ -59,6 +61,21 @@ const TickerModalForm: FC<Props> = ({ onClose, open, ticker }) => {
           </TabPanel>
         ) : null}
       </DialogContent>
+      <DialogActions>
+        {tabValue === 0 ? (
+          <Button
+            color="primary"
+            form="tickerForm"
+            type="submit"
+            variant="contained"
+          >
+            Save
+          </Button>
+        ) : null}
+        <Button color="secondary" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
     </Dialog>
   )
 }

From c8b25311b2189822a50e86eb66330414ac8ecea1 Mon Sep 17 00:00:00 2001
From: louis <louis@systemli.org>
Date: Tue, 24 Jan 2023 16:12:15 -0800
Subject: [PATCH 31/31] =?UTF-8?q?=F0=9F=9A=B8=20Invalidates=20Query=20Cach?=
 =?UTF-8?q?es=20when=20unauthenticated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/LoginView.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/LoginView.tsx b/src/views/LoginView.tsx
index 29de2bcc..f66ae46f 100644
--- a/src/views/LoginView.tsx
+++ b/src/views/LoginView.tsx
@@ -13,6 +13,7 @@ import { SubmitHandler, useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router'
 import useAuth from '../components/useAuth'
 import logo from '../assets/logo.png'
+import { useQueryClient } from '@tanstack/react-query'
 
 interface FormValues {
   email: string
@@ -23,13 +24,19 @@ const LoginView: FC = () => {
   const { getValues, handleSubmit, register, reset } = useForm<FormValues>()
   const { login, error, user } = useAuth()
   const navigate = useNavigate()
+  const queryClient = useQueryClient()
 
   const onSubmit: SubmitHandler<FormValues> = ({ email, password }) => {
     login(email, password)
   }
 
   useEffect(() => {
-    if (user) navigate('/')
+    if (user) {
+      navigate('/')
+    } else {
+      // We want to ensure logged out users will not have any caches stored
+      queryClient.invalidateQueries()
+    }
   })
 
   useEffect(() => {