Reservation Page Design

backend/root/management/commands/seed_scripts/textitems.py

@@ -33,6 +33,25 @@ def seed():
             'text_nb': 'Har du spørsmål eller ønsker å komme i kontakt med oss? Ikke nøl med å ta kontakt!',
             'text_en': 'Do you have any questions or want to get in touch with us? Don"t hesitate to contact us!',
         },
+        {
+            'key':
+                'sulten_reservation_help',
+            'text_nb':
+                """Bord må reserveres minst en dag i forveien. Mat kan forhåndsbestilles slik at dere ikke trenger å vente når dere kommer.
+                Merk at flertallet av personer må være medlem for å reservere og at alle må være over 20 år etter kl 20:00 i helger.""",
+            'text_en':
+                """Tables must be reserved at least one day in advance. Food can be pre-ordered so you do not have to wait when  you arrive.
+                Note that the majority of people must be a member of the Student Society to reserve
+                and that all must be over 20 years after 20:00 on weekends.""",
+        },
+        {
+            'key':
+                'sulten_reservation_contact',
+            'text_nb':
+                'Reservasjonssystemet vårt er fortsatt under utvikling, og vi ber om forbehold om at feil kan forekomme. Klikk her for å bestille via epost: ',
+            'text_en':
+                'Our reservation system is still under development, and reservation errors may therefore occur. Click here to order via email: ',
+        },
     ]
 
     TextItem.objects.all().delete()

frontend/src/AppRoutes.tsx

