diff --git a/src/App.tsx b/src/App.tsx
index d3bc57689..7381499d1 100644
--- a/src/App.tsx
+++ b/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);
diff --git a/src/assets/backgrounds/loser.jpg b/src/assets/backgrounds/loser.jpg
index 217c1c0cd..5e5d569e9 100644
Binary files a/src/assets/backgrounds/loser.jpg and b/src/assets/backgrounds/loser.jpg differ
diff --git a/src/containers/AppBackground/AppBackground.tsx b/src/containers/AppBackground/AppBackground.tsx
index 7f2b0f4b1..d6b91144b 100644
--- a/src/containers/AppBackground/AppBackground.tsx
+++ b/src/containers/AppBackground/AppBackground.tsx
@@ -1,7 +1,5 @@
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';
@@ -9,35 +7,8 @@ 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 (
+
+ {children}
+
+ );
+ }
+
return (
{children}
- {/* */}
);
}
diff --git a/src/containers/AppBackground/styles.ts b/src/containers/AppBackground/styles.ts
new file mode 100644
index 000000000..3c9885ffa
--- /dev/null
+++ b/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',
+ })
+);
diff --git a/src/containers/Dashboard/MiningView/MiningView.tsx b/src/containers/Dashboard/MiningView/MiningView.tsx
index 80ad41aae..2e561976e 100644
--- a/src/containers/Dashboard/MiningView/MiningView.tsx
+++ b/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 (
<>
-
+
+
+
+
>
diff --git a/src/containers/Dashboard/MiningView/components/BlockInfo.tsx b/src/containers/Dashboard/MiningView/components/BlockInfo.tsx
index db6170a97..ff56ce4d1 100644
--- a/src/containers/Dashboard/MiningView/components/BlockInfo.tsx
+++ b/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 (
-
+
#24,475
Floor
@@ -18,7 +17,7 @@ function BlockInfo() {
01:23:05
Current floor build time
-
+
);
}
diff --git a/src/containers/Dashboard/MiningView/components/TopStatus.tsx b/src/containers/Dashboard/MiningView/components/TopStatus.tsx
new file mode 100644
index 000000000..432e3c796
--- /dev/null
+++ b/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 (
+
+ {topStatus}
+
+ );
+}
+
+export default TopStatus;
diff --git a/src/containers/Dashboard/styles.ts b/src/containers/Dashboard/styles.ts
index 42c36f6d9..ef1e51b81 100644
--- a/src/containers/Dashboard/styles.ts
+++ b/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),
}));
diff --git a/src/containers/SideBar/ExpandableBox.tsx b/src/containers/SideBar/ExpandableBox.tsx
deleted file mode 100644
index 76557c278..000000000
--- a/src/containers/SideBar/ExpandableBox.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Button } from '@mui/material';
-import { styled } from '@mui/system';
-
-const ExpandableBoxContainer = styled(Box)(({ theme }) => ({
- position: 'absolute',
- overflow: 'hidden',
- transition: 'width 0.3s ease-in-out',
- backgroundColor: theme.palette.background.paper,
- borderRadius: theme.shape.borderRadius,
- // justifySelf: 'stretch',
- // alignSelf: 'stretch',
-}));
-
-interface ExpandableBoxProps {
- initialWidth: string;
- expandedWidth: string;
- children: React.ReactNode;
-}
-
-const ExpandableBox: React.FC = ({
- initialWidth,
- expandedWidth,
- children,
-}) => {
- const [expanded, setExpanded] = useState(false);
-
- const handleToggle = () => {
- setExpanded((prevExpanded) => !prevExpanded);
- };
-
- return (
-
-
- {children}
-
-
-
- );
-};
-
-export default ExpandableBox;
diff --git a/src/containers/SideBar/TariMiner/TariMiner.tsx b/src/containers/SideBar/Miner/Miner.tsx
similarity index 50%
rename from src/containers/SideBar/TariMiner/TariMiner.tsx
rename to src/containers/SideBar/Miner/Miner.tsx
index b54b5ecb7..b9ecbcc65 100644
--- a/src/containers/SideBar/TariMiner/TariMiner.tsx
+++ b/src/containers/SideBar/Miner/Miner.tsx
@@ -1,13 +1,11 @@
-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,
@@ -15,16 +13,8 @@ function TariMiner() {
return (
-
- Tari Miner
-
-
- console.log('Expand Sidebar')}>
-
-
-
-
+
@@ -38,4 +28,4 @@ function TariMiner() {
);
}
-export default TariMiner;
+export default Miner;
diff --git a/src/containers/SideBar/TariMiner/components/AutoMiner.tsx b/src/containers/SideBar/Miner/components/AutoMiner.tsx
similarity index 67%
rename from src/containers/SideBar/TariMiner/components/AutoMiner.tsx
rename to src/containers/SideBar/Miner/components/AutoMiner.tsx
index 7d459e4d8..f13235fe7 100644
--- a/src/containers/SideBar/TariMiner/components/AutoMiner.tsx
+++ b/src/containers/SideBar/Miner/components/AutoMiner.tsx
@@ -1,6 +1,5 @@
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 (
@@ -8,7 +7,7 @@ function AutoMiner() {
Auto Miner
-
+
Auto miner will turn on your miner when your machine is idle
@@ -16,9 +15,6 @@ function AutoMiner() {
- }>
- Setup scheduler
-
);
}
diff --git a/src/containers/SideBar/TariMiner/components/ModeSelect.tsx b/src/containers/SideBar/Miner/components/ModeSelect.tsx
similarity index 100%
rename from src/containers/SideBar/TariMiner/components/ModeSelect.tsx
rename to src/containers/SideBar/Miner/components/ModeSelect.tsx
diff --git a/src/containers/SideBar/Miner/components/Scheduler.tsx b/src/containers/SideBar/Miner/components/Scheduler.tsx
new file mode 100644
index 000000000..3db843361
--- /dev/null
+++ b/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) => {
+ event.preventDefault();
+ handleClose();
+ };
+
+ return (
+ <>
+ }
+ onClick={handleClickOpen}
+ >
+ Setup scheduler
+
+
+ >
+ );
+}
+
+export default Scheduler;
diff --git a/src/containers/SideBar/TariMiner/components/Tile.tsx b/src/containers/SideBar/Miner/components/Tile.tsx
similarity index 100%
rename from src/containers/SideBar/TariMiner/components/Tile.tsx
rename to src/containers/SideBar/Miner/components/Tile.tsx
diff --git a/src/containers/SideBar/TariMiner/styles.ts b/src/containers/SideBar/Miner/styles.ts
similarity index 94%
rename from src/containers/SideBar/TariMiner/styles.ts
rename to src/containers/SideBar/Miner/styles.ts
index be9f3e7bc..75740a9c5 100644
--- a/src/containers/SideBar/TariMiner/styles.ts
+++ b/src/containers/SideBar/Miner/styles.ts
@@ -39,4 +39,7 @@ export const AutoMinerContainer = styled(Box)(({ theme }) => ({
export const ScheduleButton = styled(Button)(({ theme }) => ({
backgroundColor: `${theme.palette.background.default} !important`,
color: theme.palette.text.secondary,
+ '&:hover': {
+ backgroundColor: `${theme.palette.divider} !important`,
+ },
}));
diff --git a/src/containers/SideBar/SideBar.tsx b/src/containers/SideBar/SideBar.tsx
index 621a01f7f..d3a8c704d 100644
--- a/src/containers/SideBar/SideBar.tsx
+++ b/src/containers/SideBar/SideBar.tsx
@@ -1,30 +1,33 @@
-import React from 'react';
-// import ExpandableBox from './ExpandableBox';
-import TariMiner from './TariMiner/TariMiner';
-import Wallet from './Wallet/Wallet';
-import { SideBarContainer, SideBarInner } from './styles';
+import Miner from './Miner/Miner';
+import Wallet from './components/Wallet';
+import Heading from './components/Heading';
+import {
+ SideBarContainer,
+ SideBarInner,
+ HeadingContainer,
+ BottomContainer,
+} from './styles';
import TestButtons from './TestButtons';
+import { useTheme } from '@mui/material/styles';
+import useAppStateStore from '../../store/appStateStore';
-const App: React.FC = () => {
+function SideBar() {
+ const theme = useTheme();
+ const sidebarOpen = useAppStateStore((state) => state.sidebarOpen);
return (
-
+
+
+
+
-
-
+
+
+
+
);
-};
-
-export default App;
-
-{
- /*
- Expandable Box Content
-
- This content is inside the expandable box. When expanded, it overlays
- the main content without affecting its layout.
-
- */
}
+
+export default SideBar;
diff --git a/src/containers/SideBar/TestButtons.tsx b/src/containers/SideBar/TestButtons.tsx
index af6aa3186..493db2b57 100644
--- a/src/containers/SideBar/TestButtons.tsx
+++ b/src/containers/SideBar/TestButtons.tsx
@@ -1,19 +1,16 @@
-import { Button, ButtonGroup, Stack, Divider, Typography } from '@mui/material';
+import { Button, ButtonGroup, Stack, Typography } from '@mui/material';
import useAppStateStore from '../../store/appStateStore';
-import { viewType, backgroundType } from '../../store/types';
+import { viewType } from '../../store/types';
import { useState } from 'react';
function TestButtons() {
- const { view, setView, background, setBackground } = useAppStateStore(
- (state) => ({
- view: state.view,
- setView: state.setView,
- background: state.background,
- setBackground: state.setBackground,
- })
- );
+ const { view, setView, setBackground } = useAppStateStore((state) => ({
+ view: state.view,
+ setView: state.setView,
+ setBackground: state.setBackground,
+ }));
const [selectedView, setSelectedView] = useState(view);
- const [selectedBg, setSelectedBg] = useState(background);
+ // const [selectedBg, setSelectedBg] = useState(background);
const handleSetView = (value: viewType) => {
setView(value);
@@ -26,10 +23,10 @@ function TestButtons() {
}
};
- const handleSetStatus = (value: backgroundType) => {
- setBackground(value);
- setSelectedBg(value);
- };
+ // const handleSetStatus = (value: backgroundType) => {
+ // setBackground(value);
+ // setSelectedBg(value);
+ // };
return (
@@ -54,7 +51,7 @@ function TestButtons() {
Mining
-
+ {/*
Backgrounds:
-
+ */}
);
}
diff --git a/src/containers/SideBar/Wallet/styles.ts b/src/containers/SideBar/Wallet/styles.ts
deleted file mode 100644
index 546bd80bd..000000000
--- a/src/containers/SideBar/Wallet/styles.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
-
-export const WalletContainer = styled(Box)(({ theme }) => ({
- display: 'flex',
- flexDirection: 'column',
- gap: theme.spacing(0.5),
- backgroundColor: theme.palette.background.default,
- paddingTop: theme.spacing(1),
- paddingBottom: theme.spacing(1),
- paddingLeft: theme.spacing(1.5),
- paddingRight: theme.spacing(1.5),
- borderRadius: theme.shape.borderRadius,
-}));
diff --git a/src/containers/SideBar/components/Heading.tsx b/src/containers/SideBar/components/Heading.tsx
new file mode 100644
index 000000000..0b82fa291
--- /dev/null
+++ b/src/containers/SideBar/components/Heading.tsx
@@ -0,0 +1,28 @@
+import { Stack, Typography, IconButton } from '@mui/material';
+import { CgArrowsExpandRight, CgCompressRight } from 'react-icons/cg';
+import SettingsDialog from './Settings';
+import useAppStateStore from '../../../store/appStateStore';
+
+function Heading() {
+ const { sidebarOpen, setSidebarOpen } = useAppStateStore((state) => ({
+ sidebarOpen: state.sidebarOpen,
+ setSidebarOpen: state.setSidebarOpen,
+ }));
+ return (
+
+ Tari Universe
+
+
+ setSidebarOpen(!sidebarOpen)}>
+ {sidebarOpen ? (
+
+ ) : (
+
+ )}
+
+
+
+ );
+}
+
+export default Heading;
diff --git a/src/containers/SideBar/Settings/Settings.tsx b/src/containers/SideBar/components/Settings.tsx
similarity index 100%
rename from src/containers/SideBar/Settings/Settings.tsx
rename to src/containers/SideBar/components/Settings.tsx
diff --git a/src/containers/SideBar/Wallet/Wallet.tsx b/src/containers/SideBar/components/Wallet.tsx
similarity index 83%
rename from src/containers/SideBar/Wallet/Wallet.tsx
rename to src/containers/SideBar/components/Wallet.tsx
index 7388eb3bc..589608223 100644
--- a/src/containers/SideBar/Wallet/Wallet.tsx
+++ b/src/containers/SideBar/components/Wallet.tsx
@@ -1,13 +1,11 @@
import { Typography, Stack } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';
-import { WalletContainer } from './styles';
+import { WalletContainer } from '../styles';
import { darkTheme } from '../../../theme/themes';
import useAppStateStore from '../../../store/appStateStore';
function Wallet() {
- const { wallet } = useAppStateStore((state) => ({
- wallet: state.wallet,
- }));
+ const wallet = useAppStateStore((state) => state.wallet);
return (
diff --git a/src/containers/SideBar/styles.ts b/src/containers/SideBar/styles.ts
index a824361b5..a28e952e1 100644
--- a/src/containers/SideBar/styles.ts
+++ b/src/containers/SideBar/styles.ts
@@ -1,19 +1,63 @@
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
+import { headerHeight, sidebarWidth } from '../../theme/styles';
-export const SideBarContainer = styled(Box)(({ theme }) => ({
+interface SideBarContainerProps {
+ sidebaropen: boolean;
+}
+
+export const SideBarContainer = styled(Box, {
+ shouldForwardProp: (prop) => prop !== 'sidebaropen',
+})(({ theme, sidebaropen }) => ({
backgroundColor: theme.palette.background.paper,
borderRadius: theme.shape.borderRadius,
- padding: theme.spacing(2),
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
marginBottom: theme.spacing(1),
marginTop: 0,
- overflowY: 'auto',
+ position: 'absolute',
+ top: headerHeight,
+ left: 0,
+ height: `calc(100vh - ${headerHeight} - ${theme.spacing(1)})`,
+ width: sidebaropen ? `calc(100% - ${theme.spacing(2)})` : sidebarWidth,
+ zIndex: 100,
+ transition: 'width 0.5s ease-in-out',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(2),
+ justifyContent: 'flex-start',
}));
export const SideBarInner = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
+ height: '100%',
+ overflowY: 'auto',
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
+}));
+
+export const BottomContainer = styled(Box)(({ theme }) => ({
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
+ paddingBottom: theme.spacing(2),
+}));
+
+export const HeadingContainer = styled(Box)(({ theme }) => ({
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
+ paddingTop: theme.spacing(2),
+}));
+
+export const WalletContainer = styled(Box)(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(0.5),
+ backgroundColor: theme.palette.background.default,
+ paddingTop: theme.spacing(1),
+ paddingBottom: theme.spacing(1),
+ paddingLeft: theme.spacing(1.5),
+ paddingRight: theme.spacing(1.5),
+ borderRadius: theme.shape.borderRadius,
}));
diff --git a/src/store/appStateStore.ts b/src/store/appStateStore.ts
index 3ecdb4e60..f2b470945 100644
--- a/src/store/appStateStore.ts
+++ b/src/store/appStateStore.ts
@@ -7,8 +7,12 @@ interface AppState {
setAppState: (value: any) => void;
error: string;
setError: (value: string) => void;
+ topStatus: string;
+ setTopStatus: (value: string) => void;
errorOpen: boolean;
setErrorOpen: (value: boolean) => void;
+
+ // gui
background: backgroundType;
setBackground: (value: backgroundType) => void;
view: viewType;
@@ -21,12 +25,18 @@ interface AppState {
setWallet: (value: { balance: number }) => void;
isMining: boolean;
setIsMining: (value: boolean) => void;
+ sidebarOpen: boolean;
+ setSidebarOpen: (value: boolean) => void;
+
+ // stats
cpuUsage: number;
setCpuUsage: (value: number) => void;
mode: modeType;
setMode: (value: modeType) => void;
hashRate: number;
setHashRate: (value: number) => void;
+
+ // functions
startMining: () => Promise;
stopMining: () => Promise;
}
@@ -36,8 +46,12 @@ const useAppStateStore = create((set) => ({
setAppState: (value) => set({ appState: value }),
error: '',
setError: (value) => set({ error: value }),
+ topStatus: 'Not mining',
+ setTopStatus: (value) => set({ topStatus: value }),
errorOpen: false,
setErrorOpen: (value) => set({ errorOpen: value }),
+
+ // gui
background: 'idle',
setBackground: (value) => set({ background: value }),
view: 'mining',
@@ -50,12 +64,18 @@ const useAppStateStore = create((set) => ({
setWallet: (value) => set({ wallet: value }),
isMining: false,
setIsMining: (value) => set({ isMining: value }),
+ sidebarOpen: false,
+ setSidebarOpen: (value) => set({ sidebarOpen: value }),
+
+ // stats
cpuUsage: 0,
setCpuUsage: (value) => set({ cpuUsage: value }),
mode: 'eco',
setMode: (value) => set({ mode: value }),
hashRate: 0,
setHashRate: (value) => set({ hashRate: value }),
+
+ // functions
startMining: async () => {
try {
await invoke('start_mining', {});
diff --git a/src/theme/styles.ts b/src/theme/styles.ts
index b5ea10bd1..52a0ca64c 100644
--- a/src/theme/styles.ts
+++ b/src/theme/styles.ts
@@ -8,14 +8,10 @@ export const ContainerInner = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'row',
alignItems: 'stretch',
+ justifyContent: 'center',
gap: theme.spacing(2),
minHeight: `calc(100vh - ${headerHeight})`,
- '& > :first-of-type': {
- width: sidebarWidth,
- },
- '& > :nth-child(2)': {
- flexGrow: 1,
- },
+ paddingLeft: sidebarWidth,
}));
export const DashboardContainer = styled(Box)(() => ({
diff --git a/src/theme/tokens.ts b/src/theme/tokens.ts
index 887bf1a91..4e7f45eaa 100644
--- a/src/theme/tokens.ts
+++ b/src/theme/tokens.ts
@@ -70,19 +70,19 @@ export const componentSettings: ThemeOptions = {
h4: {
fontSize: '20px',
lineHeight: '28px',
- fontFamily: '"PoppinsSemiBold", sans-serif',
+ fontFamily: '"PoppinsMedium", sans-serif',
letterSpacing: '-0.4px',
},
h5: {
fontSize: '16px',
lineHeight: '26px',
- fontFamily: '"PoppinsSemiBold", sans-serif',
+ fontFamily: '"PoppinsMedium", sans-serif',
letterSpacing: '-0.4px',
},
h6: {
fontSize: '14px',
lineHeight: '20px',
- fontFamily: '"PoppinsSemiBold", sans-serif',
+ fontFamily: '"PoppinsMedium", sans-serif',
letterSpacing: '-0.4px',
},
},