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

Commitca6e621

Browse files
authored
chore: use px values instead oftheme.spacing andtheme.shape.borderRadius (#10519)
1 parent0cb875c commitca6e621

File tree

144 files changed

+774
-958
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

144 files changed

+774
-958
lines changed

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,24 @@ export type AvatarProps = MuiAvatarProps & {
1111
};
1212

1313
constsizeStyles={
14-
xs:(theme)=>({
15-
width:theme.spacing(2),
16-
height:theme.spacing(2),
17-
fontSize:theme.spacing(1),
14+
xs:{
15+
width:16,
16+
height:16,
17+
fontSize:8,
1818
fontWeight:700,
19-
}),
20-
sm:(theme)=>({
21-
width:theme.spacing(3),
22-
height:theme.spacing(3),
23-
fontSize:theme.spacing(1.5),
19+
},
20+
sm:{
21+
width:24,
22+
height:24,
23+
fontSize:12,
2424
fontWeight:600,
25-
}),
25+
},
2626
md:{},
27-
xl:(theme)=>({
28-
width:theme.spacing(6),
29-
height:theme.spacing(6),
30-
fontSize:theme.spacing(3),
31-
}),
27+
xl:{
28+
width:48,
29+
height:48,
30+
fontSize:24,
31+
},
3232
}satisfiesRecord<string,Interpolation<Theme>>;
3333

3434
constcolorStyles={

‎site/src/components/AvatarData/AvatarData.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
2828
direction="row"
2929
alignItems="center"
3030
css={{
31-
minHeight:theme.spacing(5),// Make it predictable for the skeleton
31+
minHeight:40,// Make it predictable for the skeleton
3232
width:"100%",
3333
lineHeight:"150%",
3434
}}

‎site/src/components/CodeExample/CodeExample.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,16 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
2626
color:theme.palette.primary.contrastText,
2727
fontFamily:MONOSPACE_FONT_FAMILY,
2828
fontSize:14,
29-
borderRadius:theme.shape.borderRadius,
30-
padding:theme.spacing(1),
29+
borderRadius:8,
30+
padding:8,
3131
lineHeight:"150%",
3232
border:`1px solid${theme.palette.divider}`,
3333
}}
3434
className={className}
3535
>
3636
<code
3737
css={{
38-
padding:theme.spacing(0,1),
38+
padding:"0 8px",
3939
width:"100%",
4040
display:"flex",
4141
alignItems:"center",

‎site/src/components/CopyButton/CopyButton.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
4646
<IconButton
4747
className={buttonClassName}
4848
css={(theme)=>css`
49-
border-radius:${theme.shape.borderRadius}px;
50-
padding:${theme.spacing(0.85)};
49+
border-radius:8px;
50+
padding:8px;
5151
min-width:32px;
5252
5353
&:hover {
@@ -64,15 +64,7 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
6464
) :(
6565
<FileCopyIconcss={fileCopyIconStyles}/>
6666
)}
67-
{ctaCopy&&(
68-
<div
69-
css={(theme)=>({
70-
marginLeft:theme.spacing(1),
71-
})}
72-
>
73-
{ctaCopy}
74-
</div>
75-
)}
67+
{ctaCopy&&<divcss={{marginLeft:8}}>{ctaCopy}</div>}
7668
</IconButton>
7769
</div>
7870
</Tooltip>

‎site/src/components/Dashboard/DashboardLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const DashboardLayout: FC = () => {
6060
sx:(theme)=>({
6161
background:theme.palette.background.paper,
6262
color:theme.palette.text.primary,
63-
maxWidth:theme.spacing(55),
63+
maxWidth:440,
6464
flexDirection:"row",
6565
borderColor:theme.palette.info.light,
6666

‎site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,18 @@ const styles = {
4646
align-items: center;
4747
`,
4848
category:(theme)=>({
49-
marginRight:theme.spacing(2),
49+
marginRight:16,
5050
color:theme.palette.text.primary,
5151
}),
5252
values:(theme)=>({
5353
display:"flex",
54-
gap:theme.spacing(1),
54+
gap:8,
5555
color:theme.palette.text.secondary,
5656
}),
57-
value:(theme)=>css`
57+
value:css`
5858
display: flex;
5959
align-items: center;
60-
gap:${theme.spacing(0.5)};
60+
gap:4px;
6161
6262
&svg {
6363
width:12px;
@@ -129,7 +129,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
129129
align-items: center;
130130
justify-content: center;
131131
background-color:${unhealthy ?colors.red[10] :undefined};
132-
padding:${theme.spacing(0,1.5)};
132+
padding:012px;
133133
height:${bannerHeight}px;
134134
color:#fff;
135135
@@ -142,9 +142,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
142142
conststatusSummaryStyle=className`
143143
${theme.typography.body2asCSSObject}
144144
145-
margin:${theme.spacing(0,0,0.5,1.5)};
146-
width:${theme.spacing(50)};
147-
padding:${theme.spacing(2)};
145+
margin:004px12px;
146+
width:400px;
147+
padding:16px;
148148
color:${theme.palette.text.primary};
149149
background-color:${theme.palette.background.paper};
150150
border:1px solid${theme.palette.divider};
@@ -158,13 +158,13 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
158158
height:bannerHeight,
159159
bottom:0,
160160
zIndex:1,
161-
paddingRight:theme.spacing(2),
161+
paddingRight:16,
162162
backgroundColor:theme.palette.background.paper,
163163
display:"flex",
164164
alignItems:"center",
165165
fontFamily:MONOSPACE_FONT_FAMILY,
166166
fontSize:12,
167-
gap:theme.spacing(4),
167+
gap:32,
168168
borderTop:`1px solid${theme.palette.divider}`,
169169
overflowX:"auto",
170170
whiteSpace:"nowrap",
@@ -204,7 +204,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
204204
)
205205
}
206206
open={process.env.STORYBOOK==="true" ?true :undefined}
207-
css={{marginRight:theme.spacing(-2)}}
207+
css={{marginRight:-16}}
208208
>
209209
{unhealthy ?(
210210
<Linkcomponent={RouterLink}to="/health"css={statusBadgeStyle}>
@@ -323,7 +323,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
323323
marginLeft:"auto",
324324
display:"flex",
325325
alignItems:"center",
326-
gap:theme.spacing(2),
326+
gap:16,
327327
}}
328328
>
329329
<Tooltiptitle="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
@@ -335,23 +335,24 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
335335

336336
<Tooltiptitle="A countdown until stats are fetched again. Click to refresh!">
337337
<Button
338-
css={css`
339-
${styles.value(theme)}
338+
css={[
339+
styles.value,
340+
css`
341+
margin:0;
342+
padding:08px;
343+
height: unset;
344+
min-height: unset;
345+
font-size: unset;
346+
color: unset;
347+
border:0;
348+
min-width: unset;
349+
font-family: inherit;
340350
341-
margin:0;
342-
padding:08px;
343-
height: unset;
344-
min-height: unset;
345-
font-size: unset;
346-
color: unset;
347-
border:0;
348-
min-width: unset;
349-
font-family: inherit;
350-
351-
&svg {
352-
margin-right:${theme.spacing(0.5)};
353-
}
354-
`}
351+
&svg {
352+
margin-right:4px;
353+
}
354+
`,
355+
]}
355356
onClick={()=>{
356357
if(fetchStats){
357358
fetchStats();

‎site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export const Language = {
2121
};
2222

2323
conststyles={
24-
leftContent:(theme)=>({
25-
marginRight:theme.spacing(1),
26-
marginLeft:theme.spacing(1),
27-
}),
24+
leftContent:{
25+
marginRight:8,
26+
marginLeft:8,
27+
},
2828
}satisfiesRecord<string,Interpolation<Theme>>;
2929

3030
exportinterfaceLicenseBannerViewProps{
@@ -47,7 +47,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
4747
4848
display: flex;
4949
align-items: center;
50-
padding:${theme.spacing(1.5)};
50+
padding:12px;
5151
background-color:${type==="error"
5252
?colors.red[12]
5353
:theme.palette.warning.main};
@@ -84,9 +84,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
8484
</Link>
8585
</div>
8686
<Expanderexpanded={showDetails}setExpanded={setShowDetails}>
87-
<ulcss={{padding:theme.spacing(1),margin:0}}>
87+
<ulcss={{padding:8,margin:0}}>
8888
{messages.map((message)=>(
89-
<licss={{margin:theme.spacing(0.5)}}key={message}>
89+
<licss={{margin:4}}key={message}>
9090
{message}
9191
</li>
9292
))}

‎site/src/components/Dashboard/Navbar/NavbarView.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,17 @@ const styles = {
7070
justify-content: flex-start;
7171
}
7272
`,
73-
drawerHeader:(theme)=>({
74-
padding:theme.spacing(2),
75-
paddingTop:theme.spacing(4),
76-
paddingBottom:theme.spacing(4),
77-
}),
73+
drawerHeader:{
74+
padding:16,
75+
paddingTop:32,
76+
paddingBottom:32,
77+
},
7878
logo:(theme)=>css`
7979
align-items: center;
8080
display: flex;
8181
height:${navHeight}px;
8282
color:${theme.palette.text.primary};
83-
padding:${theme.spacing(2)};
83+
padding:16px;
8484
8585
// svg is for the Coder logo, img is for custom images
8686
&svg,
@@ -89,10 +89,10 @@ const styles = {
8989
object-fit: contain;
9090
}
9191
`,
92-
drawerLogo:(theme)=>({
92+
drawerLogo:{
9393
padding:0,
94-
maxHeight:theme.spacing(5),
95-
}),
94+
maxHeight:40,
95+
},
9696
item:{
9797
padding:0,
9898
},
@@ -102,7 +102,7 @@ const styles = {
102102
display: flex;
103103
flex:1;
104104
font-size:16px;
105-
padding:${theme.spacing(1.5)}${theme.spacing(2)};
105+
padding:12px16px;
106106
text-decoration: none;
107107
transition: background-color0.15s ease-in-out;
108108
@@ -117,7 +117,7 @@ const styles = {
117117
118118
${theme.breakpoints.up("md")} {
119119
height:${navHeight}px;
120-
padding:0${theme.spacing(3)};
120+
padding:024px;
121121
}
122122
`,
123123
}satisfiesRecord<string,Interpolation<Theme>>;
@@ -171,6 +171,7 @@ const NavItems: React.FC<NavItemsProps> = (props) => {
171171
</nav>
172172
);
173173
};
174+
174175
exportconstNavbarView:FC<NavbarViewProps>=({
175176
user,
176177
logo_url,

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importBadgefrom"@mui/material/Badge";
2-
import{FC,PropsWithChildren}from"react";
2+
import{typeFC,typePropsWithChildren}from"react";
33
import{colors}from"theme/colors";
4-
import*asTypesGenfrom"api/typesGenerated";
4+
importtype*asTypesGenfrom"api/typesGenerated";
55
import{navHeight}from"theme/constants";
66
import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
77
import{UserAvatar}from"components/UserAvatar/UserAvatar";
@@ -35,12 +35,12 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
3535
<>
3636
<PopoverTrigger>
3737
<button
38-
css={(theme)=>css`
38+
css={css`
3939
background: none;
4040
border:0;
4141
cursor: pointer;
4242
height:${navHeight}px;
43-
padding:${theme.spacing(1.5,0)};
43+
padding:12px0;
4444
4545
&:hover {
4646
background-color: transparent;

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const styles = {
2828
info:(theme)=>[
2929
theme.typography.body2asCSSObject,
3030
{
31-
padding:theme.spacing(2.5),
31+
padding:20,
3232
},
3333
],
3434
userName:{
@@ -45,8 +45,8 @@ const styles = {
4545
color:"inherit",
4646
},
4747
menuItem:(theme)=>css`
48-
gap:${theme.spacing(2.5)};
49-
padding:${theme.spacing(1,2.5)};
48+
gap:20px;
49+
padding:8px20px;
5050
5151
&:hover {
5252
background-color:${theme.palette.action.hover};
@@ -55,8 +55,8 @@ const styles = {
5555
`,
5656
menuItemIcon:(theme)=>({
5757
color:theme.palette.text.secondary,
58-
width:theme.spacing(2.5),
59-
height:theme.spacing(2.5),
58+
width:20,
59+
height:20,
6060
}),
6161
menuItemText:{
6262
fontSize:14,

‎site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
3333
return(
3434
<div
3535
css={css`
36-
padding:${theme.spacing(1.5)};
36+
padding:12px;
3737
background-color:${backgroundColor??theme.palette.warning.main};
3838
display: flex;
3939
align-items: center;

0 commit comments

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