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/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/Button.module.scss b/frontend/src/Components/Button/Button.module.scss index d133e469d..1593d2ed8 100644 --- a/frontend/src/Components/Button/Button.module.scss +++ b/frontend/src/Components/Button/Button.module.scss @@ -1,185 +1,167 @@ /* stylelint-disable declaration-no-important */ -@use 'src/constants' as *; - @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; + gap: 0.25rem; 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; } - - &:disabled { - opacity: 0.5; - background-color: $grey-3; - color: $grey-1; - cursor: not-allowed; - } - - &:hover:not([disabled]) { - filter: brightness(120%); - transition: 0.15s; - box-shadow: 1px 2px 15px 3px rgba(0, 0, 0, 0.05); - } } -.button_basic { - background-color: white; - color: black; +.button:disabled, +.button:disabled:hover { + background-color: c.$gray-300; + color: c.$gray-50; + cursor: not-allowed; } -.button_selected { - background-color: white; - color: black; - box-shadow: inset 0 0 1.5px 2px rgba(0, 0, 0, 0.15); - cursor: default; +// +// Shape +// - // 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); - } +.display_basic { + padding: 8px 14px; } -.button_samf { - background-color: $red-samf; - color: white; +.display_pill { + padding: 0.3em 0.4em; } -.button_uka { - background-color: $blue-uka; - color: white; +.display_block { + padding: 10px 25px; + width: 100%; } -.button_isfit { - background-color: $blue-isfit; - color: white; +.rounded { + border-radius: 10000px; } -.button_lyche { - background-color: $sulten-orange; - color: white; -} +// +// Themes +// -.button_success { - background-color: $green; - color: white; -} +.button_primary { + background-color: c.$samf-red-700; + color: c.$red-50; -.button_blue { - background-color: $blue; - color: white; + &:hover { + background-color: color.adjust(c.$samf-red-700, $lightness: -5%); + } } .button_secondary { - border: none; - padding: 10px 25px; - background-color: $grey-3; - color: white; -} + background-color: c.$white-50; + color: c.$gray-700; + border-color: c.$gray-200; -.button_outlined { - background-color: inherit; - border: 1px solid $grey-1; - transition: 0.15s; + &:hover { + background-color: c.$gray-100; + } - &:hover:not([disabled]) { - border-color: $red-samf; - color: $red-samf; - transition: 0.15s; + @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_black { - background-color: $black; - color: white; - transition: 0.15s; +.button_success { + background-color: c.$green-700; + color: c.$green-50; - &:hover:not([disabled]) { - background-color: $grey-1; - transition: 0.15s; + &:hover { + background-color: color.adjust(c.$green-700, $lightness: -8%); } } -.button_white { - background-color: $white; - color: black; - transition: 0.15s; +.button_danger { + background-color: c.$gold-600; + color: c.$white-50; - &:hover:not([disabled]) { - filter: brightness(85%); - transition: 0.15s; + &:hover { + background-color: color.adjust(c.$gold-600, $lightness: -8%); } } -.button_yellow { - background-color: $yellow; - color: white; -} +.button_ghost { + background-color: transparent; + color: c.$gray-700; + + &:hover { + background-color: c.$gray-100; + } -.button_green { - background-color: $green; - color: white; - transition: 0.15s; + @include theme-dark { + color: c.$white-50; - &:hover:not([disabled]) { - filter: brightness(110%); - transition: 0.15s; + &:hover { + background-color: c.$gray-800; + } } } -.display_basic { - padding: 10px 25px; -} +.button_uka { + background-color: c.$uka-blue; + color: c.$white-50; -.display_pill { - padding: 0.3em 0.4em; + &:hover { + background-color: color.adjust(c.$uka-blue, $lightness: -6%); + } } -.display_block { - padding: 10px 25px; - width: 100%; +.button_isfit { + background-color: c.$isfit-primary; + color: c.$white-50; + + &:hover { + background-color: color.adjust(c.$isfit-primary, $lightness: -5%); + } } -.rounded { - border-radius: 10000px; +.button_black { + background-color: c.$gray-950; + color: c.$white-50; + + &:hover { + background-color: c.$gray-800; + } } -.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_white { + background-color: c.$white-50; + color: c.$gray-800; + + &:hover { + background-color: c.$gray-100; + } } -.button_text { - background-color: transparent; - border-width: 0; - font-family: inherit; - font-size: inherit; - font-style: inherit; - font-weight: inherit; - line-height: inherit; - color: $red-samf; - - &:hover:not([disabled]) { - filter: brightness(120%); - transition: 0.15s; - cursor: pointer; - text-decoration: underline; +.button_blue { + background-color: c.$blue-700; + color: c.$blue-50; + + &:hover { + background-color: c.$blue-800; } } diff --git a/frontend/src/Components/Button/Button.stories.tsx b/frontend/src/Components/Button/Button.stories.tsx index 544e67aeb..b489c25e9 100644 --- a/frontend/src/Components/Button/Button.stories.tsx +++ b/frontend/src/Components/Button/Button.stories.tsx @@ -17,8 +17,8 @@ export const Basic: Story = { render: (args) => , }; -export const Samf: Story = { - args: { theme: 'samf' }, +export const Primary: Story = { + args: { theme: 'primary' }, render: (args) => , }; diff --git a/frontend/src/Components/Button/Button.tsx b/frontend/src/Components/Button/Button.tsx index 11974e4be..9017e3656 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', @@ -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 853dbd25a..9db3c7f08 100644 --- a/frontend/src/Components/Button/utils.ts +++ b/frontend/src/Components/Button/utils.ts @@ -1,29 +1,26 @@ -import classNames from 'classnames'; import styles from './Button.module.scss'; export const themeToStyleMap = { - basic: styles.button_basic, - selected: styles.button_selected, - pure: styles.pure, - text: styles.button_text, - samf: styles.button_samf, - lyche: styles.button_lyche, + primary: styles.button_primary, 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, + danger: styles.button_danger, + ghost: styles.button_ghost, + + // Color-specific black: styles.button_black, white: styles.button_white, - green: styles.button_green, + blue: styles.button_blue, + + // Special buttons 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/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/Countdown/Countdown.stories.tsx b/frontend/src/Components/Countdown/Countdown.stories.tsx index 72c4a5617..cb1ea552e 100644 --- a/frontend/src/Components/Countdown/Countdown.stories.tsx +++ b/frontend/src/Components/Countdown/Countdown.stories.tsx @@ -18,7 +18,7 @@ export const Basic: Story = { }, render: (args) => ( - + ), }; @@ -29,7 +29,7 @@ export const Short: Story = { }, render: (args) => ( - + ), }; 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/OccupiedForm.tsx b/frontend/src/Components/OccupiedForm/OccupiedForm.tsx index d2c2c27be..2a16d6388 100644 --- a/frontend/src/Components/OccupiedForm/OccupiedForm.tsx +++ b/frontend/src/Components/OccupiedForm/OccupiedForm.tsx @@ -135,7 +135,7 @@ export function OccupiedForm({ recruitmentId = 1, onCancel, onConfirm, header, s - 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/SetInterviewManuallyForm.tsx b/frontend/src/Components/SetInterviewManually/SetInterviewManuallyForm.tsx index 5e6c1ad34..01ff2f1de 100644 --- a/frontend/src/Components/SetInterviewManually/SetInterviewManuallyForm.tsx +++ b/frontend/src/Components/SetInterviewManually/SetInterviewManuallyForm.tsx @@ -195,7 +195,7 @@ export function SetInterviewManuallyForm({ - 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 ( <> + ); } 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/AboutPage/AboutPage.tsx b/frontend/src/Pages/AboutPage/AboutPage.tsx index 439570c2e..5d2a7e422 100644 --- a/frontend/src/Pages/AboutPage/AboutPage.tsx +++ b/frontend/src/Pages/AboutPage/AboutPage.tsx @@ -24,7 +24,7 @@ export function AboutPage() {

{t(KEY.common_about_samfundet)}

{useTextItem(TextItem.about_samfundet)}

- @@ -34,7 +34,7 @@ export function AboutPage() { - @@ -42,13 +42,13 @@ export function AboutPage() {

{t(KEY.common_the_society_meeting)}

{useTextItem(TextItem.the_society_meeting)}

- - -
@@ -77,10 +77,10 @@ export function AboutPage() {
- -
@@ -91,10 +91,10 @@ export function AboutPage() {

{t(KEY.common_volunteering)}

{useTextItem(TextItem.volunteering)}

- -
@@ -105,7 +105,7 @@ export function AboutPage() {

UKA & ISFiT

{useTextItem(TextItem.festivals)}

- - - - - - - -
diff --git a/frontend/src/Pages/ApiTestingPage/ApiTestingPage.tsx b/frontend/src/Pages/ApiTestingPage/ApiTestingPage.tsx index b6abedbe8..10fb2c4e8 100644 --- a/frontend/src/Pages/ApiTestingPage/ApiTestingPage.tsx +++ b/frontend/src/Pages/ApiTestingPage/ApiTestingPage.tsx @@ -25,61 +25,65 @@ import styles from './ApiTestingPage.module.scss'; export function ApiTestingPage() { return (
- - - - - - + + +
+ {Object.keys(themeToStyleMap).map((theme) => ( +
+ + + +
+ ))} + + +
+
+
+
Components:

Buttons:

- +
-
diff --git a/frontend/src/Pages/HomePage/components/Splash/Splash.tsx b/frontend/src/Pages/HomePage/components/Splash/Splash.tsx index 5c5857082..f543ea82f 100644 --- a/frontend/src/Pages/HomePage/components/Splash/Splash.tsx +++ b/frontend/src/Pages/HomePage/components/Splash/Splash.tsx @@ -38,7 +38,7 @@ export function Splash({ events, showInfo }: SplashProps) { const isPaid = events && PAID_TICKET_TYPES.includes(events[index].ticket_type); const ticketButton = isPaid ? ( - 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/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 cd76af9a6..824c40fc6 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() { {!recruitmentApplication?.withdrawn && recruitmentApplication && ( - )} @@ -337,7 +337,7 @@ export function RecruitmentApplicationFormPage() { ) : (

{t(KEY.recruitment_my_applications)}

diff --git a/frontend/src/Pages/RecruitmentApplicationsOverviewPage/components/ActiveApplications/ActiveApplications.tsx b/frontend/src/Pages/RecruitmentApplicationsOverviewPage/components/ActiveApplications/ActiveApplications.tsx index 4f5775da9..d7379d13d 100644 --- a/frontend/src/Pages/RecruitmentApplicationsOverviewPage/components/ActiveApplications/ActiveApplications.tsx +++ b/frontend/src/Pages/RecruitmentApplicationsOverviewPage/components/ActiveApplications/ActiveApplications.tsx @@ -104,7 +104,7 @@ export function ActiveApplications({ recruitmentId }: ActiveApplicationsProps) { const withdrawButton = (application: RecruitmentApplicationDto) => { return ( ) : ( 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/AdminLayout/AdminLayout.tsx b/frontend/src/PagesAdmin/AdminLayout/AdminLayout.tsx index 5c9a4655c..4df2c4d4e 100644 --- a/frontend/src/PagesAdmin/AdminLayout/AdminLayout.tsx +++ b/frontend/src/PagesAdmin/AdminLayout/AdminLayout.tsx @@ -173,7 +173,7 @@ export function AdminLayout() { const mobileOpen = ( <>
-
diff --git a/frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.tsx b/frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.tsx index 9c20e233b..7a9d51499 100644 --- a/frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.tsx +++ b/frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.tsx @@ -11,6 +11,7 @@ import { reverse } from '~/named-urls'; import { ROUTES } from '~/routes'; import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout'; import styles from './ClosedPeriodAdminPage.module.scss'; +import { Icon } from "@iconify/react"; export function ClosedPeriodAdminPage() { const [closedPeriods, setClosedPeriods] = useState([]); @@ -51,7 +52,8 @@ export function ClosedPeriodAdminPage() { } const header = ( - ); @@ -83,7 +85,7 @@ export function ClosedPeriodAdminPage() { content: (
) : ( - )} 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/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/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/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 = ( - ); diff --git a/frontend/src/PagesAdmin/InformationFormAdminPage/InformationFormAdminPage.tsx b/frontend/src/PagesAdmin/InformationFormAdminPage/InformationFormAdminPage.tsx index e0e7cda1f..ee5b83de6 100644 --- a/frontend/src/PagesAdmin/InformationFormAdminPage/InformationFormAdminPage.tsx +++ b/frontend/src/PagesAdmin/InformationFormAdminPage/InformationFormAdminPage.tsx @@ -160,11 +160,11 @@ export function InformationFormAdminPage() { {/* Save button */} {!isDesktop && ( - )} - 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/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/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/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/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: ( diff --git a/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx b/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx index bc1678f4a..76f9128bf 100644 --- a/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx +++ b/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx @@ -95,7 +95,7 @@ export function RoomAdminPage() { pattern: ROUTES.frontend.admin_recruitment_room_create, urlParams: { recruitmentId: data?.recruitment?.id }, })} - theme="samf" + theme="primary" > {t(KEY.common_create)} 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)} )} - 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', }, }; diff --git a/frontend/src/global.scss b/frontend/src/global.scss index 7c7521bf0..c2c502400 100644 --- a/frontend/src/global.scss +++ b/frontend/src/global.scss @@ -6,6 +6,8 @@ /* stylelint-disable-next-line no-invalid-position-at-import-rule */ @use 'mixins' as *; +@use 'src/styles/variables' as v; + /* stylelint-disable selector-max-type */ /* stylelint-disable selector-max-universal */ @@ -51,7 +53,11 @@ html { body { margin: 0; - font-family: $primary-font-family; + font-family: v.$font-family; + font-optical-sizing: auto; + font-weight: v.$font-weight-normal; + font-style: normal; + letter-spacing: v.$letter-spacing; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss index 740aac27d..a5f19946e 100644 --- a/frontend/src/styles/_variables.scss +++ b/frontend/src/styles/_variables.scss @@ -1,9 +1,31 @@ @use 'colors' as c; +/// =~=~=~=~=~ /// +/// General /// +/// =~=~=~=~=~ /// + +$border-radius-sm: 3px; +$border-radius: 5px; +$border-radius-md: 8px; +$border-radius-lg: 10px; + /// =~=~=~=~=~ /// /// Typography /// /// =~=~=~=~=~ /// $heading-color: c.$gray-950; $primary-text-color: c.$gray-700; + +$font-size-xs: 10px; +$font-size-sm: 12px; +$font-size: 14px; +$font-size-lg: 16px; + +$font-family: "Inter", system-ui, 'Helvetica Neue', 'Avenir Next', avenir, 'Adwaita Sans', cantarell, sans-serif; + +$font-weight-normal: 400; +$font-weight-medium: 500; +$font-weight-semibold: 600; +$font-weight-bold: 700; +$letter-spacing: -2.5%;