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 + + + + + Mining Schedules + + + + + + + + Schedule your mining activity + + + + + + + + + + + + ); +} + +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', }, },