Implement MenuItemComponent for Lyche

frontend/src/Components/MenuItem/MenuItem.module.scss

@@ -7,7 +7,7 @@
   max-width: 600px;
   margin: 0 auto;
   color: white;
-
+  margin-bottom: 2em;
 }
 
 .item_name {
@@ -19,28 +19,23 @@
   font-size: 1.25em;
   margin-bottom: 5px;
   text-transform: uppercase;
-  font-family: 'LemonMilkLight', sans-serif;
+  font-family: $lyche-title-font;
 }
 
 .item_price {
-  font-size: .75em;
+  font-size: 0.75em;
   margin-left: 20px;
-  margin-top: .25em;
-  font-family: 'Lora', sans-serif;
-  color: white;
+  margin-top: 0.25em;
 }
 
 .item_description {
   color: dimgray;
-  font-family: 'Lora', sans-serif;
 }
 
 .item_allergens {
   color: dimgray;
-  font-family: 'Lora', sans-serif;
 }
 
 .item_recommendations {
   color: dimgray;
-  font-family: 'Lora', sans-serif;
 }

frontend/src/Components/SultenPage/SultenPage.module.scss

@@ -16,10 +16,11 @@
   min-width: 100%;
   min-height: calc(100vh - 200px);
   z-index: 10;
-  padding: calc($sulten-navbar-height / 2) 0 calc($sulten-navbar-height / 2) 0;
+  padding-top: $sulten-navbar-height;
   @include for-mobile-down {
     flex-direction: column;
     padding: 0%;
+    padding-top: $sulten-navbar-height;
   }
 }
 

frontend/src/Pages/LycheMenuPage/LycheMenuPage.tsx

@@ -1,48 +1,43 @@
+import { LycheFrame } from '~/Components/LycheFrame';
 import { MenuItem } from '~/Components/MenuItem';
 import { SultenPage } from '~/Components/SultenPage';
 
 export function LycheMenuPage() {
   return (
     <SultenPage>
-      <MenuItem
-        dishTitle="LYCHEBRØD"
-        dishDescription="Serveres med en skål aioli på siden."
-        allergens="Allergener: Gluten (hvete), sulfitt og egg (aioli)"
-        price="19,- / 29,-"
-      />
+      <LycheFrame>
+        <MenuItem
+          dishTitle="LYCHEBRØD"
+          dishDescription="Serveres med en skål aioli på siden."
+          allergens="Allergener: Gluten (hvete), sulfitt og egg (aioli)"
+          price="19,- / 29,-"
+        />
 
-      <br></br>
-      <br></br>
+        <MenuItem
+          dishTitle="LYCHESNITTER"
+          dishDescription="Lychebrød med rødbethummus, ruccula, mango og pistou. "
+          allergens="Allergener: Gluten (hvete), melk (pistou), sesam (hummus). Kan inneholde spor av peanøtter: hummus"
+          price="40,- / 49,-"
+        />
 
-      <MenuItem
-        dishTitle="LYCHESNITTER"
-        dishDescription="Lychebrød med rødbethummus, ruccula, mango og pistou. "
-        allergens="Allergener: Gluten (hvete), melk (pistou), sesam (hummus). Kan inneholde spor av peanøtter: hummus"
-        price="40,- / 49,-"
-      />
+        <MenuItem
+          dishTitle="LYCHEBURGER"
+          dishDescription="Okse og n’duja kjøtt, servert med løkkompott, bacon,
+          tomater, aioli, cheddar, salat og potet på siden.
+            Burgeren kan serveres med glutenfritt brød, og kan serveres uten ost og pistou (melkeallergi)"
+          allergens="Allergener: Egg, sennep, sulfitt. Det er svinekjøtt i selve burgerkaken. "
+          recommendations="Baren anbefaler: Hacienda lopez De Haro (rød)"
+          price="129,- / 154,-"
+        />
 
-      <br></br>
-      <br></br>
-
-      <MenuItem
-        dishTitle="LYCHEBURGER"
-        dishDescription="Okse og n’duja kjøtt, servert med løkkompott, bacon,
-         tomater, aioli, cheddar, salat og potet på siden.
-          Burgeren kan serveres med glutenfritt brød, og kan serveres uten ost og pistou (melkeallergi)"
-        allergens="Allergener: Egg, sennep, sulfitt. Det er svinekjøtt i selve burgerkaken. "
-        recommendations="Baren anbefaler: Hacienda lopez De Haro (rød)"
-        price="129,- / 154,-"
-      />
-
-      <br></br>
-
-      <MenuItem
-        dishTitle="SOPPAI"
-        dishDescription="Kremet soppai med feta, toppes med ruccula. Vegetar."
-        allergens="Allergener: Melk og gluten"
-        recommendations="Baren anbefaler: jue de vie"
-        price="99,- / 119,-"
-      />
+        <MenuItem
+          dishTitle="SOPPAI"
+          dishDescription="Kremet soppai med feta, toppes med ruccula. Vegetar."
+          allergens="Allergener: Melk og gluten"
+          recommendations="Baren anbefaler: jue de vie"
+          price="99,- / 119,-"
+        />
+      </LycheFrame>
     </SultenPage>
   );
 }

frontend/src/_constants.scss

@@ -81,10 +81,9 @@ $theme-dark: 'theme-dark'; // Must match THEME.DARK
 $theme-light: 'theme-light'; // Must match THEM.LIGHT
 
 //Lyche
-$lyche-title-font:'LemonMilkLight', sans-serif;
+$lyche-title-font: 'LemonMilkLight', sans-serif;
+$lyche-primary-font: 'Lora', sans-serif;
 
 //Assets
 $lyche-menu-divider-left: url('~/assets/lyche/menu-detail-left.png');
 $lyche-menu-divider-right: url('~/assets/lyche/menu-detail-right.png');
-
-