Skip to content

Commit abf09e1

Browse files
PeterTYLiuPeterTYLiu
committed
Improve appearance
1 parent d562261 commit abf09e1

5 files changed

Lines changed: 65 additions & 65 deletions

File tree

‎src/components/BottomControls/BottomControls.tsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { GetApp, Refresh, Share } from "@mui/icons-material";
22
import {
3+
Box,
34
Button,
45
Dialog,
56
DialogActions,
@@ -11,22 +12,22 @@ import {
1112
Stack,
1213
Tooltip,
1314
Typography,
14-
type IconButtonProps,
15+
type SxProps,
1516
} from "@mui/material";
1617
import { useState } from "react";
1718
import { toast } from "sonner";
1819
import { generateTheme } from "../../generateTheme";
1920
import { useInnerTheme } from "../../hooks/useInnerTheme";
2021
import { saveObjectToClipboard } from "../../utils";
2122

22-
const SHARED_ICONBUTTON_PROPS: IconButtonProps = {
23-
size: "large",
24-
sx: {
25-
bgcolor: "primary.main",
26-
"&:hover": { bgcolor: "primary.dark" },
27-
"&:disabled": { bgcolor: "primary.main", opacity: 0.5, color: "primary.contrastText" },
28-
color: "primary.contrastText",
29-
},
23+
const SHARED_BUTTON_STYLES: SxProps = {
24+
bgcolor: "background.paper",
25+
backgroundImage: "var(--mui-overlays-1)",
26+
"&:hover": { bgcolor: "background.paper" },
27+
"&:disabled": { bgcolor: "background.paper", opacity: 0.5, color: "text.primary" },
28+
color: "text.primary",
29+
borderRadius: 1,
30+
transition: "all 0.3s ease",
3031
};
3132

3233
const shareSite = async () => {
@@ -56,28 +57,25 @@ export const BottomControls = () => {
5657

5758
return (
5859
<Stack gap={2} sx={{ p: { xs: 2, sm: 3, md: 4 }, pt: { xs: 0, sm: 0, md: 0 } }} alignItems="center">
59-
<Stack gap={1.5} direction="row">
60-
<Button
61-
size="large"
62-
variant="contained"
63-
onClick={() => setThemeOptions(generateTheme())}
60+
<Stack gap={1} direction="row" sx={{ alignItems: "center" }}>
61+
<Box
6462
sx={{
65-
border: "2px solid transparent",
66-
borderImage: "conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red) 1",
67-
borderImageSlice: 1,
68-
transition: "all 0.3s ease",
69-
fontWeight: "bold",
63+
backgroundImage: "conic-gradient(#ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c1, #ff0000)",
64+
borderRadius: 1,
65+
p: "1px",
7066
}}
7167
>
72-
Randomize!
73-
</Button>
68+
<Button variant="contained" onClick={() => setThemeOptions(generateTheme())} sx={SHARED_BUTTON_STYLES}>
69+
Randomize!
70+
</Button>
71+
</Box>
7472
<Tooltip title="Export theme">
75-
<IconButton disabled={!hasEditedTheme} onClick={() => saveObjectToClipboard(themeOptions)} {...SHARED_ICONBUTTON_PROPS}>
73+
<IconButton disabled={!hasEditedTheme} onClick={() => saveObjectToClipboard(themeOptions)} sx={SHARED_BUTTON_STYLES}>
7674
<GetApp />
7775
</IconButton>
7876
</Tooltip>
7977
<Tooltip title="Reset">
80-
<IconButton disabled={!hasEditedTheme} onClick={() => setIsResetDialogOpen(true)} {...SHARED_ICONBUTTON_PROPS}>
78+
<IconButton disabled={!hasEditedTheme} onClick={() => setIsResetDialogOpen(true)} sx={SHARED_BUTTON_STYLES}>
8179
<Refresh />
8280
</IconButton>
8381
</Tooltip>
@@ -105,7 +103,7 @@ export const BottomControls = () => {
105103
</DialogActions>
106104
</Dialog>
107105
<Tooltip title="Share">
108-
<IconButton onClick={shareSite} {...SHARED_ICONBUTTON_PROPS}>
106+
<IconButton onClick={shareSite} sx={SHARED_BUTTON_STYLES}>
109107
<Share />
110108
</IconButton>
111109
</Tooltip>

‎src/components/ColourPicker/ColorPicker.tsx‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ export const ColorPicker = ({ value, onChange, ...fieldContainerProps }: ColorPi
3838
sx={{
3939
border: 1,
4040
borderInlineEnd: 0,
41+
borderRadius: 1,
42+
borderEndEndRadius: 0,
43+
borderStartEndRadius: 0,
4144
borderColor: "grey.600",
4245
width: "30px",
4346
position: "relative",
@@ -46,6 +49,9 @@ export const ColorPicker = ({ value, onChange, ...fieldContainerProps }: ColorPi
4649
"::before": {
4750
zIndex: 1,
4851
position: "absolute",
52+
borderRadius: "calc(var(--mui-shape-borderRadius) - 1px)",
53+
borderEndEndRadius: 0,
54+
borderStartEndRadius: 0,
4955
content: '""',
5056
inset: 0,
5157
bgcolor: value,
@@ -78,7 +84,10 @@ export const ColorPicker = ({ value, onChange, ...fieldContainerProps }: ColorPi
7884
key={value}
7985
sx={{
8086
fontFamily: "monospace",
81-
borderRadius: 2,
87+
88+
borderRadius: 1,
89+
borderStartStartRadius: 0,
90+
borderEndStartRadius: 0,
8291
width: "80px",
8392
border: 1,
8493
borderColor: "grey.600",
@@ -91,27 +100,6 @@ export const ColorPicker = ({ value, onChange, ...fieldContainerProps }: ColorPi
91100
onBlur={onInputBlur}
92101
onKeyDown={onInputEnter}
93102
/>
94-
{/* <Box
95-
component="input"
96-
type="number"
97-
max="100"
98-
min="0"
99-
sx={{
100-
"::-webkit-inner-spin-button": {
101-
"-webkit-appearance": "none",
102-
margin: 0,
103-
},
104-
fontFamily: "monospace",
105-
borderRadius: 2,
106-
width: "45px",
107-
border: 1,
108-
borderColor: "grey.600",
109-
fontSize: "12px",
110-
background: "transparent",
111-
color: "text.primary",
112-
textAlign: "center",
113-
}}
114-
/> */}
115103
</FieldContainer>
116104
);
117105
};

‎src/components/NumberSpecifier/NumberSpecifier.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,29 @@ interface NumberSpecifierProps extends FieldContainerProps {
1111
}
1212

1313
export const NumberSpecifier = ({ title, onReset, isDefault, onChange, unit, ...props }: NumberSpecifierProps) => {
14+
const hasUnits = Boolean(unit);
1415
return (
1516
<FieldContainer {...{ title, onReset, isDefault }}>
16-
<Stack direction="row" sx={{ marginInlineEnd: 2 }}>
17+
<Stack
18+
sx={{
19+
flexDirection: "row",
20+
alignContent: "stretch",
21+
marginInlineEnd: 2,
22+
position: "relative",
23+
}}
24+
>
1725
<Box
1826
component="input"
1927
type="number"
2028
onChange={(e) => onChange(e.target.valueAsNumber)}
2129
{...props}
2230
sx={{
23-
fontFamily: "monospace",
24-
width: "60px",
25-
borderRadius: 2,
31+
width: hasUnits ? "100px" : "60px",
32+
paddingInlineStart: 1.5,
33+
paddingInlineEnd: hasUnits ? "40px" : 1.5,
34+
borderRadius: 1,
2635
border: 1,
27-
textAlign: "center",
36+
textAlign: "start",
2837
borderColor: "grey.600",
2938
fontSize: "12px",
3039
background: "transparent",
@@ -39,9 +48,11 @@ export const NumberSpecifier = ({ title, onReset, isDefault, onChange, unit, ...
3948
<Box
4049
sx={{
4150
display: "grid",
42-
px: 1,
51+
position: "absolute",
52+
insetBlock: 0,
53+
insetInlineEnd: "calc(1.5 * var(--mui-spacing))",
4354
placeItems: "center",
44-
bgcolor: "grey.600",
55+
pointerEvents: "none",
4556
}}
4657
>
4758
<Typography variant="subtitle2" color="textSecondary">

‎src/components/TextEditor.tsx/TextEditor.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ export const TextEditor = () => {
132132
value={currentFont}
133133
inputValue={currentFont}
134134
freeSolo
135+
size="small"
135136
disableClearable={currentFont === DEFAULT_FONT}
136137
options={[DEFAULT_FONT, ...WEB_SAFE_FONTS, ...EXAMPLE_GOOGLE_FONTS]}
137138
groupBy={(option) => {
@@ -166,21 +167,14 @@ export const TextEditor = () => {
166167
</FormHelperText>
167168
{isGoogleFont && (
168169
<>
169-
<Typography variant="subtitle2" sx={{ mt: 2, mb: 0.5 }}>
170-
<Link component="button" onClick={copyCodeBlock}>
171-
Copy this snippet
172-
</Link>{" "}
173-
to use{" "}
174-
<Link target="_blank" href={"https://fonts.google.com/noto/specimen/" + currentFont?.replaceAll(" ", "+")}>
175-
this Google Font
176-
</Link>
177-
</Typography>
178170
<Box
179171
component="pre"
180172
ref={codeblockRef}
181173
sx={{
182174
m: 0,
175+
mt: 2,
183176
border: 1,
177+
borderRadius: 1,
184178
p: 1,
185179
overflow: "auto",
186180
borderColor: "grey.700",
@@ -195,6 +189,15 @@ export const TextEditor = () => {
195189
<br />
196190
{`<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${currentFont?.replaceAll(" ", "+")}:wght@${currentWeights.join(";")}&display=swap" />`}
197191
</Box>
192+
<FormHelperText>
193+
<Link component="button" onClick={copyCodeBlock}>
194+
Copy this snippet
195+
</Link>{" "}
196+
to use{" "}
197+
<Link target="_blank" href={"https://fonts.google.com/noto/specimen/" + currentFont?.replaceAll(" ", "+")}>
198+
{currentFont}
199+
</Link>
200+
</FormHelperText>
198201
</>
199202
)}
200203
</FieldGroupContainer>

‎src/main.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ const appThemeOptions: ThemeOptions = {
1010
cssVariables: { nativeColor: true },
1111
palette: {
1212
mode: "dark",
13-
primary: { main: "#34c2ff", contrastText: "#00344a" },
13+
primary: { main: "#72bcdc", contrastText: "#00344a" },
1414
secondary: { main: "#BBB" },
1515
},
16-
shape: { borderRadius: 0 },
16+
shape: { borderRadius: 3 },
1717
typography: {
1818
fontSize: 12,
1919
fontFamily: "Lexend",
@@ -28,7 +28,7 @@ const appThemeOptions: ThemeOptions = {
2828
styleOverrides: { root: { ":focus-visible": { outline: "2px solid var(--mui-palette-primary-dark)" } } },
2929
},
3030
MuiTab: { styleOverrides: { root: { outlineOffset: "-2px" } } },
31-
MuiIconButton: { styleOverrides: { root: { borderRadius: 0 } } },
31+
MuiIconButton: { styleOverrides: { root: { borderRadius: 3 } } },
3232
MuiButtonGroup: { defaultProps: { disableRipple: true } },
3333
MuiToggleButtonGroup: { defaultProps: { size: "small" } },
3434
MuiTooltip: { defaultProps: { placement: "top" }, styleOverrides: { tooltip: { fontSize: "13px" } } },

0 commit comments

Comments
 (0)