DHBW-WE/MeetUp
5
0
Fork 0
Code Issues 7 Pull requests 5 Projects 1 Releases 5 Packages 1 Wiki Activity Actions

refactor: style login page #80

Merged
lima merged 16 commits from refactor/70-style_login_page into main 2025-06-05 15:54:28 +00:00
Conversation 2 Commits 16 Files changed 31 +629 -129
lima commented 2025-05-23 09:11:08 +00:00
Member
Copy link
No description provided.
lima added 14 commits 2025-05-23 09:11:09 +00:00 
refactor: restyle input according to figma
refactor: restyle login page according to figma
Refactor the `Button` component, add new `LoginCard` component, update `ThemePicker` component, edit global CSS styles to include card background and foreground and style the login page, including the logo and login form.
The changes add the SIL Open Font License (OFL) text files for the Varela Round and Comfortaa font families. This ensures the proper licensing information is included with the font files, allowing users to understand the terms under which they can use and distribute these fonts.
chore(button): update button font to use label font

chore(label): update label font to use label font

chore(login-form): update input placeholder text

chore(labeled-input): update input font to use label font

feat(global-styles): add custom font families for heading and label

chore(popover): update popover background color to match background
This commit includes the following changes:

- Remove the `--card` CSS variable as it is no longer used.
- Update the `--color-disabled-secondary` variable to use the correct value.
- Change the `--color-accent` variable to use a more neutral color.
- Refactor the `buttonVariants` function to accept only the `variant` and `size` props, and apply the `className` prop separately.
- Update the `select` component styles to use the correct text color for focused items.
- Add error handling for the `Logo` component to display a warning if the logo asset is not found.

These changes improve the overall styling and consistency of the application.
Refine color variables and class names in input and dropdown-menu
components to improve visual consistency and accessibility. Introduce
new CSS variables for input text and muted input states. Adjust focus
and selection styles to better align with the overall design system.
Fixed Color Picker
to reflect new values
feat(routing): exclude fonts from redirect
All checks were successful
container-scan / Container Scan (pull_request) Successful in 3m1s
Details
docker-build / docker (pull_request) Successful in 4m44s
Details
47f149d837
lima changed title from refactor/70-style_login_page to refactor: style login page 2025-05-23 09:11:38 +00:00
requested review from Contributor 2025-05-23 09:16:01 +00:00
lima added 1 commit 2025-05-23 19:07:49 +00:00
feat: add neutral-450 color variable and update muted input color for better contrast
All checks were successful
container-scan / Container Scan (pull_request) Successful in 2m57s
Details
docker-build / docker (pull_request) Successful in 4m24s
Details
bd911476e6
dominik reviewed 2025-05-23 20:13:39 +00:00
dominik left a comment
Owner
Copy link

den WIP commit vielleicht noch umbenennen oder mit einem anderen commit squashen. Finde das sonst irgendwie unschön

den `WIP` commit vielleicht noch umbenennen oder mit einem anderen commit squashen. Finde das sonst irgendwie unschön
public/fonts/Comfortaa/README.txt Outdated
@ -0,0 +4,4 @@
This download contains Comfortaa as both a variable font and static fonts.
Comfortaa is a variable font with this axis:
wght
dominik commented 2025-05-23 20:05:54 +00:00
Owner
Copy link

hatte einen grund, das die datei wght und nicht weight im namen hatte xD

hatte einen grund, das die datei `wght` und nicht `weight` im namen hatte xD
dominik marked this conversation as resolved
src/components/custom-ui/button.tsx Outdated
@ -0,0 +15,4 @@
'bg-secondary text-text-alt shadow-xs hover:bg-hover-secondary active:bg-active-secondary',
outline:
'border-2 border-primary bg-transparent text-text shadow-xs hover:bg-primary hover:border-neutral-000 hover:border-1.5 hover:text-neutral-000 active:bg-active-primary',
/*destructive:
dominik commented 2025-05-23 20:08:21 +00:00
Owner
Copy link

was ist mit dem destructive style? Soll der raus? Dann würde ich den ganz raus löschen.

was ist mit dem destructive style? Soll der raus? Dann würde ich den ganz raus löschen.
lima marked this conversation as resolved
src/components/logo.tsx Outdated
@ -0,0 +62,4 @@
return null;
}
console.log(colorType, logoType, theme);
dominik commented 2025-05-23 20:10:33 +00:00
Owner
Copy link

wieso loggen wir immer, welches logo geladen wird?

wieso loggen wir immer, welches logo geladen wird?
micha.bok marked this conversation as resolved
src/components/logo.tsx Outdated
@ -0,0 +108,4 @@
};
// Match the varName with the Logo-Asset name and store it in "logoVar"
const logoVar = logoAssets[varName as keyof typeof logoAssets];
dominik commented 2025-05-23 20:09:52 +00:00
Owner
Copy link

das hier geht auch etwas schöner, indem man varName oben as const definiert und der theme variable sagt, dass sie vom typ Theme ist.

das hier geht auch etwas schöner, indem man varName oben `as const` definiert und der theme variable sagt, dass sie vom typ `Theme` ist.
micha.bok commented 2025-05-28 16:44:04 +00:00
Member
Copy link

weiß grad spontan nicht, was du meinst; dafür bin ich zu wenig in TS drin

weiß grad spontan nicht, was du meinst; dafür bin ich zu wenig in TS drin
dominik commented 2025-05-29 20:04:15 +00:00
Owner
Copy link

wenn du statt

  const varName = `logo_${colorTypeInFilename}_${logoType}_${theme}`;

varName als

  const varName = `logo_${colorTypeInFilename}_${logoType}_${theme}` as const;

definierst, erkennt typescript alle möglichen kombinationen der variable automatisch und du brauchst dann bei der logoVar keinen typecast mehr (const logoVar = logoAssets[varName]). Musst das das ganze aber funktioniert ihm noch mitteilen, das theme auch vom typen Theme ist.

  let { resolvedTheme: theme } = useTheme() as {
    resolvedTheme: Theme | undefined;
  };

mit

  const logoAssets: {
    [key in typeof varName]: string;
  } = {
    logo_colored_combo_light,
    logo_colored_combo_dark,
    logo_colored_primary_light,
    logo_colored_primary_dark,
    logo_colored_secondary_light,
    logo_colored_secondary_dark,
    logo_mono_combo_light,
    logo_mono_combo_dark,
    logo_mono_primary_light,
    logo_mono_primary_dark,
    logo_mono_secondary_light,
    logo_mono_secondary_dark,
    logo_mono_submark_light,
    logo_mono_submark_dark,
    logo_colored_submark_light,
    logo_colored_submark_dark,
  };

würde er dann sogar fehler werfen, wenn eine kombination kein logo asset hat.

wenn du statt ``` const varName = `logo_${colorTypeInFilename}_${logoType}_${theme}`; ``` `varName` als ``` const varName = `logo_${colorTypeInFilename}_${logoType}_${theme}` as const; ``` definierst, erkennt typescript alle möglichen kombinationen der variable automatisch und du brauchst dann bei der logoVar keinen typecast mehr (`const logoVar = logoAssets[varName]`). Musst das das ganze aber funktioniert ihm noch mitteilen, das theme auch vom typen `Theme` ist. ``` let { resolvedTheme: theme } = useTheme() as { resolvedTheme: Theme | undefined; }; ``` mit ``` const logoAssets: { [key in typeof varName]: string; } = { logo_colored_combo_light, logo_colored_combo_dark, logo_colored_primary_light, logo_colored_primary_dark, logo_colored_secondary_light, logo_colored_secondary_dark, logo_mono_combo_light, logo_mono_combo_dark, logo_mono_primary_light, logo_mono_primary_dark, logo_mono_secondary_light, logo_mono_secondary_dark, logo_mono_submark_light, logo_mono_submark_dark, logo_colored_submark_light, logo_colored_submark_dark, }; ``` würde er dann sogar fehler werfen, wenn eine kombination kein logo asset hat.
dominik marked this conversation as resolved
src/components/logo.tsx Outdated
@ -0,0 +129,4 @@
className={className}
width={width}
height={height}
// onError={handleImageError}
dominik commented 2025-05-23 20:10:14 +00:00
Owner
Copy link

was ist mit dem error handling hier?

was ist mit dem error handling hier?
micha.bok marked this conversation as resolved
src/components/user/login-form.tsx Outdated
@ -44,0 +39,4 @@
Login
</Button>
<Button type='submit' variant='outline'>
Sign Up
dominik commented 2025-05-23 20:11:34 +00:00
Owner
Copy link

Was genau soll der sign up button hier eigentlich als aktion machen? Soll der dann auf eine andere Seite führen?

Was genau soll der sign up button hier eigentlich als aktion machen? Soll der dann auf eine andere Seite führen?
dominik marked this conversation as resolved
micha.bok added 1 commit 2025-05-28 16:43:33 +00:00
refactor: remove debug log and unused onError prop
All checks were successful
container-scan / Container Scan (pull_request) Successful in 3m11s
Details
docker-build / docker (pull_request) Successful in 4m17s
Details
4f8f9b035b
lima added 1 commit 2025-06-05 15:22:08 +00:00
feat(logo): consolidate logo imports into a single export file
All checks were successful
container-scan / Container Scan (pull_request) Successful in 7m48s
Details
docker-build / docker (pull_request) Successful in 9m1s
Details
df9066df6c
lima force-pushed refactor/70-style_login_page from df9066df6c to 49b3869d7b 2025-06-05 15:39:01 +00:00 Compare
dominik approved these changes 2025-06-05 15:40:49 +00:00
lima merged commit 01c77101f9 into main 2025-06-05 15:54:28 +00:00
lima deleted branch refactor/70-style_login_page 2025-06-05 15:54:30 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
dominik
Labels
Clear labels   
Compat/Breaking

Breaking change that won't be backward compatible

  
Kind/Bug

Something is not working

  
Kind/Documentation

Documentation changes

  
Kind/Enhancement

Improve existing functionality

  
Kind/Feature

New functionality

  
Kind/Security

This is security issue

  
Kind/Testing

Issue or pull request related to testing

  
Priority
Critical
The priority is critical

  
Priority
High
The priority is high

  
Priority
Low
The priority is low

  
Priority
Medium
The priority is medium

  
Reviewed
Confirmed
Issue has been confirmed

  
Reviewed
Duplicate
This issue or pull request already exists

  
Reviewed
Invalid
Invalid issue

  
Reviewed
Won't Fix
This issue won't be fixed

  
Review needed
  
Status
Abandoned
Somebody has started to work on this but abandoned work

  
Status
Blocked
Something is blocking this issue or pull request

  
Status
Need More Info
Feedback is required to reproduce issue or to continue work

No labels
Compat/Breaking
Kind/Bug
Kind/Documentation
Kind/Enhancement
Kind/Feature
Kind/Security
Kind/Testing
Priority
Critical
Priority
High
Priority
Low
Priority
Medium
Reviewed
Confirmed
Reviewed
Duplicate
Reviewed
Invalid
Reviewed
Won't Fix
Review needed
Status
Abandoned
Status
Blocked
Status
Need More Info
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: DHBW-WE/MeetUp#80
No description provided.
Delete branch "refactor/70-style_login_page"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?