feat: ui updates (#343)

Description --- I added the new colours and fonts from the updated brand guidelines. Made changes to the settings tabs and split the mining settings into 2 sections, so it's a bit easier to use. Temporarily removed buttons that don't work yet. Added the mining addresses back into the boxes on the homepage. Motivation and Context --- There are new brand colours & fonts. Various other ui improvements. How Has This Been Tested? --- Manually
tari-project · May 31, 2024 · f2a1a0c · f2a1a0c
1 parent 3bd3f4c
commit f2a1a0c
Show file tree

Hide file tree

Showing 64 changed files with 939 additions and 494 deletions.
diff --git a/ui/frontend/package-lock.json b/ui/frontend/package-lock.json
diff --git a/ui/frontend/package.json b/ui/frontend/package.json
@@ -13,7 +13,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.13",
+    "@react-spring/web": "^9.7.3",
     "@tauri-apps/api": "^1",
     "material-icons": "^1.13.12",
     "notistack": "^3.0.1",
@@ -25,6 +27,7 @@
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1",
+    "@types/node": "^20.12.12",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/ui/frontend/src/App.tsx b/ui/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 import { emit, listen } from '@tauri-apps/api/event';
 import MainLayout from './MainLayout';
 import useAppStateStore from './store/appStateStore';
+import useConfigStore from './store/configStore';
 import MainTabs from './containers/Dashboard/DashboardContainer/MainTabs';
 import SettingsDialog from './containers/SettingsContainer/SettingsDialog';
 import DockerWarning from './containers/DockerWarning/DockerWarning';
@@ -30,7 +31,10 @@ function App() {
     setMergeTime,
     mergeTimerOn,
     openSchedule,
+    startBaseNode,
+    startMining,
   } = useAppStateStore();
+  const { startupConfig } = useConfigStore();
 
   //   async function connect() {
   //     // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
@@ -350,6 +354,25 @@ function App() {
     setNetwork(appState?.config?.settings?.saved_settings?.tari_network || '');
   }, [appState?.config?.settings?.saved_settings?.tari_network]);
 
