- Client ID: {data.scope}
+ Client ID: {data.client.clientId}
{data.client.clientName && (
diff --git a/frontend/src/components/Typography.tsx b/frontend/src/components/Typography.tsx
index 9647b957..e2fddeb1 100644
--- a/frontend/src/components/Typography.tsx
+++ b/frontend/src/components/Typography.tsx
@@ -35,24 +35,38 @@ const classMap: Record
= {
headline: "text-3xl font-semibold",
title: "text-2xl font-semibold",
subtitle: "text-lg",
- body: "text-base",
+ body: "text-base text-justify",
caption: "text-sm",
micro: "text-xs",
};
-const Typography: React.FC = ({ variant, children, bold }) => {
+const Typography = ({ variant, children, bold }: Props) => {
const element = elementMap[variant];
const boldClass = bold ? "font-semibold" : "";
const className = `text-black dark:text-white ${boldClass} ${classMap[variant]}`;
return createElement(element, { className }, ...Children.toArray(children));
};
-export const Bold: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+type SimpleProps = { children: React.ReactNode };
+
+export const Bold = ({ children }: SimpleProps) => (
{children}
);
-export const Code: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+export const Code = ({ children }: SimpleProps) => (
{children}
);
+export const Title = ({ children }: SimpleProps) => (
+
+);
+
+export const Subtitle = ({ children }: SimpleProps) => (
+
+);
+
+export const Body = ({ children }: SimpleProps) => (
+
+);
+
export default Typography;
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index a3616721..cf7340d2 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -17,6 +17,7 @@
module.exports = {
mode: "jit",
content: ["./src/**/*.tsx", "./index.html"],
+ darkMode: "class",
theme: {
colors: {
white: "#FFFFFF",