scrabble-solver 2.10.7 → 2.10.9

package/packages/scrabble-solver/src/components/Tile/Tile.module.scss

@@ -24,18 +24,20 @@
   }
 
   &.blank {
-    --background-color: white;
+    --background-color: var(--color--white);
 
+    .placeholder,
     .character {
-      color: black;
+      color: var(--color--foreground);
     }
   }
 
   &.highlighted {
     --background-color: var(--color--primary);
 
-    color: white;
+    color: var(--color--primary--opposite);
 
+    .placeholder,
     .character {
       color: inherit;
     }
@@ -45,12 +47,6 @@
     }
   }
 
-  &.invalid {
-    --background-color: var(--color--red--light);
-
-    color: var(--color--error);
-  }
-
   &:not(.disabled) {
     .input::selection {
       --background--color: transparent;
@@ -59,7 +55,8 @@
 }
 
 .input,
-.character {
+.character,
+.placeholder {
   padding: 0;
   font-weight: bold;
   text-transform: uppercase;
@@ -77,7 +74,8 @@
   font-size: 16px; // prevent iOS from automatically zooming in on focus
 }
 
-.character {
+.character,
+.placeholder {
   position: absolute;
   top: 0;
   right: 0;
@@ -97,6 +95,18 @@
 
   .raised & {
     box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
+
+    @include media('<xs') {
+      box-shadow: inset -2px -2px 1px -1px rgba(34, 34, 34, 0.8);
+    }
+  }
+}
+
+.character {
+  opacity: 1;
+
+  .empty & {
+    opacity: 0;
   }
 }
 
@@ -130,6 +140,8 @@
   position: absolute;
   width: $size;
   height: $size;
+  background-color: var(--color--error--opposite);
+  color: var(--color--error);
 
   [dir='ltr'] & {
     top: 0;

package/packages/scrabble-solver/src/components/Tile/Tile.tsx

@@ -1,16 +1,19 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
+import mergeRefs from 'merge-refs';
 import {
   ChangeEventHandler,
-  createRef,
   FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
   RefObject,
   useEffect,
   useMemo,
+  useRef,
 } from 'react';
 
+import { useMediaQuery } from 'hooks';
 import { getTileSizes, noop } from 'lib';
+import { EASE_OUT_CUBIC, TILE_APPEAR_DURATION, TILE_APPEAR_KEYFRAMES } from 'parameters';
 import { selectLocale, useTypedSelector } from 'state';
 
 import TilePure from './TilePure';
@@ -42,7 +45,7 @@ const Tile: FunctionComponent<Props> = ({
   character = '',
   disabled,
   highlighted,
-  inputRef: ref,
+  inputRef,
   isBlank,
   isValid,
   placeholder,
@@ -59,21 +62,35 @@ const Tile: FunctionComponent<Props> = ({
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
   const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
-  const inputRef = useMemo<RefObject<HTMLInputElement>>(() => ref || createRef(), [ref]);
+  const ref = useRef<HTMLInputElement>(null);
+  const mergedRef = inputRef ? mergeRefs(ref, inputRef) : ref;
   const isEmpty = !character || character === EMPTY_CELL;
-  const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined';
+  const isLessThanXs = useMediaQuery('<xs');
+  const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined' && !isLessThanXs;
   const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
-    inputRef.current?.select();
+    ref.current?.select();
     onKeyDown(event);
   };
 
   useEffect(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
+    if (autoFocus && ref.current) {
+      ref.current.focus();
     }
-  }, [autoFocus, inputRef]);
+  }, [autoFocus, ref]);
+
+  useEffect(() => {
+    if (!ref.current?.parentElement || !character) {
+      return;
+    }
+
+    ref.current.parentElement.animate(TILE_APPEAR_KEYFRAMES, {
+      duration: TILE_APPEAR_DURATION,
+      easing: EASE_OUT_CUBIC,
+      fill: 'forwards',
+    });
+  }, [character]);
 
   return (
     <TilePure
@@ -85,7 +102,7 @@ const Tile: FunctionComponent<Props> = ({
       className={className}
       disabled={disabled}
       highlighted={highlighted}
-      inputRef={inputRef}
+      inputRef={mergedRef}
       isBlank={isBlank}
       isValid={isValid}
       placeholder={placeholder}

package/packages/scrabble-solver/src/components/Tile/TilePure.tsx

@@ -6,7 +6,7 @@ import {
   FunctionComponent,
   KeyboardEventHandler,
   memo,
-  RefObject,
+  Ref,
 } from 'react';
 
 import { ExclamationSquareFill } from 'icons';
@@ -22,7 +22,7 @@ interface Props {
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
-  inputRef: RefObject<HTMLInputElement>;
+  inputRef: Ref<HTMLInputElement>;
   isBlank?: boolean;
   isValid?: boolean;
   placeholder?: string;
@@ -66,7 +66,6 @@ const TilePure: FunctionComponent<Props> = ({
       [styles.disabled]: disabled,
       [styles.empty]: !character,
       [styles.highlighted]: highlighted,
-      [styles.invalid]: !isValid,
       [styles.raised]: raised,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
@@ -93,8 +92,14 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
+    {placeholder && (
+      <div className={styles.placeholder} style={characterStyle} tabIndex={-1}>
+        {placeholder}
+      </div>
+    )}
+
     <div className={styles.character} style={characterStyle} tabIndex={-1}>
-      {character || placeholder}
+      {character}
     </div>
 
     {canShowPoints && (

package/packages/scrabble-solver/src/components/Tooltip/Tooltip.module.scss

@@ -10,9 +10,9 @@ $arrow-size: 4px;
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
-  background-color: var(--tooltip--background);
-  color: var(--tooltip--foreground);
-  z-index: 200;
+  background-color: var(--color--tooltip--background);
+  color: var(--color--tooltip--foreground);
+  z-index: var(--z-index--tooltip);
 
   &.top {
     .arrow {
@@ -21,7 +21,7 @@ $arrow-size: 4px;
       &::after {
         left: 0;
         bottom: 0;
-        border-top-color: var(--tooltip--background);
+        border-top-color: var(--color--tooltip--background);
         border-bottom: none;
       }
     }
@@ -34,7 +34,7 @@ $arrow-size: 4px;
       &::after {
         left: 0;
         top: 0;
-        border-right-color: var(--tooltip--background);
+        border-right-color: var(--color--tooltip--background);
         border-left: none;
       }
     }
@@ -47,7 +47,7 @@ $arrow-size: 4px;
       &::after {
         top: 0;
         left: 0;
-        border-bottom-color: var(--tooltip--background);
+        border-bottom-color: var(--color--tooltip--background);
         border-top: none;
       }
     }
@@ -60,7 +60,7 @@ $arrow-size: 4px;
       &::after {
         right: 0;
         top: 0;
-        border-left-color: var(--tooltip--background);
+        border-left-color: var(--color--tooltip--background);
         border-right: none;
       }
     }

package/packages/scrabble-solver/src/components/index.ts

@@ -19,6 +19,7 @@ export { default as Rack } from './Rack';
 export { default as Radio } from './Radio';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
+export { default as SeoMessage } from './SeoMessage';
 export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
 export { default as SplashScreen } from './SplashScreen';

package/packages/scrabble-solver/src/hooks/useLocalStorage/useLocalStorageBoard.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -7,6 +7,7 @@ import { boardSlice, localStorage, selectBoard, useTypedSelector } from 'state';
 const useLocalStorageBoard = (): void => {
   const dispatch = useDispatch();
   const board = useTypedSelector(selectBoard);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedBoard = localStorage.getBoard();
@@ -14,13 +15,15 @@ const useLocalStorageBoard = (): void => {
     if (persistedBoard) {
       dispatch(boardSlice.actions.init(persistedBoard));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (board) {
+    if (board && isLoaded) {
       localStorage.setBoard(board);
     }
-  }, [board]);
+  }, [board, isLoaded]);
 };
 
 export default useLocalStorageBoard;

package/packages/scrabble-solver/src/hooks/useLocalStorage/useLocalStorageConfigId.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -7,6 +7,7 @@ import { localStorage, selectConfigId, settingsSlice, useTypedSelector } from 's
 const useLocalStorageConfigId = (): void => {
   const dispatch = useDispatch();
   const configId = useTypedSelector(selectConfigId);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedConfigId = localStorage.getConfigId();
@@ -14,13 +15,15 @@ const useLocalStorageConfigId = (): void => {
     if (persistedConfigId) {
       dispatch(settingsSlice.actions.init({ configId: persistedConfigId }));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (configId) {
+    if (configId && isLoaded) {
       localStorage.setConfigId(configId);
     }
-  }, [configId]);
+  }, [configId, isLoaded]);
 };
 
 export default useLocalStorageConfigId;

package/packages/scrabble-solver/src/hooks/useLocalStorage/useLocalStorageLocale.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -8,6 +8,7 @@ import { localStorage, selectLocale, settingsSlice, useTypedSelector } from 'sta
 const useLocalStorageLocale = (): void => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedLocale = localStorage.getLocale();
@@ -17,13 +18,15 @@ const useLocalStorageLocale = (): void => {
     } else {
       dispatch(settingsSlice.actions.init({ locale: detectLocale() }));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (locale) {
+    if (locale && isLoaded) {
       localStorage.setLocale(locale);
     }
-  }, [locale]);
+  }, [locale, isLoaded]);
 };
 
 export default useLocalStorageLocale;

package/packages/scrabble-solver/src/hooks/useLocalStorage/useLocalStorageRack.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -7,6 +7,7 @@ import { localStorage, rackSlice, selectRack, useTypedSelector } from 'state';
 const useLocalStorageRack = (): void => {
   const dispatch = useDispatch();
   const rack = useTypedSelector(selectRack);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedRack = localStorage.getRack();
@@ -14,13 +15,15 @@ const useLocalStorageRack = (): void => {
     if (persistedRack) {
       dispatch(rackSlice.actions.init(persistedRack));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (rack) {
+    if (rack && isLoaded) {
       localStorage.setRack(rack);
     }
-  }, [rack]);
+  }, [isLoaded, rack]);
 };
 
 export default useLocalStorageRack;

package/packages/scrabble-solver/src/i18n/de.json

@@ -22,6 +22,7 @@
   "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.input.placeholder": "Durchsuche Wörterbuch...",
+  "dictionary.input.title": "Durch Kommas getrennte Wörter",
   "empty-state.error": "Fehler",
   "empty-state.info": "Info",
   "empty-state.success": "Juhuu!",

package/packages/scrabble-solver/src/i18n/en.json

@@ -22,6 +22,7 @@
   "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.input.placeholder": "Search dictionary...",
+  "dictionary.input.title": "Comma-separated words",
   "empty-state.error": "Error",
   "empty-state.info": "Info",
   "empty-state.success": "Yeah!",

package/packages/scrabble-solver/src/i18n/es.json

@@ -22,6 +22,7 @@
   "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.input.placeholder": "Busca el diccionario...",
+  "dictionary.input.title": "Palabras separadas por comas",
   "empty-state.error": "Error",
   "empty-state.info": "Info",
   "empty-state.success": "Sí!",

package/packages/scrabble-solver/src/i18n/fa.json

@@ -22,6 +22,7 @@
   "dictionary.empty-state.not-allowed": "این کلمه مجاز نیست.",
   "dictionary.empty-state.uninitialized": "معنی لغت اینجا نمایش داده خواهد شد.",
   "dictionary.input.placeholder": "جستجو در فرهنگ لغت ...",
+  "dictionary.input.title": "کلمات جدا شده با کاما",
   "empty-state.error": "خطا",
   "empty-state.info": "اطلاعات",
   "empty-state.success": "حله!",

package/packages/scrabble-solver/src/i18n/fr.json

@@ -22,6 +22,7 @@
   "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.input.placeholder": "Rechercher dans le dictionnaire...",
+  "dictionary.input.title": "Mots séparées par des virgules",
   "empty-state.error": "Erreur",
   "empty-state.info": "Info",
   "empty-state.success": "Ouais!",

package/packages/scrabble-solver/src/i18n/pl.json

@@ -22,6 +22,7 @@
   "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.input.placeholder": "Szukaj w słowniku...",
+  "dictionary.input.title": "Słowa rozdzielone przecinkiem",
   "empty-state.error": "Błąd",
   "empty-state.info": "Info",
   "empty-state.success": "Hurra!",

package/packages/scrabble-solver/src/icons/Flag.svg

@@ -1,4 +1,4 @@
-<!-- https://icons.getbootstrap.com/icons/flag-fill/ -->
+<!-- https://icons.getbootstrap.com/icons/flag/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001" fill="currentColor" />
+  <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001M14 1.221c-.22.078-.48.167-.766.255-.81.252-1.872.523-2.734.523-.886 0-1.592-.286-2.203-.534l-.008-.003C7.662 1.21 7.139 1 6.5 1c-.669 0-1.606.229-2.415.478A21.294 21.294 0 0 0 3 1.845v6.433c.22-.078.48-.167.766-.255C4.576 7.77 5.638 7.5 6.5 7.5c.847 0 1.548.28 2.158.525l.028.01C9.32 8.29 9.86 8.5 10.5 8.5c.668 0 1.606-.229 2.415-.478A21.317 21.317 0 0 0 14 7.655V1.222z" fill="currentColor" />
 </svg>

package/packages/scrabble-solver/src/icons/FlagFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/flag-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001" fill="currentColor" />
+</svg>

package/packages/scrabble-solver/src/icons/Square.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/square/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" fill="currentColor" />
+</svg>

package/packages/scrabble-solver/src/icons/SquareFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/square-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2z" fill="currentColor" />
+</svg>

package/packages/scrabble-solver/src/icons/index.ts

@@ -19,6 +19,7 @@ export { default as Eraser } from './Eraser.svg';
 export { default as ExclamationSquareFill } from './ExclamationSquareFill.svg';
 export { default as ExclamationTriangleFill } from './ExclamationTriangleFill.svg';
 export { default as Flag } from './Flag.svg';
+export { default as FlagFill } from './FlagFill.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFa } from './FlagFa.svg';
 export { default as FlagFr } from './FlagFr.svg';
@@ -34,4 +35,6 @@ export { default as Sack } from './Sack.svg';
 export { default as Search } from './Search.svg';
 export { default as SortDown } from './SortDown.svg';
 export { default as SortUp } from './SortUp.svg';
+export { default as Square } from './Square.svg';
+export { default as SquareFill } from './SquareFill.svg';
 export { default as Star } from './Star.svg';

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.module.scss

@@ -5,7 +5,7 @@
   transition: var(--transition);
 
   &.finished {
-    opacity: 0.2;
+    opacity: var(--opacity--disabled);
   }
 
   &.overused {

package/packages/scrabble-solver/src/modals/ResultsModal/ResultsModal.module.scss

@@ -3,5 +3,5 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: white;
+  background-color: var(--color--white);
 }

package/packages/scrabble-solver/src/modals/SettingsModal/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -40,12 +40,11 @@ const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }
 
   return (
     <div className={className}>
-      {options.map((option, index) => (
+      {options.map((option) => (
         <Radio
           checked={value === parseValue(option.value)}
           className={styles.option}
           disabled={disabled}
-          id={`autoGroupTiles-${index}`}
           key={option.value}
           name="autoGroupTiles"
           value={option.value}

package/packages/scrabble-solver/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.module.scss

@@ -9,5 +9,5 @@
 .label {
   display: flex;
   align-items: center;
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--font--family--latin);
 }

package/packages/scrabble-solver/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.tsx

@@ -22,12 +22,11 @@ const ConfigSetting: FunctionComponent<Props> = ({ className, disabled }) => {
 
   return (
     <div className={className}>
-      {options.map((option, index) => (
+      {options.map((option) => (
         <Radio
           checked={configId === option.value}
           className={styles.option}
           disabled={disabled}
-          id={`configId-${index}`}
           key={option.value}
           name="configId"
           value={option.value}

package/packages/scrabble-solver/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss

@@ -1,17 +1,8 @@
 @import 'styles/mixins';
 
 .option {
-  margin-bottom: var(--spacing--m);
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &:hover,
-  &.checked {
-    .flag {
-      box-shadow: var(--box-shadow);
-    }
+  & + & {
+    margin-top: var(--spacing--m);
   }
 }
 
@@ -19,10 +10,10 @@
   display: flex;
   align-items: center;
   gap: var(--spacing--l);
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--font--family--latin);
 
   &.fa {
-    font-family: 'Vazirmatn', 'Open Sans', sans-serif;
+    font-family: var(--font--family--arabic);
   }
 }
 
@@ -30,17 +21,16 @@
   $height: 32px;
 
   height: $height;
-  box-shadow: var(--box-shadow--null);
   transition: var(--transition);
 
-  &.es {
-    $aspect-ratio: 1.5;
+  &.de {
+    $aspect-ratio: 1.6;
 
     width: $height * $aspect-ratio;
   }
 
-  &.fr {
-    $aspect-ratio: 1.6;
+  &.es {
+    $aspect-ratio: 1.5;
 
     width: $height * $aspect-ratio;
   }
@@ -51,6 +41,12 @@
     width: $height * $aspect-ratio;
   }
 
+  &.fr {
+    $aspect-ratio: 1.6;
+
+    width: $height * $aspect-ratio;
+  }
+
   &.gb {
     $aspect-ratio: 2;
 
@@ -68,10 +64,4 @@
 
     width: $height * $aspect-ratio;
   }
-
-  &.de {
-    $aspect-ratio: 1.6;
-
-    width: $height * $aspect-ratio;
-  }
 }

package/packages/scrabble-solver/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.tsx

@@ -25,14 +25,13 @@ const LocaleSetting: FunctionComponent<Props> = ({ className, disabled }) => {
 
   return (
     <div className={className}>
-      {options.map(({ Icon, ...option }, index) => (
+      {options.map(({ Icon, ...option }) => (
         <Radio
           checked={locale === option.value}
           className={classNames(styles.option, className, {
             [styles.checked]: locale === option.value,
           })}
           disabled={disabled}
-          id={`locale-${index}`}
           key={option.value}
           name="locale"
           value={option.value}