feat: tauri ui elements & theme updates

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
       }
     ],

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",

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: <ResetSettings />,
-    },
   ];
 
   const renderTab = menuItems.map((item, index) => {

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,

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 (
+      <Button
+        onClick={handleOpenSettings}
+        size="medium"
+        startIcon={<SvgSetting />}
+        style={{
+          color: open ? '#fff' : 'inherit',
+        }}
+      >
+        Settings
+      </Button>
+    );
+  };
+
+  const ExpertViewToggle = () => {
+    return (
+      <FormGroup>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={open}
+              onChange={open ? handleDrawerClose : handleDrawerOpen}
+              inputProps={{ 'aria-label': 'toggle expert view' }}
+              style={{
+                marginRight: '4px',
+              }}
+            />
+          }
+          label={
+            <span
+              style={{
+                color: open ? '#fff' : 'inherit',
+              }}
+            >
+              Expert View
+            </span>
+          }
+          labelPlacement="end"
+        />
+      </FormGroup>
+    );
+  };
+
+  return (
+    <Stack direction="row" spacing={1} alignItems="center">
+      <SettingsButton />
+      <ExpertViewToggle />
+    </Stack>
+  );
+}
+
+export default HeaderButtons;

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 (
+    <TitleBarContainer data-tauri-drag-region>
+      <Stack direction="row" spacing={1} padding={1} alignItems={'center'}>
+        {fullScreen ? null : (
+          <>
+            <Stack direction="row" spacing={1} padding={1}>
+              <CloseButton onClick={close}>
+                <IoClose />
+              </CloseButton>
+              <MinimizeButton onClick={minimize}>
+                <IoRemove />
+              </MinimizeButton>
+              <ToggleButton onClick={toggleMaximize}>
+                {isExpanded ? (
+                  <RiContractUpDownFill style={MinMaxStyle} />
+                ) : (
+                  <RiExpandUpDownFill style={MinMaxStyle} />
+                )}
+              </ToggleButton>
+            </Stack>
+            <Stack direction="row" spacing={1} padding={1}>
+              <TariLogo fill={theme.palette.text.primary} />
+            </Stack>
+          </>
+        )}
+      </Stack>
+      <HeaderButtons
+        open={open}
+        handleDrawerClose={handleDrawerClose}
+        handleDrawerOpen={handleDrawerOpen}
+      />
+    </TitleBarContainer>
+  );
+};
+
+export default TitleBar;

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,
+  },
+});

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 {

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,