@@ -14,6 +14,7 @@ import {
   LoginPage,
   LycheAboutPage,
   LycheContactPage,
+  LycheReservationPage,
   LycheHomePage,
   LycheMenuPage,
   NotFoundPage,
@@ -235,6 +236,7 @@ export function AppRoutes() {
         <Route path={ROUTES.frontend.sulten_about} element={<LycheAboutPage />} />
         <Route path={ROUTES.frontend.sulten_menu} element={<LycheMenuPage />} />
         <Route path={ROUTES.frontend.sulten_contact} element={<LycheContactPage />} />
+        <Route path={ROUTES.frontend.sulten_reservation} element={<LycheReservationPage />} />
       </Route>
 
       {/* 

frontend/src/Components/Button/Button.module.scss

@@ -42,6 +42,11 @@
   color: white;
 }
 
+.button_lyche {
+  background-color: $sulten-orange;
+  color: white;
+}
+
 .button_success {
   background-color: $green;
   color: white;

frontend/src/Components/Button/utils.ts

@@ -5,6 +5,7 @@ export const themeToStyleMap = {
   basic: styles.button_basic,
   pure: styles.pure,
   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.

frontend/src/Components/InputField/InputField.tsx

@@ -4,7 +4,7 @@ import { ChangeEvent } from 'react';
 import { Children } from '~/types';
 import styles from './InputField.module.scss';
 
-export type InputFieldType = 'text' | 'number' | 'email' | 'password' | 'datetime-local' | 'time';
+export type InputFieldType = 'text' | 'number' | 'email' | 'password' | 'datetime-local' | 'date' | 'time';
 
 type InputFieldProps<T> = {
   children?: Children;

frontend/src/Components/SultenNavbar/SultenNavbar.tsx

@@ -33,7 +33,7 @@ export function SultenNavbar() {
       </Link>
 
       <Link to={ROUTES.frontend.sulten_reservation} onClick={() => setMobileNavigation(false)} className={itemStyling}>
-        {t(KEY.common_reservations)}
+        {t(KEY.common_reservation)}
       </Link>
       <Link to={ROUTES.frontend.sulten_menu} onClick={() => setMobileNavigation(false)} className={itemStyling}>
         {t(KEY.common_menu)}

frontend/src/Forms/SamfForm.tsx

@@ -4,6 +4,7 @@ import { Button } from '~/Components';
 import { usePermission } from '~/hooks';
 import { PERM } from '~/permissions';
 import styles from './SamfForm.module.scss';
+import { ButtonDisplay, ButtonTheme } from '~/Components/Button';
 
 // ================================== //
 //    Context & State Management      //
@@ -92,6 +93,8 @@ type SamfFormProps<T> = {
   validateOnInit?: boolean;
   validateOn?: ValidationMode;
   submitText?: string;
+  submitButtonTheme?: ButtonTheme;
+  submitButtonDisplay?: ButtonDisplay;
   noStyle?: boolean;
   className?: string;
   onChange?<T>(data: Partial<T>): void;
@@ -107,6 +110,8 @@ export function SamfForm<T>({
   validateOnInit = false,
   validateOn = 'submit',
   submitText,
+  submitButtonTheme = 'green',
+  submitButtonDisplay = 'basic',
   noStyle,
   className,
   onChange,
@@ -215,7 +220,8 @@ export function SamfForm<T>({
               <Button
                 preventDefault={true}
                 type="submit"
-                theme="green"
+                theme={submitButtonTheme}
+                display={submitButtonDisplay}
                 rounded={true}
                 onClick={handleOnClickSubmit}
                 disabled={disableSubmit}

frontend/src/Forms/SamfFormFieldTypes.tsx

@@ -24,6 +24,7 @@ export type SamfFormFieldType =
   | 'options'
   | 'image'
   | 'datetime'
+  | 'date'
   | 'time'
   | 'upload-image'
   | 'upload-pdf';
@@ -64,6 +65,7 @@ export const SamfFormFieldTypeMap: Record<SamfFormFieldType, GeneratorFunction |
   float: makeStandardInputFunction<string>('number'),
   integer: makeStandardInputFunction<string>('number'),
   datetime: makeStandardInputFunction<string>('datetime-local'),
+  date: makeStandardInputFunction<string>('date'),
   time: makeStandardInputFunction<string>('time'),
   password: makeStandardInputFunction<string>('password'),
   // Custom input types

frontend/src/Pages/LycheHomePage/LycheHomePage.tsx

@@ -99,7 +99,7 @@ export function LycheHomePage() {
     <SultenCard
       image={sulten_inside}
       imageAlt={t(KEY.common_sulten)}
-      header={t(KEY.common_reservations)}
+      header={t(KEY.common_reservation)}
       text={useTextItem(TextItem.sulten_reservation_text)}
       buttonText={t(KEY.sulten_page_book_table) || undefined}
       imageAlignment="left"

frontend/src/Pages/LycheReservationPage/Components/ReservationFormLine/ReservationFormLine.module.scss

@@ -0,0 +1,43 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1em;
+  width: 100%;
+  padding-bottom: 0.4em;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+.block {
+  flex:1;
+  width: 100%;
+}
+
+.label {
+  color: $white;
+}
+
+.help_text {
+  color: $grey-1;
+  font-size: 0.75em;
+  font-style: italic;
+  text-align: start;
+  padding: 0.2em;
+  width: 100%;
+}
+
+.underline {
+  border-bottom: $sulten-orange solid 1px;
+  margin-bottom: 0.7em;
+}

frontend/src/Pages/LycheReservationPage/Components/ReservationFormLine/ReservationFormLine.tsx

@@ -0,0 +1,24 @@
+import { Children } from '~/types';
+import classnames from 'classnames';
+import styles from './ReservationFormLine.module.scss';
+
+type ReservationFormLineProps = {
+  label: string;
+  help_text?: string;
+  children: Children;
+  underline?: boolean;
+};
+
+export function ReservationFormLine({ label, children, help_text, underline }: ReservationFormLineProps) {
+  return (
+    <div className={classnames(styles.container, underline && styles.underline)}>
+      <div className={styles.row}>
+        <div className={styles.block}>
+          <p className={styles.label}>{label}</p>
+        </div>
+        <div className={styles.block}>{children}</div>
+      </div>
+      {help_text && <small className={styles.help_text}>{help_text}</small>}
+    </div>
+  );
+}

frontend/src/Pages/LycheReservationPage/Components/index.ts

@@ -0,0 +1 @@
+export { ReservationFormLine } from './ReservationFormLine/ReservationFormLine';

frontend/src/Pages/LycheReservationPage/LycheReservationPage.module.scss

@@ -0,0 +1,57 @@
+@import 'src/mixins';
+
+@import 'src/constants';
+
+.container {
+  @include flex-column-center;
+  margin-top: $sulten-navbar-height;
+}
+
+.header {
+ font-size: 2em;
+}
+
+.partContainer {
+  width: 50%;
+  height: 100%;
+  color: white;
+  text-align: center;
+  margin-bottom: 1em;
+  @include flex-column-center;
+  gap: 1rem;
+  @include for-mobile-down {
+    width: 100%;
+  }
+}
+
+.text {
+  font-size: 0.9em;
+  margin-bottom: 0.5em;
+  color: $grey-3;
+}
+
+.email {
+  color: $sulten-orange
+}
+
+.formContainer {
+  width: 50%;
+  background-color: $black-1;
+  border: none;
+  @include for-mobile-down {
+    width: 100%;
+  }
+}
+
+.button {
+  font-weight: 700;
+}
+
+.check_box  {
+  color: white;
+  font-size: 0.2em;
+}
+
+.reservation_info {
+  margin-bottom: 1em;
+}