From b490104ef003c5f66c6a928de0d94a0cc8de257e Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Fri, 2 Dec 2022 13:54:07 +0100 Subject: [PATCH] keycloak login theme --- src/App.js | 8 --- src/keycloak-themes/login-styles.css | 45 +++++++++++++++++ src/keycloak-themes/register-styles.css | 1 + src/pages/auth/Login.js | 50 ------------------- src/pages/auth/LoginWithEmail.js | 47 ----------------- src/pages/auth/Register.js | 50 ------------------- src/pages/auth/RegisterWithEmail.js | 37 -------------- src/pages/auth/styles/LinkStyle.js | 18 ------- src/pages/auth/styles/MainContainerStyle.js | 13 ----- .../auth/styles/OptionsContainerStyle.js | 18 ------- 10 files changed, 46 insertions(+), 241 deletions(-) create mode 100644 src/keycloak-themes/login-styles.css create mode 100644 src/keycloak-themes/register-styles.css delete mode 100644 src/pages/auth/Login.js delete mode 100644 src/pages/auth/LoginWithEmail.js delete mode 100644 src/pages/auth/Register.js delete mode 100644 src/pages/auth/RegisterWithEmail.js delete mode 100644 src/pages/auth/styles/LinkStyle.js delete mode 100644 src/pages/auth/styles/MainContainerStyle.js delete mode 100644 src/pages/auth/styles/OptionsContainerStyle.js diff --git a/src/App.js b/src/App.js index bde66cd..6c2925f 100644 --- a/src/App.js +++ b/src/App.js @@ -6,10 +6,6 @@ import {BrowserRouter, Route, Routes} from 'react-router-dom'; import NavBar from './components/navigation/NavBar'; import {CHALLENGE_PAGE, CHALLENGES_PAGE, IS_MOBILE} from './utils/globals'; import Challenge from './pages/Challenge'; -import Register from './pages/auth/Register'; -import Login from './pages/auth/Login'; -import LoginWithEmail from './pages/auth/LoginWithEmail'; -import RegisterWithEmail from './pages/auth/RegisterWithEmail'; import KeyCloakService from './services/KeyCloakService'; import React from 'react'; import LoggedBar from './components/navigation/LoggedBar'; @@ -80,10 +76,6 @@ const App = () => { loggedBarHoverFalse={loggedBarHoverFalse} username={KeyCloakService.getUsername()}/> : ''} - }/> - }/> - }/> - }/> }/> }/> diff --git a/src/keycloak-themes/login-styles.css b/src/keycloak-themes/login-styles.css new file mode 100644 index 0000000..29d98ad --- /dev/null +++ b/src/keycloak-themes/login-styles.css @@ -0,0 +1,45 @@ +@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Roboto:wght@300;400;500&family=Ubuntu:wght@300;400;500&display=swap'); + +body { + font-family: 'Roboto', sans-serif; + font-size: 12px; + color: #343434; + background: #1B998B none; +} + +#kc-login { + background-color: #1B998B; +} + +#kc-header-wrapper { + display: none; +} + +#kc-page-title { + font-family: 'Kanit', sans-serif; +} + +#kc-login { + border-radius: 4px; +} + +.login-pf body { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background: #1B998B none; +} + +.card-pf { + width: 100%; + max-width: 600px; + background-color: #FCFCFC; +} + +.login-pf-page { + display: flex; + justify-content: center; +} + diff --git a/src/keycloak-themes/register-styles.css b/src/keycloak-themes/register-styles.css new file mode 100644 index 0000000..19b20b8 --- /dev/null +++ b/src/keycloak-themes/register-styles.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Roboto:wght@300;400;500&family=Ubuntu:wght@300;400;500&display=swap'); diff --git a/src/pages/auth/Login.js b/src/pages/auth/Login.js deleted file mode 100644 index 3a18ed5..0000000 --- a/src/pages/auth/Login.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import {FlexColumn} from '../../utils/containers'; -import AuthHeader from '../../components/auth/AuthHeader'; -import {Body, Medium} from '../../utils/fonts'; -import {Link} from 'react-router-dom'; -import AuthOption from '../../components/auth/AuthOption'; -import githubIco from '../../assets/github_ico.svg'; -import emailIco from '../../assets/email_ico.svg'; -import googleIco from '../../assets/google_ico.svg'; -import MainContainerStyle from './styles/MainContainerStyle'; -import OptionsContainerStyle from './styles/OptionsContainerStyle'; -import LinkStyle from './styles/LinkStyle'; - -const Login = () => { - return ( - - - - - - Sign in with  - - Google - - - - Sign in with  - - Github - - - - Sign in with  - - Email - - - - - No account?  - - Create one. - - - - - ); -}; - -export default Login; \ No newline at end of file diff --git a/src/pages/auth/LoginWithEmail.js b/src/pages/auth/LoginWithEmail.js deleted file mode 100644 index da9a044..0000000 --- a/src/pages/auth/LoginWithEmail.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import AuthHeader from '../../components/auth/AuthHeader'; -import OptionsContainerStyle from './styles/OptionsContainerStyle'; -import MainContainerStyle from './styles/MainContainerStyle'; -import AuthInput from '../../components/auth/AuthInput'; -import Button from '../../components/generic/Button'; -import {FlexRow} from '../../utils/containers'; -import LinkStyle from './styles/LinkStyle'; -import {Link} from 'react-router-dom'; -import {Body} from '../../utils/fonts'; -import theme from '../../utils/theme'; -import Media from 'react-media'; - -const LoginWithEmail = () => { - return ( - - - - - - - - - - - - - - - - Forgot  - - Username -  /  - - Password - ? - - - ); -}; - -export default LoginWithEmail; \ No newline at end of file diff --git a/src/pages/auth/Register.js b/src/pages/auth/Register.js deleted file mode 100644 index 27949b6..0000000 --- a/src/pages/auth/Register.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import {FlexColumn} from '../../utils/containers'; -import AuthHeader from '../../components/auth/AuthHeader'; -import {Body, Medium} from '../../utils/fonts'; -import {Link} from 'react-router-dom'; -import AuthOption from '../../components/auth/AuthOption'; -import githubIco from '../../assets/github_ico.svg'; -import emailIco from '../../assets/email_ico.svg'; -import googleIco from '../../assets/google_ico.svg'; -import MainContainerStyle from './styles/MainContainerStyle'; -import OptionsContainerStyle from './styles/OptionsContainerStyle'; -import LinkStyle from './styles/LinkStyle'; - -const Register = () => { - return ( - - - - - - Register with  - - Google - - - - Register with  - - Github - - - - Register with  - - Email - - - - - Have an account?  - - Sign in. - - - - - ); -}; - -export default Register; \ No newline at end of file diff --git a/src/pages/auth/RegisterWithEmail.js b/src/pages/auth/RegisterWithEmail.js deleted file mode 100644 index db47248..0000000 --- a/src/pages/auth/RegisterWithEmail.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import AuthHeader from '../../components/auth/AuthHeader'; -import OptionsContainerStyle from './styles/OptionsContainerStyle'; -import AuthInput from '../../components/auth/AuthInput'; -import Media from 'react-media'; -import theme from '../../utils/theme'; -import {FlexRow} from '../../utils/containers'; -import Button from '../../components/generic/Button'; -import MainContainerStyle from './styles/MainContainerStyle'; - -const RegisterWithEmail = () => { - return ( - - - - - - - - - - - - - - - - - - ); -}; - -export default RegisterWithEmail; \ No newline at end of file diff --git a/src/pages/auth/styles/LinkStyle.js b/src/pages/auth/styles/LinkStyle.js deleted file mode 100644 index f45ca7b..0000000 --- a/src/pages/auth/styles/LinkStyle.js +++ /dev/null @@ -1,18 +0,0 @@ -import styled from 'styled-components'; -import {Medium} from '../../../utils/fonts'; - -const LinkStyle = styled(Medium)` - cursor: pointer; - color: ${({theme, color}) => color ? color : theme.colors.green}; - transition: color 0.3s ease-in-out; - - &:hover { - color: ${({theme}) => theme.colors.green}; - } - - @media (min-width: ${({theme}) => theme.overMobile}) { - color: ${({theme}) => theme.colors.dark}; - } -`; - -export default LinkStyle; \ No newline at end of file diff --git a/src/pages/auth/styles/MainContainerStyle.js b/src/pages/auth/styles/MainContainerStyle.js deleted file mode 100644 index e622b36..0000000 --- a/src/pages/auth/styles/MainContainerStyle.js +++ /dev/null @@ -1,13 +0,0 @@ -import styled from 'styled-components'; -import {FlexColumn} from '../../../utils/containers'; - -const MainContainerStyle = styled(FlexColumn)` - width: 100%; - min-height: calc(100vh - 48px); - - @media (min-width: ${({theme}) => theme.overMobile}) { - min-height: calc(100vh - 72px); - } -`; - -export default MainContainerStyle; \ No newline at end of file diff --git a/src/pages/auth/styles/OptionsContainerStyle.js b/src/pages/auth/styles/OptionsContainerStyle.js deleted file mode 100644 index 907890d..0000000 --- a/src/pages/auth/styles/OptionsContainerStyle.js +++ /dev/null @@ -1,18 +0,0 @@ -import styled from 'styled-components'; -import {FlexColumn} from '../../../utils/containers'; - -const OptionsContainerStyle = styled(FlexColumn)` - width: 260px; - border: 1px solid ${({theme}) => theme.colors.dark03}; - gap: 32px; - padding: 32px; - box-shadow: ${({theme}) => theme.shadow}; - - @media (min-width: ${({theme}) => theme.overMobile}) { - width: 400px; - min-height: 382px; - padding: 48px; - } -`; - -export default OptionsContainerStyle; \ No newline at end of file