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

Commit44ce30d

Browse files
committed
emotion:LicenseCard
1 parentbd1c25c commit44ce30d

File tree

1 file changed

+32
-38
lines changed

1 file changed

+32
-38
lines changed

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx

Lines changed: 32 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1+
import{typeCSSObject,typeInterpolation,typeTheme}from"@emotion/react";
12
importButtonfrom"@mui/material/Button";
23
importPaperfrom"@mui/material/Paper";
3-
import{makeStyles}from"@mui/styles";
4-
import{ConfirmDialog}from"components/Dialogs/ConfirmDialog/ConfirmDialog";
5-
import{Stack}from"components/Stack/Stack";
64
importdayjsfrom"dayjs";
75
import{useState}from"react";
8-
import{Pill}from"components/Pill/Pill";
96
import{compareAsc}from"date-fns";
10-
import{GetLicensesResponse}from"api/api";
7+
import{typeGetLicensesResponse}from"api/api";
8+
import{ConfirmDialog}from"components/Dialogs/ConfirmDialog/ConfirmDialog";
9+
import{Pill}from"components/Pill/Pill";
10+
import{Stack}from"components/Stack/Stack";
1111

1212
typeLicenseCardProps={
1313
license:GetLicensesResponse;
@@ -24,8 +24,6 @@ export const LicenseCard = ({
2424
onRemove,
2525
isRemoving,
2626
}:LicenseCardProps)=>{
27-
conststyles=useStyles();
28-
2927
const[licenseIDMarkedForRemoval,setLicenseIDMarkedForRemoval]=useState<
3028
number|undefined
3129
>(undefined);
@@ -34,7 +32,7 @@ export const LicenseCard = ({
3432
license.claims.features["user_limit"]||userLimitLimit;
3533

3634
return(
37-
<Paperkey={license.id}elevation={2}className={styles.licenseCard}>
35+
<Paperkey={license.id}elevation={2}css={styles.licenseCard}>
3836
<ConfirmDialog
3937
type="delete"
4038
hideCancel={false}
@@ -55,12 +53,12 @@ export const LicenseCard = ({
5553
<Stack
5654
direction="row"
5755
spacing={2}
58-
className={styles.cardContent}
56+
css={styles.cardContent}
5957
justifyContent="left"
6058
alignItems="center"
6159
>
62-
<spanclassName={styles.licenseId}>#{license.id}</span>
63-
<spanclassName={styles.accountType}>
60+
<spancss={styles.licenseId}>#{license.id}</span>
61+
<spancss={styles.accountType}>
6462
{license.claims.trial ?"Trial" :"Enterprise"}
6563
</span>
6664
<Stack
@@ -73,8 +71,8 @@ export const LicenseCard = ({
7371
}}
7472
>
7573
<Stackdirection="column"spacing={0}alignItems="center">
76-
<spanclassName={styles.secondaryMaincolor}>Users</span>
77-
<spanclassName={styles.userLimit}>
74+
<spancss={styles.secondaryMaincolor}>Users</span>
75+
<spancss={styles.userLimit}>
7876
{userLimitActual}{` /${currentUserLimit||"Unlimited"}`}
7977
</span>
8078
</Stack>
@@ -88,23 +86,19 @@ export const LicenseCard = ({
8886
newDate(license.claims.license_expires*1000),
8987
newDate(),
9088
)<1 ?(
91-
<Pill
92-
className={styles.expiredBadge}
93-
text="Expired"
94-
type="error"
95-
/>
89+
<Pillcss={styles.expiredBadge}text="Expired"type="error"/>
9690
) :(
97-
<spanclassName={styles.secondaryMaincolor}>Valid Until</span>
91+
<spancss={styles.secondaryMaincolor}>Valid Until</span>
9892
)}
99-
<spanclassName={styles.licenseExpires}>
93+
<spancss={styles.licenseExpires}>
10094
{dayjs
10195
.unix(license.claims.license_expires)
10296
.format("MMMM D, YYYY")}
10397
</span>
10498
</Stack>
10599
<Stackspacing={2}>
106100
<Button
107-
className={styles.removeButton}
101+
css={styles.removeButton}
108102
variant="contained"
109103
size="small"
110104
onClick={()=>setLicenseIDMarkedForRemoval(license.id)}
@@ -118,39 +112,39 @@ export const LicenseCard = ({
118112
);
119113
};
120114

121-
constuseStyles=makeStyles((theme)=>({
122-
userLimit:{
115+
conststyles={
116+
userLimit:(theme)=>({
123117
color:theme.palette.text.primary,
124-
},
125-
licenseCard:{
126-
...theme.typography.body2,
118+
}),
119+
licenseCard:(theme)=>({
120+
...(theme.typography.body2asCSSObject),
127121
padding:theme.spacing(2),
128-
},
122+
}),
129123
cardContent:{},
130-
licenseId:{
124+
licenseId:(theme)=>({
131125
color:theme.palette.secondary.main,
132126
fontSize:18,
133127
fontWeight:600,
134-
},
128+
}),
135129
accountType:{
136130
fontWeight:600,
137131
fontSize:18,
138132
alignItems:"center",
139133
textTransform:"capitalize",
140134
},
141-
licenseExpires:{
135+
licenseExpires:(theme)=>({
142136
color:theme.palette.text.secondary,
143-
},
144-
expiredBadge:{
137+
}),
138+
expiredBadge:(theme)=>({
145139
marginBottom:theme.spacing(0.5),
146-
},
147-
secondaryMaincolor:{
140+
}),
141+
secondaryMaincolor:(theme)=>({
148142
color:theme.palette.text.secondary,
149-
},
150-
removeButton:{
143+
}),
144+
removeButton:(theme)=>({
151145
color:theme.palette.error.main,
152146
"&:hover":{
153147
backgroundColor:"transparent",
154148
},
155-
},
156-
}));
149+
}),
150+
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

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