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

Commit246dae0

Browse files
authored
chore: use emotion for styling (pt. 3) (#10026)
1 parentf001a57 commit246dae0

File tree

21 files changed

+535
-689
lines changed

21 files changed

+535
-689
lines changed
Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import{makeStyles}from"@mui/styles";
2-
import{FC}from"react";
1+
import{typeFC}from"react";
2+
import{useTheme}from"@emotion/react";
33
import{MONOSPACE_FONT_FAMILY}from"theme/constants";
4-
import{combineClasses}from"utils/combineClasses";
54
import{CopyButton}from"../CopyButton/CopyButton";
6-
import{Theme}from"@mui/material/styles";
75

86
exportinterfaceCodeExampleProps{
97
code:string;
@@ -14,46 +12,40 @@ export interface CodeExampleProps {
1412
/**
1513
* Component to show single-line code examples, with a copy button
1614
*/
17-
exportconstCodeExample:FC<CodeExampleProps>=({
18-
code,
19-
password,
20-
className,
21-
})=>{
22-
conststyles=useStyles({ password});
15+
exportconstCodeExample:FC<CodeExampleProps>=(props)=>{
16+
const{ code, password, className}=props;
17+
consttheme=useTheme();
2318

2419
return(
25-
<divclassName={combineClasses([styles.root,className])}>
26-
<codeclassName={styles.code}>{code}</code>
20+
<div
21+
css={{
22+
display:"flex",
23+
flexDirection:"row",
24+
alignItems:"center",
25+
background:"rgb(0 0 0 / 30%)",
26+
color:theme.palette.primary.contrastText,
27+
fontFamily:MONOSPACE_FONT_FAMILY,
28+
fontSize:14,
29+
borderRadius:theme.shape.borderRadius,
30+
padding:theme.spacing(1),
31+
lineHeight:"150%",
32+
border:`1px solid${theme.palette.divider}`,
33+
}}
34+
className={className}
35+
>
36+
<code
37+
css={{
38+
padding:theme.spacing(0,1),
39+
width:"100%",
40+
display:"flex",
41+
alignItems:"center",
42+
wordBreak:"break-all",
43+
"-webkit-text-security":password ?"disc" :undefined,
44+
}}
45+
>
46+
{code}
47+
</code>
2748
<CopyButtontext={code}/>
2849
</div>
2950
);
3051
};
31-
32-
interfacestyleProps{
33-
inline?:boolean;
34-
password?:boolean;
35-
}
36-
37-
constuseStyles=makeStyles<Theme,styleProps>((theme)=>({
38-
root:(props)=>({
39-
display:props.inline ?"inline-flex" :"flex",
40-
flexDirection:"row",
41-
alignItems:"center",
42-
background:"rgb(0 0 0 / 30%)",
43-
color:theme.palette.primary.contrastText,
44-
fontFamily:MONOSPACE_FONT_FAMILY,
45-
fontSize:14,
46-
borderRadius:theme.shape.borderRadius,
47-
padding:theme.spacing(1),
48-
lineHeight:"150%",
49-
border:`1px solid${theme.palette.divider}`,
50-
}),
51-
code:{
52-
padding:theme.spacing(0,1),
53-
width:"100%",
54-
display:"flex",
55-
alignItems:"center",
56-
wordBreak:"break-all",
57-
"-webkit-text-security":(props)=>(props.password ?"disc" :undefined),
58-
},
59-
}));

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@ import { colors } from "theme/colors";
55
import*asTypesGenfrom"api/typesGenerated";
66
import{navHeight}from"theme/constants";
77
import{BorderedMenu}from"./BorderedMenu";
8-
import{
9-
CloseDropdown,
10-
OpenDropdown,
11-
}from"components/DropdownArrows/DropdownArrows";
8+
import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
129
import{UserAvatar}from"components/UserAvatar/UserAvatar";
1310
import{UserDropdownContent}from"./UserDropdownContent";
1411
import{BUTTON_SM_HEIGHT}from"theme/theme";
@@ -69,11 +66,7 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
6966
avatarURL={user.avatar_url}
7067
/>
7168
</Badge>
72-
{anchorEl ?(
73-
<CloseDropdowncolor={colors.gray[6]}/>
74-
) :(
75-
<OpenDropdowncolor={colors.gray[6]}/>
76-
)}
69+
<DropdownArrowcolor={colors.gray[6]}close={Boolean(anchorEl)}/>
7770
</div>
7871
</MenuItem>
7972

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
importKeyboardArrowDownfrom"@mui/icons-material/KeyboardArrowDown";
2+
importKeyboardArrowUpfrom"@mui/icons-material/KeyboardArrowUp";
3+
import{typeFC}from"react";
4+
import{typeTheme}from"@emotion/react";
5+
6+
interfaceArrowProps{
7+
margin?:boolean;
8+
color?:string;
9+
close?:boolean;
10+
}
11+
12+
exportconstDropdownArrow:FC<ArrowProps>=(props)=>{
13+
const{ margin=true, color, close}=props;
14+
15+
constArrow=close ?KeyboardArrowUp :KeyboardArrowDown;
16+
17+
return(
18+
<Arrow
19+
aria-label={close ?"close-dropdown" :"open-dropdown"}
20+
css={(theme:Theme)=>({
21+
color:color??theme.palette.primary.contrastText,
22+
marginLeft:margin ?theme.spacing(1) :0,
23+
width:16,
24+
height:16,
25+
})}
26+
/>
27+
);
28+
};

‎site/src/components/DropdownArrows/DropdownArrows.tsx

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎site/src/components/Expander/Expander.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1+
importCollapsefrom"@mui/material/Collapse";
12
importLinkfrom"@mui/material/Link";
23
importmakeStylesfrom"@mui/styles/makeStyles";
3-
import{
4-
CloseDropdown,
5-
OpenDropdown,
6-
}from"components/DropdownArrows/DropdownArrows";
7-
import{PropsWithChildren,FC}from"react";
8-
importCollapsefrom"@mui/material/Collapse";
4+
import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
5+
import{typeFC,typePropsWithChildren}from"react";
96
import{combineClasses}from"utils/combineClasses";
107

118
exportinterfaceExpanderProps{
@@ -28,7 +25,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
2825
<LinkonClick={toggleExpanded}className={styles.expandLink}>
2926
<spanclassName={styles.text}>
3027
Click here to learn more
31-
<OpenDropdownmargin={false}/>
28+
<DropdownArrowmargin={false}/>
3229
</span>
3330
</Link>
3431
)}
@@ -42,7 +39,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
4239
>
4340
<spanclassName={styles.text}>
4441
Click here to hide
45-
<CloseDropdownmargin={false}/>
42+
<DropdownArrowmargin={false}close/>
4643
</span>
4744
</Link>
4845
)}

0 commit comments

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