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

Commit277318b

Browse files
authored
fix: Login - Add padding between username / password (#239)
This is just a minor fit & finish fix for login, to more closely emulate the styling of v1.__Before:__<img width="437" alt="Screen Shot 2022-02-09 at 4 16 05 PM" src="https://user-images.githubusercontent.com/88213859/153312547-04d0a15f-6f69-4365-8935-f1e8363b4cb6.png">__After:__<img width="446" alt="Screen Shot 2022-02-09 at 4 13 34 PM" src="https://user-images.githubusercontent.com/88213859/153312516-a4b4b67b-ed9c-43d2-b32d-3f3c746262d1.png">While I was looking at this - removed a few currently-unnecessary styles and added a story for this component.
1 parentb6fcd81 commit277318b

File tree

2 files changed

+19
-28
lines changed

2 files changed

+19
-28
lines changed
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import{Story}from"@storybook/react"
2+
importReactfrom"react"
3+
import{SignInForm,SignInProps}from"./SignInForm"
4+
5+
exportdefault{
6+
title:"SignIn/SignInForm",
7+
component:SignInForm,
8+
argTypes:{
9+
loginHandler:{action:"Login"},
10+
},
11+
}
12+
13+
constTemplate:Story<SignInProps>=(args)=><SignInForm{...args}/>
14+
15+
exportconstExample=Template.bind({})
16+
Example.args={}

‎site/components/SignIn/SignInForm.tsx‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -31,33 +31,8 @@ const useStyles = makeStyles((theme) => ({
3131
borderTop:`1px solid${theme.palette.action.disabled}`,
3232
paddingTop:theme.spacing(3),
3333
},
34-
loginTypeToggleWrapper:{
34+
loginTextField:{
3535
marginTop:theme.spacing(2),
36-
display:"flex",
37-
justifyContent:"center",
38-
},
39-
loginTypeToggleBtn:{
40-
color:theme.palette.text.primary,
41-
// We want opacity so that this isn't super highlighted for the user.
42-
// In most cases, they shouldn't want to switch login types.
43-
opacity:0.5,
44-
"&:hover":{
45-
cursor:"pointer",
46-
opacity:1,
47-
textDecoration:"underline",
48-
},
49-
},
50-
loginTypeToggleBtnFocusVisible:{
51-
opacity:1,
52-
textDecoration:"underline",
53-
},
54-
loginTypeBtn:{
55-
backgroundColor:"#2A2B45",
56-
textTransform:"none",
57-
58-
"&:not(:first-child)":{
59-
marginTop:theme.spacing(2),
60-
},
6136
},
6237
submitBtn:{
6338
marginTop:theme.spacing(2),
@@ -101,27 +76,27 @@ export const SignInForm: React.FC<SignInProps> = ({
10176
<FormTextField
10277
autoComplete="email"
10378
autoFocus
79+
className={styles.loginTextField}
10480
eventTransform={(email:string)=>email.trim()}
10581
form={form}
10682
formFieldName="email"
10783
fullWidth
10884
inputProps={{
10985
id:"signin-form-inpt-email",
11086
}}
111-
margin="none"
11287
placeholder="Email"
11388
variant="outlined"
11489
/>
11590
<FormTextField
11691
autoComplete="current-password"
92+
className={styles.loginTextField}
11793
form={form}
11894
formFieldName="password"
11995
fullWidth
12096
inputProps={{
12197
id:"signin-form-inpt-password",
12298
}}
12399
isPassword
124-
margin="none"
125100
placeholder="Password"
126101
variant="outlined"
127102
/>

0 commit comments

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