diff --git a/ui/src/App.sass b/ui/src/App.sass index 44fe3e268..4f3b10763 100644 --- a/ui/src/App.sass +++ b/ui/src/App.sass @@ -5,14 +5,4 @@ body .mizuApp color: $font-color - width: 100% - - .centeredForm - max-width: 500px - text-align: center - display: flex - flex-direction: column - margin: 0 auto - - .form-input, .form-button - margin-top: 20px + width: 100% \ No newline at end of file diff --git a/ui/src/EntApp.tsx b/ui/src/EntApp.tsx index 1103367cb..452b8013d 100644 --- a/ui/src/EntApp.tsx +++ b/ui/src/EntApp.tsx @@ -8,6 +8,7 @@ import {toast} from "react-toastify"; import InstallPage from "./components/InstallPage"; import LoginPage from "./components/LoginPage"; import LoadingOverlay from "./components/LoadingOverlay"; +import AuthPageBase from './components/AuthPageBase'; const api = Api.getInstance(); @@ -75,10 +76,10 @@ const EntApp = () => { pageComponent = ; break; case Page.Setup: - pageComponent = setIsFirstLogin(true)}/>; + pageComponent = setIsFirstLogin(true)}/>; break; case Page.Login: - pageComponent = ; + pageComponent = ; break; default: pageComponent =
Unknown Error
; diff --git a/ui/src/components/AuthPageBase.tsx b/ui/src/components/AuthPageBase.tsx new file mode 100644 index 000000000..e98c014e7 --- /dev/null +++ b/ui/src/components/AuthPageBase.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import background from "./assets/authBackground.png"; +import logo from './assets/MizuEntLogoFull.svg'; +import "./style/AuthBasePage.sass"; + + +export const AuthPageBase: React.FC = ({children}) => { + return
+
+ +
+ {children} +
; +}; + +export default AuthPageBase; diff --git a/ui/src/components/LoginPage.tsx b/ui/src/components/LoginPage.tsx index d6bfdb6b3..be0a6861d 100644 --- a/ui/src/components/LoginPage.tsx +++ b/ui/src/components/LoginPage.tsx @@ -4,6 +4,7 @@ import { toast } from "react-toastify"; import { MizuContext, Page } from "../EntApp"; import Api from "../helpers/api"; import LoadingOverlay from "./LoadingOverlay"; +import './style/Common.sass'; const api = Api.getInstance(); @@ -38,7 +39,7 @@ const LoginPage: React.FC = () => { return
{isLoading && } -

Welcome to Mizu, please login to continue

+
Login
setUsername(e.target.value)} /> setPassword(e.target.value)} /> diff --git a/ui/src/components/SettingsModal/SettingModal.tsx b/ui/src/components/SettingsModal/SettingModal.tsx index a139a4678..14cf6ec94 100644 --- a/ui/src/components/SettingsModal/SettingModal.tsx +++ b/ui/src/components/SettingsModal/SettingModal.tsx @@ -2,6 +2,7 @@ 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"; @@ -120,7 +121,7 @@ export const SettingsModal: React.FC = ({isOpen, onClose, is
-
Tapping Settings
+
Tapping Settings
Please choose from below the namespaces for tapping, traffic for namespaces selected will be displayed
diff --git a/ui/src/components/SettingsModal/SettingsModal.sass b/ui/src/components/SettingsModal/SettingsModal.sass index 4455ce623..d580dd150 100644 --- a/ui/src/components/SettingsModal/SettingsModal.sass +++ b/ui/src/components/SettingsModal/SettingsModal.sass @@ -1,10 +1,5 @@ @import "../../variables.module" -.settingsTitle - font-size: 28px - color: $blue-gray - font-weight: 600 - .settingsSubtitle font-size: 14px color: $light-gray diff --git a/ui/src/components/assets/MizuEntLogoFull.svg b/ui/src/components/assets/MizuEntLogoFull.svg new file mode 100644 index 000000000..d3a863a34 --- /dev/null +++ b/ui/src/components/assets/MizuEntLogoFull.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/components/assets/authBackground.png b/ui/src/components/assets/authBackground.png new file mode 100644 index 000000000..f67800313 Binary files /dev/null and b/ui/src/components/assets/authBackground.png differ diff --git a/ui/src/components/style/AuthBasePage.sass b/ui/src/components/style/AuthBasePage.sass new file mode 100644 index 000000000..fae44571c --- /dev/null +++ b/ui/src/components/style/AuthBasePage.sass @@ -0,0 +1,12 @@ +.authContainer + height: 100vh + width: 100vw + background-size: cover + float: left + + .authHeader + margin: 4% 0 + width: 100% + display: flex + align-items: center + justify-content: center \ No newline at end of file diff --git a/ui/src/components/style/Common.sass b/ui/src/components/style/Common.sass new file mode 100644 index 000000000..911a48797 --- /dev/null +++ b/ui/src/components/style/Common.sass @@ -0,0 +1,21 @@ +@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 \ No newline at end of file