+  // settings that should run on first startup
+  useEffect(() => {
+    if (startupConfig.shaMine) {
+      setTimeout(() => {
+        startMining('Sha');
+      }, 2000);
+    }
+    if (startupConfig.mergeMine) {
+      setTimeout(() => {
+        startMining('Merge');
+      }, 2000);
+    }
+    if (startupConfig.baseNode) {
+      setTimeout(() => {
+        startBaseNode();
+      }, 2000);
+    }
+  }, []);
+
   console.log(appState);
 
   useEffect(() => {

diff --git a/ui/frontend/src/MainLayout.tsx b/ui/frontend/src/MainLayout.tsx
@@ -37,7 +37,7 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)(
       backgroundColor:
         theme.palette.mode === 'light'
           ? theme.palette.background.paper
-          : '#262626',
+          : 'rgba(255,255,255,0.04)',
       color: theme.palette.text.primary,
       boxShadow: 'none',
       maxWidth: '200px',
@@ -105,7 +105,13 @@ export default function MainLayout({
     'normal'
   );
   const [drawerWidth, setDrawerWidth] = useState(window.innerWidth * 0.5);
-  const { setOpenSettings, setTariAddress, appState } = useAppStateStore();
+  const { setOpenSettings, setTariAddress, appState } = useAppStateStore(
+    (state) => ({
+      setOpenSettings: state.setOpenSettings,
+      setTariAddress: state.setTariAddress,
+      appState: state.appState,
+    })
+  );
   const { themeMode } = useThemeStore();
   const headerHeight = 64;
 
@@ -199,7 +205,7 @@ export default function MainLayout({
         <ThemeProvider theme={theme}>
           <Button
             onClick={handleOpenSettings}
-            size="small"
+            size="medium"
             startIcon={<SvgSetting />}
             style={{
               color: open ? '#fff' : 'inherit',
@@ -306,7 +312,7 @@ export default function MainLayout({
                   <Button
                     onClick={handleFullScreenToggle}
                     startIcon={<SvgMonitor />}
-                    style={typography.microMedium}
+                    style={typography.smallMedium}
                     color="inherit"
                   >
                     {contentWidth === 'fullScreen'

diff --git a/ui/frontend/src/components/StyledComponents.ts b/ui/frontend/src/components/StyledComponents.ts
@@ -61,6 +61,12 @@ export const StyledIconButton = styled(IconButton)(({ theme }) => ({
   boxShadow: 'none',
 }));
 
+export const IconButtonNoPadding = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  boxShadow: 'none',
+  padding: 0,
+}));
+
 export const AccordionIconButton = styled(IconButton)(({ theme }) => ({
   backgroundColor: theme.palette.divider,
   color: theme.palette.primary.main,

diff --git a/ui/frontend/src/components/SubHeading.tsx b/ui/frontend/src/components/SubHeading.tsx
@@ -9,7 +9,7 @@ const HeadingContainer = styled('div')({
 
 const Heading = styled(Typography)(({ theme }) => ({
   marginRight: theme.spacing(2),
-  color: `${theme.palette.primary.main} !important`,
+  color: `${theme.palette.secondary.main} !important`,
 }));
 
 const Line = styled('hr')(({ theme }) => ({

diff --git a/ui/frontend/src/containers/BaseNodeContainer/BaseNodeFooter.tsx b/ui/frontend/src/containers/BaseNodeContainer/BaseNodeFooter.tsx
@@ -8,7 +8,9 @@ import { TextButton } from '../../components/StyledComponents';
 import { SettingsTabs } from '../../store/types';
 
 function BaseNodeFooter() {
-  const { openSettingsFunc } = useAppStateStore();
+  const { openSettingsFunc } = useAppStateStore((state) => ({
+    openSettingsFunc: state.openSettingsFunc,
+  }));
   return (
     <FooterBox>
       <InfoBox>

diff --git a/ui/frontend/src/containers/BaseNodeContainer/BaseNodeWidget.tsx b/ui/frontend/src/containers/BaseNodeContainer/BaseNodeWidget.tsx
@@ -8,19 +8,20 @@ import {
   StatusChip,
   TransparentButton,
 } from '../../components/StyledComponents';
-import {
-  BaseNodeBox,
-  ContentBox,
-  DefaultBox,
-  CircularProgressLight,
-} from './styles';
+import { BaseNodeBox, ContentBox, DefaultBox } from './styles';
 import { useEffect, useState } from 'react';
 
 type Status = 'inactive' | 'pending' | 'active';
 
 function BaseNodeWidget() {
   const { appState, containers, startBaseNode, stopBaseNode, network } =
-    useAppStateStore();
+    useAppStateStore((state) => ({
+      appState: state.appState,
+      containers: state.containers,
+      startBaseNode: state.startBaseNode,
+      stopBaseNode: state.stopBaseNode,
+      network: state.network,
+    }));
   const [baseNodeStatus, setBaseNodeStatus] = useState<Status>('inactive');
 
   function start() {
@@ -135,7 +136,6 @@ function BaseNodeWidget() {
           <ContentBox>
             <BaseNodeTitle />
             <BaseNodeNetwork />
-            <CircularProgressLight />
           </ContentBox>
           <ContentBox>
             <TransparentButton onClick={stop}>

diff --git a/ui/frontend/src/containers/Dashboard/DashboardContainer/MainTabs.tsx b/ui/frontend/src/containers/Dashboard/DashboardContainer/MainTabs.tsx
@@ -51,7 +51,10 @@ function a11yProps(index: number) {
 export default function MainTabs() {
   const [value, setValue] = useState(0);
   const theme = useTheme();
-  const { containers, network } = useAppStateStore();
+  const { containers, network } = useAppStateStore((state) => ({
+    containers: state.containers,
+    network: state.network,
+  }));
 
   const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);

diff --git a/ui/frontend/src/containers/Dashboard/ExpertView/Containers/Containers.tsx b/ui/frontend/src/containers/Dashboard/ExpertView/Containers/Containers.tsx
@@ -1,23 +1,24 @@
 import { Typography, Divider, Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import useAppStateStore from '../../../../store/appStateStore';
+import typography from '../../../../styles/styles/typography';
 
 const CustomGrid = styled(Box)(({ theme }) => ({
   display: 'grid',
   gridTemplateColumns: '1fr 1fr 100px',
-  gridGap: theme.spacing(1),
+  gridGap: theme.spacing(2),
   width: '100%',
 }));
 
 const CustomGridContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   width: '100%',
   flexDirection: 'column',
-  gap: theme.spacing(1),
+  gap: theme.spacing(2),
 }));
 
 function Containers() {
-  const { containers } = useAppStateStore();
+  const containers = useAppStateStore((state) => state.containers);
   const items = [
     {
       container: 'Tor',
@@ -66,9 +67,15 @@ function Containers() {
       <>
         <Divider />
         <CustomGrid>
-          <Typography variant="h6">{item.container}</Typography>
-          <Typography variant="body2">{item.status}</Typography>
-          <Typography variant="body2">{item.cpu}</Typography>
+          <Typography variant="h6" sx={typography.smallHeavy}>
+            {item.container}
+          </Typography>
+          <Typography variant="body2" sx={typography.smallMedium}>
+            {item.status}
+          </Typography>
+          <Typography variant="body2" sx={typography.smallMedium}>
+            {item.cpu}
+          </Typography>
         </CustomGrid>
       </>
     );
@@ -77,9 +84,15 @@ function Containers() {
   return (
     <CustomGridContainer>
       <CustomGrid>
-        <Typography variant="h5">Container</Typography>
-        <Typography variant="h5">Status</Typography>
-        <Typography variant="h5">CPU</Typography>
+        <Typography variant="h5" sx={typography.defaultHeavy}>
+          Container
+        </Typography>
+        <Typography variant="h5" sx={typography.defaultHeavy}>
+          Status
+        </Typography>
+        <Typography variant="h5" sx={typography.defaultHeavy}>
+          CPU
+        </Typography>
       </CustomGrid>
       {renderItems}
     </CustomGridContainer>