@scrabble-solver/scrabble-solver 2.11.2 → 2.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.2",
+  "version": "2.11.4",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@floating-ui/react": "^0.20.1",
     "@kamilmielnik/trie": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.11.2",
-    "@scrabble-solver/constants": "^2.11.2",
-    "@scrabble-solver/dictionaries": "^2.11.2",
-    "@scrabble-solver/logger": "^2.11.2",
-    "@scrabble-solver/solver": "^2.11.2",
-    "@scrabble-solver/types": "^2.11.2",
-    "@scrabble-solver/word-definitions": "^2.11.2",
+    "@scrabble-solver/configs": "^2.11.4",
+    "@scrabble-solver/constants": "^2.11.4",
+    "@scrabble-solver/dictionaries": "^2.11.4",
+    "@scrabble-solver/logger": "^2.11.4",
+    "@scrabble-solver/solver": "^2.11.4",
+    "@scrabble-solver/types": "^2.11.4",
+    "@scrabble-solver/word-definitions": "^2.11.4",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -72,5 +72,5 @@
     "sass": "^1.59.2",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "b7ac80ab2a6c0af218756953e354d1e0c7f1e58a"
+  "gitHead": "41fd187eab48d417aafc30f8a1d407178323c415"
 }

package/src/api/index.ts

@@ -1,4 +1,5 @@
 export { default as getServerLoggingData } from './getServerLoggingData';
 export { default as isBoardValid } from './isBoardValid';
 export { default as isCellValid } from './isCellValid';
+export { default as isCharacterValid } from './isCharacterValid';
 export { default as isRowValid } from './isRowValid';

package/src/api/isCellValid.ts

@@ -1,6 +1,7 @@
-import { BLANK } from '@scrabble-solver/constants';
 import { CellJson, Config } from '@scrabble-solver/types';
 
+import isCharacterValid from './isCharacterValid';
+
 const isCellValid = (cell: CellJson, config: Config): boolean => {
   const { isEmpty, tile, x, y } = cell;
 
@@ -16,7 +17,7 @@ const isCellValid = (cell: CellJson, config: Config): boolean => {
     return false;
   }
 
-  if (tile !== null && !config.hasCharacter(tile.character) && tile.character !== BLANK) {
+  if (tile !== null && !isCharacterValid(tile.character)) {
     return false;
   }
 

package/src/api/isCharacterValid.ts

@@ -0,0 +1,13 @@
+const TWO_TILE_CHARACTER_LENGTH = 2;
+const MAX_CHARACTER_LENGTH = TWO_TILE_CHARACTER_LENGTH;
+
+const isCharacterValid = (character: string): boolean => {
+  /*
+   * We could be strict here and check whether config.hasCharacter(character) || character === BLANK
+   * but since this case won't really affect/break solving, we don't need to worry about it.
+   * It's better to display an empty state than error state in UI, so this is a sanity check only.
+   */
+  return character.length !== 0 && character.length <= MAX_CHARACTER_LENGTH;
+};
+
+export default isCharacterValid;

package/src/components/Button/Button.module.scss

@@ -60,16 +60,29 @@
 .content {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: var(--spacing--l);
+
 }
 
 .icon {
+  flex: 0 0 auto;
   width: var(--button--icon--size);
   height: var(--button--icon--size);
   transition: var(--transition);
 }
 
 .label {
+  @include ellipsis;
+
+  flex: 1;
   font-size: var(--font--size--h3);
   transition: var(--transition);
+
+  [dir='ltr'] & {
+    text-align: left;
+  }
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
 }

package/src/components/Modal/Modal.module.scss

@@ -89,6 +89,7 @@
   z-index: 1;
   flex: 0 0 auto;
   padding: var(--spacing--l);
+  padding-bottom: 0;
   background-color: var(--color--background);
 }
 
@@ -117,18 +118,25 @@
   position: relative;
   flex: 1;
   min-height: 0;
-  padding: var(--spacing--l);
   overflow: auto;
+  padding: var(--spacing--l);
 }
 
 .footer {
   flex: 0 0 auto;
   display: flex;
-  justify-content: flex-end;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  gap: var(--spacing--l);
   padding: var(--spacing--l);
-  box-shadow: var(--box-shadow);
+  padding-top: 0;
 
   @include media('>s') {
     display: none;
   }
+
+  > * {
+    min-width: 0;
+    flex: 1;
+  }
 }

