log in page

ui/src/components/InstallPage.tsx

@@ -5,6 +5,7 @@ import { adminUsername } from "../consts";
 import Api, { FormValidationErrorType } from "../helpers/api";
 import { toast } from 'react-toastify';
 import LoadingOverlay from "./LoadingOverlay";
+import { useCommonStyles } from "../helpers/commonStyle";
 
 const api = Api.getInstance();
 
@@ -14,6 +15,7 @@ interface InstallPageProps {
 
 export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
 
+    const classes = useCommonStyles();
     const [isLoading, setIsLoading] = useState(false);
     const [password, setPassword] = useState("");
     const [passwordConfirm, setPasswordConfirm] = useState("");
@@ -53,11 +55,12 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
 
     return <div className="centeredForm">
             {isLoading && <LoadingOverlay/>}
-            <p>Welcome to Mizu, please set up the admin user to continue</p>
-            <TextField className="form-input" variant="standard" fullWidth value={adminUsername} disabled={true}/>
+            <div className="form-title left-text">Setup</div>
+            <span className="form-subtitle">Welcome to Mizu, please set up the admin user to continue</span>
+            <TextField className="form-input" variant="standard" label="Username" fullWidth value={adminUsername} disabled={true}/>
             <TextField className="form-input" label="Password" variant="standard" type="password" fullWidth value={password} onChange={e => setPassword(e.target.value)}/>
             <TextField className="form-input" label="Confirm Password" variant="standard" type="password" fullWidth value={passwordConfirm} onChange={e => setPasswordConfirm(e.target.value)}/>
-            <Button className="form-button" variant="contained" fullWidth onClick={onFormSubmit}>Finish</Button>
+            <Button className={classes.button + " form-button"} variant="contained" fullWidth onClick={onFormSubmit}>Finish</Button>
     </div>;
 };
 

ui/src/components/LoginPage.tsx

@@ -3,15 +3,15 @@ import React, { useContext, useState } from "react";
 import { toast } from "react-toastify";
 import { MizuContext, Page } from "../EntApp";
 import Api from "../helpers/api";
+import { useCommonStyles } from "../helpers/commonStyle";
 import LoadingOverlay from "./LoadingOverlay";
-import './style/Common.sass';
 
 const api = Api.getInstance();
 
 const LoginPage: React.FC = () => {
 
+    const classes = useCommonStyles();
     const [isLoading, setIsLoading] = useState(false);
-
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
 
@@ -39,10 +39,17 @@ const LoginPage: React.FC = () => {
 
     return <div className="centeredForm">
             {isLoading && <LoadingOverlay/>}
-            <div className="title">Login</div>
-            <TextField className="form-input" label="Username" variant="standard" fullWidth value={username} onChange={e => setUsername(e.target.value)} />
-            <TextField className="form-input" label="Password" variant="standard" type="password" fullWidth value={password} onChange={e => setPassword(e.target.value)} />
-            <Button className="form-button" variant="contained" fullWidth onClick={onFormSubmit}>Login</Button>
+            <div className="form-title left-text">Login</div>
+            <div className="form-input">
+                <label htmlFor="inputUsername">Username</label>
+                <input id="inputUsername" className={classes.textField} value={username} onChange={(event) => setUsername(event.target.value)}/>    
+            </div>
+            <div className="form-input">
+                <label htmlFor="inputPassword">Password</label>
+                <input id="inputPassword" className={classes.textField} value={password} type="password" onChange={(event) => setPassword(event.target.value)}/>
+            </div>
+            <Button className={classes.button + " form-button"} variant="contained" fullWidth onClick={onFormSubmit}>Log in</Button>
+            
     </div>;
 };
 

ui/src/components/SettingsModal/SettingModal.tsx

@@ -2,7 +2,6 @@ import React, {useEffect, useMemo, useState} from "react";
 import {Modal, Backdrop, Fade, Box, Button} from "@material-ui/core";
 import {modalStyle} from "../Filters";
 import Checkbox from "../UI/Checkbox";
-import '../style/Common.sass';
 import './SettingsModal.sass';
 import Api from "../../helpers/api";
 import spinner from "../assets/spinner.svg";
@@ -121,7 +120,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
         <Fade in={isOpen}>
             <Box sx={modalStyle} style={{width: "40vw", maxWidth: 600, height: "70vh", padding: 0, display: "flex", justifyContent: "space-between", flexDirection: "column"}}>
                 <div style={{padding: 32, paddingBottom: 0}}>
-                    <div className="title">Tapping Settings</div>
+                    <div className="settingsTitle">Tapping Settings</div>
                     <div className="settingsSubtitle" style={{marginTop: 20}}>
                         Please choose from below the namespaces for tapping, traffic for namespaces selected will be displayed
                     </div>
@@ -130,7 +129,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
                     </div> : <>
                         <div className="namespacesSettingsContainer">
                             <div style={{margin: "10px 0"}}>
-                                <input className="searchNamespace" placeholder="Search" value={searchValue}
+                                <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
                                        onChange={(event) => setSearchValue(event.target.value)}/></div>
                             <div className="namespacesTable">
                                 {buildNamespacesTable()}
@@ -148,4 +147,4 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
             </Box>
         </Fade>
     </Modal>
-}
+}

