From 74605adbee5995a485113331af1556551d0fa12c Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Wed, 9 Mar 2022 23:11:39 -0700 Subject: [PATCH] Login Page Improvements (#1692) Signed-off-by: Benjamin Perez --- .../public/images/background-wave-orig2.svg | 1 + portal-ui/public/index.html | 4 ++++ portal-ui/public/styles/root-styles.css | 4 ++++ portal-ui/src/Routes.tsx | 21 ++++++++++++++++--- portal-ui/src/icons/UsersFilledIcon.tsx | 2 +- portal-ui/src/screens/LoginPage/LoginPage.tsx | 20 +++++++++++------- 6 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 portal-ui/public/images/background-wave-orig2.svg diff --git a/portal-ui/public/images/background-wave-orig2.svg b/portal-ui/public/images/background-wave-orig2.svg new file mode 100644 index 000000000..faf39855c --- /dev/null +++ b/portal-ui/public/images/background-wave-orig2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/portal-ui/public/index.html b/portal-ui/public/index.html index 05ca70533..bcb8bd467 100644 --- a/portal-ui/public/index.html +++ b/portal-ui/public/index.html @@ -63,6 +63,10 @@
+
+ + +
{ exact path="/login" children={(routerProps) => ( - }> - - +
+ }> + + +
)} /> diff --git a/portal-ui/src/icons/UsersFilledIcon.tsx b/portal-ui/src/icons/UsersFilledIcon.tsx index c1e6122e6..09fb3fff9 100644 --- a/portal-ui/src/icons/UsersFilledIcon.tsx +++ b/portal-ui/src/icons/UsersFilledIcon.tsx @@ -36,7 +36,7 @@ const UserFilledIcon = (props: SVGProps) => ( /> - + createStyles({ root: { - backgroundImage: `url('/images/background-wave-orig.svg'), url('/images/background.svg')`, - backgroundPosition: "center 250px, center center", - backgroundRepeat: "no-repeat", - backgroundSize: "2547px 980px,cover", - backgroundBlendMode: "color-dodge", position: "absolute", top: 0, left: 0, @@ -121,10 +116,10 @@ const styles = (theme: Theme) => }, loginPage: { height: "100%", - maxWidth: 360, margin: "auto", }, loginContainer: { + flexDirection: "column", "& .right-items": { backgroundColor: "white", borderRadius: 3, @@ -233,6 +228,11 @@ const styles = (theme: Theme) => retryButton: { alignSelf: "flex-end", }, + loginComponentContainer: { + maxWidth: 360, + width: "100%", + alignSelf: "center", + }, ...spacingUtils, }); @@ -622,7 +622,7 @@ const Login = ({
Multi-Cloud Object Storage
- + {loginComponent}
Latest Version{" "} {!loadingVersion && latestMinIOVersion !== "" && (