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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