From 26e8e7f67e93a7439ad67c14dbf5be3f316cdc06 Mon Sep 17 00:00:00 2001 From: Anil Vishnoi Date: Tue, 1 Oct 2024 11:31:11 -0700 Subject: [PATCH] Enhance the responsiveness of the login experience Commit updates the githublogin.tsx by removing the Page and PageSection tags, replacing them with div tags. Additionally, it modifies the githublogin.css to include both vertical and horizontal scrolling, ensuring the page adapts to any window size. Co-authored-by: Ash Evans Co-authored-by: Samarpita Bhaumik Signed-off-by: Anil Vishnoi --- public/InstructLab-Background-Image.svg | 150 ++++++++++++++++++++++++ src/app/login/githublogin.css | 23 ++-- src/app/login/githublogin.tsx | 122 ++++++++++--------- 3 files changed, 223 insertions(+), 72 deletions(-) create mode 100644 public/InstructLab-Background-Image.svg diff --git a/public/InstructLab-Background-Image.svg b/public/InstructLab-Background-Image.svg new file mode 100644 index 00000000..d75b9aac --- /dev/null +++ b/public/InstructLab-Background-Image.svg @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/login/githublogin.css b/src/app/login/githublogin.css index e67fc4ed..74199c36 100644 --- a/src/app/login/githublogin.css +++ b/src/app/login/githublogin.css @@ -1,28 +1,36 @@ a { - color: white; /* Change the text color to white */ - text-decoration: underline; /* Ensure the text is underlined */ + color: white; + text-decoration: underline; } .login-page-background { background-image: url('../../../public/InstructLab-Background-Image.png'); - /* Replace with your background image URL */ - background-size: cover; + background-size: 100% 100%; background-position: center; - height: 100vh; + background-repeat: no-repeat; + + min-width: 100vh; + min-height: 100vh; + display: flex; align-items: center; justify-content: center; + + overflow-y: auto; + overflow-x: auto; } .login-container { text-align: center; + width: 100%; + max-width: 1200px; + padding: 20px; } .sign-in-text { margin-top: 1rem; color: white; padding: 20px; - text-align: center; font-size: xx-large; } @@ -32,14 +40,12 @@ a { padding-bottom: 50px; font-size: x-large; font-style: italic; - text-align: center; } .urls-text { margin-top: 1rem; color: white; padding: 20px; - text-align: center; font-size: large; } @@ -55,6 +61,5 @@ a { margin-top: 1rem; color: white; padding-top: 20px; - text-align: center; font-size: large; } diff --git a/src/app/login/githublogin.tsx b/src/app/login/githublogin.tsx index 43b2a7b9..c0086084 100644 --- a/src/app/login/githublogin.tsx +++ b/src/app/login/githublogin.tsx @@ -1,6 +1,4 @@ import React from 'react'; -import { Page } from '@patternfly/react-core/dist/dynamic/components/Page'; -import { PageSection } from '@patternfly/react-core/dist/dynamic/components/Page'; import { Button } from '@patternfly/react-core/dist/dynamic/components/Button'; import { Text } from '@patternfly/react-core/dist/dynamic/components/Text'; import { TextContent } from '@patternfly/react-core/dist/dynamic/components/Text'; @@ -16,68 +14,66 @@ const GithubLogin: React.FC = () => { }; return ( - - - - -
- - Sign in to your account - - - - Join the novel, community based movement to

create truly open source LLMs - - -
- -
- - - - GitHub - {' '} - |{' '} - - Collaborate - {' '} - |{' '} - - Code Of Conduct - - - - - Terms of use - {' '} - |{' '} - - Privacy Policy - - - +
+ + +
+ + Sign in to your account + + + + Join the novel, community based movement to

create truly open source LLMs + + +
+
- - - - + + + + GitHub + {' '} + |{' '} + + Collaborate + {' '} + |{' '} + + Code Of Conduct + + + + + Terms of use + {' '} + |{' '} + + Privacy Policy + + + +
+ + +
); };