Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff 2025-06-24 00:04:36 -07:00 committed by GitHub
parent bea55d48a8
commit c1330d92b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions

View file

@ -0,0 +1,29 @@
.windows-button-group {
display: flex;
width: 130px;
height: 100%;
-webkit-app-region: no-drag;
}
.windows-button {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
-webkit-app-region: no-drag;
width: 50px;
height: 65px;
img {
width: 35%;
height: 50%;
}
&:hover {
background: rgb(125 125 125 / 30%);
}
}
.windows-button.exit-button {
background: var(--theme-colors-state-error);
}

View file

@ -1,7 +1,9 @@
import clsx from 'clsx';
import isElectron from 'is-electron';
import { useState } from 'react';
import { RiCheckboxBlankLine, RiCloseLine, RiSubtractLine } from 'react-icons/ri';
import styled from 'styled-components';
import styles from './window-controls.module.css';
const browser = isElectron() ? window.api.browser : null;
@ -9,32 +11,6 @@ interface WindowControlsProps {
style?: 'linux' | 'macos' | 'windows';
}
const WindowsButtonGroup = styled.div`
display: flex;
width: 130px;
height: 100%;
-webkit-app-region: no-drag;
`;
export const WindowsButton = styled.div<{ $exit?: boolean }>`
display: flex;
flex: 1;
align-items: center;
justify-content: center;
-webkit-app-region: no-drag;
width: 50px;
height: 65px;
img {
width: 35%;
height: 50%;
}
&:hover {
background: ${({ $exit }) => ($exit ? 'var(--danger-color)' : 'rgba(125, 125, 125, 30%)')};
}
`;
const close = () => browser?.exit();
const minimize = () => browser?.minimize();
@ -64,27 +40,27 @@ export const WindowControls = ({ style }: WindowControlsProps) => {
{isElectron() && (
<>
{style === 'windows' && (
<WindowsButtonGroup>
<WindowsButton
<div className={styles.windowsButtonGroup}>
<div
onClick={handleMinimize}
role="button"
>
<RiSubtractLine size={19} />
</WindowsButton>
<WindowsButton
</div>
<div
onClick={handleMaximize}
role="button"
>
<RiCheckboxBlankLine size={13} />
</WindowsButton>
<WindowsButton
$exit
</div>
<div
className={clsx(styles.windowsButton, styles.exitButton)}
onClick={handleClose}
role="button"
>
<RiCloseLine size={19} />
</WindowsButton>
</WindowsButtonGroup>
</div>
</div>
)}
</>
)}