package/src/components/NotFound/NotFound.module.scss

@@ -1,3 +1,5 @@
+@import 'styles/mixins';
+
 .notFound {
   display: flex;
   align-items: center;
@@ -11,18 +13,25 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  padding: var(--spacing--xxl);
+  padding: var(--spacing--l);
 }
 
 .icon {
-  $size: 204px;
+  --size: 200px;
 
-  height: $size;
-  width: $size;
+  height: var(--size);
+  width: var(--size);
   margin-bottom: var(--spacing--xxl);
   color: var(--color--red);
+
+  @include media('<xs') {
+    --size: 50%;
+
+    margin-bottom: var(--spacing--xl);
+  }
 }
 
 .tiles {
+  max-width: 100%;
   height: 60px;
 }

package/src/components/NotFound/NotFound.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { FunctionComponent } from 'react';
 
 import { DashCircleFill } from 'icons';
@@ -11,12 +10,10 @@ const CONTENT = [['HTTP', '404']];
 
 const NotFound: FunctionComponent = () => (
   <div className={styles.notFound}>
-    <Link href="/">
-      <a className={styles.link}>
-        <DashCircleFill className={styles.icon} />
-        <PlainTiles className={styles.tiles} content={CONTENT} />
-      </a>
-    </Link>
+    <a className={styles.link} href="/">
+      <DashCircleFill className={styles.icon} />
+      <PlainTiles className={styles.tiles} content={CONTENT} />
+    </a>
   </div>
 );
 

package/src/components/Rack/Rack.tsx

@@ -8,6 +8,7 @@ import {
   createKeyboardNavigation,
   extractCharacters,
   extractInputValue,
+  getTileSizes,
   zipCharactersAndTiles,
 } from 'lib';
 import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
@@ -31,6 +32,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const tilesRefs = useMemo(() => createArray(tilesCount).map(() => createRef<HTMLInputElement>()), [tilesCount]);
   const activeIndexRef = useRef<number>();
   const { direction } = LOCALE_FEATURES[locale];
