diff --git a/apps/login/app/(login)/error.tsx b/apps/login/app/(login)/error.tsx index 905ac7f35cf..899ddad10f7 100644 --- a/apps/login/app/(login)/error.tsx +++ b/apps/login/app/(login)/error.tsx @@ -1,18 +1,18 @@ -'use client'; +"use client"; -import { Boundary } from '#/ui/Boundary'; -import { Button } from '#/ui/Button'; -import React from 'react'; +import { Boundary } from "#/ui/Boundary"; +import { Button } from "#/ui/Button"; +import React from "react"; export default function Error({ error, reset }: any) { React.useEffect(() => { - console.log('logging error:', error); + console.log("logging error:", error); }, [error]); return ( - +
-
+
Error: {error?.message}
diff --git a/apps/login/app/layout.tsx b/apps/login/app/layout.tsx index c4b1465bacc..88237e7d670 100644 --- a/apps/login/app/layout.tsx +++ b/apps/login/app/layout.tsx @@ -11,7 +11,7 @@ import { server } from "../lib/zitadel"; import { LabelPolicyColors } from "#/utils/colors"; const lato = Lato({ - weight: "400", + weight: ["400", "700", "900"], subsets: ["latin"], }); @@ -22,6 +22,9 @@ export default async function RootLayout({ }: { children: React.ReactNode; }) { + // later only shown with dev mode enabled + const showNav = true; + const branding = await getBranding(server); let partialPolicy: LabelPolicyColors | undefined; console.log(branding); @@ -44,23 +47,29 @@ export default async function RootLayout({
- + {showNav && } -
+
-
-
- + {showNav && ( +
+
+ +
-
+ )} -
+
{children}
-
+
diff --git a/apps/login/public/favicon.ico b/apps/login/public/favicon.ico old mode 100755 new mode 100644 index 718d6fea483..a901eddc34f Binary files a/apps/login/public/favicon.ico and b/apps/login/public/favicon.ico differ diff --git a/apps/login/public/favicon/android-chrome-192x192.png b/apps/login/public/favicon/android-chrome-192x192.png index f2fa0bc0df0..f22bd442e63 100644 Binary files a/apps/login/public/favicon/android-chrome-192x192.png and b/apps/login/public/favicon/android-chrome-192x192.png differ diff --git a/apps/login/public/favicon/android-chrome-512x512.png b/apps/login/public/favicon/android-chrome-512x512.png index 8c109b182da..6987ed11b45 100644 Binary files a/apps/login/public/favicon/android-chrome-512x512.png and b/apps/login/public/favicon/android-chrome-512x512.png differ diff --git a/apps/login/public/favicon/apple-touch-icon.png b/apps/login/public/favicon/apple-touch-icon.png index 619d3658c6c..48161020158 100644 Binary files a/apps/login/public/favicon/apple-touch-icon.png and b/apps/login/public/favicon/apple-touch-icon.png differ diff --git a/apps/login/public/favicon/favicon-16x16.png b/apps/login/public/favicon/favicon-16x16.png index ebceeda33ba..4f45702ca94 100644 Binary files a/apps/login/public/favicon/favicon-16x16.png and b/apps/login/public/favicon/favicon-16x16.png differ diff --git a/apps/login/public/favicon/favicon-32x32.png b/apps/login/public/favicon/favicon-32x32.png index c2d93186e83..a598da05eba 100644 Binary files a/apps/login/public/favicon/favicon-32x32.png and b/apps/login/public/favicon/favicon-32x32.png differ diff --git a/apps/login/public/favicon/mstile-150x150.png b/apps/login/public/favicon/mstile-150x150.png index 8b0aa886617..ab518480e61 100644 Binary files a/apps/login/public/favicon/mstile-150x150.png and b/apps/login/public/favicon/mstile-150x150.png differ diff --git a/apps/login/public/favicon/safari-pinned-tab.svg b/apps/login/public/favicon/safari-pinned-tab.svg deleted file mode 100644 index 72ab6e050cb..00000000000 --- a/apps/login/public/favicon/safari-pinned-tab.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - -Created by potrace 1.11, written by Peter Selinger 2001-2013 - - - - - - - - - - diff --git a/apps/login/ui/Boundary.tsx b/apps/login/ui/Boundary.tsx index e02499de213..ffda6e97372 100644 --- a/apps/login/ui/Boundary.tsx +++ b/apps/login/ui/Boundary.tsx @@ -14,11 +14,11 @@ const Label = ({
@@ -45,13 +45,12 @@ export const Boundary = ({ "p-3 lg:p-5": size === "small", "p-4 lg:p-9": size === "default", "border-divider-light dark:border-divider-dark": color === "default", - "border-vercel-pink": color === "pink", - "border-vercel-blue": color === "blue", - "border-vercel-cyan": color === "cyan", - "border-vercel-violet": color === "violet", - "border-vercel-orange": color === "orange", - "animate-[rerender_1s_ease-in-out_1] text-vercel-pink": - animateRerendering, + "border-pink-500": color === "pink", + "border-blue-500": color === "blue", + "border-cyan-500": color === "cyan", + "border-violet-500": color === "violet", + "border-orange-500": color === "orange", + "animate-[rerender_1s_ease-in-out_1] text-pink-500": animateRerendering, })} >
- + /> */} ); diff --git a/apps/login/ui/GlobalNav.tsx b/apps/login/ui/GlobalNav.tsx index 8c9a81b947c..c94e1ecf1ec 100644 --- a/apps/login/ui/GlobalNav.tsx +++ b/apps/login/ui/GlobalNav.tsx @@ -55,7 +55,7 @@ export function GlobalNav() { {demos.map((section) => { return (
-
+
{section.name}
@@ -90,11 +90,11 @@ function GlobalNavItem({ onClick={close} href={`/${item.slug}`} className={clsx( - "block rounded-md px-3 py-2 text-[15px] font-medium hover:text-black dark:hover:text-gray-300", + "block rounded-md px-3 py-2 text-[15px] font-medium text-text-light-500 dark:text-text-dark-500 opacity-60 dark:opacity-60", { - "text-text-light-secondary-500 dark:text-text-dark-secondary-500 hover:text-text-light-500 hover:dark:text-text-dark-500": - !isActive, - "text-text-light-500 dark:text-text-dark-500 font-semibold": isActive, + "hover:opacity-100 hover:dark:opacity-100": !isActive, + "text-text-light-500 dark:text-text-dark-500 opacity-100 dark:opacity-100 font-semibold": + isActive, } )} > diff --git a/apps/login/ui/Tab.tsx b/apps/login/ui/Tab.tsx index 6712fcebbf1..37c111ffa73 100644 --- a/apps/login/ui/Tab.tsx +++ b/apps/login/ui/Tab.tsx @@ -1,9 +1,9 @@ -'use client'; +"use client"; -import type { Item } from '#/ui/TabGroup'; -import clsx from 'clsx'; -import Link from 'next/link'; -import { useSelectedLayoutSegment } from 'next/navigation'; +import type { Item } from "#/ui/TabGroup"; +import clsx from "clsx"; +import Link from "next/link"; +import { useSelectedLayoutSegment } from "next/navigation"; export const Tab = ({ path, @@ -13,7 +13,7 @@ export const Tab = ({ item: Item; }) => { const segment = useSelectedLayoutSegment(); - const href = slug ? path + '/' + slug : path; + const href = slug ? path + "/" + slug : path; const isActive = // Example home pages e.g. `/layouts` (!slug && segment === null) || @@ -23,10 +23,10 @@ export const Tab = ({ return ( {text} diff --git a/apps/login/utils/colors.ts b/apps/login/utils/colors.ts index 643429ac188..161d2f203c7 100644 --- a/apps/login/utils/colors.ts +++ b/apps/login/utils/colors.ts @@ -1,5 +1,3 @@ -import { LabelPolicy } from "#/../../packages/zitadel-server/dist"; -import { secondsToMilliseconds } from "date-fns"; import tinycolor from "tinycolor2"; export interface Color { @@ -93,12 +91,6 @@ export function setTheme(document: any, policy?: LabelPolicyColors) { setColorShades(dark.warn, "warn", "dark", document); setColorShades(light.warn, "warn", "light", document); - // setColorShades(dark.text, "text", "dark", document); - // setColorShades(light.text, "text", "light", document); - - // setColorShades(dark.link, "link", "dark", document); - // setColorShades(light.link, "link", "light", document); - setColorAlpha(dark.text, "text", "dark", document); setColorAlpha(light.text, "text", "light", document); @@ -141,7 +133,7 @@ function setColorAlpha( ); document.documentElement.style.setProperty( `--theme-${theme}-${type}-secondary-${color.name}`, - `${color.hex}80` + `${color.hex}c7` ); }); } diff --git a/packages/zitadel-tailwind-config/tailwind.config.js b/packages/zitadel-tailwind-config/tailwind.config.js index 22682f0028c..f1a2eccf994 100644 --- a/packages/zitadel-tailwind-config/tailwind.config.js +++ b/packages/zitadel-tailwind-config/tailwind.config.js @@ -19,64 +19,6 @@ module.exports = { }, colors: { gray: colors.zinc, - "gray-1000": "rgb(17,17,19)", - "gray-1100": "rgb(10,10,11)", - vercel: { - pink: "#FF0080", - blue: "#0070F3", - cyan: "#50E3C2", - orange: "#F5A623", - violet: "#7928CA", - }, - // primary: { - // light: { - // 200: "#bec6ef", - // 300: "#8594e0", - // 400: "#6c7eda", - // 500: "#5469d4", - // 600: "#3c54ce", - // contrast: "#ffffff", - // }, - // dark: { - // 100: "#afd1f2", - // 200: "#7fb5ea", - // 300: "#4192e0", - // 400: "#2782dc", - // 500: "#2073c4", - // 600: "#1c64aa", - // 700: "#17548f", - // 800: "#134575", - // 900: "#0f355b", - // }, - // }, - // accent: { - // light: { - // 400: "#9142d5", - // 500: "#7e21ce", - // }, - // dark: { - // 300: "#ff6396", - // 400: "#ff4180", - // 500: "#ff2069", - // }, - // }, - // background: { - // dark: { - // 100: "#4a69aa", - // 200: "#395183", - // 300: "#243252", - // 400: "#1a253c", - // 500: "#111827", - // 600: "#080b12", - // 700: "#000000", - // 800: "#000000", - // 900: "#000000", - // }, - // light: { - // 500: colors.white, - // 600: colors.gray[50], - // }, - // }, divider: { dark: "rgba(135,149,161,.2)", light: "rgba(135,149,161,.2)", @@ -115,19 +57,19 @@ module.exports = { keyframes: ({ theme }) => ({ rerender: { "0%": { - ["border-color"]: theme("colors.vercel.pink"), + ["border-color"]: theme("colors.pink.500"), }, "40%": { - ["border-color"]: theme("colors.vercel.pink"), + ["border-color"]: theme("colors.pink.500"), }, }, highlight: { "0%": { - background: theme("colors.vercel.pink"), + background: theme("colors.pink.500"), color: theme("colors.white"), }, "40%": { - background: theme("colors.vercel.pink"), + background: theme("colors.pink.500"), color: theme("colors.white"), }, },