Merge pull request #2 from helpwave/patch/implement-all-views

fix themeprovider

Author: felixevers

locales/de.arb locales/de-DE.arblocales/de.arb renamed to locales/de-DE.arb

@@ -1,5 +1,5 @@
 {
-  "@@locale": "de",
+  "@@locale": "de-DE",
   "helpwaveId": "helpwave id",
   "@helpwaveId": {
     "description": "Titel für helpwave id Badge"

locales/en.arb locales/en-US.arblocales/en.arb renamed to locales/en-US.arb

@@ -1,5 +1,5 @@
 {
-  "@@locale": "en",
+  "@@locale": "en-US",
   "helpwaveId": "helpwave id",
   "@helpwaveId": {
     "description": "Title for helpwave id badge"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "id.helpwave.de",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "repository": {
     "type": "git",
     "url": "git://github.com/helpwave/id.helpwave.de.git"

src/i18n/translations.ts

@@ -5,7 +5,7 @@
 import type { Translation } from '@helpwave/internationalization'
 import { TranslationGen } from '@helpwave/internationalization'
 
-export const helpwaveIdTranslationLocales = ['de', 'en'] as const
+export const helpwaveIdTranslationLocales = ['de-DE', 'en-US'] as const
 
 export type HelpwaveIdTranslationLocales = typeof helpwaveIdTranslationLocales[number]
 
@@ -78,7 +78,7 @@ export type HelpwaveIdTranslationEntries = {
 }
 
 export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Partial<HelpwaveIdTranslationEntries>> = {
-  'de': {
+  'de-DE': {
     'acceptTerms': `Ich akzeptiere die Allgemeinen Geschäftsbedingungen`,
     'backToApplication': `Zurück zur Anwendung`,
     'backToLogin': `Zurück zur Anmeldung`,
@@ -150,7 +150,7 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
     'x509InfoMessage': `Bitte geben Sie Ihre X.509 Zertifikatsinformationen an`,
     'x509InfoTitle': `X.509 Zertifikatsinformationen`
   },
-  'en': {
+  'en-US': {
     'acceptTerms': `I accept the terms and conditions`,
     'backToApplication': `Back to Application`,
     'backToLogin': `Back to Login`,

src/i18n/useTranslation.ts

@@ -1,8 +1,4 @@
-import { combineTranslation } from '@helpwave/internationalization'
-import { helpwaveIdTranslation, type HelpwaveIdTranslationLocales } from './translations'
+import { helpwaveIdTranslation } from './translations'
+import { useHightideTranslation } from '@helpwave/hightide'
 
-export function useTranslation(locale?: string) {
-    const lang = (locale ?? 'en') as HelpwaveIdTranslationLocales
-    console.log(locale, lang)
-    return combineTranslation(helpwaveIdTranslation, lang)
-}
+export const useTranslation = () => useHightideTranslation(helpwaveIdTranslation)

src/index.css

@@ -1,21 +1,9 @@
 @import "tailwindcss";
-
-:root {
-    --hw-color-secondary-50: #f9fafb;
-    --hw-color-secondary-100: #f3f4f6;
-    --hw-color-secondary-200: #e5e7eb;
-    --hw-color-secondary-300: #d1d5db;
-    --hw-color-secondary-400: #9ca3af;
-    --hw-color-secondary-500: #6b7280;
-    --hw-color-secondary-600: #4b5563;
-    --hw-color-secondary-700: #374151;
-    --hw-color-secondary-800: #1f2937;
-    --hw-color-secondary-900: #111827;
-}
+@import "@helpwave/hightide/style/uncompiled/globals.css";
+@source "./node_modules/@helpwave/hightide";
 
 @layer base {
-    body {
-        min-height: 100vh;
-        background-color: var(--hw-color-background) !important;
+    html, body, main {
+        @apply bg-background text-on-background;
     }
 }

src/login/components/Branding.tsx

@@ -4,9 +4,9 @@ export function Branding() {
     return (
         <div className="flex flex-col items-center gap-4 mb-8 sm:gap-3 sm:mb-6">
             <HelpwaveLogo height={64} width={64} />
-            <div className="font-['Space_Grotesk',_'Helvetica_Neue',_Helvetica,_sans-serif] text-2xl font-bold text-black tracking-[-0.5px] sm:text-xl">
+            <div className="font-space text-2xl font-bold tracking-[-0.5px] sm:text-xl">
                 helpwave id
             </div>
         </div>
     )
-}
+}

src/login/components/Footer.tsx

@@ -1,25 +1,18 @@
-import type { KcContext } from '../KcContext'
 import { useTranslation } from '../../i18n/useTranslation'
 
-type FooterProps = {
-    kcContext: KcContext,
-}
-
-export function Footer({ kcContext }: FooterProps) {
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+export function Footer() {
+    const t = useTranslation()
 
     return (
         <div
-            className="text-center text-[13px] mt-8 pt-4 border-t border-[var(--hw-color-neutral-200)] sm:text-xs sm:mt-6 sm:pt-3"
-            style={{ color: 'var(--hw-color-neutral-600)' }}
+            className="text-center text-sm mt-8 pt-4"
         >
             <div className="mb-2">
                 <a
                     href="https://cdn.helpwave.de/imprint.html"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline mx-2 sm:mx-1"
+                    className="mx-2 sm:mx-1"
                     style={{ color: 'var(--hw-color-neutral-600)' }}
                 >
                     {t('imprint')}
@@ -29,12 +22,12 @@ export function Footer({ kcContext }: FooterProps) {
                     href="https://cdn.helpwave.de/privacy.html"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline mx-2 sm:mx-1"
+                    className="mx-2 sm:mx-1"
                     style={{ color: 'var(--hw-color-neutral-600)' }}
                 >
                     {t('privacy')}
                 </a>
             </div>
         </div>
     )
-}
+}

src/login/components/LanguageSwitcher.tsx

@@ -20,7 +20,7 @@ export function LanguageSwitcher({ kcContext }: LanguageSwitcherProps) {
         <>
             <Button
                 type="button"
-                color="secondary"
+                color="neutral"
                 onClick={() => setIsOpen(true)}
                 style={{ padding: '0.5rem', minWidth: 'auto' }}
                 aria-label="Change language"
@@ -35,7 +35,7 @@ export function LanguageSwitcher({ kcContext }: LanguageSwitcherProps) {
                     <Button
                         key={lang.languageTag}
                         type="button"
-                        color={kcContext.locale?.currentLanguageTag === lang.languageTag ? 'primary' : 'secondary'}
+                        color={kcContext.locale?.currentLanguageTag === lang.languageTag ? 'primary' : 'neutral'}
                         onClick={() => {
                             handleLanguageChange(lang.languageTag)
                             setIsOpen(false)
@@ -47,4 +47,4 @@ export function LanguageSwitcher({ kcContext }: LanguageSwitcherProps) {
             </LanguageDialog>
         </>
     )
-}
+}

src/login/components/PageLayout.tsx

@@ -18,10 +18,6 @@ export function PageLayout({ kcContext, children }: PageLayoutProps) {
             <style>{hideKeycloakStyles}</style>
             <div
                 className="flex flex-col min-h-screen p-4 relative"
-                style={{
-                    backgroundColor:
-                        'var(--hw-color-background, var(--hw-color-neutral-0, #ffffff))'
-                }}
             >
                 <div className="absolute top-4 right-4 flex gap-2 z-[1000] sm:top-2 sm:right-2 sm:gap-1">
                     <ThemeSwitcher />
@@ -37,8 +33,8 @@ export function PageLayout({ kcContext, children }: PageLayoutProps) {
                     </div>
                 </div>
 
-                <Footer kcContext={kcContext} />
+                <Footer />
             </div>
         </>
     )
-}
+}