+  const { tileFontSize } = getTileSizes(tileSize);
 
   const changeActiveIndex = useCallback(
     (offset: number) => {
@@ -110,7 +112,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   }, [changeActiveIndex, config, direction]);
 
   return (
-    <div className={classNames(styles.rack, className)} onPaste={handlePaste}>
+    <div className={classNames(styles.rack, className)} style={{ fontSize: tileFontSize }} onPaste={handlePaste}>
       {tiles.map(({ character, tile }, index) => (
         <RackTile
           activeIndexRef={activeIndexRef}

package/src/components/Tile/Tile.module.scss

@@ -34,18 +34,10 @@
   }
 
   &.raised {
-    --shadow--size: 2px;
-    --shadow--blur: 2px;
-    --shadow--spread: -1px;
-    --shadow--color: rgba(34, 34, 34, 0.8);
-
-    box-shadow: inset calc(-1 * var(--shadow--size)) calc(-1 * var(--shadow--size)) var(--shadow--blur)
-      var(--shadow--spread) var(--shadow--color);
+    box-shadow: var(--box-shadow--raised);
 
     @include media('<xs') {
-      --shadow--size: 1px;
-      --shadow--spread: 0;
-      --shadow--blur: 1px;
+      box-shadow: var(--box-shadow--raised--subtle);
     }
   }
 
@@ -59,6 +51,13 @@
     color: var(--color--inactive);
   }
 
+  &.invalid {
+    --background-color: var(--color--foreground);
+    --shadow--color: var(--box-shadow--color--inverse);
+
+    color: var(--color--white);
+  }
+
   &.highlighted {
     --background-color: var(--color--primary);
 
@@ -114,23 +113,29 @@
 }
 
 .alert {
-  $size: 30%;
+  --size: 30%;
 
   position: absolute;
-  width: $size;
-  height: $size;
-  background-color: var(--color--error--opposite);
+  width: var(--size);
+  height: var(--size);
+  background: radial-gradient(
+    var(--color--error--opposite),
+    var(--color--error--opposite) 85%,
+    transparent 85%,
+    transparent
+  );
   color: var(--color--error);
+  pointer-events: none;
 
   [dir='ltr'] & {
     top: 0;
     right: 0;
-    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
   }
 
   [dir='rtl'] & {
-    bottom: 0;
-    right: 0;
-    border-bottom-right-radius: inherit;
+    top: 0;
+    left: 0;
+    border-top-left-radius: inherit;
   }
 }

package/src/components/Tile/Tile.tsx

@@ -59,11 +59,8 @@ const Tile: FunctionComponent<Props> = ({
 }) => {
   const locale = useTypedSelector(selectLocale);
   const { animateTile, showTilePoints } = useAppLayout();
-  const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
-  const style = useMemo(
-    () => ({ fontSize: tileFontSize, height: tileSize, width: tileSize }),
-    [tileSize, tileFontSize],
-  );
+  const { pointsFontSize, tileSize } = getTileSizes(size);
+  const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const ref = useRef<HTMLInputElement>(null);
   const mergedRef = useMergeRefs(inputRef ? [ref, inputRef] : [ref]);

package/src/components/Tile/TilePure.tsx

@@ -61,10 +61,9 @@ const TilePure: FunctionComponent<Props> = ({
   <div
     className={classNames(styles.tile, className, {
       [styles.blank]: isBlank,
-      [styles.disabled]: disabled,
       [styles.empty]: !character,
+      [styles.invalid]: !isValid,
       [styles.highlighted]: highlighted,
-      [styles.placeholder]: !character,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
       [styles.points3]: points === 3,

package/src/i18n/constants.ts

@@ -1,4 +1,9 @@
 import { Locale } from '@scrabble-solver/types';
+import { FunctionComponent, SVGAttributes } from 'react';
+
+import { FlagDe, FlagEs, FlagFa, FlagFr, FlagGb, FlagPl, FlagUs } from 'icons';
+
+import styles from './i18n.module.scss';
 
 interface LocaleFeatures {
   direction: 'ltr' | 'rtl';
@@ -51,3 +56,63 @@ export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
     vowels: true,
   },
 };
+
+interface Flag {
+  className: string;
+  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
+  label: string;
+  name: string;
+  value: Locale;
+}
+
+export const LOCALE_FLAGS: Record<Locale, Flag> = {
+  [Locale.EN_GB]: {
+    className: styles.gb,
+    Icon: FlagGb,
+    label: 'English (GB)',
+    name: 'English (GB)',
+    value: Locale.EN_GB,
+  },
+  [Locale.EN_US]: {
+    className: styles.us,
+    Icon: FlagUs,
+    label: 'English (US)',
+    name: 'English (US)',
+    value: Locale.EN_US,
+  },
+  [Locale.FA_IR]: {
+    className: styles.fa,
+    Icon: FlagFa,
+    label: 'فارسی',
+    name: 'Persian',
+    value: Locale.FA_IR,
+  },
+  [Locale.FR_FR]: {
+    className: styles.fr,
+    Icon: FlagFr,
+    label: 'Français',
+    name: 'French',
+    value: Locale.FR_FR,
+  },
+  [Locale.DE_DE]: {
+    className: styles.de,
+    Icon: FlagDe,
+    label: 'Deutsch',
+    name: 'German',
+    value: Locale.DE_DE,
+  },
+  [Locale.PL_PL]: {
+    className: styles.pl,
+    Icon: FlagPl,
+    label: 'Polski',
+    name: 'Polish',
+    value: Locale.PL_PL,
+  },
+  [Locale.ES_ES]: {
+    className: styles.es,
+    Icon: FlagEs,
+    label: 'Español',
+    name: 'Spanish',
+    value: Locale.ES_ES,
+  },
+};

package/src/i18n/de.json

@@ -21,7 +21,7 @@
   "dictionary.empty-state.no-definitions": "Wort existiert im Wörterbuch aber hat keine Definition.",
   "dictionary.empty-state.no-results": "Wort kann nicht im Wörterbuch gefunden werden.",
   "dictionary.empty-state.not-allowed": "Dieses Wort ist nicht erlaubt.",
-  "dictionary.empty-state.uninitialized": "Die Wörterbuchdefinition des letzten markierten Wortes wird hier angezeigt.",
+  "dictionary.empty-state.uninitialized": "Die Wörterbuchdéfinition wird hier angezeigt.",
   "dictionary.input.placeholder": "Durchsuche Wörterbuch...",
   "dictionary.input.title": "Durch Kommas getrennte Wörter",
   "empty-state.error": "Fehler",
@@ -46,10 +46,11 @@
   "remaining-tiles": "Restliche Steine",
   "results": "Ergebnisse",
   "results.empty-state.no-results": "Keine Ergebnisse - kein Wort konnte generiert werden.",
-  "results.empty-state.outdated": "Ergebnisse sind alt. Klicken zum Aktualisieren.",
+  "results.empty-state.outdated": "Ergebnisse sind alt.",
   "results.empty-state.uninitialized": "Wörter die aus deinen Buchstaben generiert wurden erscheinen hier.",
   "results.input.placeholder": "Suchergebnisse... (RegExp)",
   "results.insert": "Hinzufügen",
+  "results.preview": "Vorschau",
   "results.solve": "Lösen",
   "settings": "Einstellungen",
   "settings.autoGroupTiles": "Restliche Steine gruppieren",

package/src/i18n/en.json

@@ -21,7 +21,7 @@
   "dictionary.empty-state.no-definitions": "Word exists in the dictionary but it does not have a definition.",
   "dictionary.empty-state.no-results": "Unable to find word definition in the dictionary.",
   "dictionary.empty-state.not-allowed": "This word is not allowed.",
-  "dictionary.empty-state.uninitialized": "Dictionary definition of the most recently highlighted word will be shown here.",
+  "dictionary.empty-state.uninitialized": "Word definition will be shown here.",
   "dictionary.input.placeholder": "Search dictionary...",
   "dictionary.input.title": "Comma-separated words",
   "empty-state.error": "Error",
@@ -46,10 +46,11 @@
   "remaining-tiles": "Remaining tiles",
   "results": "Results",
   "results.empty-state.no-results": "No results - unable to generate any words.",
-  "results.empty-state.outdated": "Results are outdated. Click below to update.",
+  "results.empty-state.outdated": "Results are outdated.",
   "results.empty-state.uninitialized": "Words generated from your letters will be shown here.",
   "results.input.placeholder": "Search results... (RegExp)",
   "results.insert": "Insert",
+  "results.preview": "Preview",
   "results.solve": "Solve",
   "settings": "Settings",
   "settings.autoGroupTiles": "Group remaining tiles",

package/src/i18n/es.json

@@ -21,7 +21,7 @@
   "dictionary.empty-state.no-definitions": "La palabra existe en el diccionario pero no tiene una definición.",
   "dictionary.empty-state.no-results": "No se puede encontrar la definición de palabra en el diccionario.",
   "dictionary.empty-state.not-allowed": "Esta palabra no es aceptable.",
-  "dictionary.empty-state.uninitialized": "Aquí se mostrará la definición del diccionario de la última palabra resaltada.",
+  "dictionary.empty-state.uninitialized": "Aquí se mostrará la definición del diccionario.",
   "dictionary.input.placeholder": "Busca el diccionario...",
   "dictionary.input.title": "Palabras separadas por comas",
   "empty-state.error": "Error",
@@ -46,10 +46,11 @@
   "remaining-tiles": "Casillas restantes",
   "results": "Resultados",
   "results.empty-state.no-results": "No hay resultados; no se pueden generar palabras",
-  "results.empty-state.outdated": "Los resultados están desactualizados. Haga clic a continuación para actualizar.",
+  "results.empty-state.outdated": "Los resultados están desactualizados.",
   "results.empty-state.uninitialized": "Aquí se mostrarán las palabras generadas a partir de sus letras.",
   "results.input.placeholder": "Busque una solución... (RegExp)",
   "results.insert": "Insertar",
+  "results.preview": "Vista previa",
   "results.solve": "Resolver",
   "settings": "Configuración",
   "settings.autoGroupTiles": "Agrupar casillas restantes",

package/src/i18n/fa.json

@@ -46,10 +46,11 @@
   "remaining-tiles": "کاشی های باقی مانده",
   "results": "نتایج",
   "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
-  "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",
+  "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز.",
   "results.empty-state.uninitialized": "کلمات تولید شده از حروف شما اینجا نمایش داده خواهد شد.",
   "results.input.placeholder": "جستجو در نتایج (RegExp)",
   "results.insert": "وارد کردن",
+  "results.preview": "پیش نمایش",
   "results.solve": "حل کن",
   "settings": "تنظیمات",
   "settings.autoGroupTiles": "کاشی های باقی مانده ی طاقچه را کنار هم قرار بده",

package/src/i18n/fr.json

@@ -21,7 +21,7 @@
   "dictionary.empty-state.no-definitions": "Le mot existe dans le dictionary mais n'a pas de définition.",
   "dictionary.empty-state.no-results": "Impossible de trouver une définition pour ce mot dans le dictionaire.",
   "dictionary.empty-state.not-allowed": "Ce mot n'est pas pas acceptable.",
-  "dictionary.empty-state.uninitialized": "La définition dictionaire du dernier mot surligné sera affichée ici.",
+  "dictionary.empty-state.uninitialized": "La définition dictionaire sera affichée ici.",
   "dictionary.input.placeholder": "Rechercher dans le dictionnaire...",
   "dictionary.input.title": "Mots séparées par des virgules",
   "empty-state.error": "Erreur",
@@ -46,10 +46,11 @@
   "remaining-tiles": "Cases restantes",
   "results": "Résultats",
   "results.empty-state.no-results": "Pas de résultats - impossible de générer des mots.",
-  "results.empty-state.outdated": "Les résultats sont dépassé. Cliquer ci-dessous pour mettre à jour.",
+  "results.empty-state.outdated": "Les résultats sont dépassé.",
   "results.empty-state.uninitialized": "Les mots générés à partir de vos lettres seront affichés ici.",
   "results.input.placeholder": "Rechercher les résultats... (RegExp)",
   "results.insert": "Inserer",
+  "results.preview": "Prévisualisation",
   "results.solve": "Résoudre",
   "settings": "Options",
   "settings.autoGroupTiles": "Grouper les cases restantes",

package/src/i18n/i18n.module.scss

@@ -0,0 +1,27 @@
+.de {
+  --aspect-ratio: var(--flag--de--aspect-ratio);
+}
+
+.es {
+  --aspect-ratio: var(--flag--es--aspect-ratio);
+}
+
+.fa {
+  --aspect-ratio: var(--flag--fa--aspect-ratio);
+}
+
+.fr {
+  --aspect-ratio: var(--flag--fr--aspect-ratio);
+}
+
+.gb {
+  --aspect-ratio: var(--flag--gb--aspect-ratio);
+}
+
+.pl {
+  --aspect-ratio: var(--flag--pl--aspect-ratio);
+}
+
+.us {
+  --aspect-ratio: var(--flag--us--aspect-ratio);
+}

package/src/i18n/pl.json

@@ -21,7 +21,7 @@
   "dictionary.empty-state.no-definitions": "Słowo istnieje w słowniku ale nie posiada definicji.",
   "dictionary.empty-state.no-results": "Nie udało się znaleźć definicji słowa w słowniku.",
   "dictionary.empty-state.not-allowed": "To słowo nie jest dopuszczalne w grach.",
-  "dictionary.empty-state.uninitialized": "Tu zostanie wyświetlona słownikowa definicja ostatnio podświetlonego słowa.",
+  "dictionary.empty-state.uninitialized": "Tu zostanie wyświetlona definicja słowa.",
   "dictionary.input.placeholder": "Szukaj w słowniku...",
   "dictionary.input.title": "Słowa rozdzielone przecinkiem",
   "empty-state.error": "Błąd",
@@ -46,10 +46,11 @@
   "remaining-tiles": "Pozostałe płytki",
   "results": "Wyniki",
   "results.empty-state.no-results": "Brak wyników - nie można wygenerować żadnego słowa.",
-  "results.empty-state.outdated": "Wyniki są nieaktualne. Kliknij poniżej, aby zaktualizować.",
+  "results.empty-state.outdated": "Wyniki są nieaktualne.",
   "results.empty-state.uninitialized": "Tu zostaną wyświetlone słowa wygenerowane z Twoich liter.",
   "results.input.placeholder": "Szukaj rozwiązania... (RegExp)",
   "results.insert": "Wstaw",
+  "results.preview": "Podgląd",
   "results.solve": "Rozwiąż",
   "settings": "Opcje",
   "settings.autoGroupTiles": "Grupuj pozostałe płytki",

package/src/icons/DashCircleFill.svg

@@ -1,3 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/dash-circle-fill/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z" fill="currentColor" />
 </svg>

package/src/icons/EyeFill.svg

@@ -0,0 +1,5 @@
+<!-- https://icons.getbootstrap.com/icons/eye-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" fill="currentColor" />
+  <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -18,15 +18,16 @@ export { default as DashCircleFill } from './DashCircleFill.svg';
 export { default as Eraser } from './Eraser.svg';
 export { default as ExclamationSquareFill } from './ExclamationSquareFill.svg';
 export { default as ExclamationTriangleFill } from './ExclamationTriangleFill.svg';
+export { default as EyeFill } from './EyeFill.svg';
 export { default as Flag } from './Flag.svg';
-export { default as FlagFill } from './FlagFill.svg';
+export { default as FlagDe } from './FlagDe.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFa } from './FlagFa.svg';
+export { default as FlagFill } from './FlagFill.svg';
 export { default as FlagFr } from './FlagFr.svg';
 export { default as FlagGb } from './FlagGb.svg';
 export { default as FlagPl } from './FlagPl.svg';
 export { default as FlagUs } from './FlagUs.svg';
-export { default as FlagDe } from './FlagDe.svg';
 export { default as Github } from './Github.svg';
 export { default as InfoCircleFill } from './InfoCircleFill.svg';
 export { default as Keyboard } from './Keyboard.svg';

package/src/modals/MenuModal/MenuModal.module.scss

@@ -8,10 +8,26 @@
   &:active,
   &:focus,
   &:hover {
-    box-shadow: 0px 1px 1px 0px var(--box-shadow--color);
+    box-shadow: 0 1px 1px 0 var(--box-shadow--color);
   }
 
   & + & {
     margin-top: var(--spacing--l);
   }
 }
+
+.settings {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flag {
+  --height: var(--button--icon--size);
+
+  width: calc(var(--height) * var(--aspect--ratio));
+  height: var(--height);
+  border-radius: var(--border--radius);
+  box-shadow: 0 0 0 1px var(--box-shadow--color);
+}

package/src/modals/MenuModal/MenuModal.tsx

@@ -1,9 +1,10 @@
 import { FunctionComponent } from 'react';
 
 import { Button, Modal } from 'components';
+import { LOCALE_FLAGS } from 'i18n';
 import { BookHalf, CardChecklist, Cog, Github, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
-import { useTranslate } from 'state';
+import { selectLocale, useTranslate, useTypedSelector } from 'state';
 
 import styles from './MenuModal.module.scss';
 
@@ -27,6 +28,8 @@ const Menu: FunctionComponent<Props> = ({
   onShowWords,
 }) => {
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
+  const Flag = LOCALE_FLAGS[locale];
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('menu')} onClose={onClose}>
@@ -59,7 +62,10 @@ const Menu: FunctionComponent<Props> = ({
       </Button.Link>
 
       <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
-        {translate('settings')}
+        <div className={styles.settings}>
+          <span>{translate('settings')}</span>
+          <Flag.Icon className={styles.flag} />
+        </div>
       </Button>
     </Modal>
   );