mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 19:01:40 +00:00
Migrate to Mantine v8 and Design Changes (#961)
* mantine v8 migration * various design changes and improvements
This commit is contained in:
parent
bea55d48a8
commit
c1330d92b2
473 changed files with 12469 additions and 11607 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue