Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@evisdrenova
evisdrenova committed Nov 1, 2024
1 parent aa519a7 commit 53fb327
Show file tree
Hide file tree
Showing 13 changed files with 1,255 additions and 33 deletions.
41 changes: 25 additions & 16 deletions src/login/KcApp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,37 +214,36 @@ a:hover {
flex-direction: column;
flex: 1;
justify-content: center;
/* 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-color: #f3f4f6;
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 #afafaf;
border-radius: 10px;
margin: 10px 10px 10px 10px;
/* 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 #afafaf; */
border-left: 1px solid #afafaf;
/* border-radius: 10px; */
/* margin: 10px 10px 10px 10px; */
align-items: center;
gap: 40px;
gap: 20px;
}

.loginPageText {
font-size: 3rem; /* Equivalent to text-xl in Tailwind */
color: white; /* Equivalent to text-gray-800 in Tailwind */
font-size: 3rem;
color: "#111827";
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 */
font-size: 1.5rem;
color: #6b7280;
text-align: center;
padding-top: 10px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 10rem;
padding-left: 10rem;
font: "mono";
}

Expand Down Expand Up @@ -341,3 +340,13 @@ a:hover {
#kc-register-form {
padding-top: 10%;
}

.edge-path {
strokedasharray: 12 12;
animation: dashdraw 1s linear infinite;
}
@keyframes dashdraw {
to {
stroke-dashoffset: -80;
}
}
1,099 changes: 1,099 additions & 0 deletions src/login/SyncDash.tsx
View file

Large diffs are not rendered by default.

59 changes: 43 additions & 16 deletions src/login/Template.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,14 @@ import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
import { clsx } from "keycloakify/tools/clsx";
import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";
import { useEffect, useState } from "react";
import { ReactElement, useEffect, useState } from "react";
import type { I18n } from "./i18n";
import type { KcContext } from "./kcContext";
import c2foLogo from "./assets/c2fo_logo.svg";
import fellow from "./assets/fellow_logo.svg";
import fp from "./assets/fpllc_logo.svg";
import siemans from "./assets/siemens_logo.svg";
import { SyncDash } from "./SyncDash";

export default function Template(props: TemplateProps<KcContext, I18n>) {
const {
Expand Down Expand Up @@ -58,6 +63,25 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
return null;
}

const logos: { id: number; logo: ReactElement }[] = [
{
id: 1,
logo: <img src={c2foLogo} width="60" height="200" alt="cust_logo" />,
},
{
id: 2,
logo: <img src={fellow} width="120" height="100" alt="cust_logo" />,
},
{
id: 3,
logo: <img src={fp} width="160" height="100" alt="cust_logo" />,
},
{
id: 8,
logo: <img src={siemans} width="100" height="100" alt="cust_logo" />,
},
];

return (
<PostHogProvider client={posthog}>
<div className={getClassName("kcLoginClass")}>
Expand Down Expand Up @@ -245,26 +269,29 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
</div>
<div className="sideImageContent">
<div>
<div className="loginPageText">
Deliver a better developer experience.
</div>
<div className="loginPageText">Every developer needs data.</div>
<div className="loginPageSubText">
Anonymization. Synthetic Data. Subsetting. Orchestration.
Neosync powers developers with safe, high-quality data for a
better building, testing and debugging experience.
</div>
</div>
<img
src="https://assets.nucleuscloud.com/neosync/app/dark-app.svg"
alt="Neosync logo"
<SyncDash />
<div
style={{
width: "90%",
maxWidth: "100%",
height: "auto",
borderRadius: "10px",
borderColor: "#686868",
borderWidth: "2px",
borderStyle: "solid",
display: "flex",
flexDirection: "row",
width: "100%",
justifyContent: "space-evenly",
alignItems: "center",
padding: "10px",
}}
/>
>
{logos.map((src) => (
<div key={src.id} className="flex items-center">
{src.logo}
</div>
))}
</div>
</div>
</div>
</PostHogProvider>
Expand Down
7 changes: 7 additions & 0 deletions src/login/assets/c2fo_logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 53fb327

Please sign in to comment.