Merge branch 'fix/edit-footer' into 'main'

Fix/edit footer

See merge request !49

package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "@popperjs/core": "^2.11.8",
         "axios": "^1.6.8",
         "bootstrap": "^5.3.3",
@@ -1230,6 +1231,15 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
+      "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.2",
     "@popperjs/core": "^2.11.8",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",

src/components/BaseComponents/FooterAlternative.vue

+<script setup lang="ts">
+import '@fortawesome/fontawesome-free/css/all.css'
+import { RouterLink } from 'vue-router'
+import {logDOM} from "@testing-library/vue";
+
+
+
+
+const ifNotLoggedInLogin  = () => {
+ /* if (useUserInfoStore.isActive) {
+    return '/discover'
+  }
+  return '/login'*/
+  return '/login'
+}
+
+const ifLoggedInDiscover = () => {
+  /*if (store.isActive) {
+    return '/discover'
+  }
+  return '/'*/
+  return '/'
+}
+
+const ifLoggedInReset = () => {
+  /*if (store.isActive) {
+    store.resetAll()
+  }*/
+  return '/login'
+}
+</script>
+
+<template>
+  <div class="footer-wrapper" style="background-color: #3B71CA">
+
+    <div class="links-wrapper">
+      <p class="links-header">Links</p>
+      <div class="links-container">
+        <RouterLink class="router" id="home" :to="ifLoggedInDiscover">Home</RouterLink>
+        <RouterLink class="router" id="discover" :to="ifNotLoggedInLogin()">Discover</RouterLink>
+        <RouterLink class="router" id="login" to="/login" @click="ifLoggedInReset()">Login</RouterLink>
+      </div>
+    </div>
+
+    <div class="support-wrapper">
+      <p class="support-header">Support us</p>
+      <div class="support-container">
+        <a href="https://twitter.com" target="_blank">
+          <i class="fab fa-twitter"></i>
+          Twitter
+        </a>
+        <a href="https://instagram.com" target="_blank">
+          <i class="fab fa-instagram"></i>
+           Instagram
+        </a>
+        <a href="https://facebook.com" target="_blank">
+          <i class="fab fa-facebook"></i>
+           Facebook
+        </a>
+        <a href="https://discord.gg" target="_blank">
+          <i class="fab fa-discord"></i>
+           Discord
+        </a>
+      </div>
+    </div>
+
+    <div class="info-wrapper">
+      <p class="info-header">Company</p>
+      <div class="info-container">
+        <RouterLink class="router" to="/about-us">About us</RouterLink>
+        <RouterLink class="router" to="/privacy-policy">Privacy</RouterLink>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+:root {
+  --footer-margin: 2rem
+}
+
+.footer-wrapper {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  background-size: cover;
+  justify-content: center;
+}
+
+.links-header, .support-header, .info-header {
+  font-family: Inter,sans-serif;
+  font-size: 26px;
+  font-weight: 600;
+  color: #FFFFFF;
+  margin: var(--footer-margin);
+  padding-left: 10px;
+}
+
+.links-container, .support-container, .info-container {
+  display: flex;
+  flex-direction: column;
+  margin: var(--footer-margin);
+}
+
+.support-container a i {
+  margin-right: 0.7rem;
+}
+
+.router, .support-container a {
+  width: 100%;
+  height: 39px;
+  font-family: 'Inter', serif;
+  font-weight: 500;
+  font-size: 18px;
+  text-decoration: none;
+  border-radius: 10px;
+  align-content: center;
+  color: #FFFFFF;
+  border: 1px solid #3B71CA;
+  padding-left: 10px;
+}
+
+.router:hover, .support-container a:hover {
+  background-color: #FFFFFF;
+  color: #3B71CA;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+@media (max-width: 588px) {
+  .footer-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

src/components/Budget/ExpenseBox.vue

@@ -55,7 +55,7 @@ const emitEditEvent = () => {
     </button>
   </div>
 
-  <div class="collapse" id=index>
+  <div class="collapse" :id=String(index)>
     <div class="container collapse-container">
       <form @submit.prevent="emitEditEvent">
         <div class="input-group">

src/stores/UserStore.ts

@@ -36,7 +36,7 @@ export type UserStoreInfo = {
   accessToken?: string;
   role?: string;
 };
-
+//todo Fix if there is time
 export const useUserInfoStore = defineStore('UserInfoStore', {
   state: () => ({
     email: '',

src/views/BasePageView.vue

@@ -2,6 +2,7 @@
 import { RouterView } from 'vue-router'
 import Footer from '@/components/BaseComponents/Footer.vue'
 import Menu from '@/components/BaseComponents/Menu.vue'
+import FooterAlternative from "@/components/BaseComponents/FooterAlternative.vue";
 </script>
 
 <template>
@@ -13,8 +14,8 @@ import Menu from '@/components/BaseComponents/Menu.vue'
     <div>
       <RouterView />
     </div>
-    <div style="display: flex; flex-direction: row;">
+   <div style="display: flex; flex-direction: row;">
       <img v-for="item in 7" src="@/assets/coca.webp" style="width: 100%; height: 100px; margin: 5px; border-radius: 1rem;" alt="picture">
     </div>
-    <Footer></Footer>
+    <FooterAlternative></FooterAlternative>
 </template>
\ No newline at end of file

src/views/Settings/SettingsSecurityView.vue

@@ -6,12 +6,18 @@
             <div class="form-group">
                 <label class="d-block">Change Password</label>
                 <input type="text" class="form-control" placeholder="Enter your old password">
-                <input type="text" class="form-control mt-1" placeholder="New password">
-                <input type="text" class="form-control mt-1" placeholder="Confirm new password">
+                <input type="text" class="form-control mt-3" placeholder="New password">
+                <input type="text" class="form-control mt-3 mb-2" placeholder="Confirm new password">
             </div>
             <button type="button" class="btn btn-primary">Update Password</button>
             <button type="reset" class="btn btn-light">Reset Changes</button>
         </form>
         <hr>
     </div>
-</template>
\ No newline at end of file
+</template>
+<script setup lang="ts">
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file