Merge pull request #7 from hsipl/Login

refactor(login): change inline style to class and remove unused classes
hsipl · Oct 2, 2022 · 7118b90 · 7118b90
2 parents 11be13c + cb02c4a
commit 7118b90
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 22 deletions.
diff --git a/src/pages/Login/Login.css → src/pages/Login.css b/src/pages/Login/Login.css → src/pages/Login.css
@@ -24,3 +24,18 @@
   height: 347px;
   padding: 20px;
 }
+
+.form-input {
+  border-radius: 5px;
+}
+
+.login-button {
+  max-width: 406px;
+  width: 100%;
+  height: 32px;
+  border-radius: 10px;
+  border-color: #20df7f;
+  background: #20df7f;
+  color: #fff;
+  margin-top: 10px;
+}
diff --git a/src/pages/Login/index.jsx → src/pages/Login.jsx b/src/pages/Login/index.jsx → src/pages/Login.jsx
@@ -36,9 +36,9 @@ export default function Login() {
           help={errors.username}
         >
           <Input
-            prefix={<UserOutlined className="site-form-item-icon" />}
+            prefix={<UserOutlined />}
             placeholder="Username"
-            style={{ borderRadius: "5px" }}
+            className="form-input"
             onChange={usernameChanged}
           />
         </Form.Item>
@@ -48,35 +48,19 @@ export default function Login() {
           help={errors.password}
         >
           <Input
-            prefix={<LockOutlined className="site-form-item-icon" />}
+            prefix={<LockOutlined />}
             type="password"
             placeholder="Password"
-            style={{ borderRadius: "5px" }}
+            className="form-input"
             onChange={passwordChanged}
           />
         </Form.Item>
         <div style={{ width: "100%", textAlign: "right" }}>
-          <a className="login-form-forgot" href="">
-            Forgot password?
-          </a>
+          <a href="">Forgot password?</a>
         </div>
 
         <Form.Item>
-          <Button
-            type="primary"
-            htmlType="Login"
-            className="login-form-button"
-            style={{
-              maxWidth: "406px",
-              width: "100%",
-              height: "32px",
-              borderRadius: "10px",
-              borderColor: "#20DF7F",
-              background: "#20DF7F",
-              color: "#fff",
-              marginTop: "10px",
-            }}
-          >
+          <Button type="primary" htmlType="Login" className="login-button">
             Log in
           </Button>
         </Form.Item>