mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login Page Improvements (#1692)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2022-03-09 23:11:39 -07:00
committed by GitHub
parent c6bd1a28d3
commit 74605adbee
6 changed files with 41 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
portal-ui/public/images/background-wave-orig2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 648 KiB

4
portal-ui/public/index.html
View File

@@ -63,6 +63,10 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div id="preload">
<img src="./images/background.svg" />
<img src="./images/background-wave-orig2.svg" />
</div>
<div id="loader-block">
<svg class="loader-svg-container" viewBox="22 22 44 44">
<circle

4
portal-ui/public/styles/root-styles.css
View File

@@ -156,6 +156,10 @@ body {
-moz-osx-font-smoothing: grayscale;
}
#preload {
display: none;
}
#loader-block {
display: flex;
flex-direction: column;

21
portal-ui/src/Routes.tsx
View File

@@ -44,9 +44,24 @@ const Routes = () => {
exact
path="/login"
children={(routerProps) => (
<Suspense fallback={<LoadingComponent />}>
<Login />
</Suspense>
<div
style={{
backgroundImage: `url('/images/background-wave-orig2.svg'), url('/images/background.svg')`,
backgroundPosition: "center 250px, center center",
backgroundRepeat: "no-repeat",
backgroundSize: "2547px 980px,cover",
backgroundBlendMode: "color-dodge",
width: "100%",
height: "100%",
display: "flex",
color: "#fff",
overflow: "auto",
}}
>
<Suspense fallback={<LoadingComponent />}>
<Login />
</Suspense>
</div>
)}
/>
<ProtectedRoute Component={AppConsole} />

2
portal-ui/src/icons/UsersFilledIcon.tsx
View File

@@ -36,7 +36,7 @@ const UserFilledIcon = (props: SVGProps<SVGSVGElement>) => (
/>
</clipPath>
</defs>
<g id="Group_2365" data-name="Group 2365" clip-path="url(#clip-path)">
<g id="Group_2365" data-name="Group 2365" clipPath="url(#clip-path)">
<path
id="Path_7088"
data-name="Path 7088"

20
portal-ui/src/screens/LoginPage/LoginPage.tsx
View File

@@ -57,11 +57,6 @@ import clsx from "clsx";
const styles = (theme: Theme) =>
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 = ({
<div className="text-line3">Multi-Cloud Object Storage</div>
</div>
</Grid>
<Grid item className="right-items" xs={12}>
<Grid item className={`right-items ${classes.loginComponentContainer}`} xs={12}>
{loginComponent}
<div className={classes.learnMore}>
<a
@@ -673,6 +673,12 @@ const Login = ({
href="https://github.com/minio/minio/releases"
target="_blank"
rel="noreferrer"
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginBottom: 20
}}
>
<MinIOTierIconXs /> Latest Version{" "}
{!loadingVersion && latestMinIOVersion !== "" && (