💄 Use MUI for SettingsView

systemli · Oct 27, 2022 · 7f497e6 · 7f497e6
1 parent 6779006
commit 7f497e6
Show file tree

Hide file tree

Showing 9 changed files with 401 additions and 316 deletions.
diff --git a/src/components/settings/InactiveSettingsCard.tsx b/src/components/settings/InactiveSettingsCard.tsx
@@ -1,34 +1,42 @@
-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(
     ['inactive_settings'],
     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>
   )
 }