feat: ui updates

src/App.tsx

@@ -1,9 +1,8 @@
+import './theme/theme.css';
 import { useEffect } from 'react';
 import { invoke } from '@tauri-apps/api/tauri';
 import { listen } from '@tauri-apps/api/event';
-
 import CssBaseline from '@mui/material/CssBaseline';
-import './theme/theme.css';
 import { ThemeProvider } from '@mui/material/styles';
 import { lightTheme } from './theme/themes';
 import { ContainerInner, DashboardContainer } from './theme/styles';
@@ -24,6 +23,7 @@ function App() {
  setAppState: state.setAppState,
  setError: state.setError,
  }));
+
  useEffect(() => {
  const unlistenPromise = listen('message', (event) => {
  console.log('some kind of event', event.event, event.payload);

src/containers/AppBackground/AppBackground.tsx

@@ -1,43 +1,14 @@
 import { useTheme } from '@mui/material/styles';
 import clouds from '../../assets/backgrounds/clouds.png';
-import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
 import loading from '../../assets/backgrounds/loading.jpg';
 import defaultbg from '../../assets/backgrounds/defaultbg.jpg';
 import determining from '../../assets/backgrounds/determining.jpg';
 import mining from '../../assets/backgrounds/mining.jpg';
 import loser from '../../assets/backgrounds/loser.jpg';
 import winner from '../../assets/backgrounds/winner.jpg';
 import { backgroundType } from '../../store/types';
-
-const AppContainer = styled(Box)(
- ({ theme, status }: { theme: any; status: any }) => ({
- backgroundColor: theme.palette.background.default,
- backgroundSize: 'cover',
- backgroundImage: `url(${status})`,
- backgroundPosition: 'center',
- })
-);
-
-// const BackgroundImage = styled(Box)(
-// ({ theme, status }: { theme: any; status: statusType }) => ({
-// position: 'absolute',
-// bottom: 0,
-// right: 0,
-// height: '80%',
-// width: `calc(100% - ${sidebarWidth} - ${theme.spacing(4)})`,
-// backgroundImage: `url(${
-// status === 'mining' ? build1 : status === 'waiting' ? build3 : ''
-// })`,
-// backgroundPosition: 'bottom center',
-// backgroundRepeat: 'no-repeat',
-// backgroundSize: 'contain',
-// zIndex: 0,
-// borderRadius: '12px',
-// overflow: 'hidden',
-// border: '1px solid red',
-// })
-// );
+import useAppStateStore from '../../store/appStateStore';
+import { AppContainer } from './styles';
 
 function AppBackground({
  children,
@@ -46,6 +17,7 @@ function AppBackground({
  children: React.ReactNode;
  status: backgroundType;
 }) {
+ const visualMode = useAppStateStore((state) => state.visualMode);
  const theme = useTheme();
 
  let bg = defaultbg;
@@ -77,10 +49,17 @@ function AppBackground({
  break;
  }
 
+ if (!visualMode) {
+ return (
+ <AppContainer theme={theme} status={loading}>
+ {children}
+ </AppContainer>
+ );
+ }
+
  return (
  <AppContainer theme={theme} status={bg}>
  {children}
- {/* <BackgroundImage theme={theme} status={status} /> */}
  </AppContainer>
  );
 }

src/containers/AppBackground/styles.ts

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const AppContainer = styled(Box)(
+ ({ theme, status }: { theme: any; status: any }) => ({
+ backgroundColor: theme.palette.background.default,
+ backgroundSize: 'cover',
+ backgroundImage: `url(${status})`,
+ backgroundPosition: 'center',
+ })
+);

src/containers/Dashboard/MiningView/MiningView.tsx

@@ -1,11 +1,16 @@
 import BlockInfo from './components/BlockInfo';
+import TopStatus from './components/TopStatus';
 import VisualMode from '../components/VisualMode';
 import MiningButton from './components/MiningButton';
+import { InfoContainer } from '../styles';
 
 function MiningView() {
  return (
  <>
- <BlockInfo />
+ <InfoContainer>
+ <TopStatus />
+ <BlockInfo />
+ </InfoContainer>
  <VisualMode />
  <MiningButton />
  </>

src/containers/Dashboard/MiningView/components/BlockInfo.tsx

@@ -1,9 +1,8 @@
 import { Stack, Typography, Divider } from '@mui/material';
-import { BlockInfoContainer } from '../../styles';
 
 function BlockInfo() {
  return (
- <BlockInfoContainer>
+ <Stack direction="row" spacing={2}>
  <Stack>
  <Typography variant="h6">#24,475</Typography>
  <Typography variant="body2">Floor</Typography>
@@ -18,7 +17,7 @@ function BlockInfo() {
  <Typography variant="h6">01:23:05</Typography>
  <Typography variant="body2">Current floor build time</Typography>
  </Stack>
- </BlockInfoContainer>
+ </Stack>
  );
 }
 

src/containers/Dashboard/MiningView/components/TopStatus.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { Typography } from '@mui/material';
+import useAppStateStore from '../../../../store/appStateStore';
+
+function TopStatus() {
+ const { topStatus, setTopStatus, appState } = useAppStateStore((state) => ({
+ topStatus: state.topStatus,
+ setTopStatus: state.setTopStatus,
+ appState: state.appState,
+ }));
+
+ useEffect(() => {
+ if (appState?.cpu?.is_mining) {
+ setTopStatus('Mining');
+ } else {
+ setTopStatus('Not mining');
+ }
+ }, [appState?.cpu?.is_mining]);
+
+ return (
+ <Typography variant="h5" textTransform="uppercase">
+ {topStatus}
+ </Typography>
+ );
+}
+
+export default TopStatus;

src/containers/Dashboard/styles.ts

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import { LinearProgress, Box } from '@mui/material';
-import { headerHeight } from '../../theme/styles';
+import { headerHeight, sidebarWidth } from '../../theme/styles';
 
 export const DashboardContainer = styled(Box)(() => ({
  display: 'flex',
@@ -38,12 +38,13 @@ export const VisualModeContainer = styled(Box)(({ theme }) => ({
  right: theme.spacing(1),
 }));
 
-export const BlockInfoContainer = styled(Box)(({ theme }) => ({
+export const InfoContainer = styled(Box)(({ theme }) => ({
  position: 'absolute',
  top: `calc(${headerHeight} + ${theme.spacing(1)})`,
  right: theme.spacing(4),
  display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
+ alignItems: 'flex-start',
+ justifyContent: 'space-between',
+ width: `calc(100% - ${sidebarWidth} - ${theme.spacing(8)})`,
  gap: theme.spacing(2),
 }));

src/containers/SideBar/TariMiner/TariMiner.tsx → src/containers/SideBar/Miner/Miner.tsx

@@ -1,30 +1,20 @@
-import { Typography, Stack, IconButton } from '@mui/material';
-import Tile from './components/Tile';
-import { MinerContainer, TileContainer } from './styles';
-import { IoResize } from 'react-icons/io5';
-import AutoMiner from './components/AutoMiner';
+import Tile from './components/Tile.tsx';
+import { MinerContainer, TileContainer } from './styles.ts';
+import AutoMiner from './components/AutoMiner.tsx';
+import Scheduler from './components/Scheduler.tsx';
 import useAppStateStore from '../../../store/appStateStore.ts';
-import SettingsDialog from '../Settings/Settings.tsx';
 import ModeSelect from './components/ModeSelect.tsx';
 
-function TariMiner() {
+function Miner() {
  const { cpuUsage, hashRate } = useAppStateStore((state) => ({
  cpuUsage: state.cpuUsage,
  hashRate: state.hashRate,
  }));
 
  return (
  <MinerContainer>
- <Stack direction="row" justifyContent="space-between" alignItems="center">
- <Typography variant="h3">Tari Miner</Typography>
- <Stack direction="row" spacing={0.5}>
- <SettingsDialog />
- <IconButton onClick={() => console.log('Expand Sidebar')}>
- <IoResize size={16} />
- </IconButton>
- </Stack>
- </Stack>
  <AutoMiner />
+ <Scheduler />
  <TileContainer>
  <Tile title="Resources" stats="GPU" />
  <ModeSelect />
@@ -38,4 +28,4 @@ function TariMiner() {
  );
 }
 
-export default TariMiner;
+export default Miner;

src/containers/SideBar/TariMiner/components/AutoMiner.tsx → src/containers/SideBar/Miner/components/AutoMiner.tsx

@@ -1,24 +1,20 @@
 import { FormGroup, Switch, Stack, Typography } from '@mui/material';
-import { AutoMinerContainer, ScheduleButton } from '../styles';
-import { IoCalendar } from 'react-icons/io5';
+import { AutoMinerContainer } from '../styles';
 
 function AutoMiner() {
  return (
  <Stack direction="column" spacing={1}>
  <AutoMinerContainer>
  <Stack direction="column" spacing={1}>
  <Typography variant="h5">Auto Miner</Typography>
- <Typography variant="body1">
+ <Typography variant="body2">
  Auto miner will turn on your miner when your machine is idle
  </Typography>
  </Stack>
  <FormGroup>
  <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple />
  </FormGroup>
  </AutoMinerContainer>
- <ScheduleButton variant="contained" startIcon={<IoCalendar size="16" />}>
- Setup scheduler
- </ScheduleButton>
  </Stack>
  );
 }

src/containers/SideBar/Miner/components/Scheduler.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import {
+ IconButton,
+ Dialog,
+ DialogContent,
+ DialogActions,
+ Button,
+ Stack,
+ Box,
+ Typography,
+ Divider,
+} from '@mui/material';
+import { IoClose } from 'react-icons/io5';
+import { IoCalendar } from 'react-icons/io5';
+import { ScheduleButton } from '../styles';
+
+function Scheduler() {
+ const [open, setOpen] = useState(false);
+
+ const handleClickOpen = () => setOpen(true);
+ const handleClose = () => setOpen(false);
+
+ const handleCancel = () => {
+ handleClose();
+ };
+
+ const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+ event.preventDefault();
+ handleClose();
+ };
+
+ return (
+ <>
+ <ScheduleButton
+ variant="contained"
+ startIcon={<IoCalendar size="16" />}
+ onClick={handleClickOpen}
+ >
+ Setup scheduler
+ </ScheduleButton>
+ <Dialog open={open} onClose={handleClose}>
+ <DialogContent
+ style={{
+ width: '600px',
+ height: '600px',
+ }}
+ >
+ <Stack
+ direction="row"
+ justifyContent="space-between"
+ alignItems="center"
+ pb={1}
+ >
+ <Typography variant="h4">Mining Schedules</Typography>
+ <IconButton onClick={handleClose}>
+ <IoClose size={20} />
+ </IconButton>
+ </Stack>
+ <Divider />
+ <Box>
+ <Typography variant="body2" mt={2}>
+ Schedule your mining activity
+ </Typography>
+ </Box>
+ <Box component="form" onSubmit={handleSubmit}>
+ <DialogActions>
+ <Button onClick={handleCancel} variant="outlined">
+ Cancel
+ </Button>
+ <Button type="submit" variant="contained">
+ Submit
+ </Button>
+ </DialogActions>
+ </Box>
+ </DialogContent>
+ </Dialog>
+ </>
+ );
+}
+
+export default Scheduler;