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

Commit2f4ca0f

Browse files
authored
chore: use emotion for styling (pt. 6) (#10298)
1 parenta49e6b8 commit2f4ca0f

File tree

4 files changed

+68
-106
lines changed

4 files changed

+68
-106
lines changed

‎site/src/components/Resources/AgentOutdatedTooltip.tsx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import{ComponentProps,FC}from"react";
2-
import{makeStyles}from"@mui/styles";
1+
import{typeComponentProps,typeFC}from"react";
2+
import{useTheme}from"@emotion/react";
33
importRefreshIconfrom"@mui/icons-material/RefreshOutlined";
44
import{
55
HelpTooltipText,
@@ -9,7 +9,7 @@ import {
99
HelpTooltipLinksGroup,
1010
HelpTooltipContext,
1111
}from"components/HelpTooltip/HelpTooltip";
12-
import{WorkspaceAgent}from"api/typesGenerated";
12+
importtype{WorkspaceAgent}from"api/typesGenerated";
1313
import{Stack}from"components/Stack/Stack";
1414

1515
typeAgentOutdatedTooltipProps=ComponentProps<typeofHelpPopover>&{
@@ -28,7 +28,11 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
2828
onClose,
2929
anchorEl,
3030
})=>{
31-
conststyles=useStyles();
31+
consttheme=useTheme();
32+
constversionLabelStyles={
33+
fontWeight:600,
34+
color:theme.palette.text.primary,
35+
};
3236

3337
return(
3438
<HelpPopover
@@ -50,12 +54,12 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
5054
</div>
5155

5256
<Stackspacing={0.5}>
53-
<spanclassName={styles.versionLabel}>Agent version</span>
57+
<spancss={versionLabelStyles}>Agent version</span>
5458
<span>{agent.version}</span>
5559
</Stack>
5660

5761
<Stackspacing={0.5}>
58-
<spanclassName={styles.versionLabel}>Server version</span>
62+
<spancss={versionLabelStyles}>Server version</span>
5963
<span>{serverVersion}</span>
6064
</Stack>
6165

@@ -73,10 +77,3 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
7377
</HelpPopover>
7478
);
7579
};
76-
77-
constuseStyles=makeStyles((theme)=>({
78-
versionLabel:{
79-
fontWeight:600,
80-
color:theme.palette.text.primary,
81-
},
82-
}));

‎site/src/components/Resources/AppLink/AppLink.tsx

Lines changed: 26 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
importCircularProgressfrom"@mui/material/CircularProgress";
22
importLinkfrom"@mui/material/Link";
3-
import{makeStyles}from"@mui/styles";
43
importTooltipfrom"@mui/material/Tooltip";
54
importErrorOutlineIconfrom"@mui/icons-material/ErrorOutline";
5+
import{typeFC,useState}from"react";
6+
import{useTheme}from"@emotion/react";
7+
import{getApiKey}from"api/api";
8+
importtype*asTypesGenfrom"api/typesGenerated";
9+
import{useProxy}from"contexts/ProxyContext";
610
import{PrimaryAgentButton}from"components/Resources/AgentButton";
7-
import{FC,useState}from"react";
8-
import{combineClasses}from"utils/combineClasses";
9-
import*asTypesGenfrom"api/typesGenerated";
11+
import{createAppLinkHref}from"utils/apps";
1012
import{generateRandomString}from"utils/random";
1113
import{BaseIcon}from"./BaseIcon";
1214
import{ShareIcon}from"./ShareIcon";
13-
import{useProxy}from"contexts/ProxyContext";
14-
import{createAppLinkHref}from"utils/apps";
15-
import{getApiKey}from"api/api";
1615

1716
constLanguage={
1817
appTitle:(appName:string,identifier:string):string=>
@@ -31,7 +30,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
3130
constappsHost=proxy.preferredWildcardHostname;
3231
const[fetchingSessionToken,setFetchingSessionToken]=useState(false);
3332

34-
conststyles=useStyles();
33+
consttheme=useTheme();
3534
constusername=workspace.owner_name;
3635

3736
letappSlug=app.slug;
@@ -65,12 +64,18 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
6564
}
6665
if(app.health==="unhealthy"){
6766
canClick=false;
68-
icon=<ErrorOutlineIconclassName={styles.unhealthyIcon}/>;
67+
icon=<ErrorOutlineIconcss={{color:theme.palette.warning.light}}/>;
6968
primaryTooltip="Unhealthy";
7069
}
7170
if(!appsHost&&app.subdomain){
7271
canClick=false;
73-
icon=<ErrorOutlineIconclassName={styles.notConfiguredIcon}/>;
72+
icon=(
73+
<ErrorOutlineIcon
74+
css={{
75+
color:theme.palette.grey[300],
76+
}}
77+
/>
78+
);
7479
primaryTooltip=
7580
"Your admin has not configured subdomain application access";
7681
}
@@ -86,7 +91,13 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
8691
endIcon={isPrivateApp ?undefined :<ShareIconapp={app}/>}
8792
disabled={!canClick}
8893
>
89-
<spanclassName={combineClasses({[styles.appName]:!isPrivateApp})}>
94+
<span
95+
css={
96+
!isPrivateApp&&{
97+
marginRight:theme.spacing(1),
98+
}
99+
}
100+
>
90101
{appDisplayName}
91102
</span>
92103
</PrimaryAgentButton>
@@ -98,7 +109,10 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
98109
<Link
99110
href={href}
100111
target="_blank"
101-
className={canClick ?styles.link :styles.disabledLink}
112+
css={{
113+
pointerEvents:canClick ?undefined :"none",
114+
textDecoration:"none !important",
115+
}}
102116
onClick={
103117
canClick
104118
?async(event)=>{
@@ -143,26 +157,3 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
143157
</Tooltip>
144158
);
145159
};
146-
147-
constuseStyles=makeStyles((theme)=>({
148-
link:{
149-
textDecoration:"none !important",
150-
},
151-
152-
disabledLink:{
153-
pointerEvents:"none",
154-
textDecoration:"none !important",
155-
},
156-
157-
unhealthyIcon:{
158-
color:theme.palette.warning.light,
159-
},
160-
161-
notConfiguredIcon:{
162-
color:theme.palette.grey[300],
163-
},
164-
165-
appName:{
166-
marginRight:theme.spacing(1),
167-
},
168-
}));

‎site/src/components/Resources/PortForwardButton.tsx

Lines changed: 16 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1+
importBoxfrom"@mui/material/Box";
12
importLinkfrom"@mui/material/Link";
23
importPopoverfrom"@mui/material/Popover";
3-
import{makeStyles}from"@mui/styles";
4+
importCircularProgressfrom"@mui/material/CircularProgress";
5+
importOpenInNewOutlinedfrom"@mui/icons-material/OpenInNewOutlined";
6+
import{css}from"@emotion/css";
7+
import{useTheme}from"@emotion/react";
48
import{useRef,useState}from"react";
9+
import{useQuery}from"react-query";
510
import{colors}from"theme/colors";
611
import{
712
HelpTooltipLink,
@@ -11,16 +16,12 @@ import {
1116
}from"components/HelpTooltip/HelpTooltip";
1217
import{SecondaryAgentButton}from"components/Resources/AgentButton";
1318
import{docs}from"utils/docs";
14-
importBoxfrom"@mui/material/Box";
15-
import{useQuery}from"react-query";
1619
import{getAgentListeningPorts}from"api/api";
17-
import{
20+
importtype{
1821
WorkspaceAgent,
1922
WorkspaceAgentListeningPort,
2023
}from"api/typesGenerated";
21-
importCircularProgressfrom"@mui/material/CircularProgress";
2224
import{portForwardURL}from"utils/portForward";
23-
importOpenInNewOutlinedfrom"@mui/icons-material/OpenInNewOutlined";
2425

2526
exportinterfacePortForwardButtonProps{
2627
host:string;
@@ -30,10 +31,10 @@ export interface PortForwardButtonProps {
3031
}
3132

3233
exportconstPortForwardButton:React.FC<PortForwardButtonProps>=(props)=>{
34+
consttheme=useTheme();
3335
constanchorRef=useRef<HTMLButtonElement>(null);
3436
const[isOpen,setIsOpen]=useState(false);
3537
constid=isOpen ?"schedule-popover" :undefined;
36-
conststyles=useStyles();
3738
constportsQuery=useQuery({
3839
queryKey:["portForward",props.agent.id],
3940
queryFn:()=>getAgentListeningPorts(props.agent.id),
@@ -78,7 +79,14 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
7879
)}
7980
</SecondaryAgentButton>
8081
<Popover
81-
classes={{paper:styles.popoverPaper}}
82+
classes={{
83+
paper:css`
84+
padding:0;
85+
width:${theme.spacing(38)};
86+
color:${theme.palette.text.secondary};
87+
margin-top:${theme.spacing(0.5)};
88+
`,
89+
}}
8290
id={id}
8391
open={isOpen}
8492
anchorEl={anchorRef.current}
@@ -245,31 +253,3 @@ export const PortForwardPopoverView: React.FC<
245253
</>
246254
);
247255
};
248-
249-
constuseStyles=makeStyles((theme)=>({
250-
popoverPaper:{
251-
padding:0,
252-
width:theme.spacing(38),
253-
color:theme.palette.text.secondary,
254-
marginTop:theme.spacing(0.5),
255-
},
256-
257-
openUrlButton:{
258-
flexShrink:0,
259-
},
260-
261-
portField:{
262-
// The default border don't contrast well with the popover
263-
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline":{
264-
borderColor:colors.gray[10],
265-
},
266-
},
267-
268-
code:{
269-
margin:theme.spacing(2,0),
270-
},
271-
272-
form:{
273-
margin:theme.spacing(2,0),
274-
},
275-
}));

‎site/src/components/SettingsLayout/Section.tsx

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import{makeStyles}from"@mui/styles";
1+
import{useTheme}from"@emotion/react";
22
importTypographyfrom"@mui/material/Typography";
3-
import{FC,ReactNode,PropsWithChildren}from"react";
3+
import{typeFC,typeReactNode,typePropsWithChildren}from"react";
44
import{SectionAction}from"./SectionAction";
5+
import{typeInterpolation,typeTheme}from"@emotion/react";
56

67
typeSectionLayout="fixed"|"fluid";
78

@@ -31,31 +32,30 @@ export const Section: SectionFC = ({
3132
children,
3233
layout="fixed",
3334
})=>{
34-
conststyles=useStyles({ layout});
35+
consttheme=useTheme();
36+
3537
return(
3638
<sectionclassName={className}id={id}data-testid={id}>
37-
<divclassName={styles.inner}>
39+
<divcss={{maxWidth:layout==="fluid" ?"100%" :500}}>
3840
{(title||description)&&(
39-
<divclassName={styles.header}>
41+
<divcss={styles.header}>
4042
<div>
4143
{title&&(
4244
<Typographyvariant="h4"sx={{fontSize:24}}>
4345
{title}
4446
</Typography>
4547
)}
4648
{description&&typeofdescription==="string"&&(
47-
<TypographyclassName={styles.description}>
48-
{description}
49-
</Typography>
49+
<Typographycss={styles.description}>{description}</Typography>
5050
)}
5151
{description&&typeofdescription!=="string"&&(
52-
<divclassName={styles.description}>{description}</div>
52+
<divcss={styles.description}>{description}</div>
5353
)}
5454
</div>
5555
{toolbar&&<div>{toolbar}</div>}
5656
</div>
5757
)}
58-
{alert&&<divclassName={styles.alert}>{alert}</div>}
58+
{alert&&<divcss={{marginBottom:theme.spacing(1)}}>{alert}</div>}
5959
{children}
6060
</div>
6161
</section>
@@ -65,23 +65,17 @@ export const Section: SectionFC = ({
6565
// Sub-components
6666
Section.Action=SectionAction;
6767

68-
constuseStyles=makeStyles((theme)=>({
69-
inner:({ layout}:{layout:SectionLayout})=>({
70-
maxWidth:layout==="fluid" ?"100%" :500,
71-
}),
72-
alert:{
73-
marginBottom:theme.spacing(1),
74-
},
75-
header:{
68+
conststyles={
69+
header:(theme)=>({
7670
marginBottom:theme.spacing(3),
7771
display:"flex",
7872
flexDirection:"row",
7973
justifyContent:"space-between",
80-
},
81-
description:{
74+
}),
75+
description:(theme)=>({
8276
color:theme.palette.text.secondary,
8377
fontSize:16,
8478
marginTop:theme.spacing(0.5),
8579
lineHeight:"140%",
86-
},
87-
}));
80+
}),
81+
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

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