From 6c2131aacc06790e1d140827556316821d1ab429 Mon Sep 17 00:00:00 2001 From: Erika Date: Fri, 12 Jul 2024 14:08:28 +0200 Subject: [PATCH 1/2] feat: tauri elements & theme updates --- ui/backend/src/main.rs | 13 +- ui/backend/tauri.conf.json | 19 +- ui/frontend/package.json | 2 +- .../SettingsContainer/SettingsDialog.tsx | 5 - .../src/containers/SettingsContainer/types.ts | 1 - .../src/containers/TitleBar/HeaderButtons.tsx | 80 ++++++ .../src/containers/TitleBar/TitleBar.tsx | 72 +++++ ui/frontend/src/containers/TitleBar/styles.ts | 75 +++++ ui/frontend/src/styles.css | 2 +- ui/frontend/src/styles/styles/typography.ts | 10 +- ui/frontend/src/theme/MainLayout.tsx | 259 ++++++++---------- ui/frontend/src/theme/styles.ts | 6 +- ui/frontend/src/theme/theme.css | 9 +- ui/frontend/src/theme/tokens.ts | 55 ++-- 14 files changed, 409 insertions(+), 199 deletions(-) create mode 100644 ui/frontend/src/containers/TitleBar/HeaderButtons.tsx create mode 100644 ui/frontend/src/containers/TitleBar/TitleBar.tsx create mode 100644 ui/frontend/src/containers/TitleBar/styles.ts diff --git a/ui/backend/src/main.rs b/ui/backend/src/main.rs index 72a1cb32..69661db4 100644 --- a/ui/backend/src/main.rs +++ b/ui/backend/src/main.rs @@ -49,13 +49,12 @@ fn main() -> Result<(), Error> { let app = tauri::Builder::default() .setup(|app| { - #[cfg(debug_assertions)] // only include this code on debug builds - { - let window = app.get_window("main").unwrap(); - window.open_devtools(); - // window.close_devtools(); - } - + // #[cfg(debug_assertions)] // only include this code on debug builds + // { + // let window = app.get_window("main").unwrap(); + // window.open_devtools(); + // // window.close_devtools(); + // } tari_sdm_launchpad::tauri::bus_setup(app) }) .build(tauri::generate_context!())?; diff --git a/ui/backend/tauri.conf.json b/ui/backend/tauri.conf.json index 0b267674..b7cb4f08 100644 --- a/ui/backend/tauri.conf.json +++ b/ui/backend/tauri.conf.json @@ -67,18 +67,29 @@ "open": true, "scope": [], "sidecar": false - } + }, + "window": { + "all": false, + "close": true, + "hide": true, + "show": true, + "maximize": true, + "minimize": true, + "unmaximize": true, + "unminimize": true, + "startDragging": true + } }, "windows": [ { "title": "Tari Launchpad", "width": 1200, - "minWidth": 1200, + "minWidth": 1000, "height": 800, - "minHeight": 796, + "minHeight": 600, "resizable": true, "fullscreen": false, - "decorations": true, + "decorations": false, "transparent": true } ], diff --git a/ui/frontend/package.json b/ui/frontend/package.json index adfbb3b2..43e1953c 100644 --- a/ui/frontend/package.json +++ b/ui/frontend/package.json @@ -8,7 +8,7 @@ "build": "tsc && vite build", "preview": "vite preview", "tauri": "tauri", - "start": "npm run build && cargo run --bin tari_bus_tauri" + "start": "npm run build && cargo run --bin tari_launchpad" }, "dependencies": { "@emotion/react": "^11.11.4", diff --git a/ui/frontend/src/containers/SettingsContainer/SettingsDialog.tsx b/ui/frontend/src/containers/SettingsContainer/SettingsDialog.tsx index b1e99223..afdbcb08 100644 --- a/ui/frontend/src/containers/SettingsContainer/SettingsDialog.tsx +++ b/ui/frontend/src/containers/SettingsContainer/SettingsDialog.tsx @@ -5,7 +5,6 @@ import ThemeSwitch from '../../components/ThemeSwitch'; import MergedMiningSettings from './MergedMiningSettings/MergedMiningSettings'; import BaseNodeSettings from './BaseNodeSettings/BaseNodeSettings'; import ShaMiningSettings from './ShaMiningSettings/ShaMiningSettings'; -import ResetSettings from './ResetSettings/ResetSettings'; import { useTheme } from '@mui/material/styles'; import { HorisontalButtons } from '../../components/StyledComponents'; import { @@ -133,10 +132,6 @@ function SettingsDialog() { /> ), }, - { - label: 'Reset', - component: , - }, ]; const renderTab = menuItems.map((item, index) => { diff --git a/ui/frontend/src/containers/SettingsContainer/types.ts b/ui/frontend/src/containers/SettingsContainer/types.ts index d40680c9..e713abba 100644 --- a/ui/frontend/src/containers/SettingsContainer/types.ts +++ b/ui/frontend/src/containers/SettingsContainer/types.ts @@ -18,7 +18,6 @@ export const BaseNodeSettingsSchema = z.object({ runOnStartup: z.boolean(), }); - export const FormDataSchema = z.object({ mergedMiningSettings: MergedMiningSettingsSchema, baseNodeSettings: BaseNodeSettingsSchema, diff --git a/ui/frontend/src/containers/TitleBar/HeaderButtons.tsx b/ui/frontend/src/containers/TitleBar/HeaderButtons.tsx new file mode 100644 index 00000000..9f6f046a --- /dev/null +++ b/ui/frontend/src/containers/TitleBar/HeaderButtons.tsx @@ -0,0 +1,80 @@ +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import Switch from '@mui/material/Switch'; +import FormGroup from '@mui/material/FormGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import useAppStateStore from '../../store/appStateStore'; +import SvgSetting from '../../styles/Icons/Setting2'; +import { useShallow } from 'zustand/react/shallow'; + +function HeaderButtons({ + open, + handleDrawerClose, + handleDrawerOpen, +}: { + open: boolean; + handleDrawerClose: () => void; + handleDrawerOpen: () => void; +}) { + const { setOpenSettings } = useAppStateStore( + useShallow((state) => ({ + setOpenSettings: state.setOpenSettings, + })) + ); + function handleOpenSettings() { + setOpenSettings(true); + } + + const SettingsButton = () => { + return ( + + ); + }; + + const ExpertViewToggle = () => { + return ( + + + } + label={ + + Expert View + + } + labelPlacement="end" + /> + + ); + }; + + return ( + + + + + ); +} + +export default HeaderButtons; diff --git a/ui/frontend/src/containers/TitleBar/TitleBar.tsx b/ui/frontend/src/containers/TitleBar/TitleBar.tsx new file mode 100644 index 00000000..171adce0 --- /dev/null +++ b/ui/frontend/src/containers/TitleBar/TitleBar.tsx @@ -0,0 +1,72 @@ +import { useState } from 'react'; +import { appWindow } from '@tauri-apps/api/window'; +import { Stack } from '@mui/material'; +import { IoClose, IoRemove } from 'react-icons/io5'; +import { RiExpandUpDownFill, RiContractUpDownFill } from 'react-icons/ri'; +import { + CloseButton, + MinimizeButton, + ToggleButton, + MinMaxStyle, + TitleBarContainer, +} from './styles'; +import TariLogo from '../../assets/tari-logo'; +import HeaderButtons from './HeaderButtons'; +import { useTheme } from '@mui/material/styles'; + +const TitleBar = ({ + open, + handleDrawerClose, + handleDrawerOpen, + fullScreen, +}: { + open: boolean; + handleDrawerClose: () => void; + handleDrawerOpen: () => void; + fullScreen: boolean; +}) => { + const [isExpanded, setIsExpanded] = useState(false); + const theme = useTheme(); + const minimize = () => appWindow.minimize(); + const close = () => appWindow.close(); + const toggleMaximize = () => { + setIsExpanded(!isExpanded); + appWindow.toggleMaximize(); + }; + + return ( + + + {fullScreen ? null : ( + <> + + + + + + + + + {isExpanded ? ( + + ) : ( + + )} + + + + + + + )} + + + + ); +}; + +export default TitleBar; diff --git a/ui/frontend/src/containers/TitleBar/styles.ts b/ui/frontend/src/containers/TitleBar/styles.ts new file mode 100644 index 00000000..4c6f3764 --- /dev/null +++ b/ui/frontend/src/containers/TitleBar/styles.ts @@ -0,0 +1,75 @@ +import { styled } from '@mui/material/styles'; +import { IconButton } from '@mui/material'; + +const buttonSize = '14px'; +const colors = { + close: '#ED695E', + closeDark: '#D24F43', + minMax: '#F6BD50', + minMaxDark: '#D8A040', + maximize: '#61C354', + maximizeDark: '#51A73E', + icon: '#000', +}; + +export const MinMaxStyle = { + transform: 'rotate(135deg)', +}; + +export const CloseButton = styled(IconButton)({ + backgroundColor: colors.close, + border: `1px solid ${colors.closeDark}`, + height: buttonSize, + width: buttonSize, + boxShadow: 'none', + padding: 0, + color: colors.close, + '&:hover': { + backgroundColor: colors.close, + borderColor: colors.closeDark, + color: colors.icon, + }, +}); + +export const TitleBarContainer = styled('div')({ + height: '64px', + userSelect: 'none', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + position: 'fixed', + top: 0, + left: 0, + right: 0, + zIndex: 1000, +}); + +export const MinimizeButton = styled(IconButton)({ + backgroundColor: colors.minMax, + border: `1px solid ${colors.minMaxDark}`, + height: buttonSize, + width: buttonSize, + boxShadow: 'none', + padding: 0, + color: colors.minMax, + '&:hover': { + backgroundColor: colors.minMax, + borderColor: colors.minMaxDark, + color: colors.icon, + }, +}); + +export const ToggleButton = styled(IconButton)({ + backgroundColor: colors.maximize, + border: `1px solid ${colors.maximizeDark}`, + height: buttonSize, + width: buttonSize, + boxShadow: 'none', + padding: 0, + color: colors.maximize, + '&:hover': { + backgroundColor: colors.maximize, + borderColor: colors.maximizeDark, + color: colors.icon, + }, +}); diff --git a/ui/frontend/src/styles.css b/ui/frontend/src/styles.css index f7de85bf..9d02f5f3 100644 --- a/ui/frontend/src/styles.css +++ b/ui/frontend/src/styles.css @@ -5,7 +5,6 @@ font-weight: 400; color: #0f0f0f; - background-color: #f6f6f6; font-synthesis: none; text-rendering: optimizeLegibility; @@ -21,6 +20,7 @@ flex-direction: column; justify-content: center; text-align: center; + border-radius: 50px; } .logo { diff --git a/ui/frontend/src/styles/styles/typography.ts b/ui/frontend/src/styles/styles/typography.ts index ba1aa7af..a6134e2e 100644 --- a/ui/frontend/src/styles/styles/typography.ts +++ b/ui/frontend/src/styles/styles/typography.ts @@ -10,18 +10,16 @@ export const font = { const typography = { header: { - fontSize: 32, - lineHeight: '44px', - fontFamily: 'DrukMedium', + fontSize: 26, + lineHeight: '38px', + fontFamily: 'PoppinsMedium', fontWeight: 500, - // textTransform: 'uppercase', }, subheader: { fontSize: 24, lineHeight: '38px', - fontFamily: 'DrukMedium', + fontFamily: 'PoppinsMedium', fontWeight: 500, - // textTransform: 'uppercase', }, defaultHeavy: { fontSize: 14, diff --git a/ui/frontend/src/theme/MainLayout.tsx b/ui/frontend/src/theme/MainLayout.tsx index 1678cac5..fcee7c68 100644 --- a/ui/frontend/src/theme/MainLayout.tsx +++ b/ui/frontend/src/theme/MainLayout.tsx @@ -5,27 +5,21 @@ import Drawer from '@mui/material/Drawer'; import CssBaseline from '@mui/material/CssBaseline'; import Divider from '@mui/material/Divider'; import Button from '@mui/material/Button'; -import Switch from '@mui/material/Switch'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; import './theme.css'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import { light, dark, componentSettings } from './tokens'; import useThemeStore from '../store/themeStore'; import ExpertViewTabs from '../containers/Dashboard/ExpertView/ExpertViewTabs'; import { Container } from '@mui/material'; -import TariLogo from '../assets/tari-logo'; import { SnackbarProvider } from 'notistack'; -// import { SnackbarCloseButton } from '../containers/TBotContainer/TBot'; -// import { CustomSnackbarContent } from '../containers/TBotContainer/TBot'; import { MaterialDesignContent } from 'notistack'; import Fade from '../components/Fade'; -import useAppStateStore from '../store/appStateStore'; import SvgMonitor from '../styles/Icons/Monitor'; import typography from '../styles/styles/typography'; -import SvgSetting from '../styles/Icons/Setting2'; -import { DrawerHeader, Main, MenuContainer } from './styles'; +import { DrawerHeader, Main } from './styles'; import { useShallow } from 'zustand/react/shallow'; +import TitleBar from '../containers/TitleBar/TitleBar'; +import { appBorderRadius } from './tokens'; const StyledMaterialDesignContent = styled(MaterialDesignContent)( ({ theme }) => ({ @@ -53,7 +47,6 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)( }, }) ); - export default function MainLayout({ children, }: { @@ -64,16 +57,12 @@ export default function MainLayout({ 'normal' ); const [drawerWidth, setDrawerWidth] = useState(window.innerWidth * 0.5); - const { setOpenSettings } = useAppStateStore( - useShallow((state) => ({ - setOpenSettings: state.setOpenSettings, - })) - ); const { themeMode } = useThemeStore( useShallow((state) => ({ themeMode: state.themeMode, })) ); + const headerHeight = 64; const themeOptions = (mode: string) => { @@ -109,10 +98,6 @@ export default function MainLayout({ } }; - function handleOpenSettings() { - setOpenSettings(true); - } - useEffect(() => { const handleResize = () => { setDrawerWidth(window.innerWidth * 0.5); @@ -125,54 +110,6 @@ export default function MainLayout({ }; }, []); - const ExpertViewToggle = () => { - return ( - - - } - label="Expert View" - labelPlacement="end" - /> - - ); - }; - - const Menu = () => { - return ( - - - - - - - ); - }; - return ( - - - - - - - -
- - {children} -
- - + - - +
+ + {children} +
+ + - - - - - - - - + + + + + + + + + diff --git a/ui/frontend/src/theme/styles.ts b/ui/frontend/src/theme/styles.ts index e3ea278c..0ab4a5b2 100644 --- a/ui/frontend/src/theme/styles.ts +++ b/ui/frontend/src/theme/styles.ts @@ -16,11 +16,7 @@ export const Main = styled('main', { drawerWidth: number; }>(({ theme, open, contentWidth, drawerWidth }) => ({ flexGrow: 1, - backgroundColor: - theme.palette.mode === 'light' - ? theme.palette.background.paper - : theme.palette.background.default, - minHeight: '100vh', + height: '100vh', padding: theme.spacing(3), transition: theme.transitions.create('margin', { easing: theme.transitions.easing.sharp, diff --git a/ui/frontend/src/theme/theme.css b/ui/frontend/src/theme/theme.css index 6f618f4d..7d6a86ac 100644 --- a/ui/frontend/src/theme/theme.css +++ b/ui/frontend/src/theme/theme.css @@ -48,12 +48,15 @@ font-family: 'DrukSuper'; } -body { +body, +html { margin: 0; font-family: 'PoppinsMedium', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: #f5f5f7; + background-color: transparent !important; + border-radius: 12px; + height: 100%; } code { @@ -135,7 +138,7 @@ input { } .notistack-container-dark { - background: #0c0e2a; + background: #111111; padding: 8px 14px; border-radius: 24px; right: 90px !important; diff --git a/ui/frontend/src/theme/tokens.ts b/ui/frontend/src/theme/tokens.ts index 72b00f42..e97877a9 100644 --- a/ui/frontend/src/theme/tokens.ts +++ b/ui/frontend/src/theme/tokens.ts @@ -33,6 +33,8 @@ import { import gradients from '../styles/styles/gradients'; import typography from '../styles/styles/typography'; +export const appBorderRadius = 12; + export const componentSettings: ThemeOptions = { shape: { borderRadius: 8, @@ -43,41 +45,47 @@ export const componentSettings: ThemeOptions = { fontSize: 14, body1: { fontSize: '14px', - // letterSpacing: '0.1px', + lineHeight: '20px', }, body2: { fontSize: '12px', - lineHeight: '1.5rem', + lineHeight: '18px', }, h1: { - fontSize: '2.2rem', - lineHeight: '3.2rem', - fontFamily: '"PoppinsBold", sans-serif', + fontSize: '30px', + lineHeight: '38px', + fontFamily: '"PoppinsMedium", sans-serif', + letterSpacing: '-0.4px', }, h2: { - fontSize: '1.9rem', - lineHeight: '2.9rem', - fontFamily: '"PoppinsBold", sans-serif', + fontSize: '26px', + lineHeight: '30px', + fontFamily: '"PoppinsMedium", sans-serif', + letterSpacing: '-0.4px', }, h3: { - fontSize: '1.6rem', - lineHeight: '2.6rem', - fontFamily: '"PoppinsBold", sans-serif', + fontSize: '24px', + lineHeight: '28px', + fontFamily: '"PoppinsMedium", sans-serif', + letterSpacing: '-0.4px', }, h4: { - fontSize: '1.3rem', - lineHeight: '2.3rem', - fontFamily: '"PoppinsBold", sans-serif', + fontSize: '20px', + lineHeight: '24px', + fontFamily: '"PoppinsMedium", sans-serif', + letterSpacing: '-0.4px', }, h5: { - fontSize: '1rem', - lineHeight: '2em', - fontFamily: '"PoppinsBold", sans-serif', + fontSize: '16px', + lineHeight: '20px', + fontFamily: '"PoppinsMedium", sans-serif', + letterSpacing: '-0.4px', }, h6: { - fontSize: '0.875rem', - lineHeight: '1.8rem', - fontFamily: '"PoppinsBold", sans-serif', + fontSize: '14px', + lineHeight: '18px', + fontFamily: '"PoppinsMedium", sans-serif', + letterSpacing: '-0.4px', }, }, transitions: { @@ -298,6 +306,7 @@ export const componentSettings: ThemeOptions = { BackdropProps: { sx: (theme) => ({ backdropFilter: 'blur(1px)', + borderRadius: `${appBorderRadius}px`, backgroundColor: theme.palette.mode === 'light' ? 'rgba(250, 250, 250, 0.5)' @@ -488,15 +497,15 @@ export const dark: ThemeOptions = { dark: brightGreen[400], light: brightGreen[600], }, - divider: 'rgba(255,255,255,0.06)', + divider: 'rgba(255,255,255,0.1)', text: { primary: '#FFFFFF', secondary: grey[300], disabled: 'rgba(255,255,255,0.4)', }, background: { - default: '#040723', - paper: '#0C0E2A', + default: '#1D1D1D', + paper: '#2A2A2A', }, success: { main: success[200], From c8589e4b28dfc62e04dce695cc9cd89b70ed3d43 Mon Sep 17 00:00:00 2001 From: Erika Date: Fri, 12 Jul 2024 14:34:23 +0200 Subject: [PATCH 2/2] fix: remove main.rs changes --- ui/backend/src/main.rs | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/ui/backend/src/main.rs b/ui/backend/src/main.rs index 69661db4..72a1cb32 100644 --- a/ui/backend/src/main.rs +++ b/ui/backend/src/main.rs @@ -49,12 +49,13 @@ fn main() -> Result<(), Error> { let app = tauri::Builder::default() .setup(|app| { - // #[cfg(debug_assertions)] // only include this code on debug builds - // { - // let window = app.get_window("main").unwrap(); - // window.open_devtools(); - // // window.close_devtools(); - // } + #[cfg(debug_assertions)] // only include this code on debug builds + { + let window = app.get_window("main").unwrap(); + window.open_devtools(); + // window.close_devtools(); + } + tari_sdm_launchpad::tauri::bus_setup(app) }) .build(tauri::generate_context!())?;