ui/src/components/SettingsModal/SettingsModal.sass

@@ -1,5 +1,10 @@
 @import "../../variables.module"
 
+.settingsTitle
+  font-size: 28px
+  color: $blue-gray
+  font-weight: 600
+
 .settingsSubtitle
   font-size: 14px
   color: $light-gray
@@ -11,15 +16,8 @@
   padding: 20px 0
 
   .searchNamespace
-    outline: 0
-    background: white
-    border-radius: 4px
     width: 300px
     max-width: calc(40vw - 85px)
-    padding: 8px 10px
-    border: 1px #9D9D9D solid
-    font-size: 14px
-    color: #494677
 
 .settingsActionsContainer
   display: flex
@@ -53,4 +51,4 @@
     td
       color: $light-gray
       padding: 10px
-      font-size: 16px
+      font-size: 16px

ui/src/components/style/AuthBasePage.sass

@@ -1,3 +1,5 @@
+@import "../../variables.module"
+   
 .authContainer
     height: 100vh
     width: 100vw
@@ -5,8 +7,47 @@
     float: left
 
     .authHeader
-        margin: 4% 0
+        margin: 80px 0 120px 0
         width: 100%
         display: flex
         align-items: center
-        justify-content: center
+        justify-content: center
+
+.centeredForm
+    background-color: $main-background-color
+    border-radius: 5px
+    box-shadow: 0 0 20px -4px $light-blue-color
+
+    padding: 35px
+    max-width: 350px
+    text-align: center
+    display: flex
+    flex-direction: column
+    margin: 0 auto
+
+.form-button
+    margin-top: 25px !important
+    padding: 14px 0 !important
+    .MuiButton-label
+        text-transform: none !important
+
+.form-input
+    margin-top: 20px !important
+    input
+        width: 100%
+        box-sizing: border-box
+    label
+        float: left
+        font-size: 12px
+        opacity: 0.7
+        margin-bottom: 4px
+
+.form-title
+    font-size: 28px
+    color: $blue-gray
+    font-weight: 600
+    text-align: left
+
+.form-subtitle
+    text-align: left
+    margin: 4% 0

ui/src/components/style/Common.sass

@@ -1,21 +0,0 @@
-@import "../../variables.module"
-    
-.centeredForm
-    background-color: $main-background-color
-    border-radius: 5px
-    box-shadow: 0 0 20px -4px $light-blue-color
-
-    padding: 4% 2%
-    max-width: 350px
-    text-align: center
-    display: flex
-    flex-direction: column
-    margin: 0 auto
-
-.form-input, .form-button
-    margin-top: 20px
-
-.title
-    font-size: 28px
-    color: $blue-gray
-    font-weight: 600

ui/src/helpers/commonStyle.ts

@@ -26,5 +26,14 @@ export const useCommonStyles = makeStyles(() => ({
         "&:hover": {
             backgroundColor: "transparent",
         },
-    }
+    },
+    textField: {
+        outline: 0,
+        background: "white",
+        borderRadius: "4px",
+        padding: "8px 10px",
+        border: "1px #9D9D9D solid",
+        fontSize: "14px",
+        color: "#494677"
+    },
 }));