Skip to content

Commit

Permalink
Update login page (#34)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evisdrenova
evisdrenova authored Jun 12, 2024
1 parent b9c17bd commit 6a8c5e7
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 7 deletions.
30 changes: 28 additions & 2 deletions src/login/KcApp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,15 +211,41 @@ a:hover {
.sideImageContent {
display: flex;
align-content: center;
flex-direction: column;
flex: 1;
justify-content: center;
background: linear-gradient(to bottom right, #1e1e1e, #2c2b2b);
/* background: radial-gradient(ellipse at center, #f2f2f2 40%, #f9f9f9 100%); */
/* background: linear-gradient(to bottom right, #1e1e1e, #2c2b2b); */
/* background: #ececec; */
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%232C2B2B'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='385' height='320.8' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
background-attachment: fixed;
background-size: cover;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
border: 1px solid #afafaf;
border-radius: 10px;
margin: 10px 10px 10px 10px;
align-items: center;
gap: 40px;
}

.loginPageText {
font-size: 3rem; /* Equivalent to text-xl in Tailwind */
color: white; /* Equivalent to text-gray-800 in Tailwind */
text-align: center;
padding-top: 40px;
}

.loginPageSubText {
font-size: 1.5rem; /* Equivalent to text-xl in Tailwind */
color: #c6c2c2; /* Equivalent to text-gray-800 in Tailwind */
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
font: "mono";
}

#kc-reset-password-form {
Expand Down
28 changes: 23 additions & 5 deletions src/login/Template.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,13 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {

const { auth, url, message, isAppInitiatedAction } = kcContext;

const POSTHOG_KEY = "poieowepwer";

useEffect(() => {
posthog.init(kcContext.properties.POSTHOG_KEY ?? "fake-key", {
api_host: kcContext.properties.POSTHOG_HOST,
posthog.init(POSTHOG_KEY ?? "fake-key", {
api_host: POSTHOG_KEY,
});
}, [kcContext?.properties?.POSTHOG_KEY, kcContext?.properties?.POSTHOG_HOST]);
}, [POSTHOG_KEY, POSTHOG_KEY]);

const { isReady } = usePrepareTemplate({
doFetchDefaultThemeResources: doUseDefaultCss,
Expand Down Expand Up @@ -244,10 +246,26 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
</div>
</div>
<div className="sideImageContent">
<div>
<div className="loginPageText">
Deliver a better developer experience.
</div>
<div className="loginPageSubText">
Anonymization. Synthetic Data. Subsetting. Orchestration.
</div>
</div>
<img
src="https://assets.nucleuscloud.com/neosync/app/sphere.svg"
src="https://assets.nucleuscloud.com/neosync/app/dark-app.svg"
alt="Neosync logo"
style={{ maxWidth: "100%", height: "auto" }}
style={{
width: "90%",
maxWidth: "100%",
height: "auto",
borderRadius: "10px",
borderColor: "#686868",
borderWidth: "2px",
borderStyle: "solid",
}}
/>
</div>
</div>
Expand Down

0 comments on commit 6a8c5e7

Please sign in to comment.