Skip to content

Commit 372ae82

Browse files
author
Gilyoung
committed
Chagne the style of the login page
1 parent bb92163 commit 372ae82

9 files changed

+221
-29
lines changed

‎src/components/Login/Login.scss

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,75 @@
11
@import "styles/variables.scss";
2+
@import "styles/mixin.scss";
3+
24
.Login {
35
position: relative;
46
height: calc(100vh - #{$header-height});
7+
min-height: 500px;
58

69
.login-container {
710
position: absolute;
8-
width: 400px;
911
top: 50%;
1012
left: 50%;
1113
right: auto;
1214
bottom: auto;
1315
transform: translate(-50%, -50%);
14-
border: 1px solid black;
15-
padding: 18px;
1616

17+
.logo-title {
18+
color: $wallet-blue;
19+
}
20+
.logo {
21+
width: 100px;
22+
height: auto;
23+
}
1724
.button-container {
18-
.btn {
19-
width: 100%;
25+
margin-top: 52px;
26+
.button-item {
27+
width: 270px;
28+
border-radius: 5px;
29+
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
30+
background-color: #ffffff;
31+
border: 1px solid $wallet-blue;
32+
padding-top: 59px;
33+
padding-bottom: 59px;
34+
text-align: center;
35+
color: $wallet-blue;
36+
margin-right: 10px;
37+
margin-left: 10px;
38+
cursor: pointer;
39+
40+
&:hover {
41+
background-color: $wallet-blue;
42+
color: #ffffff;
43+
}
44+
45+
.icon {
46+
width: 116px;
47+
height: 116px;
48+
}
49+
50+
.text {
51+
margin-top: 20px;
52+
font-size: 24px;
53+
@include heading-font();
54+
}
55+
56+
@include respond-below(sm) {
57+
& {
58+
width: 150px;
59+
padding-top: 39px;
60+
padding-bottom: 39px;
61+
62+
.icon {
63+
width: 70px;
64+
height: 70px;
65+
}
66+
67+
.text {
68+
font-size: 14px;
69+
line-height: 1.25;
70+
}
71+
}
72+
}
2073
}
2174

2275
.file-selector {

‎src/components/Login/Login.tsx

Lines changed: 90 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ import CreateAddressContainer from "../CreateAddressContainer/CreateAddressConta
99
import CreateWalletForm from "../CreateWalletForm/CreateWalletForm";
1010
import "./Login.css";
1111

12+
import * as CreateNewWalletIconHover from "./img/icons-createnewwallet-hover.svg";
13+
import * as CreateNewWalletIcon from "./img/icons-createnewwallet-standard.svg";
14+
import * as ImportKeyIconHover from "./img/icons-importkeyfile-hover.svg";
15+
import * as ImportKeyIcon from "./img/icons-importkeyfile-standard.svg";
16+
import * as Logo from "./img/logo-vertical.svg";
17+
1218
interface DispatchProps {
1319
login: () => void;
1420
}
@@ -17,6 +23,9 @@ interface State {
1723
redirectToReferrer: boolean;
1824
pageState: PageState;
1925
walletName?: string;
26+
27+
isImportBtnHover: boolean;
28+
isCreateBtnHover: boolean;
2029
}
2130

2231
enum PageState {
@@ -34,43 +43,93 @@ class Login extends React.Component<Props, State> {
3443
this.state = {
3544
redirectToReferrer: false,
3645
pageState: PageState.Login,
37-
walletName: undefined
46+
walletName: undefined,
47+
isCreateBtnHover: false,
48+
isImportBtnHover: false
3849
};
3950
this.fileSelector = React.createRef<HTMLInputElement>();
4051
}
4152
public render() {
42-
const { redirectToReferrer, pageState, walletName } = this.state;
53+
const {
54+
redirectToReferrer,
55+
pageState,
56+
walletName,
57+
isImportBtnHover,
58+
isCreateBtnHover
59+
} = this.state;
4360
if (redirectToReferrer) {
4461
return <Redirect to="/" />;
4562
}
4663
return (
4764
<Container className="Login">
4865
<div className="login-container">
66+
<div className="text-center">
67+
<img src={Logo} className="logo" />
68+
<h1 className="mt-4 logo-title">Wallet</h1>
69+
</div>
4970
{pageState === PageState.Login && (
50-
<div className="button-container">
51-
<div>
52-
<button
53-
type="button"
54-
className="btn btn-primary mb-3"
55-
onClick={this.onClickLogin}
56-
>
57-
SELECT WALLET FILE
58-
</button>
71+
<div className="button-container d-flex">
72+
<div
73+
className="button-item"
74+
onClick={this.onClickCreateWallet}
75+
onMouseEnter={this.handleCreateButtonHover}
76+
onMouseLeave={this.handleCreateButtonOut}
77+
>
78+
<div>
79+
{isCreateBtnHover ? (
80+
<img
81+
src={CreateNewWalletIconHover}
82+
className="icon"
83+
/>
84+
) : (
85+
<img
86+
src={CreateNewWalletIcon}
87+
className="icon"
88+
/>
89+
)}
90+
</div>
91+
<div className="text">
92+
CREATE
93+
<br />
94+
NEW WALLET
95+
</div>
5996
<input
6097
type="file"
6198
className="file-selector"
6299
ref={this.fileSelector}
63100
onChange={this.handleFileSelect}
64101
/>
65102
</div>
66-
<div>
67-
<button
68-
type="button"
69-
className="btn btn-secondary"
70-
onClick={this.onClickCreateWallet}
71-
>
72-
CREATE NEW WALLET
73-
</button>
103+
<div
104+
className="button-item"
105+
onClick={this.onClickLogin}
106+
onMouseEnter={this.handleImportButtonHover}
107+
onMouseLeave={this.handleImportButtopOut}
108+
>
109+
<div>
110+
{isImportBtnHover ? (
111+
<img
112+
src={ImportKeyIconHover}
113+
className="icon"
114+
/>
115+
) : (
116+
<img
117+
src={ImportKeyIcon}
118+
className="icon"
119+
/>
120+
)}
121+
</div>
122+
<div className="text">
123+
IMPORT
124+
<br />
125+
KEY FILE
126+
</div>
127+
<input
128+
type="file"
129+
className="file-selector"
130+
ref={this.fileSelector}
131+
onChange={this.handleFileSelect}
132+
/>
74133
</div>
75134
</div>
76135
)}
@@ -95,6 +154,18 @@ class Login extends React.Component<Props, State> {
95154
</Container>
96155
);
97156
}
157+
private handleImportButtonHover = () => {
158+
this.setState({ isImportBtnHover: true });
159+
};
160+
private handleImportButtopOut = () => {
161+
this.setState({ isImportBtnHover: false });
162+
};
163+
private handleCreateButtonHover = () => {
164+
this.setState({ isCreateBtnHover: true });
165+
};
166+
private handleCreateButtonOut = () => {
167+
this.setState({ isCreateBtnHover: false });
168+
};
98169
private onClickLogin = () => {
99170
this.fileSelector.current!.click();
100171
};

‎src/components/Login/img/icons-createnewwallet-hover.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/Login/img/icons-createnewwallet-standard.svg

Lines changed: 7 additions & 0 deletions
Loading

‎src/components/Login/img/icons-importkeyfile-hover.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/Login/img/icons-importkeyfile-standard.svg

Lines changed: 11 additions & 0 deletions
Loading

‎src/components/Login/img/logo-vertical.svg

Lines changed: 38 additions & 0 deletions
Loading

‎src/styles/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $grey3: #efefef;
1111
$white: #f9f9f9;
1212
$black: #2c2c2c;
1313

14-
$blue: #4a8fff;
14+
$wallet-blue: #4a8fff;
1515

1616
$error-red: #ff5b5b;
1717
$varified-green: #75d08f;

‎src/styles/index.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ body {
1111
.btn-primary:visited,
1212
.btn-primary:focus {
1313
background-color: white;
14-
border: 1px solid $blue;
14+
border: 1px solid $wallet-blue;
1515
border-radius: 21px;
16-
color: $blue;
16+
color: $wallet-blue;
1717

1818
&:hover:enabled {
19-
background-color: darken($blue, 15%);
19+
background-color: darken($wallet-blue, 15%);
2020
color: white;
2121
}
2222
&:disabled {
23-
background-color: $blue;
23+
background-color: $wallet-blue;
2424
}
2525
}

0 commit comments

Comments
 (0)