From 8176c87f669bce81a8dc7b66c6f2491355230465 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Tue, 13 Feb 2024 03:16:46 +0100 Subject: [PATCH] Update the main app theme --- src/App/App.css | 34 ++++++++++------- src/App/App.tsx | 77 ++++++++++++++++++++------------------- src/App/assets/react.svg | 1 + src/App/assets/vite.svg | 1 + src/App/logo.svg | 1 - src/App/myimg.png | Bin 3440 -> 0 bytes 6 files changed, 63 insertions(+), 51 deletions(-) create mode 100644 src/App/assets/react.svg create mode 100644 src/App/assets/vite.svg delete mode 100644 src/App/logo.svg delete mode 100644 src/App/myimg.png diff --git a/src/App/App.css b/src/App/App.css index e5e6a63..841ff5b 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -5,35 +5,43 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: #242424; } .App { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.App-payload { + text-align: center; + margin-bottom: 4rem; + color: white; + /* link color */ + a { + color: #61dafb; + } + +} + +.App-logo-wrapper { text-align: center; } .App-logo { - height: 40vmin; + height: 15vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { - .App-logo { + .App-logo.rotate { animation: App-logo-spin infinite 20s linear; } } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - .App-link { color: #61dafb; } diff --git a/src/App/App.tsx b/src/App/App.tsx index c146dbf..521960d 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -1,6 +1,6 @@ import "./App.css"; -import logo from "./logo.svg"; -import myimg from "./myimg.png"; +import reactSvgUrl from "./assets/react.svg"; +import viteSvgUrl from "./assets/vite.svg"; import { OidcProvider, useOidc, getKeycloakAccountUrl } from "./oidc"; export default function App() { @@ -24,49 +24,52 @@ function ContextualizedApp() { return (
-
- {isUserLoggedIn ? - ( - <> +
+
+ {isUserLoggedIn ? + ( + <> -

Hello {oidcTokens.decodedIdToken.name} !

- - Link to your Keycloak account - - - - - ) - : - ( - - ) - } - logo - test_image -

Hello world

-

Check out all keycloak pages in the Storybook!

-

Once you've identified the ones you want to customize run npx eject-keycloak-page

-
+ + + ) + : + ( + + ) + } +
+
+ logo +     + logo +
+ ); } -function Jwt(){ +function Jwt() { const { oidcTokens } = useOidc({ assertUserLoggedIn: true diff --git a/src/App/assets/react.svg b/src/App/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/App/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App/assets/vite.svg b/src/App/assets/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/src/App/assets/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App/logo.svg b/src/App/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/App/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App/myimg.png b/src/App/myimg.png deleted file mode 100644 index 6756d2c50891b0cae5143677defd5a9d30aab69b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3440 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