Add user page with static content

* Add avatar
* Add greeting
* Add food preferences and allergy list
* Add buttons for future implementation

frontend/team14_bell_frontend/src/App.vue

@@ -1,15 +1,13 @@
 <template>
   <v-app>
     <v-app-bar app color="primary" dark>
-      <v-btn v-if="isMain" href="/" text>
-        <span class="mr-2"></span>
+      <v-btn v-if="isMain" href="/" icon>
         <v-icon>mdi-arrow-left</v-icon>
       </v-btn>
 
       <v-spacer></v-spacer>
 
-      <v-btn href="/user" text>
-        <span class="mr-2"></span>
+      <v-btn href="/user" icon>
         <v-icon>mdi-account</v-icon>
       </v-btn>
     </v-app-bar>

frontend/team14_bell_frontend/src/components/UserProfile.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-col align="center" justify="center">
+    <!-- AVATAR START -->
+    <v-row align="center" justify="center">
+      <v-avatar class="mt-1" color="teal" size="56">
+        <img src="../assets/avatar.jpeg" alt="John" />
+      </v-avatar>
+    </v-row>
+    <!-- AVATAR END -->
+
+    <v-row align="center" justify="center">
+      <v-card width="90%" class="mt-2" elevation="2">
+        <v-row align="center" justify="center">
+          <v-card-title>Hello Max!</v-card-title>
+        </v-row>
+        <v-row align="center" justify="center">
+          <!-- PREFERENCES CHECKBOX LIST START -->
+          <v-col cols="6" xs="6">
+            <v-icon class="green-icon">mdi-noodles</v-icon>
+            <v-checkbox
+              v-for="preference in preferences"
+              :key="preference.id"
+              :input-value="preference.ticked"
+              :value="preference.ticked"
+              disabled
+              :label="preference.name"
+              dense
+            ></v-checkbox>
+          </v-col>
+          <!-- PREFERENCES CHECKBOX LIST END -->
+
+          <!-- ALLERGIES CHECKBOX LIST START -->
+          <v-col cols="6" xs="6">
+            <v-icon class="orange-icon">mdi-food-off-outline</v-icon>
+            <v-checkbox
+              v-for="allergy in allergies"
+              :key="allergy.id"
+              :input-value="allergy.ticked"
+              :value="allergy.ticked"
+              disabled
+              :label="allergy.name"
+              dense
+            ></v-checkbox>
+          </v-col>
+          <!-- ALLERGIES CHECKBOX LIST END -->
+        </v-row>
+
+        <!-- BUTTONS START -->
+        <v-card-actions>
+          <v-btn class="blue" elevation="2" icon>
+            <v-icon class="white-icon">mdi-pencil</v-icon> <!-- TODO: EDIT -->
+          </v-btn>
+          <v-btn class="blue" elevation="2" icon>
+            <v-icon class="white-icon">mdi-lock-reset</v-icon> <!-- TODO: RESET -->
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn class="blue" elevation="2" icon>
+            <v-icon class="white-icon">mdi-format-list-checkbox</v-icon> <!-- TODO: SHOPPING LIST -->
+          </v-btn>
+        </v-card-actions>
+        <!-- BUTTONS END -->
+      </v-card>
+    </v-row>
+  </v-col>
+</template>
+
+<script>
+export default {
+  name: "UserProfile",
+
+  data: () => ({
+    preferences: [
+      { id: 1, name: "Vegan", ticked: false },
+      { id: 2, name: "Vegetarian", ticked: true },
+      { id: 3, name: "Halal", ticked: false },
+      { id: 4, name: "Kosher", ticked: false },
+    ],
+    allergies: [
+      { id: 1, name: "Lactose", ticked: true },
+      { id: 2, name: "Gluten", ticked: false },
+      { id: 3, name: "Mustard", ticked: false },
+      { id: 4, name: "Sellery", ticked: false },
+    ],
+  }),
+};
+</script>
+
+<style scoped>
+.white-icon {
+  color: white !important;
+}
+.green-icon {
+  color: green !important;
+}
+.orange-icon {
+  color: orange !important;
+}
+</style>

frontend/team14_bell_frontend/src/views/UserView.vue

@@ -1,5 +1,15 @@
 <template>
-  <div>
-    <h1>IM THE USER VIEW</h1>
-  </div>
+  <user-profile />
 </template>
+
+<script>
+  import UserProfile from '../components/UserProfile'
+
+  export default {
+    name: 'User',
+
+    components: {
+      UserProfile,
+    },
+  }
+</script>