From 8917df2071c9b2e2bb26d5d01655265c510d95e1 Mon Sep 17 00:00:00 2001 From: tr0ub1eM4k3r <61628220+tr0ub1eM4k3r@users.noreply.github.com> Date: Fri, 4 Mar 2022 13:41:22 +0100 Subject: [PATCH] please god dark mode too strong (#14) * added very very very very very very secure google token * dark mode masterrace --- .gitignore | 1 + src/Styles/Styled.js | 254 +++++++++--------- .../univeralComponents/LoginButtonGoogle.js | 1 + .../univeralComponents/LogoutButtonGoogle.js | 3 +- src/config_example.json | 3 + 5 files changed, 134 insertions(+), 128 deletions(-) create mode 100644 src/config_example.json diff --git a/.gitignore b/.gitignore index f5bddee..2616e85 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,4 @@ yarn-error.log* node_modules/ yarn.lock +src/config.json diff --git a/src/Styles/Styled.js b/src/Styles/Styled.js index e23147f..e03f176 100644 --- a/src/Styles/Styled.js +++ b/src/Styles/Styled.js @@ -1,154 +1,154 @@ -import styled from 'styled-components' +import styled from "styled-components"; export const LoginButton = styled.button` - float: right; - cursor: pointer; - width: 8em; - margin: 1.7em 1em auto auto; - - transition: all .5s ease; - color: #fff; - border: 3px solid white; - font-family:'Montserrat', sans-serif; - text-transform: uppercase; - text-align: center; - line-height: 1; - font-size: 17px; - background-color : transparent; - padding: 10px; - outline: none; - border-radius: 4px; - &:hover { - color: #001F3F; - background-color: #fff; - } -` -export const LogoutButton = styled.button` - float: right; - cursor: pointer; - margin: 1.7em 1em auto auto; -` + float: right; + cursor: pointer; + width: 8em; + margin: 1.7em 1em auto auto; + + transition: all 0.5s ease; + color: #fff; + border: 3px solid white; + font-family: "Montserrat", sans-serif; + text-transform: uppercase; + text-align: center; + line-height: 1; + font-size: 17px; + background-color: transparent; + padding: 10px; + outline: none; + border-radius: 4px; + &:hover { + color: #001f3f; + background-color: #fff; + } +`; +export const LogoutButton = styled.div` + float: right; + margin: 1.7em 1em auto auto; +`; export const NavButton = styled.button` - color: white; - font-size: 32px; - background-color: Transparent; - border: none; - float: left; - cursor: pointer; - height: 50px; - width: 1.25em; - margin-left: .35em; - margin-top: 25px; -` + color: white; + font-size: 32px; + background-color: Transparent; + border: none; + float: left; + cursor: pointer; + height: 50px; + width: 1.25em; + margin-left: 0.35em; + margin-top: 25px; +`; export const NavbarStyled = styled.div` - background: linear-gradient(45deg, hsl(207.5, 84.8%, 51%), hsla(240, 84%, 62%, 1)); - height: 100px; - width: 100%; - -` + background: linear-gradient( + 45deg, + hsl(207.5, 84.8%, 51%), + hsla(240, 84%, 62%, 1) + ); + height: 100px; + width: 100%; +`; export const NavbarPanelStyled = styled.div` - background-color: blue; - width: 150px; - -` + background-color: blue; + width: 150px; +`; export const CenterText = styled.div` - text-align: center; - position: absolute; - top: 35%; - bottom: 65%; - width: 100%; - -` + text-align: center; + position: absolute; + top: 35%; + bottom: 65%; + width: 100%; +`; export const AutoFlowLogoText = styled.h1` - font-size: 128px; - background: linear-gradient(45deg, hsl(190.5, 84.8%, 51%), hsla(240, 100%, 25%, 1)); - -webkit-text-fill-color: transparent; - -webkit-background-clip: text; - - -webkit-text-stroke: .0085em black; - margin-bottom: 0px; - - -` + font-size: 128px; + background: linear-gradient( + 45deg, + hsl(190.5, 84.8%, 51%), + hsla(240, 100%, 25%, 1) + ); + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + + -webkit-text-stroke: 0.0085em black; + margin-bottom: 0px; +`; export const AutoflowCatch = styled.h1` - font-size: 36px; - margin-top: 0px; - color: white; - -webkit-text-stroke: .0085em black; -` + font-size: 36px; + margin-top: 0px; + color: white; + -webkit-text-stroke: 0.0085em black; +`; export const FlowRight = styled.div` - float: right; - margin-right: 0.35em; - margin-top: 4px; - margin-bottom: 3px; - cursor: pointer; -` + float: right; + margin-right: 0.35em; + margin-top: 4px; + margin-bottom: 3px; + cursor: pointer; +`; export const FlowCenter = styled.div` - cursor: pointer; + cursor: pointer; - &.center { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - padding: 10px; - } -` + &.center { + position: absolute; + transform: translate(-50%, -50%); + margin-top: 45%; + margin-left: 46%; + } +`; export const LoginPanelNavBar = styled.div` - width: 100%; - height: 12em; - padding-top: 0px; - margin-top: 0; -` + width: 100%; + height: 12em; + padding-top: 0px; + margin-top: 0; +`; export const LoginPanelStyled = styled.div` - width: 20em; - height: 35em; - - background: white; - - &.center { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - border: 3px solid lightgrey; - border-radius: 15px; - padding: 10px; - } - -` + width: 20em; + height: 35em; + + background: white; + + &.center { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border: 3px solid lightgrey; + border-radius: 15px; + padding: 10px; + } +`; export const LoginPanelHeader = styled.h1` - text-align: center; - font-size: 3em; + text-align: center; + font-size: 3em; - &.font-link { - font-family: 'Jost', sans-serif; - } -` + &.font-link { + font-family: "Jost", sans-serif; + } +`; export const LoginPageLogoText = styled.h1` - font-size: 7em; - margin-top: 0px; - color: #303030; - -webkit-text-stroke: .0085em black; - height: 90%; - width: 100%; - display:flex; - align-items: center; - justify-content: center; - -webkit-text-stroke: 1px darkgrey; - - &.font-link { - font-family: 'Jost', sans-serif, 0,900; - } -` + font-size: 7em; + margin-top: 0px; + color: #303030; + -webkit-text-stroke: 0.0085em black; + height: 90%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + -webkit-text-stroke: 1px darkgrey; + + &.font-link { + font-family: "Jost", sans-serif, 0, 900; + } +`; diff --git a/src/components/univeralComponents/LoginButtonGoogle.js b/src/components/univeralComponents/LoginButtonGoogle.js index 22df2fb..b5ef30e 100644 --- a/src/components/univeralComponents/LoginButtonGoogle.js +++ b/src/components/univeralComponents/LoginButtonGoogle.js @@ -27,6 +27,7 @@ export default function LoginButtonGoogle() { onFailure={responseGoogleFailed} cookiePolicy={"single_host_origin"} isSignedIn={true} + theme="dark" /> ); } diff --git a/src/components/univeralComponents/LogoutButtonGoogle.js b/src/components/univeralComponents/LogoutButtonGoogle.js index 69a14d4..07f6ef0 100644 --- a/src/components/univeralComponents/LogoutButtonGoogle.js +++ b/src/components/univeralComponents/LogoutButtonGoogle.js @@ -19,8 +19,9 @@ export default function LogoutButtonGoogle() { ); diff --git a/src/config_example.json b/src/config_example.json new file mode 100644 index 0000000..d3b4aab --- /dev/null +++ b/src/config_example.json @@ -0,0 +1,3 @@ +{ + "GOOGLE_TOKEN": "1234567890-ab1cd2ef3gh4jk5lm6no7pq8.apps.googleusercontent.com" +} \ No newline at end of file