From 1a13008ae568dc577ee8867144e4ad1e4072b0d8 Mon Sep 17 00:00:00 2001
From: tlahmann <tobiaslahmann@gmail.com>
Date: Mon, 6 Apr 2020 12:28:57 +0200
Subject: [PATCH 1/8] Design changes

lighten it up a bit
---
 src/App.vue                               | 17 +++++++----------
 src/components/Header.vue                 |  1 +
 src/components/product/ProductDetails.vue |  3 ++-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 23b02e9..566fa25 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,7 +21,7 @@ export default {
 
 <style>
 body {
-  background-color: #0f576d;
+  background-color: #eaeaea;
   text-align: left;
   margin: 0;
 }
@@ -31,20 +31,17 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color:#fff;
-}
-
-@media screen and (min-width: 544px)  {
-  .content {
-    margin: 1rem 30%;
-  }
+  color: #0f576d;
 }
 
 .content {
   margin: 1rem 1.25rem;
 }
-.content p, span, li {
-  color: #fff;
+@media screen and (min-width: 544px)  {
+  .content {
+    margin: 1rem auto;
+    max-width: 1240px;
+  }
 }
 
 
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 89f13a7..4a26b8b 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -33,6 +33,7 @@ export default {
 
 <style scoped>
 #nav {
+  background-color: #0f576d;
   padding: 20px;
   vertical-align: center;
   position: relative;
diff --git a/src/components/product/ProductDetails.vue b/src/components/product/ProductDetails.vue
index 466370f..5053dce 100644
--- a/src/components/product/ProductDetails.vue
+++ b/src/components/product/ProductDetails.vue
@@ -43,8 +43,9 @@ export default {
   margin: 10px;
   padding: 10px 30px;
   background-color: #c6e2e6;
-  border: 1px solid #c6e2e6;
   border-radius: 5px;
+  border: 1px solid lightgray;
+  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
 }
 .product-details .title {
   display: flex;

From 654c869b941fc869890c39de58f86338a9e15543 Mon Sep 17 00:00:00 2001
From: tlahmann <tobiaslahmann@gmail.com>
Date: Tue, 14 Apr 2020 21:44:20 +0200
Subject: [PATCH 2/8] Design changes

---
 src/components/product/Product.vue        |  2 ++
 src/components/product/ProductDetails.vue | 25 +++++++----------------
 src/locales/de.json                       |  6 +++---
 3 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/components/product/Product.vue b/src/components/product/Product.vue
index 2d6c196..18bace5 100644
--- a/src/components/product/Product.vue
+++ b/src/components/product/Product.vue
@@ -45,6 +45,8 @@ export default {
   background-color: #c6e2e6;
   border: 1px solid #c6e2e6;
   border-radius: 5px;
+  border: 1px solid lightgray;
+  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
 }
 .details .product-image {
   margin: 0 auto;
diff --git a/src/components/product/ProductDetails.vue b/src/components/product/ProductDetails.vue
index 260df54..5bc58d5 100644
--- a/src/components/product/ProductDetails.vue
+++ b/src/components/product/ProductDetails.vue
@@ -26,23 +26,12 @@ export default {
 </script>
 
 <style scoped>
-.product-details {
-  text-align: left;
-  margin: 10px;
-  padding: 10px 30px;
-  background-color: #c6e2e6;
-  border-radius: 5px;
-  border: 1px solid lightgray;
-  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
-}
-@media screen and (max-width: 768px) {
-  .title {
-    display: flex;
-    /* min-width: auto; */
-    margin: 0.5rem 0.5rem;
-    hyphens: auto;
-    flex-direction: column;
-  }
+.title {
+  display: flex;
+  /* min-width: auto; */
+  margin: 0.5rem 0.5rem;
+  hyphens: auto;
+  flex-direction: row;
 }
 .details {
   padding: 1rem;
@@ -59,7 +48,7 @@ export default {
 }
 .product-name {
   text-align: left;
-  margin-left: 0 0.5rem;
+  margin: 0 0.5rem;
   /* max-width: 4rem; */
 }
 /* .product {
diff --git a/src/locales/de.json b/src/locales/de.json
index 605f4a6..0bc3502 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -38,10 +38,10 @@
     "SearchFilterLabel": "Produktfilter",
     "Products": "Produkte",
     "Brot": "Brot",
-    "Damenhygiene": "Damenhygiene",
+    "Damenhygiene": "Damen\u00ADhygiene",
     "Desinfektionsmittel": "Des\u00ADinfek\u00ADtions\u00ADmit\u00ADtel",
     "Eier": "Eier",
-    "Fertiggerichte": "Fertiggerichte",
+    "Fertiggerichte": "Fertig\u00ADgerichte",
     "Gemüsekonserven": "Ge\u00ADmü\u00ADse\u00ADkon\u00ADser\u00ADven",
     "Hefe": "Hefe",
     "Kartoffeln": "Kartoffeln",
@@ -64,4 +64,4 @@
     "SorryError": "Entschuldigung, der folgende Fehler ist Aufgetreten"
   },
   "User denied Geolocation": "Der Benutzer hat die Positionserfassung verweigert"
-}
\ No newline at end of file
+}

From c475f79a7a5ecbb1f8ac85ee64be3cd2ade3c9bd Mon Sep 17 00:00:00 2001
From: tlahmann <tobiaslahmann@gmail.com>
Date: Tue, 14 Apr 2020 22:14:41 +0200
Subject: [PATCH 3/8] Add product images

---
 src/components/product/ProductDetails.vue |  2 +-
 src/interfaces.ts                         |  4 +++-
 src/models/index.ts                       |  3 +++
 src/models/product.ts                     | 10 +++++++---
 src/store/productStore.ts                 |  9 ++++++---
 5 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 src/models/index.ts

diff --git a/src/components/product/ProductDetails.vue b/src/components/product/ProductDetails.vue
index 5bc58d5..3f8d3e2 100644
--- a/src/components/product/ProductDetails.vue
+++ b/src/components/product/ProductDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="product-card" v:bind="prop-product">
     <div class="title">
-      <img class="product-image" src="@/assets/logo.svg" alt="product-logo" />
+      <img class="product-image" :src="product.image" alt="product-logo" />
       <h3 class="product-name">{{ $t(`Products.${product.name}`) }}</h3>
     </div>
     <div class="details">
diff --git a/src/interfaces.ts b/src/interfaces.ts
index f1702f8..c30636b 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -7,6 +7,7 @@ export interface IProductState {
 export interface IProduct {
     categories: string[];
     description: string;
+    image: string;
     name: string;
     productId: string;
 }
@@ -14,6 +15,7 @@ export interface IProduct {
 export interface IApiProduct {
     categories: string[];
     description: string;
+    image: string;
     name: string;
     _id: string;
     updatedAt: string;
@@ -22,4 +24,4 @@ export interface IApiProduct {
 }
 export interface IApiResponse {
     products: IApiProduct[]
-}
\ No newline at end of file
+}
diff --git a/src/models/index.ts b/src/models/index.ts
new file mode 100644
index 0000000..eaee012
--- /dev/null
+++ b/src/models/index.ts
@@ -0,0 +1,3 @@
+export * from './address';
+export * from './product';
+export * from './shop';
diff --git a/src/models/product.ts b/src/models/product.ts
index 84c863f..5f27c19 100644
--- a/src/models/product.ts
+++ b/src/models/product.ts
@@ -1,14 +1,15 @@
 import { Resource } from "./resource";
-enum EProductStatus{
+enum EProductStatus {
     empty = "empty",
     enough = "normal",
     much = "much"
 }
 export class Product extends Resource {
     private _name: string;
+    private _image?: string;
     private _status: string;
     private _categories: string[];
-    constructor (json: any) {
+    constructor(json: any) {
         super(json);
         this._name = json?.name;
         this._status = json?.status;
@@ -20,12 +21,15 @@ export class Product extends Resource {
     get name(): string {
         return this._name;
     }
+    get image(): string {
+        return this._image || require("../assets/logo.svg");
+    }
     get status(): string {
         return this._status;
     }
     set status(statusUpdate: string) {
         // Must be valid Status: "much"
-        if(statusUpdate in EProductStatus) {
+        if (statusUpdate in EProductStatus) {
             //todo: add error notification via snackbar-notifier
             return;
         }
diff --git a/src/store/productStore.ts b/src/store/productStore.ts
index 4ed5652..bdd208b 100644
--- a/src/store/productStore.ts
+++ b/src/store/productStore.ts
@@ -23,6 +23,7 @@ export class ProductStore {
     this._selectedProduct = {
       categories: [],
       description: "",
+      image: "",
       name: "",
       productId: ""
     };
@@ -35,12 +36,12 @@ export class ProductStore {
   get allProducts(): TProducts {
     return this._products;
   }
-  
+
   @Getter()
   get selectedProduct(): IProduct {
     return this._selectedProduct;
   }
-  
+
   @Getter()
   get selectedProductId(): string {
     return this._selectedProductId;
@@ -55,10 +56,12 @@ export class ProductStore {
   async fetchAllProducts() {
     const productsResponse: AxiosResponse<IApiResponse> = await ProductService.getAllProducts();
     const { products: apiProducts } = productsResponse.data;
+    console.log(apiProducts);
     let products: TProducts = [];
     for (const product of apiProducts) {
       products.push({
         categories: product.categories,
+        image: product.image,
         name: product.name,
         description: product.description,
         productId: product._id
@@ -87,5 +90,5 @@ export class ProductStore {
     this._selectedProductName = productName;
   }
 
- 
+
 }

From 824ddd5ceeb499fed4b64e5fc556fcf2d16a62e8 Mon Sep 17 00:00:00 2001
From: tlahmann <tobiaslahmann@gmail.com>
Date: Tue, 14 Apr 2020 22:21:06 +0200
Subject: [PATCH 4/8] Fake min margin

---
 src/App.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6a7f1b8..c8771b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
     <div class="content">
       <router-view />
     </div>
-    <Footer/>
+    <Footer />
   </div>
 </template>
 
@@ -40,12 +40,8 @@ body {
 }
 
 .content {
-  margin: 1rem 1.25rem;
-}
-@media screen and (min-width: 544px)  {
-  .content {
-    margin: 1rem auto;
-    max-width: 1240px;
-  }
+  margin: 1rem auto;
+  max-width: calc(100% - 1.25rem);
+  width: 1240px;
 }
 </style>

From e9fbcf5282edb7ee6ce7b07e5ae49b80370db7da Mon Sep 17 00:00:00 2001
From: tlahmann <tobiaslahmann@gmail.com>
Date: Tue, 14 Apr 2020 22:22:00 +0200
Subject: [PATCH 5/8] Remove superfluous log message

---
 src/store/productStore.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/productStore.ts b/src/store/productStore.ts
index bdd208b..6645f14 100644
--- a/src/store/productStore.ts
+++ b/src/store/productStore.ts
@@ -56,7 +56,6 @@ export class ProductStore {
   async fetchAllProducts() {
     const productsResponse: AxiosResponse<IApiResponse> = await ProductService.getAllProducts();
     const { products: apiProducts } = productsResponse.data;
-    console.log(apiProducts);
     let products: TProducts = [];
     for (const product of apiProducts) {
       products.push({

From 522fb8c75d8da2fc09a0391f15999a9d823c9a99 Mon Sep 17 00:00:00 2001
From: tlahmann <tobiaslahmann@gmail.com>
Date: Tue, 14 Apr 2020 23:12:24 +0200
Subject: [PATCH 6/8] Add box shadow to map view

---
 src/components/MapView.vue         | 2 ++
 src/components/product/Product.vue | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MapView.vue b/src/components/MapView.vue
index 827e6a8..2c0fc53 100644
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
@@ -106,5 +106,7 @@ export default {
   margin-right: 20px;
   margin-left: auto;
   border-radius: 5px;
+  border: 1px solid #c6e2e6;
+  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
 }
 </style>
diff --git a/src/components/product/Product.vue b/src/components/product/Product.vue
index 18bace5..151b4f0 100644
--- a/src/components/product/Product.vue
+++ b/src/components/product/Product.vue
@@ -45,7 +45,6 @@ export default {
   background-color: #c6e2e6;
   border: 1px solid #c6e2e6;
   border-radius: 5px;
-  border: 1px solid lightgray;
   box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
 }
 .details .product-image {

From 4e9049c23d0630b030d88eb79181f264f194c2a2 Mon Sep 17 00:00:00 2001
From: tlahmann <tobiaslahmann@gmail.com>
Date: Wed, 15 Apr 2020 00:07:44 +0200
Subject: [PATCH 7/8] Add Vuetify plugin and market expasion panels

---
 package.json                     |   7 +-
 public/index.html                |   2 +
 src/components/Header.vue        |   4 +-
 src/components/HelloWorld.vue    |  57 ------------
 src/components/market/Market.vue |  40 ++++-----
 src/main.ts                      |   2 +
 src/plugins/vuetify.ts           |   7 ++
 src/views/Markets.vue            |   7 +-
 tsconfig.json                    |   2 +-
 vue.config.js                    |   5 +-
 yarn.lock                        | 145 +++++++++++++++++++++++++++++--
 11 files changed, 181 insertions(+), 97 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/plugins/vuetify.ts

diff --git a/package.json b/package.json
index 7b89e89..ad54801 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "vue-resource": "^1.5.1",
     "vue-router": "^3.1.5",
     "vue2-leaflet": "^2.5.2",
+    "vuetify": "^2.2.11",
     "vuex": "^3.1.2",
     "vuex-simple": "^2.2.0"
   },
@@ -40,10 +41,14 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.1.2",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
     "typescript": "~3.7.5",
     "vue-axios": "^2.1.5",
     "vue-cli-plugin-i18n": "~0.6.1",
-    "vue-template-compiler": "^2.6.11"
+    "vue-cli-plugin-vuetify": "^2.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/public/index.html b/public/index.html
index 9932398..16ade6a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,8 @@
     <link rel="shortcut icon" href="<%= BASE_URL %>kuro-logo.svg">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> -->
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> -->
   </head>
   <body>
     <noscript>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4a26b8b..ec7ad55 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -79,8 +79,8 @@ export default {
 .kuro-logo {
   /* text-align: center; */
   /* margin: 0.25rem auto; */
-  height: 7.5rem;
-  width: 7.5rem;
+  /* height: 7.5rem;
+  width: 7.5rem; */
 }
 
 .kuro-header-name {
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 900d3d7..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #6dd3fc;
-}
-</style>
diff --git a/src/components/market/Market.vue b/src/components/market/Market.vue
index eee92bd..9669f5d 100644
--- a/src/components/market/Market.vue
+++ b/src/components/market/Market.vue
@@ -1,15 +1,19 @@
 <template>
+
   <div class="market">
-    <img class="shop-image" src="@/assets/ic_markt.svg" alt="shop-logo" />
-    <div class="shop-text">
-      <span class="shop-name" v:bind="prop-name">{{ name }}</span>
-      <span
-        class="shop-address"
-        v:bind="prop-address"
-      >{{ (address || {address: 'noAddress'}).address }}</span>
-      <small class="shop-address" v:bind="prop-address">{{ (address || {postalCode: ''}).postalCode }} {{ (address || {city: ''}).city }}</small>
+      <v-expansion-panel-header class="shop-text">
+        <img class="shop-image" src="@/assets/ic_markt.svg" alt="shop-logo" />
+        <div class="shop-text">
+          <span class="shop-name" v:bind="prop-name">{{ name }}</span>
+          <span
+            class="shop-address"
+            v:bind="prop-address"
+          >{{ (address || {address: 'noAddress'}).address }}</span>
+          <small class="shop-address" v:bind="prop-address">{{ (address || {postalCode: ''}).postalCode }} {{ (address || {city: ''}).city }}</small>
+        </div>
+      </v-expansion-panel-header>
+      <v-expansion-panel-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-expansion-panel-content>
     </div>
-  </div>
 </template>
 
 <script>
@@ -29,30 +33,16 @@ export default {
 
 <style scoped>
 .market {
-  display: flex;
-  flex-direction: row;
-  border: 1px solid lightgray;
-  border-radius: 5px;
-  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
-  transition: 0.3s;
-  padding: 0.5rem;
-  margin: 0.5rem auto;
   background-color: #c6e2e6;
 }
 
-.market:hover {
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-  border: 1px solid lightgray;
-}
-
 .shop-image {
-  margin-left: 0.75rem;
+  margin: 0 0.75rem;
   max-width: 3.5rem;
 }
 
 .shop-text {
-  margin: 0.5rem 0.75rem;
-  display: block;
+  text-align: left;
 }
 
 .shop-text .shop-name,
diff --git a/src/main.ts b/src/main.ts
index fe8a383..a492b66 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import './registerServiceWorker'
 import router from './router'
 import i18n from './i18n'
 import VueResource from 'vue-resource'
+import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false;
 Vue.use(VueResource);
@@ -13,5 +14,6 @@ new Vue({
   store,
   router,
   i18n,
+  vuetify,
   render: h => h(App)
 }).$mount('#app');
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
new file mode 100644
index 0000000..ec46adb
--- /dev/null
+++ b/src/plugins/vuetify.ts
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+});
diff --git a/src/views/Markets.vue b/src/views/Markets.vue
index 3e01b0f..737157d 100644
--- a/src/views/Markets.vue
+++ b/src/views/Markets.vue
@@ -27,7 +27,11 @@
       </div>
     </div>
 
-    <Market v-for="(shop, i) in shops" :key="`Lang${i}`" :name="shop.name" :address="shop.address" />
+    <v-expansion-panels>
+      <v-expansion-panel v-for="(shop, i) in shops" :key="`Lang${i}`" >
+        <Market :name="shop.name" :address="shop.address" />
+      </v-expansion-panel>
+    </v-expansion-panels>
   </div>
 </template>
 
@@ -148,6 +152,7 @@ export default {
   display: flex;
   flex-flow: row;
   align-content: space-around;
+  margin-bottom: 2rem;
 }
 #position-properties {
   flex-grow: 0;
diff --git a/tsconfig.json b/tsconfig.json
index b8274b1..26b8d9b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,7 @@
     "types": [
       "webpack-env",
       "webpack",
-      "webpack-env"
+      "vuetify"
     ],
     "typeRoots": [
       "src/types",
diff --git a/vue.config.js b/vue.config.js
index fece33a..aabb079 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -13,5 +13,8 @@ module.exports = {
     icons: [{}],
     name: "kuro-web",
     shortName: "kuro-web"
-  }
+  },
+  transpileDependencies: [
+    "vuetify"
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
index f8bf416..a19dc3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1621,6 +1621,14 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -1908,6 +1916,11 @@ binary-extensions@^1.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
   integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
 
+binary-extensions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
+  integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==
+
 bindings@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
@@ -1982,7 +1995,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@^3.0.1:
+braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -2302,6 +2315,21 @@ check-types@^8.0.3:
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
   integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
 
+"chokidar@>=2.0.0 <4.0.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
+  integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.3.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -2450,6 +2478,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
 clone-response@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
@@ -4089,6 +4126,11 @@ fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
+fsevents@~2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
+  integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -4158,7 +4200,7 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.0.0:
+glob-parent@^5.0.0, glob-parent@~5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
   integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
@@ -4170,7 +4212,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -4736,6 +4778,11 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
+interpret@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
+  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
+
 into-stream@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-3.1.0.tgz#96fb0a936c12babd6ff1752a17d05616abd094c6"
@@ -4817,6 +4864,13 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -4934,7 +4988,7 @@ is-glob@^3.1.0:
   dependencies:
     is-extglob "^2.1.0"
 
-is-glob@^4.0.0, is-glob@^4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
   integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
@@ -5377,7 +5431,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -5963,7 +6017,7 @@ normalize-path@^2.1.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
-normalize-path@^3.0.0:
+normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -6458,7 +6512,7 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-picomatch@^2.0.5:
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -7140,6 +7194,20 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
+readdirp@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17"
+  integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==
+  dependencies:
+    picomatch "^2.0.7"
+
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
+  dependencies:
+    resolve "^1.1.6"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -7340,7 +7408,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.1:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
   integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
@@ -7455,6 +7523,24 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-loader@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
+  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
+  dependencies:
+    clone-deep "^4.0.1"
+    loader-utils "^1.2.3"
+    neo-async "^2.6.1"
+    schema-utils "^2.6.1"
+    semver "^6.3.0"
+
+sass@^1.19.0:
+  version "1.26.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.3.tgz#412df54486143b76b5a65cdf7569e86f44659f46"
+  integrity sha512-5NMHI1+YFYw4sN3yfKjpLuV9B5l7MqQ6FlkTcC4FT+oHbBRUZoSjHrrt/mE0nFXJyY2kQtU9ou9HxvFVjLFuuw==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
 sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -7469,7 +7555,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.4, schema-utils@^2.6.5:
+schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6.4, schema-utils@^2.6.5:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.5.tgz#c758f0a7e624263073d396e29cd40aa101152d8a"
   integrity sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==
@@ -7504,6 +7590,11 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.1.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -7589,6 +7680,13 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -7618,6 +7716,15 @@ shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+shelljs@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
+  integrity sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -8662,6 +8769,14 @@ vue-cli-plugin-i18n@~0.6.1:
     vue-i18n "^8.0.0"
     vue-i18n-extract "^1.0.2"
 
+vue-cli-plugin-vuetify@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz#09ba78928653fc7e3801ea37e5120f957413dda4"
+  integrity sha512-jtxcidjLT5f1H9QLYKLFjo/ZG42ud4pI9bK3WNO5DXyhiMDMTwSZ7b3NcJVRH7tKYbv5/ty0VPdDGlf4w22AMA==
+  dependencies:
+    semver "^7.1.2"
+    shelljs "^0.8.3"
+
 vue-eslint-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz#a4ed2669f87179dedd06afdd8736acbb3a3864d6"
@@ -8758,6 +8873,18 @@ vue@^2.5.16, vue@^2.6.11:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
+vuetify-loader@^1.3.0:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.4.3.tgz#df1323c558be09890877e5fbe817b3a71a6c538d"
+  integrity sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==
+  dependencies:
+    loader-utils "^1.2.0"
+
+vuetify@^2.2.11:
+  version "2.2.22"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.2.22.tgz#a5bc5814a16472d719acb45d2cb5fb5605d2e12e"
+  integrity sha512-3RFKqLS81xoNdDUldOCpxFhYaqiYVCMpTmovAmyPhidmqC9PaMNuM5aCKkKnOgG/xIN/0SgZg3wJfe0o72RhlQ==
+
 vuex-simple@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/vuex-simple/-/vuex-simple-2.2.0.tgz#8c0ad521942462c370848172269cd5ac72880fc3"

From c4d17a4893857f18f2919c09b5a9f35774f2529f Mon Sep 17 00:00:00 2001
From: tlahmann <tobiaslahmann@gmail.com>
Date: Wed, 15 Apr 2020 00:40:46 +0200
Subject: [PATCH 8/8] Style locale changer

---
 src/components/LocaleChanger.vue | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/components/LocaleChanger.vue b/src/components/LocaleChanger.vue
index 35b1a9e..251c6ba 100644
--- a/src/components/LocaleChanger.vue
+++ b/src/components/LocaleChanger.vue
@@ -20,7 +20,7 @@
 export default {
   name: "LocaleChanger",
   data() {
-    return { langs: ["de", "en", "da", "tr", "fr"] };
+    return { langs: ["de", "en", "fr", "tr", "da"] };
   },
   methods: {
     getIcon(locale) {
@@ -56,13 +56,7 @@ export default {
 .locale-changer img {
   color: white;
   padding: 16px;
-  font-size: 16px;
-  border: none;
   cursor: pointer;
-  border: 1px solid lightgray;
-  border-radius: 5px;
-  box-shadow: 2px 4px 6px 1px rgba(0, 0, 0, 0.2);
-  transition: 0.3s;
   background-color: #c6e2e6;
 }
 
@@ -76,12 +70,7 @@ export default {
   display: none;
   list-style: none;
   position: absolute;
-  min-width:63px;
-  margin: 0;
-  padding: 0;
-  /* background-color: hsl(0, 0%, 98%); */
-  /* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
-  z-index: 99;
+  z-index: 1099;
 }
 
 .dropdown-content {
@@ -90,8 +79,8 @@ export default {
 }
 /* Images inside the dropdown */
 .dropdown-content img {
-  display: inline-block;
-  max-width: 30px;
+  display: inline-block;    
+  max-width: 40px;
   padding: 10px;
 }