From c1cfbd0a0edcbf737ccaa2b321f6ddfa1c49fdcc Mon Sep 17 00:00:00 2001
From: luwol03 <luwol03@gmail.com>
Date: Sat, 22 Jan 2022 11:20:27 +0100
Subject: [PATCH 1/9] push version to v1.2.0-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ecef9eb3..fbba1a36 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocascan-frontend",
-  "version": "1.2.0",
+  "version": "1.2.0-rc.1",
   "private": true,
   "description": "A highly configurable vocabulary trainer",
   "author": "vocascan <vocascan@gmail.com>",

From bf7229976c9524114cefade5f0e4005a7c227292 Mon Sep 17 00:00:00 2001
From: luwol03 <60048565+luwol03@users.noreply.github.com>
Date: Sun, 23 Jan 2022 12:59:39 +0100
Subject: [PATCH 2/9] fixed flags in firefox (#95)

---
 src/Components/Flag/Flag.jsx                  |   61 +-
 src/Components/Flag/Flag.scss                 | 1064 +----------------
 src/Components/Flag/language-country-map.js   |  309 ++++-
 src/Components/Form/Select/Select.scss        |    6 +-
 .../Library/AllPackages/AllPackages.scss      |    2 +-
 5 files changed, 318 insertions(+), 1124 deletions(-)

diff --git a/src/Components/Flag/Flag.jsx b/src/Components/Flag/Flag.jsx
index 17e7c044..45d005de 100644
--- a/src/Components/Flag/Flag.jsx
+++ b/src/Components/Flag/Flag.jsx
@@ -1,24 +1,57 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
+import { useEffect } from "react";
 
-import { countryFlags, languageCountryMap } from "./language-country-map.js";
+import {
+  languageCountryMap,
+  spriteSheetPositions,
+} from "./language-country-map.js";
 
 import "./Flag.scss";
 
-const Flag = ({ languageCode, border = false, size = "small" }) => {
-  let code = null;
+const sizeMap = {
+  small: 0.13,
+  medium: 0.3,
+  large: 0.6,
+};
+
+const Flag = ({ languageCode, border = false, size = "small", scale }) => {
+  const [computedScale, setComputedScale] = useState(0);
+
+  useEffect(() => {
+    if (scale) {
+      setComputedScale(scale);
+    } else if (size && sizeMap[size]) {
+      setComputedScale(sizeMap[size]);
+    } else {
+      setComputedScale(sizeMap.small);
+    }
+  }, [scale, size]);
+
+  const style = useMemo(() => {
+    let code = "unknown";
+
+    if (Object.keys(spriteSheetPositions).includes(languageCode)) {
+      code = languageCode;
+    } else if (languageCountryMap[languageCode]) {
+      code = languageCountryMap[languageCode];
+    }
 
-  if (countryFlags.includes(languageCode)) {
-    code = languageCode;
-  } else if (languageCountryMap[languageCode]) {
-    code = languageCountryMap[languageCode];
-  }
+    return {
+      width: 200 * computedScale,
+      height: 150 * computedScale,
+      backgroundSize: `${3300 * computedScale}px ${3060 * computedScale}px`,
+      backgroundPosition: spriteSheetPositions[code]
+        .map((x) => `${x * computedScale}px`)
+        .join(" "),
+      borderRadius: `${30 * computedScale}px`,
+      boxShadow: border ? `0 0 0 ${10 * computedScale}px` : "none",
+    };
+  }, [border, computedScale, languageCode]);
 
   return (
-    <span
-      className={`flag flag-${code || "unknown"} ${
-        border ? "bordered" : ""
-      } ${size}`}
-    />
+    <div className="flag">
+      <span style={style} />
+    </div>
   );
 };
 
diff --git a/src/Components/Flag/Flag.scss b/src/Components/Flag/Flag.scss
index 9f2dfb2f..dd9170e4 100644
--- a/src/Components/Flag/Flag.scss
+++ b/src/Components/Flag/Flag.scss
@@ -1,1062 +1,10 @@
 .flag {
-  display: inline-block;
-  background-repeat: no-repeat;
-  background-image: url("flags.png");
-  width: 200px;
-  height: 150px;
-  border-radius: 30px;
+  span {
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-image: url("flags.png");
 
-  &.bordered {
-    box-shadow: 0 0 0 2px #aaa;
-  }
-
-  &.small {
-    zoom: 0.13;
-  }
-
-  &.medium {
-    zoom: 0.3;
-    border-radius: 20px;
-  }
-
-  &.large {
-    zoom: 0.6;
-    border-radius: 15px;
-  }
-
-  &.flag-tk {
-    background-position: -10px -10px;
-  }
-
-  &.flag-tl {
-    background-position: -230px -10px;
-  }
-
-  &.flag-tm {
-    background-position: -10px -180px;
-  }
-
-  &.flag-tn {
-    background-position: -230px -180px;
-  }
-
-  &.flag-to {
-    background-position: -450px -10px;
-  }
-
-  &.flag-tr {
-    background-position: -450px -180px;
-  }
-
-  &.flag-tt {
-    background-position: -10px -350px;
-  }
-
-  &.flag-tv {
-    background-position: -230px -350px;
-  }
-
-  &.flag-tw {
-    background-position: -450px -350px;
-  }
-
-  &.flag-tz {
-    background-position: -670px -10px;
-  }
-
-  &.flag-ua {
-    background-position: -670px -180px;
-  }
-
-  &.flag-ug {
-    background-position: -670px -350px;
-  }
-
-  &.flag-um {
-    background-position: -10px -520px;
-  }
-
-  &.flag-un {
-    background-position: -230px -520px;
-  }
-
-  &.flag-unknown {
-    background-position: -450px -520px;
-  }
-
-  &.flag-us {
-    background-position: -670px -520px;
-  }
-
-  &.flag-uy {
-    background-position: -10px -690px;
-  }
-
-  &.flag-uz {
-    background-position: -230px -690px;
-  }
-
-  &.flag-vc {
-    background-position: -450px -690px;
-  }
-
-  &.flag-vi {
-    background-position: -670px -690px;
-  }
-
-  &.flag-vg {
-    background-position: -890px -10px;
-  }
-
-  &.flag-vn {
-    background-position: -890px -180px;
-  }
-
-  &.flag-vu {
-    background-position: -890px -350px;
-  }
-
-  &.flag-wf {
-    background-position: -890px -520px;
-  }
-
-  &.flag-ws {
-    background-position: -890px -690px;
-  }
-
-  &.flag-xk {
-    background-position: -10px -860px;
-  }
-
-  &.flag-ye {
-    background-position: -230px -860px;
-  }
-
-  &.flag-yt {
-    background-position: -450px -860px;
-  }
-
-  &.flag-za {
-    background-position: -670px -860px;
-  }
-
-  &.flag-zm {
-    background-position: -890px -860px;
-  }
-
-  &.flag-zw {
-    background-position: -1110px -10px;
-  }
-
-  &.flag-ad {
-    background-position: -1110px -180px;
-  }
-
-  &.flag-ae {
-    background-position: -1110px -350px;
-  }
-
-  &.flag-af {
-    background-position: -1110px -520px;
-  }
-
-  &.flag-ag {
-    background-position: -1110px -690px;
-  }
-
-  &.flag-ai {
-    background-position: -1110px -860px;
-  }
-
-  &.flag-al {
-    background-position: -10px -1030px;
-  }
-
-  &.flag-am {
-    background-position: -230px -1030px;
-  }
-
-  &.flag-ao {
-    background-position: -450px -1030px;
-  }
-
-  &.flag-aq {
-    background-position: -670px -1030px;
-  }
-
-  &.flag-ar {
-    background-position: -890px -1030px;
-  }
-
-  &.flag-at {
-    background-position: -1110px -1030px;
-  }
-
-  &.flag-au {
-    background-position: -1330px -10px;
-  }
-
-  &.flag-aw {
-    background-position: -1330px -180px;
-  }
-
-  &.flag-ax {
-    background-position: -1330px -350px;
-  }
-
-  &.flag-az {
-    background-position: -1330px -520px;
-  }
-
-  &.flag-bd {
-    background-position: -1330px -690px;
-  }
-
-  &.flag-be {
-    background-position: -1330px -860px;
-  }
-
-  &.flag-ba {
-    background-position: -1330px -1030px;
-  }
-
-  &.flag-bf {
-    background-position: -10px -1200px;
-  }
-
-  &.flag-bg {
-    background-position: -230px -1200px;
-  }
-
-  &.flag-bi {
-    background-position: -450px -1200px;
-  }
-
-  &.flag-bj {
-    background-position: -670px -1200px;
-  }
-
-  &.flag-bl {
-    background-position: -890px -1200px;
-  }
-
-  &.flag-bm {
-    background-position: -1110px -1200px;
-  }
-
-  &.flag-bn {
-    background-position: -1330px -1200px;
-  }
-
-  &.flag-bo {
-    background-position: -10px -1370px;
-  }
-
-  &.flag-bq {
-    background-position: -230px -1370px;
-  }
-
-  &.flag-br {
-    background-position: -450px -1370px;
-  }
-
-  &.flag-bw {
-    background-position: -670px -1370px;
-  }
-
-  &.flag-by {
-    background-position: -890px -1370px;
-  }
-
-  &.flag-cf {
-    background-position: -1110px -1370px;
-  }
-
-  &.flag-cg {
-    background-position: -1330px -1370px;
-  }
-
-  &.flag-ch {
-    background-position: -1550px -10px;
-  }
-
-  &.flag-ci {
-    background-position: -1550px -180px;
-  }
-
-  &.flag-ck {
-    background-position: -1550px -350px;
-  }
-
-  &.flag-cl {
-    background-position: -1550px -520px;
-  }
-
-  &.flag-bh {
-    background-position: -1550px -690px;
-  }
-
-  &.flag-cr {
-    background-position: -1550px -860px;
-  }
-
-  &.flag-co {
-    background-position: -1550px -1030px;
-  }
-
-  &.flag-bt {
-    background-position: -1550px -1200px;
-  }
-
-  &.flag-cu {
-    background-position: -1550px -1370px;
-  }
-
-  &.flag-bs {
-    background-position: -10px -1540px;
-  }
-
-  &.flag-bv {
-    background-position: -230px -1540px;
-  }
-
-  &.flag-cx {
-    background-position: -450px -1540px;
-  }
-
-  &.flag-ca {
-    background-position: -670px -1540px;
-  }
-
-  &.flag-cn {
-    background-position: -890px -1540px;
-  }
-
-  &.flag-cy {
-    background-position: -1110px -1540px;
-  }
-
-  &.flag-de {
-    background-position: -1330px -1540px;
-  }
-
-  &.flag-dj {
-    background-position: -1550px -1540px;
-  }
-
-  &.flag-dk {
-    background-position: -1770px -10px;
-  }
-
-  &.flag-cd {
-    background-position: -1770px -180px;
-  }
-
-  &.flag-ve {
-    background-position: -1770px -350px;
-  }
-
-  &.flag-cm {
-    background-position: -1770px -520px;
-  }
-
-  &.flag-dz {
-    background-position: -1770px -690px;
-  }
-
-  &.flag-cv {
-    background-position: -1770px -860px;
-  }
-
-  &.flag-bz {
-    background-position: -1770px -1030px;
-  }
-
-  &.flag-eh {
-    background-position: -1770px -1200px;
-  }
-
-  &.flag-cz {
-    background-position: -1770px -1370px;
-  }
-
-  &.flag-cc {
-    background-position: -1770px -1540px;
-  }
-
-  &.flag-ec {
-    background-position: -10px -1710px;
-  }
-
-  &.flag-cw {
-    background-position: -230px -1710px;
-  }
-
-  &.flag-ee {
-    background-position: -450px -1710px;
-  }
-
-  &.flag-er {
-    background-position: -670px -1710px;
-  }
-
-  &.flag-do {
-    background-position: -890px -1710px;
-  }
-
-  &.flag-as {
-    background-position: -1110px -1710px;
-  }
-
-  &.flag-va {
-    background-position: -1330px -1710px;
-  }
-
-  &.flag-eg {
-    background-position: -1550px -1710px;
-  }
-
-  &.flag-dm {
-    background-position: -1770px -1710px;
-  }
-
-  &.flag-bb {
-    background-position: -1990px -10px;
-  }
-
-  &.flag-es {
-    background-position: -1990px -180px;
-  }
-
-  &.flag-es_ct { /* stylelint-disable-line */
-    background-position: -1990px -350px;
-  }
-
-  &.flag-es_ga { /* stylelint-disable-line */
-    background-position: -1990px -520px;
-  }
-
-  &.flag-et {
-    background-position: -1990px -690px;
-  }
-
-  &.flag-eu {
-    background-position: -1990px -860px;
-  }
-
-  &.flag-fi {
-    background-position: -1990px -1030px;
-  }
-
-  &.flag-fj {
-    background-position: -1990px -1200px;
-  }
-
-  &.flag-fk {
-    background-position: -1990px -1370px;
-  }
-
-  &.flag-fm {
-    background-position: -1990px -1540px;
-  }
-
-  &.flag-fo {
-    background-position: -1990px -1710px;
-  }
-
-  &.flag-fr {
-    background-position: -10px -1880px;
-  }
-
-  &.flag-ga {
-    background-position: -230px -1880px;
-  }
-
-  &.flag-gb {
-    background-position: -450px -1880px;
-  }
-
-  &.flag-gb_eng { /* stylelint-disable-line */
-    background-position: -670px -1880px;
-  }
-
-  &.flag-gb_nir { /* stylelint-disable-line */
-    background-position: -890px -1880px;
-  }
-
-  &.flag-gb_sct { /* stylelint-disable-line */
-    background-position: -1110px -1880px;
-  }
-
-  &.flag-gb_wls { /* stylelint-disable-line */
-    background-position: -1330px -1880px;
-  }
-
-  &.flag-gd {
-    background-position: -1550px -1880px;
-  }
-
-  &.flag-ge {
-    background-position: -1770px -1880px;
-  }
-
-  &.flag-gf {
-    background-position: -1990px -1880px;
-  }
-
-  &.flag-gg {
-    background-position: -2210px -10px;
-  }
-
-  &.flag-gh {
-    background-position: -2210px -180px;
-  }
-
-  &.flag-gi {
-    background-position: -2210px -350px;
-  }
-
-  &.flag-gl {
-    background-position: -2210px -520px;
-  }
-
-  &.flag-gm {
-    background-position: -2210px -690px;
-  }
-
-  &.flag-gn {
-    background-position: -2210px -860px;
-  }
-
-  &.flag-gp {
-    background-position: -2210px -1030px;
-  }
-
-  &.flag-gq {
-    background-position: -2210px -1200px;
-  }
-
-  &.flag-gr {
-    background-position: -2210px -1370px;
-  }
-
-  &.flag-gs {
-    background-position: -2210px -1540px;
-  }
-
-  &.flag-gt {
-    background-position: -2210px -1710px;
-  }
-
-  &.flag-gu {
-    background-position: -2210px -1880px;
-  }
-
-  &.flag-gw {
-    background-position: -10px -2050px;
-  }
-
-  &.flag-gy {
-    background-position: -230px -2050px;
-  }
-
-  &.flag-hk {
-    background-position: -450px -2050px;
-  }
-
-  &.flag-hm {
-    background-position: -670px -2050px;
-  }
-
-  &.flag-hn {
-    background-position: -890px -2050px;
-  }
-
-  &.flag-hr {
-    background-position: -1110px -2050px;
-  }
-
-  &.flag-ht {
-    background-position: -1330px -2050px;
-  }
-
-  &.flag-hu {
-    background-position: -1550px -2050px;
-  }
-
-  &.flag-id {
-    background-position: -1770px -2050px;
-  }
-
-  &.flag-ie {
-    background-position: -1990px -2050px;
-  }
-
-  &.flag-il {
-    background-position: -2210px -2050px;
-  }
-
-  &.flag-im {
-    background-position: -10px -2220px;
-  }
-
-  &.flag-in {
-    background-position: -230px -2220px;
-  }
-
-  &.flag-io {
-    background-position: -450px -2220px;
-  }
-
-  &.flag-iq {
-    background-position: -670px -2220px;
-  }
-
-  &.flag-ir {
-    background-position: -890px -2220px;
-  }
-
-  &.flag-is {
-    background-position: -1110px -2220px;
-  }
-
-  &.flag-it {
-    background-position: -1330px -2220px;
-  }
-
-  &.flag-je {
-    background-position: -1550px -2220px;
-  }
-
-  &.flag-jm {
-    background-position: -1770px -2220px;
-  }
-
-  &.flag-jo {
-    background-position: -1990px -2220px;
-  }
-
-  &.flag-jp {
-    background-position: -2210px -2220px;
-  }
-
-  &.flag-ke {
-    background-position: -2430px -10px;
-  }
-
-  &.flag-kg {
-    background-position: -2430px -180px;
-  }
-
-  &.flag-kh {
-    background-position: -2430px -350px;
-  }
-
-  &.flag-ki {
-    background-position: -2430px -520px;
-  }
-
-  &.flag-km {
-    background-position: -2430px -690px;
-  }
-
-  &.flag-kn {
-    background-position: -2430px -860px;
-  }
-
-  &.flag-kp {
-    background-position: -2430px -1030px;
-  }
-
-  &.flag-kr {
-    background-position: -2430px -1200px;
-  }
-
-  &.flag-kw {
-    background-position: -2430px -1370px;
-  }
-
-  &.flag-ky {
-    background-position: -2430px -1540px;
-  }
-
-  &.flag-kz {
-    background-position: -2430px -1710px;
-  }
-
-  &.flag-la {
-    background-position: -2430px -1880px;
-  }
-
-  &.flag-lb {
-    background-position: -2430px -2050px;
-  }
-
-  &.flag-lc {
-    background-position: -2430px -2220px;
-  }
-
-  &.flag-li {
-    background-position: -10px -2390px;
-  }
-
-  &.flag-lk {
-    background-position: -230px -2390px;
-  }
-
-  &.flag-lr {
-    background-position: -450px -2390px;
-  }
-
-  &.flag-ls {
-    background-position: -670px -2390px;
-  }
-
-  &.flag-lt {
-    background-position: -890px -2390px;
-  }
-
-  &.flag-lu {
-    background-position: -1110px -2390px;
-  }
-
-  &.flag-lv {
-    background-position: -1330px -2390px;
-  }
-
-  &.flag-ly {
-    background-position: -1550px -2390px;
-  }
-
-  &.flag-ma {
-    background-position: -1770px -2390px;
-  }
-
-  &.flag-mc {
-    background-position: -1990px -2390px;
-  }
-
-  &.flag-md {
-    background-position: -2210px -2390px;
-  }
-
-  &.flag-me {
-    background-position: -2430px -2390px;
-  }
-
-  &.flag-mf {
-    background-position: -2650px -10px;
-  }
-
-  &.flag-mg {
-    background-position: -2650px -180px;
-  }
-
-  &.flag-mh {
-    background-position: -2650px -350px;
-  }
-
-  &.flag-mk {
-    background-position: -2650px -520px;
-  }
-
-  &.flag-ml {
-    background-position: -2650px -690px;
-  }
-
-  &.flag-mm {
-    background-position: -2650px -860px;
-  }
-
-  &.flag-mn {
-    background-position: -2650px -1030px;
-  }
-
-  &.flag-mo {
-    background-position: -2650px -1200px;
-  }
-
-  &.flag-mp {
-    background-position: -2650px -1370px;
-  }
-
-  &.flag-mq {
-    background-position: -2650px -1540px;
-  }
-
-  &.flag-mr {
-    background-position: -2650px -1710px;
-  }
-
-  &.flag-ms {
-    background-position: -2650px -1880px;
-  }
-
-  &.flag-mt {
-    background-position: -2650px -2050px;
-  }
-
-  &.flag-mu {
-    background-position: -2650px -2220px;
-  }
-
-  &.flag-mv {
-    background-position: -2650px -2390px;
-  }
-
-  &.flag-mw {
-    background-position: -10px -2560px;
-  }
-
-  &.flag-mx {
-    background-position: -230px -2560px;
-  }
-
-  &.flag-my {
-    background-position: -450px -2560px;
-  }
-
-  &.flag-mz {
-    background-position: -670px -2560px;
-  }
-
-  &.flag-na {
-    background-position: -890px -2560px;
-  }
-
-  &.flag-nc {
-    background-position: -1110px -2560px;
-  }
-
-  &.flag-ne {
-    background-position: -1330px -2560px;
-  }
-
-  &.flag-nf {
-    background-position: -1550px -2560px;
-  }
-
-  &.flag-ng {
-    background-position: -1770px -2560px;
-  }
-
-  &.flag-ni {
-    background-position: -1990px -2560px;
-  }
-
-  &.flag-nl {
-    background-position: -2210px -2560px;
-  }
-
-  &.flag-no {
-    background-position: -2430px -2560px;
-  }
-
-  &.flag-np {
-    background-position: -2650px -2560px;
-  }
-
-  &.flag-nr {
-    background-position: -2870px -10px;
-  }
-
-  &.flag-nu {
-    background-position: -2870px -180px;
-  }
-
-  &.flag-nz {
-    background-position: -2870px -350px;
-  }
-
-  &.flag-om {
-    background-position: -2870px -520px;
-  }
-
-  &.flag-pa {
-    background-position: -2870px -690px;
-  }
-
-  &.flag-pe {
-    background-position: -2870px -860px;
-  }
-
-  &.flag-pf {
-    background-position: -2870px -1030px;
-  }
-
-  &.flag-pg {
-    background-position: -2870px -1200px;
-  }
-
-  &.flag-ph {
-    background-position: -2870px -1370px;
-  }
-
-  &.flag-pk {
-    background-position: -2870px -1540px;
-  }
-
-  &.flag-pl {
-    background-position: -2870px -1710px;
-  }
-
-  &.flag-pm {
-    background-position: -2870px -1880px;
-  }
-
-  &.flag-pn {
-    background-position: -2870px -2050px;
-  }
-
-  &.flag-pr {
-    background-position: -2870px -2220px;
-  }
-
-  &.flag-ps {
-    background-position: -2870px -2390px;
-  }
-
-  &.flag-pt {
-    background-position: -2870px -2560px;
-  }
-
-  &.flag-pw {
-    background-position: -10px -2730px;
-  }
-
-  &.flag-py {
-    background-position: -230px -2730px;
-  }
-
-  &.flag-qa {
-    background-position: -450px -2730px;
-  }
-
-  &.flag-re {
-    background-position: -670px -2730px;
-  }
-
-  &.flag-ro {
-    background-position: -890px -2730px;
-  }
-
-  &.flag-rs {
-    background-position: -1110px -2730px;
-  }
-
-  &.flag-ru {
-    background-position: -1330px -2730px;
-  }
-
-  &.flag-rw {
-    background-position: -1550px -2730px;
-  }
-
-  &.flag-sa {
-    background-position: -1770px -2730px;
-  }
-
-  &.flag-sb {
-    background-position: -1990px -2730px;
-  }
-
-  &.flag-sc {
-    background-position: -2210px -2730px;
-  }
-
-  &.flag-sd {
-    background-position: -2430px -2730px;
-  }
-
-  &.flag-se {
-    background-position: -2650px -2730px;
-  }
-
-  &.flag-sg {
-    background-position: -2870px -2730px;
-  }
-
-  &.flag-sh {
-    background-position: -10px -2900px;
-  }
-
-  &.flag-si {
-    background-position: -230px -2900px;
-  }
-
-  &.flag-sj {
-    background-position: -450px -2900px;
-  }
-
-  &.flag-sk {
-    background-position: -670px -2900px;
-  }
-
-  &.flag-sl {
-    background-position: -890px -2900px;
-  }
-
-  &.flag-sm {
-    background-position: -1110px -2900px;
-  }
-
-  &.flag-sn {
-    background-position: -1330px -2900px;
-  }
-
-  &.flag-so {
-    background-position: -1550px -2900px;
-  }
-
-  &.flag-sr {
-    background-position: -1770px -2900px;
-  }
-
-  &.flag-ss {
-    background-position: -1990px -2900px;
-  }
-
-  &.flag-st {
-    background-position: -2210px -2900px;
-  }
-
-  &.flag-sv {
-    background-position: -2430px -2900px;
-  }
-
-  &.flag-sx {
-    background-position: -2650px -2900px;
-  }
-
-  &.flag-sy {
-    background-position: -2870px -2900px;
-  }
-
-  &.flag-sz {
-    background-position: -3090px -10px;
-  }
-
-  &.flag-tc {
-    background-position: -3090px -180px;
-  }
-
-  &.flag-td {
-    background-position: -3090px -350px;
-  }
-
-  &.flag-tf {
-    background-position: -3090px -520px;
-  }
-
-  &.flag-tg {
-    background-position: -3090px -690px;
-  }
-
-  &.flag-th {
-    background-position: -3090px -860px;
-  }
-
-  &.flag-tj {
-    background-position: -3090px -1030px;
+    // box shadow color
+    color: #eee;
   }
 }
diff --git a/src/Components/Flag/language-country-map.js b/src/Components/Flag/language-country-map.js
index 9a946b42..8d44f5ae 100644
--- a/src/Components/Flag/language-country-map.js
+++ b/src/Components/Flag/language-country-map.js
@@ -1,63 +1,38 @@
-export const countryFlags =
-  "AFAXALDZASADAOAIAGARAMAWAUATAZBSBHBDBBBYBEBZBJBMBTBOBABWBRIOVGBNBGBFBIKHCMCACVBQKYCFTDCLCNCXCCCOKMCDCGCKCRCIHRCUCWCYCZDKDJDMDOTLECEGSVGQEREEETFKFOFJFIFRGFPFGAGMGEDEGHGIGRGLGDGPGUGTGGGNGWGYHTHMHNHKHUISINIDIRIQIEIMILITJMJPJEJOKZKEKIKWKGLALVLBLSLRLYLILTLUMOMKMGMWMYMVMLMTMHMQMRMUYTMXFMMDMCMNMEMSMAMZMMNANRNPNLNCNZNINENGNUNFKPMPNOOMPKPWPSPAPGPYPEPHPLPTPRQARERORURWBLSHKNLCMFPMVCWSSMSTSASNRSSCSLSGSXSKSISBSOZAGSKRSSESLKSDSRSJSZSECHSYTWTJTZTHTGTKTOTTTNTRTMTCTVVIUGUAAEGBUSUYUZVUVAVEVNWFEHYEZMZW"
-    .toLowerCase()
-    .match(/.{1,2}/g);
-
 export const languageCountryMap = {
   aa: "dj",
   af: "za",
   ak: "gh",
   sq: "al",
   am: "et",
-  ar: "aa",
   hy: "am",
-  ay: "wh",
-  az: "az",
   bm: "ml",
   be: "by",
   bn: "bd",
   bi: "vu",
   bs: "ba",
-  bg: "bg",
   my: "mm",
   ca: "ad",
   zh: "cn",
-  hr: "hr",
   cs: "cz",
   da: "dk",
   dv: "mv",
-  nl: "nl",
   dz: "bt",
   en: "gb",
   et: "ee",
-  ee: "ew",
-  fj: "fj",
   fl: "ph",
-  fi: "fi",
-  fr: "fr",
-  ff: "ff",
   ga: "gh",
   ka: "ge",
-  de: "de",
   el: "gr",
-  gn: "gx",
   gu: "in",
-  ht: "ht",
-  ha: "ha",
   he: "il",
   hi: "in",
   ho: "pg",
-  hu: "hu",
-  is: "is",
   ig: "ng",
-  id: "id",
-  it: "it",
   ja: "jp",
   kr: "ne",
   kk: "kz",
   km: "kh",
   kmb: "ao",
-  rw: "rw",
   kg: "cg",
   ko: "kr",
   kj: "ao",
@@ -65,50 +40,33 @@ export const languageCountryMap = {
   ky: "kg",
   lo: "la",
   la: "va",
-  lv: "lv",
   ln: "cg",
-  lt: "lt",
   lu: "cd",
   lb: "lu",
-  mk: "mk",
-  mg: "mg",
   ms: "my",
-  mt: "mt",
   mi: "nz",
-  mh: "mh",
-  mn: "mn",
   mos: "bf",
   ne: "np",
   nd: "zw",
   nso: "za",
-  no: "no",
   nb: "no",
   nn: "no",
   ny: "mw",
   pap: "aw",
   ps: "af",
   fa: "ir",
-  pl: "pl",
-  pt: "pt",
   pa: "in",
-  qu: "wh",
-  ro: "ro",
   rm: "ch",
   rn: "bi",
-  ru: "ru",
   sg: "cf",
   sr: "rs",
   srr: "sn",
   sn: "zw",
   si: "lk",
-  sk: "sk",
   sl: "si",
-  so: "so",
   snk: "sn",
   nr: "za",
   st: "ls",
-  es: "es",
-  sw: "sw",
   ss: "sz",
   sv: "se",
   tl: "ph",
@@ -116,22 +74,281 @@ export const languageCountryMap = {
   ta: "lk",
   te: "in",
   tet: "tl",
-  th: "th",
   ti: "er",
   tpi: "pg",
   ts: "za",
   tn: "bw",
-  tr: "tr",
   tk: "tm",
   uk: "ua",
   umb: "ao",
   ur: "pk",
-  uz: "uz",
   ve: "za",
   vi: "vn",
   cy: "gb",
   wo: "sn",
   xh: "za",
-  yo: "yo",
+  yo: "za",
   zu: "za",
 };
+
+export const spriteSheetPositions = {
+  tk: [-10, -10],
+  tl: [-230, -10],
+  tm: [-10, -180],
+  tn: [-230, -180],
+  to: [-450, -10],
+  tr: [-450, -180],
+  tt: [-10, -350],
+  tv: [-230, -350],
+  tw: [-450, -350],
+  tz: [-670, -10],
+  ua: [-670, -180],
+  ug: [-670, -350],
+  um: [-10, -520],
+  un: [-230, -520],
+  unknown: [-450, -520],
+  us: [-670, -520],
+  uy: [-10, -690],
+  uz: [-230, -690],
+  vc: [-450, -690],
+  vi: [-670, -690],
+  vg: [-890, -10],
+  vn: [-890, -180],
+  vu: [-890, -350],
+  wf: [-890, -520],
+  ws: [-890, -690],
+  xk: [-10, -860],
+  ye: [-230, -860],
+  yt: [-450, -860],
+  za: [-670, -860],
+  zm: [-890, -860],
+  zw: [-1110, -10],
+  ad: [-1110, -180],
+  ae: [-1110, -350],
+  af: [-1110, -520],
+  ag: [-1110, -690],
+  ai: [-1110, -860],
+  al: [-10, -1030],
+  am: [-230, -1030],
+  ao: [-450, -1030],
+  aq: [-670, -1030],
+  ar: [-890, -1030],
+  at: [-1110, -1030],
+  au: [-1330, -10],
+  aw: [-1330, -180],
+  ax: [-1330, -350],
+  az: [-1330, -520],
+  bd: [-1330, -690],
+  be: [-1330, -860],
+  ba: [-1330, -1030],
+  bf: [-10, -1200],
+  bg: [-230, -1200],
+  bi: [-450, -1200],
+  bj: [-670, -1200],
+  bl: [-890, -1200],
+  bm: [-1110, -1200],
+  bn: [-1330, -1200],
+  bo: [-10, -1370],
+  bq: [-230, -1370],
+  br: [-450, -1370],
+  bw: [-670, -1370],
+  by: [-890, -1370],
+  cf: [-1110, -1370],
+  cg: [-1330, -1370],
+  ch: [-1550, -10],
+  ci: [-1550, -180],
+  ck: [-1550, -350],
+  cl: [-1550, -520],
+  bh: [-1550, -690],
+  cr: [-1550, -860],
+  co: [-1550, -1030],
+  bt: [-1550, -1200],
+  cu: [-1550, -1370],
+  bs: [-10, -1540],
+  bv: [-230, -1540],
+  cx: [-450, -1540],
+  ca: [-670, -1540],
+  cn: [-890, -1540],
+  cy: [-1110, -1540],
+  de: [-1330, -1540],
+  dj: [-1550, -1540],
+  dk: [-1770, -10],
+  cd: [-1770, -180],
+  ve: [-1770, -350],
+  cm: [-1770, -520],
+  dz: [-1770, -690],
+  cv: [-1770, -860],
+  bz: [-1770, -1030],
+  eh: [-1770, -1200],
+  cz: [-1770, -1370],
+  cc: [-1770, -1540],
+  ec: [-10, -1710],
+  cw: [-230, -1710],
+  ee: [-450, -1710],
+  er: [-670, -1710],
+  do: [-890, -1710],
+  as: [-1110, -1710],
+  va: [-1330, -1710],
+  eg: [-1550, -1710],
+  dm: [-1770, -1710],
+  bb: [-1990, -10],
+  es: [-1990, -180],
+  es_ct: [-1990, -350],
+  es_ga: [-1990, -520],
+  et: [-1990, -690],
+  eu: [-1990, -860],
+  fi: [-1990, -1030],
+  fj: [-1990, -1200],
+  fk: [-1990, -1370],
+  fm: [-1990, -1540],
+  fo: [-1990, -1710],
+  fr: [-10, -1880],
+  ga: [-230, -1880],
+  gb: [-450, -1880],
+  gb_eng: [-670, -1880],
+  gb_nir: [-890, -1880],
+  gb_sct: [-1110, -1880],
+  gb_wls: [-1330, -1880],
+  gd: [-1550, -1880],
+  ge: [-1770, -1880],
+  gf: [-1990, -1880],
+  gg: [-2210, -10],
+  gh: [-2210, -180],
+  gi: [-2210, -350],
+  gl: [-2210, -520],
+  gm: [-2210, -690],
+  gn: [-2210, -860],
+  gp: [-2210, -1030],
+  gq: [-2210, -1200],
+  gr: [-2210, -1370],
+  gs: [-2210, -1540],
+  gt: [-2210, -1710],
+  gu: [-2210, -1880],
+  gw: [-10, -2050],
+  gy: [-230, -2050],
+  hk: [-450, -2050],
+  hm: [-670, -2050],
+  hn: [-890, -2050],
+  hr: [-1110, -2050],
+  ht: [-1330, -2050],
+  hu: [-1550, -2050],
+  id: [-1770, -2050],
+  ie: [-1990, -2050],
+  il: [-2210, -2050],
+  im: [-10, -2220],
+  in: [-230, -2220],
+  io: [-450, -2220],
+  iq: [-670, -2220],
+  ir: [-890, -2220],
+  is: [-1110, -2220],
+  it: [-1330, -2220],
+  je: [-1550, -2220],
+  jm: [-1770, -2220],
+  jo: [-1990, -2220],
+  jp: [-2210, -2220],
+  ke: [-2430, -10],
+  kg: [-2430, -180],
+  kh: [-2430, -350],
+  ki: [-2430, -520],
+  km: [-2430, -690],
+  kn: [-2430, -860],
+  kp: [-2430, -1030],
+  kr: [-2430, -1200],
+  kw: [-2430, -1370],
+  ky: [-2430, -1540],
+  kz: [-2430, -1710],
+  la: [-2430, -1880],
+  lb: [-2430, -2050],
+  lc: [-2430, -2220],
+  li: [-10, -2390],
+  lk: [-230, -2390],
+  lr: [-450, -2390],
+  ls: [-670, -2390],
+  lt: [-890, -2390],
+  lu: [-1110, -2390],
+  lv: [-1330, -2390],
+  ly: [-1550, -2390],
+  ma: [-1770, -2390],
+  mc: [-1990, -2390],
+  md: [-2210, -2390],
+  me: [-2430, -2390],
+  mf: [-2650, -10],
+  mg: [-2650, -180],
+  mh: [-2650, -350],
+  mk: [-2650, -520],
+  ml: [-2650, -690],
+  mm: [-2650, -860],
+  mn: [-2650, -1030],
+  mo: [-2650, -1200],
+  mp: [-2650, -1370],
+  mq: [-2650, -1540],
+  mr: [-2650, -1710],
+  ms: [-2650, -1880],
+  mt: [-2650, -2050],
+  mu: [-2650, -2220],
+  mv: [-2650, -2390],
+  mw: [-10, -2560],
+  mx: [-230, -2560],
+  my: [-450, -2560],
+  mz: [-670, -2560],
+  na: [-890, -2560],
+  nc: [-1110, -2560],
+  ne: [-1330, -2560],
+  nf: [-1550, -2560],
+  ng: [-1770, -2560],
+  ni: [-1990, -2560],
+  nl: [-2210, -2560],
+  no: [-2430, -2560],
+  np: [-2650, -2560],
+  nr: [-2870, -10],
+  nu: [-2870, -180],
+  nz: [-2870, -350],
+  om: [-2870, -520],
+  pa: [-2870, -690],
+  pe: [-2870, -860],
+  pf: [-2870, -1030],
+  pg: [-2870, -1200],
+  ph: [-2870, -1370],
+  pk: [-2870, -1540],
+  pl: [-2870, -1710],
+  pm: [-2870, -1880],
+  pn: [-2870, -2050],
+  pr: [-2870, -2220],
+  ps: [-2870, -2390],
+  pt: [-2870, -2560],
+  pw: [-10, -2730],
+  py: [-230, -2730],
+  qa: [-450, -2730],
+  re: [-670, -2730],
+  ro: [-890, -2730],
+  rs: [-1110, -2730],
+  ru: [-1330, -2730],
+  rw: [-1550, -2730],
+  sa: [-1770, -2730],
+  sb: [-1990, -2730],
+  sc: [-2210, -2730],
+  sd: [-2430, -2730],
+  se: [-2650, -2730],
+  sg: [-2870, -2730],
+  sh: [-10, -2900],
+  si: [-230, -2900],
+  sj: [-450, -2900],
+  sk: [-670, -2900],
+  sl: [-890, -2900],
+  sm: [-1110, -2900],
+  sn: [-1330, -2900],
+  so: [-1550, -2900],
+  sr: [-1770, -2900],
+  ss: [-1990, -2900],
+  st: [-2210, -2900],
+  sv: [-2430, -2900],
+  sx: [-2650, -2900],
+  sy: [-2870, -2900],
+  sz: [-3090, -10],
+  tc: [-3090, -180],
+  td: [-3090, -350],
+  tf: [-3090, -520],
+  tg: [-3090, -690],
+  th: [-3090, -860],
+  tj: [-3090, -1030],
+};
diff --git a/src/Components/Form/Select/Select.scss b/src/Components/Form/Select/Select.scss
index 73886807..34efa828 100644
--- a/src/Components/Form/Select/Select.scss
+++ b/src/Components/Form/Select/Select.scss
@@ -150,7 +150,7 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  
+
   .custom-option-wrapper-name {
     white-space: nowrap;
     overflow: hidden;
@@ -163,9 +163,5 @@
     align-items: center;
     padding-left: 5px;
     margin-left: auto;
-
-    .flag {
-      margin: 50px;
-    }
   }
 }
diff --git a/src/screens/Library/AllPackages/AllPackages.scss b/src/screens/Library/AllPackages/AllPackages.scss
index 6ae03601..1737b2a2 100644
--- a/src/screens/Library/AllPackages/AllPackages.scss
+++ b/src/screens/Library/AllPackages/AllPackages.scss
@@ -46,6 +46,6 @@
   }
 
   .flag {
-    margin-right: 50px;
+    margin-right: 10px;
   }
 }

From 503842edd6e8a8f44c2026cb735bf3c62863ab0a Mon Sep 17 00:00:00 2001
From: VocascanBot <vocascan@gmail.com>
Date: Sun, 23 Jan 2022 12:26:51 +0000
Subject: [PATCH 3/9] [skip ci] updated translations via Localazy

---
 src/i18n/locales/de/default.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/locales/de/default.json b/src/i18n/locales/de/default.json
index 3946cd73..5ad67e4b 100644
--- a/src/i18n/locales/de/default.json
+++ b/src/i18n/locales/de/default.json
@@ -302,7 +302,7 @@
       "groupDescription": {
         "bulletPoints": [
           "Jedes Paket ist nochmal in Gruppen unterteilt, wodurch Du Deine Vokabeln noch organisierter speichern kannst.",
-          "Gruppen können, wie die Pakete, über die Gruppenauwahl-Box oder die Bibliothek erstellt werden.",
+          "Gruppen können, wie die Pakete, über die Gruppenauswahl-Box oder die Bibliothek erstellt werden.",
           "Jede Gruppe hat einen \"Aktiv\"-Schalter, mit dem Du entscheiden kannst, ob darin enthaltene Vokabeln abgefragt werden oder nicht."
         ],
         "endText": "Als nächstes werden wir eine Gruppe erstellen."

From 60075036c7f623a63d92d574db1cb54ca511aedf Mon Sep 17 00:00:00 2001
From: luwol03 <60048565+luwol03@users.noreply.github.com>
Date: Sun, 23 Jan 2022 15:16:29 +0100
Subject: [PATCH 4/9] Fix/translations (#96)

---
 src/Components/SelectionBox/SelectionBox.jsx | 4 ++--
 src/Forms/VocabForm/VocabForm.jsx            | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Components/SelectionBox/SelectionBox.jsx b/src/Components/SelectionBox/SelectionBox.jsx
index 9e45ee2e..2f2e0ec7 100644
--- a/src/Components/SelectionBox/SelectionBox.jsx
+++ b/src/Components/SelectionBox/SelectionBox.jsx
@@ -52,10 +52,10 @@ const SelectionBox = ({
       </div>
       <div className="select-box-description">
         <ul className="select-box-description-ul">
-          {pro.map((text, i) => (
+          {(typeof pro === "string" ? [pro] : pro).map((text, i) => (
             <Item text={text} Icon={CheckIcon} key={i} />
           ))}
-          {contra.map((text, i) => (
+          {(typeof contra === "string" ? [contra] : contra).map((text, i) => (
             <Item text={text} Icon={CloseIcon} key={i} />
           ))}
         </ul>
diff --git a/src/Forms/VocabForm/VocabForm.jsx b/src/Forms/VocabForm/VocabForm.jsx
index 7962ea3c..4a2c11bc 100644
--- a/src/Forms/VocabForm/VocabForm.jsx
+++ b/src/Forms/VocabForm/VocabForm.jsx
@@ -433,13 +433,17 @@ const VocabForm = ({
         </div>
       </form>
       <Modal
-        title={"Add Package"}
+        title={t("screens.allPackages.addPackage")}
         open={showAddPackage}
         onClose={closePackageModal}
       >
         <PackageForm onSubmitCallback={packageAdded} />
       </Modal>
-      <Modal title={"Add Group"} open={showAddGroup} onClose={closeGroupModal}>
+      <Modal
+        title={t("screens.allGroups.addGroup")}
+        open={showAddGroup}
+        onClose={closeGroupModal}
+      >
         <GroupForm
           fixedPackage
           selectedPackage={selectedPackage}

From ff5e3677b1744f933f0f6bab1fdabe38f0421c4c Mon Sep 17 00:00:00 2001
From: luwol03 <60048565+luwol03@users.noreply.github.com>
Date: Mon, 24 Jan 2022 21:26:20 +0100
Subject: [PATCH 5/9] fix linebreaks on vocab card and vocab table (#98)

---
 src/Components/VocabCard/VocabCard.jsx      | 6 ++++--
 src/index.scss                              | 8 ++++++++
 src/screens/Library/AllVocabs/AllVocabs.jsx | 8 +++-----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/Components/VocabCard/VocabCard.jsx b/src/Components/VocabCard/VocabCard.jsx
index 89227b93..bcf78190 100644
--- a/src/Components/VocabCard/VocabCard.jsx
+++ b/src/Components/VocabCard/VocabCard.jsx
@@ -18,7 +18,7 @@ const RenderForeignWord = ({ currVocab, isTranslation }) => {
   return (
     <div className="foreign-word-wrapper">
       {isTranslation ? (
-        <p className="description">{currVocab.description}</p>
+        <p className="description text-wrap">{currVocab.description}</p>
       ) : null}
       <h1 className={`${isTranslation ? "translations" : ""}`}>
         {currVocab.name}
@@ -41,7 +41,9 @@ const RenderTranslatedWord = ({ currVocab, isTranslation }) => {
 
   return (
     <div className="translated-word-wrapper">
-      {isTranslation ? <p className="my-20">{currVocab.description}</p> : null}
+      {isTranslation ? (
+        <p className="my-20 text-wrap">{currVocab.description}</p>
+      ) : null}
       <div className={`my-20 ${isTranslation ? "translations" : ""}`}>
         {currVocab.Translations.map((el) => el.name).join(", ")}
       </div>
diff --git a/src/index.scss b/src/index.scss
index 208cd14f..6d7a01ab 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -28,6 +28,14 @@
   &-bold {
     font-weight: bold !important;
   }
+
+  &-wrap {
+    white-space: pre-wrap;
+  }
+
+  &-left {
+    text-align: left;
+  }
 }
 
 .w {
diff --git a/src/screens/Library/AllVocabs/AllVocabs.jsx b/src/screens/Library/AllVocabs/AllVocabs.jsx
index c1342f63..39594001 100644
--- a/src/screens/Library/AllVocabs/AllVocabs.jsx
+++ b/src/screens/Library/AllVocabs/AllVocabs.jsx
@@ -89,7 +89,7 @@ const AllVocabs = () => {
         accessor: "name",
         Cell: ({ row }) => (
           <Button
-            className="text-normal"
+            className="text-normal text-left"
             variant="link"
             onClick={() => editVocab(row.original)}
           >
@@ -101,9 +101,7 @@ const AllVocabs = () => {
         Header: t("screens.allVocabs.description"),
         accessor: "description",
         Cell: ({ row }) => (
-          <div style={{ textAlign: "left" }}>
-            <p>{row.original.description}</p>
-          </div>
+          <p className="text-left text-wrap">{row.original.description}</p>
         ),
       },
       {
@@ -114,7 +112,7 @@ const AllVocabs = () => {
         Header: t("screens.allGroups.active"),
         accessor: "active",
         Cell: ({ row }) => (
-          <div style={{ textAlign: "left" }}>
+          <div>
             {row.original.active ? (
               <CheckCircleIcon className="text-success" />
             ) : (

From 7e4771d552163efc8eb8f2465ecf5f98643b656e Mon Sep 17 00:00:00 2001
From: luwol03 <60048565+luwol03@users.noreply.github.com>
Date: Fri, 28 Jan 2022 13:41:26 +0100
Subject: [PATCH 6/9] Password complexity (#97)

* added password complexity indicator to register

* added password complexity indicator to change password
---
 .../PasswordComplexityIndicator.jsx           | 42 +++++++++++++++++++
 .../PasswordComplexityIndicator.scss          | 31 ++++++++++++++
 src/colors.scss                               |  2 +
 src/i18n/locales/en/default.json              |  1 +
 src/screens/Login/Login.scss                  |  3 --
 src/screens/Profile/Profile.jsx               | 26 +++++++++++-
 src/screens/Register/Register.jsx             | 28 ++++++++++++-
 src/screens/Register/Register.scss            |  3 --
 src/utils/index.js                            |  8 ++++
 9 files changed, 134 insertions(+), 10 deletions(-)
 create mode 100644 src/Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.jsx
 create mode 100644 src/Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.scss

diff --git a/src/Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.jsx b/src/Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.jsx
new file mode 100644
index 00000000..c1800bcf
--- /dev/null
+++ b/src/Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.jsx
@@ -0,0 +1,42 @@
+import React, { useEffect } from "react";
+
+import { bytesLength } from "../../../utils/index.js";
+
+import "./PasswordComplexityIndicator.scss";
+
+const PasswordComplexityIndicator = ({
+  password,
+  complexity,
+  setComplexity,
+}) => {
+  useEffect(() => {
+    const passwordLength = bytesLength(password);
+
+    const length = passwordLength >= 8 && passwordLength <= 72;
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasNonAlphas = /\W/.test(password);
+
+    if (length) {
+      setComplexity(
+        length + hasUpperCase + hasLowerCase + hasNumbers + hasNonAlphas
+      );
+    } else if (passwordLength !== 0) {
+      setComplexity(1);
+    } else {
+      setComplexity(0);
+    }
+  }, [password, setComplexity]);
+
+  return (
+    <div className="password-complexity-indicator">
+      <div
+        style={{ width: `${(100 / 5) * complexity}%` }}
+        className={`bar complexity-${complexity}`}
+      ></div>
+    </div>
+  );
+};
+
+export default PasswordComplexityIndicator;
diff --git a/src/Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.scss b/src/Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.scss
new file mode 100644
index 00000000..6b792721
--- /dev/null
+++ b/src/Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.scss
@@ -0,0 +1,31 @@
+@import "../../../colors";
+
+.password-complexity-indicator {
+  margin-top: 12px;
+  width: 100%;
+  height: 6px;
+  border-radius: 5px;
+  background-color: #eee;
+
+  .bar {
+    border-radius: 3px;
+    transition: all 0.25s ease-in;
+    width: 0%;
+    height: 6px;
+
+    &.complexity-0,
+    &.complexity-1,
+    &.complexity-2 {
+      background-color: $color-red;
+    }
+
+    &.complexity-3 {
+      background-color: $color-yellow;
+    }
+
+    &.complexity-4,
+    &.complexity-5 {
+      background-color: $color-green;
+    }
+  }
+}
diff --git a/src/colors.scss b/src/colors.scss
index 93fe90ec..2b5ec40e 100644
--- a/src/colors.scss
+++ b/src/colors.scss
@@ -48,6 +48,8 @@ $color-grey: #cbcbcb;
 $color-red-light: #f9c5cc;
 $color-red: #ff586e;
 $color-red-dark: #fd334e;
+$color-yellow: #ffeb3b;
+$color-yellow-dark: #c8b900;
 $color-green-light: #c8f1e5;
 $color-green: #0acf97;
 $color-green-dark: #06b483;
diff --git a/src/i18n/locales/en/default.json b/src/i18n/locales/en/default.json
index e37ae53b..4e701f73 100644
--- a/src/i18n/locales/en/default.json
+++ b/src/i18n/locales/en/default.json
@@ -328,6 +328,7 @@
       "emailInUse": "The email is already used",
       "emailNotValid": "Not a valid email address",
       "passwordsDontMatch": "The passwords are not the same",
+      "passwordsNotComplex": "Password not complex enough",
       "alreadyHaveAccount": "Already have an account?",
       "readPrivacy": "I have read the [Privacy Policy]",
       "acceptTerms": "I accept the [Terms and Conditions]"
diff --git a/src/screens/Login/Login.scss b/src/screens/Login/Login.scss
index 6274071e..92dd3134 100644
--- a/src/screens/Login/Login.scss
+++ b/src/screens/Login/Login.scss
@@ -1,9 +1,6 @@
 @import "../../colors";
 
 .login-form {
-  max-width: 450px;
-  max-height: 550px;
-
   margin: auto;
   border-radius: 10px;
 
diff --git a/src/screens/Profile/Profile.jsx b/src/screens/Profile/Profile.jsx
index f4973c73..9cb837dc 100644
--- a/src/screens/Profile/Profile.jsx
+++ b/src/screens/Profile/Profile.jsx
@@ -7,12 +7,14 @@ import PersonIcon from "@material-ui/icons/Person";
 import Button from "../../Components/Button/Button.jsx";
 import ConfirmDialog from "../../Components/ConfirmDialog/ConfirmDialog.jsx";
 import TextInput from "../../Components/Form/TextInput/TextInput.jsx";
+import PasswordComplexityIndicator from "../../Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.jsx";
 import Modal from "../../Components/Modal/Modal.jsx";
 import StatsTable from "../../Components/StatsTable/StatsTable.jsx";
 
 import useSnack from "../../hooks/useSnack.js";
 import { signOut } from "../../redux/Actions/login.js";
 import { deleteUser, changePassword } from "../../utils/api.js";
+import { bytesLength } from "../../utils/index.js";
 
 import "./Profile.scss";
 
@@ -32,6 +34,8 @@ const Profile = () => {
 
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
+  const [passwordComplexity, setPasswordComplexity] = useState(0);
+  const [isPasswordComplexityOk, setIsPasswordComplexityOk] = useState(false);
   const [repeatedNewPassword, setRepeatedNewPassword] = useState("");
   const [canSubmitPasswordChange, setCanSubmitPasswordChange] = useState(false);
 
@@ -47,6 +51,8 @@ const Profile = () => {
     setOldPassword("");
     setNewPassword("");
     setRepeatedNewPassword("");
+    setPasswordComplexity(0);
+    setIsPasswordComplexityOk(false);
   }, []);
 
   const openEmailModal = useCallback(() => {
@@ -93,15 +99,24 @@ const Profile = () => {
       });
   }, [dispatch]);
 
+  useEffect(() => {
+    const passwordLength = bytesLength(newPassword);
+
+    setIsPasswordComplexityOk(
+      passwordLength >= 8 && passwordLength <= 72 && passwordComplexity >= 4
+    );
+  }, [newPassword, passwordComplexity]);
+
   useEffect(() => {
     setCanSubmitPasswordChange(
       newPassword === repeatedNewPassword &&
         newPassword !== "" &&
         repeatedNewPassword !== "" &&
-        oldPassword !== ""
+        oldPassword !== "" &&
+        isPasswordComplexityOk
     );
     setNewPasswordError(newPassword !== repeatedNewPassword);
-  }, [newPassword, oldPassword, repeatedNewPassword]);
+  }, [isPasswordComplexityOk, newPassword, oldPassword, repeatedNewPassword]);
 
   useEffect(() => {
     setCanSubmitDelete(deleteConfirmation === username);
@@ -193,6 +208,13 @@ const Profile = () => {
             setNewPassword(value);
           }}
           value={newPassword}
+          error={newPassword !== "" && !isPasswordComplexityOk}
+          errorText={t("screens.register.passwordsNotComplex")}
+        />
+        <PasswordComplexityIndicator
+          password={newPassword}
+          complexity={passwordComplexity}
+          setComplexity={setPasswordComplexity}
         />
         <TextInput
           required
diff --git a/src/screens/Register/Register.jsx b/src/screens/Register/Register.jsx
index 9bb6963d..5047b3f5 100644
--- a/src/screens/Register/Register.jsx
+++ b/src/screens/Register/Register.jsx
@@ -8,6 +8,7 @@ import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import Button from "../../Components/Button/Button.jsx";
 import TextInput from "../../Components/Form/TextInput/TextInput.jsx";
 import InviteCodeValidIndicator from "../../Components/Indicators/InviteCodeValidIndicator/InviteCodeValidIndicator.jsx";
+import PasswordComplexityIndicator from "../../Components/Indicators/PasswordComplexityIndicator/PasswordComplexityIndicator.jsx";
 import ServerValidIndicator from "../../Components/Indicators/ServerValidIndicator/ServerValidIndicator.jsx";
 import UnauthenticatedLayout from "../../Components/Layout/UnauthenticatedLayout/UnauthenticatedLayout.jsx";
 
@@ -20,6 +21,7 @@ import {
   maxUsernameLength,
   pages,
 } from "../../utils/constants.js";
+import { bytesLength } from "../../utils/index.js";
 
 import "./Register.scss";
 
@@ -41,6 +43,8 @@ const Register = ({ image }) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [passwordRepeat, setPasswordRepeat] = useState("");
+  const [passwordComplexity, setPasswordComplexity] = useState(0);
+  const [isPasswordComplexityOk, setIsPasswordComplexityOk] = useState(false);
   const [inviteCode, setInviteCode] = useState("");
   const [serverAddressInput, setServerAddressInput] = useState(serverAddress);
   const [isSamePassword, setIsSamePassword] = useState(true);
@@ -154,6 +158,14 @@ const Register = ({ image }) => {
     ]
   );
 
+  useEffect(() => {
+    const passwordLength = bytesLength(password);
+
+    setIsPasswordComplexityOk(
+      passwordLength >= 8 && passwordLength <= 72 && passwordComplexity >= 4
+    );
+  }, [password, passwordComplexity]);
+
   useEffect(() => {
     setIsSamePassword(password === passwordRepeat);
   }, [password, passwordRepeat]);
@@ -188,6 +200,7 @@ const Register = ({ image }) => {
         !email ||
         !password ||
         !passwordRepeat ||
+        !isPasswordComplexityOk ||
         !isServerValid ||
         !isSamePassword ||
         !isEmailValid ||
@@ -214,6 +227,7 @@ const Register = ({ image }) => {
     acceptTerms,
     isPrivacyPolicyValid,
     isTermsAndConditionsValid,
+    isPasswordComplexityOk,
   ]);
 
   useEffect(() => {
@@ -298,12 +312,22 @@ const Register = ({ image }) => {
               }}
               value={password}
               error={
-                !isSamePassword && password !== "" && passwordRepeat !== ""
+                (!isSamePassword && password !== "" && passwordRepeat !== "") ||
+                !isPasswordComplexityOk
+              }
+              errorText={
+                !isPasswordComplexityOk
+                  ? t("screens.register.passwordsNotComplex")
+                  : t("screens.register.passwordsDontMatch")
               }
-              errorText={t("screens.register.passwordsDontMatch")}
               maxLength={maxTextfieldLength}
               minLength={8}
             />
+            <PasswordComplexityIndicator
+              password={password}
+              complexity={passwordComplexity}
+              setComplexity={setPasswordComplexity}
+            />
             <TextInput
               required
               type="password"
diff --git a/src/screens/Register/Register.scss b/src/screens/Register/Register.scss
index 94b13246..9b78193c 100644
--- a/src/screens/Register/Register.scss
+++ b/src/screens/Register/Register.scss
@@ -1,9 +1,6 @@
 @import "../../colors";
 
 .register-form {
-  max-height: 650px;
-  max-width: 450px;
-
   margin: auto;
   border-radius: 10px;
 
diff --git a/src/utils/index.js b/src/utils/index.js
index 5e22ce8f..6121742b 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -56,3 +56,11 @@ export const dayDateDiff = (date1, date2) => {
 
   return Math.floor(timeDiff / (1000 * 60 * 60 * 24));
 };
+
+/**
+ * Return the length of a string in bytes
+ * See: https://stackoverflow.com/questions/5515869/string-length-in-bytes-in-javascript
+ * @param {String} string string
+ * @returns bytesLength
+ */
+export const bytesLength = (string) => new TextEncoder().encode(string).length;

From f5f5ef616b1b7dc25c89914cf2071b14208ad16d Mon Sep 17 00:00:00 2001
From: luwol03 <60048565+luwol03@users.noreply.github.com>
Date: Sat, 29 Jan 2022 18:38:38 +0100
Subject: [PATCH 7/9] v1.2.1 changelog (#99)

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75ccdb19..c9c7d040 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,17 @@
 This changelog goes through all the changes that have been made in each release on the
 [vocascan-frontend](https://github.com/vocascan/vocascan-frontend).
 
+## [v1.2.1](https://github.com/vocascan/vocascan-frontend/releases/tag/v1.2.1) - 2022.01.29
+
+This release of vocascan-frontend fixes the country flags in firefox and the linebreaks in the vocab card description. The new password complexity indicator will force secure passwords to the users.
+
+- Features
+  - Password complexity (#97)
+- Bugfixes
+  - fixed flags in firefox (#95)
+  - Fix/translations (#96)
+  - fix linebreaks on vocab card and vocab table (#98)
+
 ## [v1.2.0](https://github.com/vocascan/vocascan-frontend/releases/tag/v1.2.0) - 2022.01.22
 
 This is one of the biggest updates for Vocascan so far. We moved the React app out of the desktop app to split up the desktop app into two different repositories. As a result, the frontend is also accessible from within the browser to make learning on foreign or not supported devices a lot easier. Additionally, there are lots of new features (in conjunction with a Vocascan server) to legally secure your site if you want to make it available to the public.

From 3c652222c6f3c84a555c9e3dee13222ffcba2a45 Mon Sep 17 00:00:00 2001
From: VocascanBot <vocascan@gmail.com>
Date: Sat, 29 Jan 2022 17:39:07 +0000
Subject: [PATCH 8/9] [skip ci] updated translations via Localazy

---
 src/i18n/locales/de/default.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/i18n/locales/de/default.json b/src/i18n/locales/de/default.json
index 5ad67e4b..dec9e1f4 100644
--- a/src/i18n/locales/de/default.json
+++ b/src/i18n/locales/de/default.json
@@ -365,6 +365,7 @@
       "emailInUse": "Die E-Mail wird bereits verwendet",
       "emailNotValid": "Keine gültige E-Mail Adresse",
       "passwordsDontMatch": "Die Passwörter stimmen nicht überein",
+      "passwordsNotComplex": "Passwort ist nicht komplex genug",
       "readPrivacy": "Ich habe die [Datenschutzerklärung] gelesen",
       "title": "Registrieren",
       "usernameInUse": "Der Benutzername ist schon vergeben",

From d37c9c908febde23c47c86fff455d5e77528bd09 Mon Sep 17 00:00:00 2001
From: luwol03 <luwol03@gmail.com>
Date: Sat, 29 Jan 2022 18:43:26 +0100
Subject: [PATCH 9/9] incremented version to v1.2.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fbba1a36..3821e947 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocascan-frontend",
-  "version": "1.2.0-rc.1",
+  "version": "1.2.1",
   "private": true,
   "description": "A highly configurable vocabulary trainer",
   "author": "vocascan <vocascan@gmail.com>",