Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8117057

Browse files
committed
chore: migrate appearanceform to Tailwind, shadcn
1 parentbe22c38 commit8117057

File tree

2 files changed

+88
-178
lines changed

2 files changed

+88
-178
lines changed

‎site/src/index.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
@tailwind utilities;
99

1010
@layer base {
11-
:root {
11+
:root,
12+
.light {
1213
--content-primary:24010%4%;
1314
--content-secondary:2405%34%;
1415
--content-link:22183%53%;
Lines changed: 86 additions & 177 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
1-
importtype{Interpolation}from"@emotion/react";
2-
importCircularProgressfrom"@mui/material/CircularProgress";
3-
importFormControlfrom"@mui/material/FormControl";
4-
importFormControlLabelfrom"@mui/material/FormControlLabel";
5-
importRadiofrom"@mui/material/Radio";
6-
importRadioGroupfrom"@mui/material/RadioGroup";
7-
import{visuallyHidden}from"@mui/utils";
81
import{
92
typeTerminalFontName,
103
TerminalFontNames,
114
typeUpdateUserAppearanceSettingsRequest,
125
}from"api/typesGenerated";
136
import{ErrorAlert}from"components/Alert/ErrorAlert";
147
import{PreviewBadge}from"components/Badges/Badges";
15-
import{Stack}from"components/Stack/Stack";
16-
import{ThemeOverride}from"contexts/ThemeProvider";
8+
import{Label}from"components/Label/Label";
9+
import{RadioGroup,RadioGroupItem}from"components/RadioGroup/RadioGroup";
10+
import{Spinner}from"components/Spinner/Spinner";
1711
importtype{FC}from"react";
18-
importthemes,{DEFAULT_THEME,typeTheme}from"theme";
12+
import{DEFAULT_THEME}from"theme";
1913
import{
2014
DEFAULT_TERMINAL_FONT,
2115
terminalFontLabels,
@@ -67,67 +61,65 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
6761

6862
<Section
6963
title={
70-
<Stackdirection="row"alignItems="center">
64+
<divclassName="flex flex-row items-center gap-2">
7165
<span>Theme</span>
72-
{isUpdating&&<CircularProgresssize={16}/>}
73-
</Stack>
66+
<Spinnerloading={isUpdating}size="sm"/>
67+
</div>
7468
}
7569
layout="fluid"
7670
>
77-
<Stackdirection="row"wrap="wrap">
71+
<divclassName="flex flex-row flex-wrap gap-4">
7872
<AutoThemePreviewButton
7973
displayName="Auto"
8074
active={currentTheme==="auto"}
81-
themes={[themes.dark,themes.light]}
75+
themes={["dark","light"]}
8276
onSelect={()=>onChangeTheme("auto")}
8377
/>
8478
<ThemePreviewButton
8579
displayName="Dark"
8680
active={currentTheme==="dark"}
87-
theme={themes.dark}
81+
theme="dark"
8882
onSelect={()=>onChangeTheme("dark")}
8983
/>
9084
<ThemePreviewButton
9185
displayName="Light"
9286
active={currentTheme==="light"}
93-
theme={themes.light}
87+
theme="light"
9488
onSelect={()=>onChangeTheme("light")}
9589
/>
96-
</Stack>
90+
</div>
9791
</Section>
98-
<divcss={{marginBottom:48}}></div>
92+
<divclassName="mb-12"/>
9993
<Section
10094
title={
101-
<Stackdirection="row"alignItems="center">
95+
<divclassName="flex flex-row items-center gap-2">
10296
<span>Terminal Font</span>
103-
{isUpdating&&<CircularProgresssize={16}/>}
104-
</Stack>
97+
<Spinnerloading={isUpdating}size="sm"/>
98+
</div>
10599
}
106100
layout="fluid"
107101
>
108-
<FormControl>
109-
<RadioGroup
110-
aria-labelledby="fonts-radio-buttons-group-label"
111-
defaultValue={currentTerminalFont}
112-
name="fonts-radio-buttons-group"
113-
onChange={(_,value)=>
114-
onChangeTerminalFont(toTerminalFontName(value))
115-
}
116-
>
117-
{TerminalFontNames.filter((name)=>name!=="").map((name)=>(
118-
<FormControlLabel
119-
key={name}
120-
value={name}
121-
control={<Radio/>}
122-
label={
123-
<divcss={{fontFamily:terminalFonts[name]}}>
124-
{terminalFontLabels[name]}
125-
</div>
126-
}
127-
/>
128-
))}
129-
</RadioGroup>
130-
</FormControl>
102+
<RadioGroup
103+
aria-labelledby="fonts-radio-buttons-group-label"
104+
defaultValue={currentTerminalFont}
105+
name="fonts-radio-buttons-group"
106+
onValueChange={(value)=>
107+
onChangeTerminalFont(toTerminalFontName(value))
108+
}
109+
>
110+
{TerminalFontNames.filter((name)=>name!=="").map((name)=>(
111+
<divkey={name}className="flex items-center space-x-2">
112+
<RadioGroupItemvalue={name}id={name}/>
113+
<Label
114+
htmlFor={name}
115+
className="cursor-pointer font-normal"
116+
style={{fontFamily:terminalFonts[name]}}
117+
>
118+
{terminalFontLabels[name]}
119+
</Label>
120+
</div>
121+
))}
122+
</RadioGroup>
131123
</Section>
132124
</form>
133125
);
@@ -139,8 +131,10 @@ function toTerminalFontName(value: string): TerminalFontName {
139131
:"";
140132
}
141133

134+
typeThemeMode="dark"|"light";
135+
142136
interfaceAutoThemePreviewButtonPropsextendsOmit<ThemePreviewProps,"theme">{
143-
themes:[Theme,Theme];
137+
themes:[ThemeMode,ThemeMode];
144138
onSelect?:()=>void;
145139
}
146140

@@ -163,13 +157,15 @@ const AutoThemePreviewButton: FC<AutoThemePreviewButtonProps> = ({
163157
value={displayName}
164158
checked={active}
165159
onChange={onSelect}
166-
css={{ ...visuallyHidden}}
160+
className="sr-only"
167161
/>
168-
<labelhtmlFor={displayName}className={cn("relative",className)}>
162+
<label
163+
htmlFor={displayName}
164+
className={cn("relative cursor-pointer",className)}
165+
>
169166
<ThemePreview
170-
css={{
171-
// This half is absolute to not advance the layout (which would offset the second half)
172-
position:"absolute",
167+
className="absolute"
168+
style={{
173169
// Slightly past the bounding box to avoid cutting off the outline
174170
clipPath:"polygon(-5% -5%, 50% -5%, 50% 105%, -5% 105%)",
175171
}}
@@ -210,9 +206,9 @@ const ThemePreviewButton: FC<ThemePreviewButtonProps> = ({
210206
value={displayName}
211207
checked={active}
212208
onChange={onSelect}
213-
css={{ ...visuallyHidden}}
209+
className="sr-only"
214210
/>
215-
<labelhtmlFor={displayName}className={className}>
211+
<labelhtmlFor={displayName}className={cn("cursor-pointer",className)}>
216212
<ThemePreview
217213
active={active}
218214
preview={preview}
@@ -228,152 +224,65 @@ interface ThemePreviewProps {
228224
active?:boolean;
229225
preview?:boolean;
230226
className?:string;
227+
style?:React.CSSProperties;
231228
displayName:string;
232-
theme:Theme;
229+
theme:ThemeMode;
233230
}
234231

235232
constThemePreview:FC<ThemePreviewProps>=({
236233
active,
237234
preview,
238235
className,
236+
style,
239237
displayName,
240238
theme,
241239
})=>{
242240
return(
243-
<ThemeOverridetheme={theme}>
241+
<divclassName={theme}>
244242
<div
245-
css={[styles.container,active&&styles.containerActive]}
246-
className={className}
243+
className={cn(
244+
"w-56 overflow-clip rounded-md border border-border border-solid bg-surface-primary text-content-primary select-none",
245+
active&&"outline outline-2 outline-content-link",
246+
className,
247+
)}
248+
style={style}
247249
>
248-
<divcss={styles.page}>
249-
<divcss={styles.header}>
250-
<divcss={styles.headerLinks}>
251-
<divcss={[styles.headerLink,styles.activeHeaderLink]}/>
252-
<divcss={styles.headerLink}/>
253-
<divcss={styles.headerLink}/>
250+
<divclassName="bg-surface-primary text-content-primary">
251+
<divclassName="bg-surface-secondary flex items-center justify-between px-2.5 py-1.5 mb-2 border-0 border-b border-border border-solid">
252+
<divclassName="flex items-center gap-1.5">
253+
<divclassName="bg-content-primary h-1.5 w-5 rounded"/>
254+
<divclassName="bg-content-secondary h-1.5 w-5 rounded"/>
255+
<divclassName="bg-content-secondary h-1.5 w-5 rounded"/>
254256
</div>
255-
<divcss={styles.headerLinks}>
256-
<divcss={styles.proxy}/>
257-
<divcss={styles.user}/>
257+
<divclassName="flex items-center gap-1.5">
258+
<divclassName="bg-green-400 h-1.5 w-3 rounded"/>
259+
<divclassName="bg-content-primary h-2 w-2 rounded-full"/>
258260
</div>
259261
</div>
260-
<divcss={styles.body}>
261-
<divcss={styles.title}/>
262-
<divcss={styles.table}>
263-
<divcss={styles.tableHeader}/>
264-
<divcss={styles.workspace}/>
265-
<divcss={styles.workspace}/>
266-
<divcss={styles.workspace}/>
267-
<divcss={styles.workspace}/>
262+
<divclassName="w-32 mx-auto">
263+
<divclassName="bg-content-primary h-2 w-11 rounded mb-1.5"/>
264+
<divclassName="border border-solid rounded-t overflow-clip">
265+
<divclassName="bg-surface-secondary h-2.5 -m-px"/>
266+
<divclassName="h-4 border-0 border-t border-border border-solid">
267+
<divclassName="bg-content-disabled h-1.5 w-8 rounded mt-1 ml-1"/>
268+
</div>
269+
<divclassName="h-4 border-0 border-t border-border border-solid">
270+
<divclassName="bg-content-disabled h-1.5 w-8 rounded mt-1 ml-1"/>
271+
</div>
272+
<divclassName="h-4 border-0 border-t border-border border-solid">
273+
<divclassName="bg-content-disabled h-1.5 w-8 rounded mt-1 ml-1"/>
274+
</div>
275+
<divclassName="h-4 border-0 border-t border-border border-solid">
276+
<divclassName="bg-content-disabled h-1.5 w-8 rounded mt-1 ml-1"/>
277+
</div>
268278
</div>
269279
</div>
270280
</div>
271-
<divcss={styles.label}>
281+
<divclassName="flex items-center justify-between border-0 border-t border-border border-solid px-3 py-1 text-sm">
272282
<span>{displayName}</span>
273283
{preview&&<PreviewBadge/>}
274284
</div>
275285
</div>
276-
</ThemeOverride>
286+
</div>
277287
);
278288
};
279-
280-
conststyles={
281-
container:(theme)=>({
282-
backgroundColor:theme.palette.background.default,
283-
border:`1px solid${theme.palette.divider}`,
284-
width:220,
285-
color:theme.palette.text.primary,
286-
borderRadius:6,
287-
overflow:"clip",
288-
userSelect:"none",
289-
}),
290-
containerActive:(theme)=>({
291-
outline:`2px solid${theme.roles.active.outline}`,
292-
}),
293-
page:(theme)=>({
294-
backgroundColor:theme.palette.background.default,
295-
color:theme.palette.text.primary,
296-
}),
297-
header:(theme)=>({
298-
backgroundColor:theme.palette.background.paper,
299-
display:"flex",
300-
alignItems:"center",
301-
justifyContent:"space-between",
302-
padding:"6px 10px",
303-
marginBottom:8,
304-
borderBottom:`1px solid${theme.palette.divider}`,
305-
}),
306-
headerLinks:{
307-
display:"flex",
308-
alignItems:"center",
309-
gap:6,
310-
},
311-
headerLink:(theme)=>({
312-
backgroundColor:theme.palette.text.secondary,
313-
height:6,
314-
width:20,
315-
borderRadius:3,
316-
}),
317-
activeHeaderLink:(theme)=>({
318-
backgroundColor:theme.palette.text.primary,
319-
}),
320-
proxy:(theme)=>({
321-
backgroundColor:theme.palette.success.light,
322-
height:6,
323-
width:12,
324-
borderRadius:3,
325-
}),
326-
user:(theme)=>({
327-
backgroundColor:theme.palette.text.primary,
328-
height:8,
329-
width:8,
330-
borderRadius:4,
331-
float:"right",
332-
}),
333-
body:{
334-
width:120,
335-
margin:"auto",
336-
},
337-
title:(theme)=>({
338-
backgroundColor:theme.palette.text.primary,
339-
height:8,
340-
width:45,
341-
borderRadius:4,
342-
marginBottom:6,
343-
}),
344-
table:(theme)=>({
345-
border:`1px solid${theme.palette.divider}`,
346-
borderBottom:"none",
347-
borderTopLeftRadius:3,
348-
borderTopRightRadius:3,
349-
overflow:"clip",
350-
}),
351-
tableHeader:(theme)=>({
352-
backgroundColor:theme.palette.background.paper,
353-
height:10,
354-
margin:-1,
355-
}),
356-
label:(theme)=>({
357-
display:"flex",
358-
alignItems:"center",
359-
justifyContent:"space-between",
360-
borderTop:`1px solid${theme.palette.divider}`,
361-
padding:"4px 12px",
362-
fontSize:14,
363-
}),
364-
workspace:(theme)=>({
365-
borderTop:`1px solid${theme.palette.divider}`,
366-
height:15,
367-
368-
"&::after":{
369-
content:'""',
370-
display:"block",
371-
marginTop:4,
372-
marginLeft:4,
373-
backgroundColor:theme.palette.text.disabled,
374-
height:6,
375-
width:30,
376-
borderRadius:3,
377-
},
378-
}),
379-
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp