From 62196f2b58a689c830d4c34b3555c817517a356d Mon Sep 17 00:00:00 2001 From: robines Date: Sat, 4 Apr 2026 20:25:06 +0200 Subject: [PATCH 01/11] Create new button styling --- frontend/index.html | 5 + .../src/Components/Button/Button.module.scss | 188 ++++++++++++------ frontend/src/Components/Button/Button.tsx | 2 +- frontend/src/Components/Button/utils.ts | 23 ++- .../RecruitmentGangAdminPage.tsx | 1 - frontend/src/global.scss | 8 +- frontend/src/styles/_variables.scss | 22 ++ 7 files changed, 173 insertions(+), 76 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 50f126739..556c4cc1a 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,6 +5,11 @@ + + + + + Samfundet diff --git a/frontend/src/Components/Button/Button.module.scss b/frontend/src/Components/Button/Button.module.scss index d133e469d..e4de79d84 100644 --- a/frontend/src/Components/Button/Button.module.scss +++ b/frontend/src/Components/Button/Button.module.scss @@ -3,91 +3,146 @@ @use 'src/mixins' as *; +@use 'src/styles/variables' as v; + +@use 'src/styles/colors' as c; + +@use 'sass:color'; + .button { @include flex-row; gap: 0.5rem; - border: none; cursor: pointer; - border-radius: 0.25em; - transition: 0.15s; - box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.05); + border-radius: v.$border-radius-md; justify-content: center; + font-size: v.$font-size; + transition: background-color 0.04s ease-in-out; + font-weight: v.$font-weight-medium; + border: 1px solid transparent; // Remove underline when button is a link &, &:hover { text-decoration: none; } +} + +.button:disabled, +.button:disabled:hover { + background-color: c.$gray-300; + color: c.$gray-50; + cursor: not-allowed; +} - &:disabled { - opacity: 0.5; - background-color: $grey-3; - color: $grey-1; - cursor: not-allowed; + +// Redesigned buttons + +.button_primary { + background-color: c.$samf-red-700; + color: c.$red-50; + + &:hover { + background-color: color.adjust(c.$samf-red-700, $lightness: -5%); } +} - &:hover:not([disabled]) { - filter: brightness(120%); - transition: 0.15s; - box-shadow: 1px 2px 15px 3px rgba(0, 0, 0, 0.05); +.button_secondary { + background-color: c.$white-50; + color: c.$gray-700; + border-color: c.$gray-200; + + &:hover { + background-color: c.$gray-100; + } + + @include theme-dark { + background-color: c.$gray-900; + color: c.$gray-100; + border-color: c.$gray-800; + + &:hover { + background-color: color.adjust(c.$gray-900, $lightness: 4%); + } } } -.button_basic { - background-color: white; - color: black; +.button_success { + background-color: c.$green-700; + color: c.$green-50; + + &:hover { + background-color: color.adjust(c.$green-700, $lightness: -8%); + } } -.button_selected { - background-color: white; - color: black; - box-shadow: inset 0 0 1.5px 2px rgba(0, 0, 0, 0.15); - cursor: default; +.button_danger { + background-color: c.$gold-600; + color: c.$white-50; - // Override hover effects for selected buttons - &:hover:not([disabled]) { - filter: none; - box-shadow: inset 0 0 1.5px 2px rgba(0, 0, 0, 0.15); + &:hover { + background-color: color.adjust(c.$gold-600, $lightness: -8%); } } -.button_samf { - background-color: $red-samf; - color: white; +.button_ghost { + background-color: transparent; + color: c.$gray-700; + + &:hover { + background-color: c.$gray-100; + } + + @include theme-dark { + color: c.$white-50; + + &:hover { + background-color: c.$gray-800; + } + } } .button_uka { - background-color: $blue-uka; - color: white; + background-color: c.$uka-blue; + color: c.$white-50; + + &:hover { + background-color: color.adjust(c.$uka-blue, $lightness: -6%); + } } .button_isfit { - background-color: $blue-isfit; - color: white; -} + background-color: c.$isfit-primary; + color: c.$white-50; -.button_lyche { - background-color: $sulten-orange; - color: white; + &:hover { + background-color: color.adjust(c.$isfit-primary, $lightness: -5%); + } } -.button_success { - background-color: $green; - color: white; -} +.button_black { + background-color: c.$gray-950; + color: c.$white-50; -.button_blue { - background-color: $blue; - color: white; + &:hover { + background-color: c.$gray-800; + } } -.button_secondary { - border: none; - padding: 10px 25px; - background-color: $grey-3; - color: white; +.button_white { + background-color: c.$white-50; + color: c.$gray-800; + + &:hover { + background-color: c.$gray-100; + } } + +////// old + + + + .button_outlined { background-color: inherit; border: 1px solid $grey-1; @@ -100,33 +155,38 @@ } } -.button_black { - background-color: $black; - color: white; - transition: 0.15s; - &:hover:not([disabled]) { - background-color: $grey-1; - transition: 0.15s; - } + + +.button_basic { + background-color: white; + color: black; } -.button_white { - background-color: $white; +.button_selected { + background-color: white; color: black; - transition: 0.15s; + box-shadow: inset 0 0 1.5px 2px rgba(0, 0, 0, 0.15); + cursor: default; + // Override hover effects for selected buttons &:hover:not([disabled]) { - filter: brightness(85%); - transition: 0.15s; + filter: none; + box-shadow: inset 0 0 1.5px 2px rgba(0, 0, 0, 0.15); } } -.button_yellow { - background-color: $yellow; +.button_samf { + background-color: $red-samf; color: white; } +.button_blue { + background-color: $blue; + color: white; +} + + .button_green { background-color: $green; color: white; @@ -139,7 +199,7 @@ } .display_basic { - padding: 10px 25px; + padding: 8px 14px; } .display_pill { diff --git a/frontend/src/Components/Button/Button.tsx b/frontend/src/Components/Button/Button.tsx index 11974e4be..e15dbe510 100644 --- a/frontend/src/Components/Button/Button.tsx +++ b/frontend/src/Components/Button/Button.tsx @@ -24,7 +24,7 @@ export type ButtonProps = { export function Button({ name, - theme = 'basic', + theme = 'primary', display = 'basic', rounded = false, type = 'button', diff --git a/frontend/src/Components/Button/utils.ts b/frontend/src/Components/Button/utils.ts index 853dbd25a..6b6e0116f 100644 --- a/frontend/src/Components/Button/utils.ts +++ b/frontend/src/Components/Button/utils.ts @@ -2,28 +2,33 @@ import classNames from 'classnames'; import styles from './Button.module.scss'; export const themeToStyleMap = { + primary: styles.button_primary, + secondary: styles.button_secondary, + success: styles.button_success, + danger: styles.button_danger, + ghost: styles.button_ghost, + black: styles.button_black, + white: styles.button_white, + + // Special buttons + uka: styles.button_uka, + isfit: styles.button_isfit, + + // TODO: Old styles, to be removed. basic: styles.button_basic, selected: styles.button_selected, pure: styles.pure, text: styles.button_text, samf: styles.button_samf, - lyche: styles.button_lyche, - secondary: styles.button_secondary, - success: styles.button_success, outlined: classNames(styles.button_outlined, 'button_outlined'), // Must be globally available for theme-dark. blue: styles.button_blue, - black: styles.button_black, - white: styles.button_white, green: styles.button_green, - uka: styles.button_uka, - isfit: styles.button_isfit, - yellow: styles.button_yellow, } as const; /** * basic: Normal button wrapping text. * pill: Rounded button. - * block: Utilises full width. + * block: Utilizes full width. */ export const displayToStyleMap = { basic: styles.display_basic, diff --git a/frontend/src/PagesAdmin/RecruitmentGangAdminPage/RecruitmentGangAdminPage.tsx b/frontend/src/PagesAdmin/RecruitmentGangAdminPage/RecruitmentGangAdminPage.tsx index 64a78de15..40c7baa6f 100644 --- a/frontend/src/PagesAdmin/RecruitmentGangAdminPage/RecruitmentGangAdminPage.tsx +++ b/frontend/src/PagesAdmin/RecruitmentGangAdminPage/RecruitmentGangAdminPage.tsx @@ -140,7 +140,6 @@ export function RecruitmentGangAdminPage() { {lowerCapitalize(`${t(KEY.common_create)} ${t(KEY.recruitment_position)}`)} , }; -export const Samf: Story = { - args: { theme: 'samf' }, +export const Primary: Story = { + args: { theme: 'primary' }, render: (args) => , }; diff --git a/frontend/src/Components/Button/utils.ts b/frontend/src/Components/Button/utils.ts index 6b6e0116f..a38f4bc2f 100644 --- a/frontend/src/Components/Button/utils.ts +++ b/frontend/src/Components/Button/utils.ts @@ -19,7 +19,6 @@ export const themeToStyleMap = { selected: styles.button_selected, pure: styles.pure, text: styles.button_text, - samf: styles.button_samf, outlined: classNames(styles.button_outlined, 'button_outlined'), // Must be globally available for theme-dark. blue: styles.button_blue, green: styles.button_green, diff --git a/frontend/src/Components/BuyEventTicket/BuyEventTicket.tsx b/frontend/src/Components/BuyEventTicket/BuyEventTicket.tsx index c640f2542..d5b85a539 100644 --- a/frontend/src/Components/BuyEventTicket/BuyEventTicket.tsx +++ b/frontend/src/Components/BuyEventTicket/BuyEventTicket.tsx @@ -27,7 +27,7 @@ export function BuyEventTicket({ event, ticketSaleState }: BuyButtonProps) { return ( <> - diff --git a/frontend/src/Components/InterviewForm/InterviewFormModal.tsx b/frontend/src/Components/InterviewForm/InterviewFormModal.tsx index d51d66b6d..023b9e59f 100644 --- a/frontend/src/Components/InterviewForm/InterviewFormModal.tsx +++ b/frontend/src/Components/InterviewForm/InterviewFormModal.tsx @@ -18,7 +18,7 @@ export function InterviewFormModal({ application }: InterviewFormModalProps) { return ( <> - diff --git a/frontend/src/Components/MultiSelect/SelectBox.tsx b/frontend/src/Components/MultiSelect/SelectBox.tsx index fc85cbda6..38a6d242a 100644 --- a/frontend/src/Components/MultiSelect/SelectBox.tsx +++ b/frontend/src/Components/MultiSelect/SelectBox.tsx @@ -16,7 +16,7 @@ export function SelectBox({ items, label, onItemClick, - itemButtonTheme = 'samf', + itemButtonTheme = 'primary', loading = false, emptyMessage, }: Props) { diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx index d48e1b976..2f1c83e78 100644 --- a/frontend/src/Components/Navbar/Navbar.tsx +++ b/frontend/src/Components/Navbar/Navbar.tsx @@ -188,7 +188,7 @@ export function Navbar() { const memberButton = ( - diff --git a/frontend/src/Components/OccupiedForm/OccupiedFormModal.tsx b/frontend/src/Components/OccupiedForm/OccupiedFormModal.tsx index 32d545738..1e6772bf4 100644 --- a/frontend/src/Components/OccupiedForm/OccupiedFormModal.tsx +++ b/frontend/src/Components/OccupiedForm/OccupiedFormModal.tsx @@ -18,7 +18,7 @@ export function OccupiedFormModal({ recruitmentId = 1, isButtonRounded = false } return ( <> - diff --git a/frontend/src/Components/Pagination/components/PaginationButton/PaginationButton.tsx b/frontend/src/Components/Pagination/components/PaginationButton/PaginationButton.tsx index 52a867f44..895df1026 100644 --- a/frontend/src/Components/Pagination/components/PaginationButton/PaginationButton.tsx +++ b/frontend/src/Components/Pagination/components/PaginationButton/PaginationButton.tsx @@ -19,8 +19,8 @@ export function PaginationButton({ }: PaginationButtonProps) { return ( - diff --git a/frontend/src/Components/SetInterviewManually/SetInterviewManuallyModal.tsx b/frontend/src/Components/SetInterviewManually/SetInterviewManuallyModal.tsx index ba021575b..e04c8fd3d 100644 --- a/frontend/src/Components/SetInterviewManually/SetInterviewManuallyModal.tsx +++ b/frontend/src/Components/SetInterviewManually/SetInterviewManuallyModal.tsx @@ -27,7 +27,7 @@ export function SetInterviewManuallyModal({ return ( <> @@ -42,7 +42,7 @@ export function AboutPage() {

{t(KEY.common_the_society_meeting)}

{useTextItem(TextItem.the_society_meeting)}

- - - - - - diff --git a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx index cd76af9a6..c6c470594 100644 --- a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx +++ b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx @@ -326,7 +326,7 @@ export function RecruitmentApplicationFormPage() { {submitText} {!recruitmentApplication?.withdrawn && recruitmentApplication && ( - )} @@ -337,7 +337,7 @@ export function RecruitmentApplicationFormPage() { ) : (
) : (
diff --git a/frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.tsx b/frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.tsx index 9c20e233b..a22552629 100644 --- a/frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.tsx +++ b/frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.tsx @@ -94,7 +94,7 @@ export function ClosedPeriodAdminPage() { {t(KEY.common_edit)} )} diff --git a/frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantWithdraw/RecruitmentApplicantWithdraw.tsx b/frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantWithdraw/RecruitmentApplicantWithdraw.tsx index 53353c614..69c4e807e 100644 --- a/frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantWithdraw/RecruitmentApplicantWithdraw.tsx +++ b/frontend/src/PagesAdmin/RecruitmentApplicantAdminPage/components/RecruitmentApplicantWithdraw/RecruitmentApplicantWithdraw.tsx @@ -31,7 +31,7 @@ export function RecruitmentApplicantWithdraw({ application }: Props) { ) : ( diff --git a/frontend/src/context/OrgContextProvider.tsx b/frontend/src/context/OrgContextProvider.tsx index 557fd7fd8..d65bb668e 100644 --- a/frontend/src/context/OrgContextProvider.tsx +++ b/frontend/src/context/OrgContextProvider.tsx @@ -14,7 +14,7 @@ export const organizationThemes: Record = { organizationName: OrgNameType.SAMFUNDET_NAME, pagePrimaryColor: COLORS.red_samf, pageSecondaryColor: COLORS.background_primary, - buttonTheme: 'samf', + buttonTheme: 'primary', }, [OrgNameType.UKA_NAME]: { organizationName: OrgNameType.UKA_NAME, @@ -32,7 +32,7 @@ export const organizationThemes: Record = { organizationName: OrgNameType.SAMFUNDET_NAME, pagePrimaryColor: COLORS.red_samf, pageSecondaryColor: COLORS.background_primary, - buttonTheme: 'samf', + buttonTheme: 'primary', }, }; From 341dd97dcd9b5c2a78b4dc554768e9283632e2e3 Mon Sep 17 00:00:00 2001 From: robines Date: Sat, 4 Apr 2026 20:49:23 +0200 Subject: [PATCH 03/11] Remove pure style --- frontend/src/Components/Button/Button.module.scss | 11 ----------- frontend/src/Components/Button/Button.tsx | 6 ++---- frontend/src/Components/Button/utils.ts | 1 - .../NotificationBadge/NotificationBadge.tsx | 2 +- .../Components/ThemeSwitch/ThemeSwitch.module.scss | 5 ++++- frontend/src/Components/ThemeSwitch/ThemeSwitch.tsx | 5 ++--- 6 files changed, 9 insertions(+), 21 deletions(-) diff --git a/frontend/src/Components/Button/Button.module.scss b/frontend/src/Components/Button/Button.module.scss index f856f8efd..f249cecdb 100644 --- a/frontend/src/Components/Button/Button.module.scss +++ b/frontend/src/Components/Button/Button.module.scss @@ -210,17 +210,6 @@ border-radius: 10000px; } -.pure { - background-color: transparent; - color: inherit; - border-width: 0; - font-family: inherit; - font-size: inherit; - font-style: inherit; - font-weight: inherit; - line-height: inherit; -} - .button_text { background-color: transparent; border-width: 0; diff --git a/frontend/src/Components/Button/Button.tsx b/frontend/src/Components/Button/Button.tsx index e15dbe510..9017e3656 100644 --- a/frontend/src/Components/Button/Button.tsx +++ b/frontend/src/Components/Button/Button.tsx @@ -36,12 +36,10 @@ export function Button({ preventDefault = false, ...props }: ButtonProps) { - const isPure = theme === 'pure' || theme === 'text'; - const classNames = classnames( - !isPure && styles.button, + styles.button, themeToStyleMap[theme], - !isPure && displayToStyleMap[display], + displayToStyleMap[display], rounded && styles.rounded, className, ); diff --git a/frontend/src/Components/Button/utils.ts b/frontend/src/Components/Button/utils.ts index a38f4bc2f..1526204a5 100644 --- a/frontend/src/Components/Button/utils.ts +++ b/frontend/src/Components/Button/utils.ts @@ -17,7 +17,6 @@ export const themeToStyleMap = { // TODO: Old styles, to be removed. basic: styles.button_basic, selected: styles.button_selected, - pure: styles.pure, text: styles.button_text, outlined: classNames(styles.button_outlined, 'button_outlined'), // Must be globally available for theme-dark. blue: styles.button_blue, diff --git a/frontend/src/Components/NotificationBadge/NotificationBadge.tsx b/frontend/src/Components/NotificationBadge/NotificationBadge.tsx index 0e0fce30a..7826ba378 100644 --- a/frontend/src/Components/NotificationBadge/NotificationBadge.tsx +++ b/frontend/src/Components/NotificationBadge/NotificationBadge.tsx @@ -11,7 +11,7 @@ type NotificationBadgeProps = { export function NotificationBadge({ number, className, onClick }: NotificationBadgeProps) { return ( - diff --git a/frontend/src/Components/ThemeSwitch/ThemeSwitch.module.scss b/frontend/src/Components/ThemeSwitch/ThemeSwitch.module.scss index dc2d8d37e..251d5dd26 100644 --- a/frontend/src/Components/ThemeSwitch/ThemeSwitch.module.scss +++ b/frontend/src/Components/ThemeSwitch/ThemeSwitch.module.scss @@ -1,7 +1,10 @@ @use 'src/constants' as *; -.wrapper { +.button { cursor: pointer; + background: none; + border: none; + color: inherit; } .icon:hover { diff --git a/frontend/src/Components/ThemeSwitch/ThemeSwitch.tsx b/frontend/src/Components/ThemeSwitch/ThemeSwitch.tsx index afa975035..b465fb7ac 100644 --- a/frontend/src/Components/ThemeSwitch/ThemeSwitch.tsx +++ b/frontend/src/Components/ThemeSwitch/ThemeSwitch.tsx @@ -1,6 +1,5 @@ import { Icon } from '@iconify/react'; import classnames from 'classnames'; -import { Button } from '~/Components'; import { useGlobalContext } from '~/context/GlobalContextProvider'; import { useIsDarkTheme } from '~/hooks'; import styles from './ThemeSwitch.module.scss'; @@ -17,8 +16,8 @@ export function ThemeSwitch({ className }: ThemeSwitchProps) { const offIcon = ; return ( - + ); } From bb2eae8988a35d9c9d4e06bdd77d8956cfb92c3d Mon Sep 17 00:00:00 2001 From: robines Date: Sat, 4 Apr 2026 20:54:32 +0200 Subject: [PATCH 04/11] Remove outlined style, replace usage with secondary --- frontend/src/Components/BackButton/BackButton.tsx | 2 +- frontend/src/Components/Button/utils.ts | 2 -- .../components/WithoutInterviewModal.tsx | 2 +- frontend/src/Pages/AboutPage/AboutPage.tsx | 10 +++++----- frontend/src/Pages/NotFoundPage/NotFoundPage.tsx | 2 +- .../RecruitmentApplicationFormPage.tsx | 4 ++-- .../ControlPriorityButtons/ControlPriorityButtons.tsx | 4 ++-- .../RecruitmentGangAdminPage.tsx | 2 +- .../RecruitmentGangAllApplicantsAdminPage.tsx | 2 +- .../ProcessedApplicants/ProcessedApplicants.tsx | 2 +- 10 files changed, 15 insertions(+), 17 deletions(-) diff --git a/frontend/src/Components/BackButton/BackButton.tsx b/frontend/src/Components/BackButton/BackButton.tsx index eeb505b88..85077dc03 100644 --- a/frontend/src/Components/BackButton/BackButton.tsx +++ b/frontend/src/Components/BackButton/BackButton.tsx @@ -16,7 +16,7 @@ export function BackButton({ url }: BackButtonProps) { }; return ( - ); diff --git a/frontend/src/Components/Button/utils.ts b/frontend/src/Components/Button/utils.ts index 1526204a5..3c0dac723 100644 --- a/frontend/src/Components/Button/utils.ts +++ b/frontend/src/Components/Button/utils.ts @@ -1,4 +1,3 @@ -import classNames from 'classnames'; import styles from './Button.module.scss'; export const themeToStyleMap = { @@ -18,7 +17,6 @@ export const themeToStyleMap = { basic: styles.button_basic, selected: styles.button_selected, text: styles.button_text, - outlined: classNames(styles.button_outlined, 'button_outlined'), // Must be globally available for theme-dark. blue: styles.button_blue, green: styles.button_green, } as const; diff --git a/frontend/src/Components/RecruitmentWithoutInterviewTable/components/WithoutInterviewModal.tsx b/frontend/src/Components/RecruitmentWithoutInterviewTable/components/WithoutInterviewModal.tsx index db9fc67a8..80de66536 100644 --- a/frontend/src/Components/RecruitmentWithoutInterviewTable/components/WithoutInterviewModal.tsx +++ b/frontend/src/Components/RecruitmentWithoutInterviewTable/components/WithoutInterviewModal.tsx @@ -19,7 +19,7 @@ export function WithoutInterviewModal({ return ( <> - diff --git a/frontend/src/Pages/AboutPage/AboutPage.tsx b/frontend/src/Pages/AboutPage/AboutPage.tsx index 73d5e79a5..3060571b8 100644 --- a/frontend/src/Pages/AboutPage/AboutPage.tsx +++ b/frontend/src/Pages/AboutPage/AboutPage.tsx @@ -34,7 +34,7 @@ export function AboutPage() { -
@@ -45,10 +45,10 @@ export function AboutPage() { - - @@ -77,10 +77,10 @@ export function AboutPage() {
- -
diff --git a/frontend/src/Pages/NotFoundPage/NotFoundPage.tsx b/frontend/src/Pages/NotFoundPage/NotFoundPage.tsx index 953bfc00f..e2cd456f3 100644 --- a/frontend/src/Pages/NotFoundPage/NotFoundPage.tsx +++ b/frontend/src/Pages/NotFoundPage/NotFoundPage.tsx @@ -14,7 +14,7 @@ export function NotFoundPage() {
Not found
-
diff --git a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx index c6c470594..9d91428f8 100644 --- a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx +++ b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx @@ -202,7 +202,7 @@ export function RecruitmentApplicationFormPage() {
{recruitmentPositionsForGang?.map((pos) => ( - ))} @@ -220,7 +220,7 @@ export function RecruitmentApplicationFormPage() {
diff --git a/frontend/src/PagesAdmin/RecruitmentPositionOverviewPage/components/ProcessedApplicants/ProcessedApplicants.tsx b/frontend/src/PagesAdmin/RecruitmentPositionOverviewPage/components/ProcessedApplicants/ProcessedApplicants.tsx index 6e435da1d..855d5abca 100644 --- a/frontend/src/PagesAdmin/RecruitmentPositionOverviewPage/components/ProcessedApplicants/ProcessedApplicants.tsx +++ b/frontend/src/PagesAdmin/RecruitmentPositionOverviewPage/components/ProcessedApplicants/ProcessedApplicants.tsx @@ -64,7 +64,7 @@ export function ProcessedApplicants({ data, type, revertStateFunction }: Process content: ( + ), }; @@ -29,7 +29,7 @@ export const Short: Story = { }, render: (args) => ( - + ), }; diff --git a/frontend/src/Forms/SamfForm.tsx b/frontend/src/Forms/SamfForm.tsx index 0bf91d1d4..b6e3d4325 100644 --- a/frontend/src/Forms/SamfForm.tsx +++ b/frontend/src/Forms/SamfForm.tsx @@ -270,7 +270,7 @@ export function SamfForm({ preventDefault={true} type="submit" rounded={true} - theme="green" + theme="success" display="basic" onClick={handleOnClickSubmit} disabled={disableSubmit} diff --git a/frontend/src/Pages/LoginPage/LoginForm.tsx b/frontend/src/Pages/LoginPage/LoginForm.tsx index c9c9911dd..5c33498d6 100644 --- a/frontend/src/Pages/LoginPage/LoginForm.tsx +++ b/frontend/src/Pages/LoginPage/LoginForm.tsx @@ -93,7 +93,7 @@ export function LoginForm() { )} /> {loginFailed &&

{t(KEY.loginpage_login_failed)}

} - diff --git a/frontend/src/Pages/LycheReservationPage/Components/FindAvailableTablesForm/FindAvailableTablesForm.tsx b/frontend/src/Pages/LycheReservationPage/Components/FindAvailableTablesForm/FindAvailableTablesForm.tsx index 6602fd218..4500f58c8 100644 --- a/frontend/src/Pages/LycheReservationPage/Components/FindAvailableTablesForm/FindAvailableTablesForm.tsx +++ b/frontend/src/Pages/LycheReservationPage/Components/FindAvailableTablesForm/FindAvailableTablesForm.tsx @@ -98,7 +98,7 @@ export function FindAvailableTablesForm({ onSubmit }: { onSubmit: (data: FindTab />
- diff --git a/frontend/src/Pages/LycheReservationPage/Components/ReserveTableForm/ReserveTableForm.tsx b/frontend/src/Pages/LycheReservationPage/Components/ReserveTableForm/ReserveTableForm.tsx index 09ef61f93..fece933a9 100644 --- a/frontend/src/Pages/LycheReservationPage/Components/ReserveTableForm/ReserveTableForm.tsx +++ b/frontend/src/Pages/LycheReservationPage/Components/ReserveTableForm/ReserveTableForm.tsx @@ -154,7 +154,7 @@ export function ReservationDetailsForm({ findTableData, availableTimes, onSubmit )} /> - diff --git a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx index 9d91428f8..824c40fc6 100644 --- a/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx +++ b/frontend/src/Pages/RecruitmentApplicationFormPage/RecruitmentApplicationFormPage.tsx @@ -322,7 +322,7 @@ export function RecruitmentApplicationFormPage() { }} />
- {!recruitmentApplication?.withdrawn && recruitmentApplication && ( diff --git a/frontend/src/Pages/RecruitmentApplicationsOverviewPage/RecruitmentApplicationsOverviewPage.tsx b/frontend/src/Pages/RecruitmentApplicationsOverviewPage/RecruitmentApplicationsOverviewPage.tsx index c97f4ccde..0e0e2f0d7 100644 --- a/frontend/src/Pages/RecruitmentApplicationsOverviewPage/RecruitmentApplicationsOverviewPage.tsx +++ b/frontend/src/Pages/RecruitmentApplicationsOverviewPage/RecruitmentApplicationsOverviewPage.tsx @@ -15,7 +15,7 @@ export function RecruitmentApplicationsOverviewPage() {
-

{t(KEY.recruitment_my_applications)}

diff --git a/frontend/src/Pages/RecruitmentPage/Components/PersonalRow/PersonalRow.tsx b/frontend/src/Pages/RecruitmentPage/Components/PersonalRow/PersonalRow.tsx index 93dc4f3ce..7a5c2b331 100644 --- a/frontend/src/Pages/RecruitmentPage/Components/PersonalRow/PersonalRow.tsx +++ b/frontend/src/Pages/RecruitmentPage/Components/PersonalRow/PersonalRow.tsx @@ -20,7 +20,7 @@ export function PersonalRow({ recruitmentId, organizationName, showRecruitmentBt <> {showRecruitmentBtn && ( diff --git a/frontend/src/Pages/UserChangePasswordPage/ChangePasswordForm.tsx b/frontend/src/Pages/UserChangePasswordPage/ChangePasswordForm.tsx index 21d389640..8d3d19ba3 100644 --- a/frontend/src/Pages/UserChangePasswordPage/ChangePasswordForm.tsx +++ b/frontend/src/Pages/UserChangePasswordPage/ChangePasswordForm.tsx @@ -103,7 +103,7 @@ export function ChangePasswordForm() { />
-
diff --git a/frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx b/frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx index e0706e0da..b546f894a 100644 --- a/frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx +++ b/frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx @@ -205,7 +205,7 @@ export function EventCreatorAdminPage() { {t(KEY.common_next)} ) : ( - )} diff --git a/frontend/src/PagesAdmin/EventCreatorAdminPage/components/CustomTicketEditor.tsx b/frontend/src/PagesAdmin/EventCreatorAdminPage/components/CustomTicketEditor.tsx index 282358d23..0eb3ade3f 100644 --- a/frontend/src/PagesAdmin/EventCreatorAdminPage/components/CustomTicketEditor.tsx +++ b/frontend/src/PagesAdmin/EventCreatorAdminPage/components/CustomTicketEditor.tsx @@ -115,7 +115,7 @@ export function CustomTicketEditor({ customTickets = [], onSetCustomTickets }: P
ticketRow(ticket))} />
- diff --git a/frontend/src/PagesAdmin/GangsFormAdminPage/components/GangForm/GangForm.tsx b/frontend/src/PagesAdmin/GangsFormAdminPage/components/GangForm/GangForm.tsx index 2c8d9750c..5e013b9e7 100644 --- a/frontend/src/PagesAdmin/GangsFormAdminPage/components/GangForm/GangForm.tsx +++ b/frontend/src/PagesAdmin/GangsFormAdminPage/components/GangForm/GangForm.tsx @@ -190,7 +190,7 @@ export function GangForm({ gang, onSuccess, onError }: Props) {
-
diff --git a/frontend/src/PagesAdmin/InformationFormAdminPage/InformationFormAdminPage.tsx b/frontend/src/PagesAdmin/InformationFormAdminPage/InformationFormAdminPage.tsx index 985740390..ee5b83de6 100644 --- a/frontend/src/PagesAdmin/InformationFormAdminPage/InformationFormAdminPage.tsx +++ b/frontend/src/PagesAdmin/InformationFormAdminPage/InformationFormAdminPage.tsx @@ -164,7 +164,7 @@ export function InformationFormAdminPage() { Toggle preview )} - diff --git a/frontend/src/PagesAdmin/MDBConnectFormAdminPage/MDBConnectForm.tsx b/frontend/src/PagesAdmin/MDBConnectFormAdminPage/MDBConnectForm.tsx index 736d6ee44..3c4c245f3 100644 --- a/frontend/src/PagesAdmin/MDBConnectFormAdminPage/MDBConnectForm.tsx +++ b/frontend/src/PagesAdmin/MDBConnectFormAdminPage/MDBConnectForm.tsx @@ -82,7 +82,7 @@ export function MDBConnectForm() { )} /> - diff --git a/frontend/src/PagesAdmin/RecruitmentInterviewAvailabilityAdminPage/RecruitmentInterviewAvailabilityForm.tsx b/frontend/src/PagesAdmin/RecruitmentInterviewAvailabilityAdminPage/RecruitmentInterviewAvailabilityForm.tsx index ee1be37ae..68dde4a6c 100644 --- a/frontend/src/PagesAdmin/RecruitmentInterviewAvailabilityAdminPage/RecruitmentInterviewAvailabilityForm.tsx +++ b/frontend/src/PagesAdmin/RecruitmentInterviewAvailabilityAdminPage/RecruitmentInterviewAvailabilityForm.tsx @@ -268,7 +268,7 @@ export function RecruitmentInterviewAvailabilityForm({ recruitmentId, data }: Pr
-
diff --git a/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionForm.tsx b/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionForm.tsx index bc5ae81a4..b6dde133f 100644 --- a/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionForm.tsx +++ b/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionForm.tsx @@ -328,7 +328,7 @@ export function RecruitmentPositionForm({ )} /> - diff --git a/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.tsx b/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.tsx index d1de3c3c3..4359eda56 100644 --- a/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.tsx +++ b/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.tsx @@ -166,7 +166,7 @@ export function RoleForm({ role }: Props) { />
-
diff --git a/frontend/src/PagesAdmin/SultenReservationAdminPage/components/ReservationTable/ReservationTable.tsx b/frontend/src/PagesAdmin/SultenReservationAdminPage/components/ReservationTable/ReservationTable.tsx index 3a79a21a0..85f8c75c5 100644 --- a/frontend/src/PagesAdmin/SultenReservationAdminPage/components/ReservationTable/ReservationTable.tsx +++ b/frontend/src/PagesAdmin/SultenReservationAdminPage/components/ReservationTable/ReservationTable.tsx @@ -66,7 +66,7 @@ export function ReservationTable({ sultenDay, iterateDay, goToToday }: Reservati {t(KEY.common_today)} )} - From 36f370f72d375b1bc28c96802942fbf8dc8ec8b0 Mon Sep 17 00:00:00 2001 From: robines Date: Sat, 4 Apr 2026 21:25:44 +0200 Subject: [PATCH 09/11] Remove basic style. Showcase button styles on ComponentPage --- .../src/Components/Button/Button.module.scss | 54 ++++++++----------- frontend/src/Components/Button/utils.ts | 3 -- frontend/src/Pages/AboutPage/AboutPage.tsx | 20 +++---- .../ComponentPage/ComponentPage.module.scss | 6 +++ .../src/Pages/ComponentPage/ComponentPage.tsx | 38 ++++++++++++- .../RecruitmentProgression.tsx | 2 +- 6 files changed, 76 insertions(+), 47 deletions(-) diff --git a/frontend/src/Components/Button/Button.module.scss b/frontend/src/Components/Button/Button.module.scss index e693b513b..1cb70584e 100644 --- a/frontend/src/Components/Button/Button.module.scss +++ b/frontend/src/Components/Button/Button.module.scss @@ -1,6 +1,4 @@ /* stylelint-disable declaration-no-important */ -@use 'src/constants' as *; - @use 'src/mixins' as *; @use 'src/styles/variables' as v; @@ -34,8 +32,30 @@ cursor: not-allowed; } +// +// Shape +// -// Redesigned buttons +.display_basic { + padding: 8px 14px; +} + +.display_pill { + padding: 0.3em 0.4em; +} + +.display_block { + padding: 10px 25px; + width: 100%; +} + +.rounded { + border-radius: 10000px; +} + +// +// Themes +// .button_primary { background-color: c.$samf-red-700; @@ -145,31 +165,3 @@ background-color: c.$blue-800; } } - - -////// old - - - -.button_basic { - background-color: white; - color: black; -} - - -.display_basic { - padding: 8px 14px; -} - -.display_pill { - padding: 0.3em 0.4em; -} - -.display_block { - padding: 10px 25px; - width: 100%; -} - -.rounded { - border-radius: 10000px; -} diff --git a/frontend/src/Components/Button/utils.ts b/frontend/src/Components/Button/utils.ts index dda9eefc3..9db3c7f08 100644 --- a/frontend/src/Components/Button/utils.ts +++ b/frontend/src/Components/Button/utils.ts @@ -15,9 +15,6 @@ export const themeToStyleMap = { // Special buttons uka: styles.button_uka, isfit: styles.button_isfit, - - // TODO: Old styles, to be removed. - basic: styles.button_basic, } as const; /** diff --git a/frontend/src/Pages/AboutPage/AboutPage.tsx b/frontend/src/Pages/AboutPage/AboutPage.tsx index 3060571b8..5d2a7e422 100644 --- a/frontend/src/Pages/AboutPage/AboutPage.tsx +++ b/frontend/src/Pages/AboutPage/AboutPage.tsx @@ -91,10 +91,10 @@ export function AboutPage() {

{t(KEY.common_volunteering)}

{useTextItem(TextItem.volunteering)}

- -
@@ -116,28 +116,28 @@ export function AboutPage() {

{t(KEY.common_more_info)}

- - - - - - - -
diff --git a/frontend/src/Pages/ComponentPage/ComponentPage.module.scss b/frontend/src/Pages/ComponentPage/ComponentPage.module.scss index 3eb22f4c9..6f2c47038 100644 --- a/frontend/src/Pages/ComponentPage/ComponentPage.module.scss +++ b/frontend/src/Pages/ComponentPage/ComponentPage.module.scss @@ -5,3 +5,9 @@ margin: 30px 30px; } } + +.button_row { + margin-top: 0.25rem; + display: flex; + gap: 0.25rem; +} diff --git a/frontend/src/Pages/ComponentPage/ComponentPage.tsx b/frontend/src/Pages/ComponentPage/ComponentPage.tsx index 7250ffe1f..9ed2616bd 100644 --- a/frontend/src/Pages/ComponentPage/ComponentPage.tsx +++ b/frontend/src/Pages/ComponentPage/ComponentPage.tsx @@ -22,6 +22,8 @@ import { RadioButton, ToolTip, } from '~/Components'; +import type { ButtonTheme } from '~/Components/Button'; +import { themeToStyleMap } from '~/Components/Button/utils'; import { Checkbox } from '~/Components/Checkbox'; import { Link } from '~/Components/Link'; import { List } from '~/Components/List'; @@ -88,6 +90,38 @@ export function ComponentPage() { return ( +
+
Hello there this is a normal regular body of text? I think so.
+ +

Buttons

+
+ + + +
+ {Object.keys(themeToStyleMap).map((theme) => ( +
+ + + +
+ ))} +
+ +
+
+
+
Components:

Buttons:

- +
-
diff --git a/frontend/src/PagesAdmin/RecruitmentOverviewPage/Components/RecruitmentProgression/RecruitmentProgression.tsx b/frontend/src/PagesAdmin/RecruitmentOverviewPage/Components/RecruitmentProgression/RecruitmentProgression.tsx index 431626521..f566d0aca 100644 --- a/frontend/src/PagesAdmin/RecruitmentOverviewPage/Components/RecruitmentProgression/RecruitmentProgression.tsx +++ b/frontend/src/PagesAdmin/RecruitmentOverviewPage/Components/RecruitmentProgression/RecruitmentProgression.tsx @@ -116,7 +116,7 @@ export function RecruitmentProgression({ recruitment }: RecruitmentProgessionPro ) : ( ); diff --git a/frontend/src/PagesAdmin/EventsAdminPage/EventsAdminPage.tsx b/frontend/src/PagesAdmin/EventsAdminPage/EventsAdminPage.tsx index dbf74fab1..5b0d20521 100644 --- a/frontend/src/PagesAdmin/EventsAdminPage/EventsAdminPage.tsx +++ b/frontend/src/PagesAdmin/EventsAdminPage/EventsAdminPage.tsx @@ -18,6 +18,7 @@ import type { EventCategoryValue } from '~/types'; import { dbT, getTicketTypeKey, lowerCapitalize } from '~/utils'; import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout'; import styles from './EventsAdminPage.module.scss'; +import { Icon } from "@iconify/react"; const PAGE_SIZE = 20; @@ -158,7 +159,8 @@ export function EventsAdminPage() { const backendUrl = ROUTES.backend.admin__samfundet_event_changelist; const header = ( <> - diff --git a/frontend/src/PagesAdmin/ImageAdminPage/ImageAdminPage.tsx b/frontend/src/PagesAdmin/ImageAdminPage/ImageAdminPage.tsx index ad6fbcfc3..16f0de837 100644 --- a/frontend/src/PagesAdmin/ImageAdminPage/ImageAdminPage.tsx +++ b/frontend/src/PagesAdmin/ImageAdminPage/ImageAdminPage.tsx @@ -12,6 +12,7 @@ import { lowerCapitalize } from '~/utils'; import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout'; import styles from './ImageAdminPage.module.scss'; import { AdminImage } from './components'; +import { Icon } from "@iconify/react"; const PAGE_SIZE = 20; @@ -52,7 +53,8 @@ export function ImageAdminPage() { const title = t(KEY.admin_images_title); const backendUrl = ROUTES.backend.admin__samfundet_image_changelist; const header = ( - );