Merge pull request #538 from jayehernandez/feature/version-1-0-13

Version 1.0.13

README.md

@@ -1,7 +1,7 @@
 ![Title](docs/screenshots/title.png)
 
 <p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0.12-blue.svg?cacheSeconds=2592000" />
+  <img alt="Version" src="https://img.shields.io/badge/version-1.0.13-blue.svg?cacheSeconds=2592000" />
   <a href="https://github.com/jayehernandez/letra#readme" target="_blank">
     <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
   </a>
@@ -101,7 +101,9 @@ Give a ⭐️ if this project helped you!
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-54-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
@@ -178,6 +180,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "letra-extension",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Passively learn a new language every time you open a new tab.",
   "author": "Jaye Hernandez <[email protected]>",
   "engines": {

client/src/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Letra",
   "description": "Passively learn a new language every time you open a new tab.",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "manifest_version": 2,
   "permissions": ["storage"],
   "icons": {

client/src/store/index.js

@@ -125,6 +125,7 @@ export const actions = {
     toggledDailyData.translations[oldLanguage] = thisTranslation;
 
     dispatch('saveDailyData', toggledDailyData);
+    chrome.storage.sync.set({ dailyData: toggledDailyData });
     commit('setLoading', false);
   },
 };

client/src/style/flag.scss

@@ -2,9 +2,19 @@
   margin-top: $spacing;
   margin-left: $spacing;
   margin-right: calc(#{$spacing} + 0.2em);
+
+  &.mt0 {
+    margin-top: 0;
+  }
 }
 
 .language-name {
   max-width: calc(56px + 2 * #{$spacing});
   margin: 0 auto;
-}
+}
+
+.flag-options {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  color: $primary-color;
+}

client/src/views/Flag.vue

@@ -18,13 +18,20 @@
   ) {{ flagLanguage | titleize }}
   transition(name="fade")
     div(v-if="showLanguageDropdown")
-      .flag-list(v-for="language in otherLanguages")
-        .flag.fadeIn(v-wow data-wow-duration="2s" :key="dailyData.translations[language].flag")
+      .flag-options Show in:
+      .flag-list(v-for="(language, index) in otherLanguages")
+        .flag.fadeIn(
+          v-wow
+          data-wow-duration="2s"
+          :key="dailyData.translations[language].flag"
+          v-bind:class=`{ mt0: index === 0 }`
+        )
           i(
             :class="dailyData.translations[language].flag"
             class="twa twa-4x"
             @click="toggleActiveLanguage(language); showLanguageDropdown = false;"
           )
+        .language-name {{ language | titleize }}
 </template>
 
 <script>