@scrabble-solver/scrabble-solver 2.10.3 → 2.10.5

package/src/components/Tile/TilePure.tsx

@@ -17,11 +17,11 @@ interface Props {
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
+  characterStyle?: CSSProperties;
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
   inputRef: RefObject<HTMLInputElement>;
-  inputStyle?: CSSProperties;
   isBlank?: boolean;
   isValid?: boolean;
   placeholder?: string;
@@ -40,11 +40,11 @@ const TilePure: FunctionComponent<Props> = ({
   autoFocus,
   canShowPoints,
   character,
+  characterStyle,
   className,
   disabled,
   highlighted,
   inputRef,
-  inputStyle,
   isBlank,
   isValid,
   placeholder,
@@ -61,6 +61,8 @@ const TilePure: FunctionComponent<Props> = ({
   <div
     className={classNames(styles.tile, className, {
       [styles.blank]: isBlank,
+      [styles.disabled]: disabled,
+      [styles.empty]: !character,
       [styles.highlighted]: highlighted,
       [styles.invalid]: !isValid,
       [styles.raised]: raised,
@@ -77,12 +79,10 @@ const TilePure: FunctionComponent<Props> = ({
       autoComplete="off"
       autoCorrect="off"
       autoFocus={autoFocus}
-      className={styles.character}
+      className={styles.input}
       disabled={disabled}
-      placeholder={placeholder}
       ref={inputRef}
       spellCheck={false}
-      style={inputStyle}
       tabIndex={tabIndex}
       value={character || ''}
       onChange={onChange}
@@ -90,6 +90,10 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
+    <div className={styles.character} style={characterStyle} tabIndex={-1}>
+      {character || placeholder}
+    </div>
+
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>
         {pointsFormatted}

package/src/components/Tooltip/Tooltip.module.scss

@@ -12,14 +12,13 @@ $arrow-size: 4px;
   border-radius: var(--border--radius);
   background-color: var(--tooltip--background);
   color: var(--tooltip--foreground);
-  font-size: var(--font--size--s);
   z-index: 200;
 
   &.top {
     .arrow {
       bottom: -$arrow-size;
 
-      &:after {
+      &::after {
         left: 0;
         bottom: 0;
         border-top-color: var(--tooltip--background);
@@ -32,7 +31,7 @@ $arrow-size: 4px;
     .arrow {
       left: -$arrow-size;
 
-      &:after {
+      &::after {
         left: 0;
         top: 0;
         border-right-color: var(--tooltip--background);
@@ -45,7 +44,7 @@ $arrow-size: 4px;
     .arrow {
       top: -$arrow-size;
 
-      &:after {
+      &::after {
         top: 0;
         left: 0;
         border-bottom-color: var(--tooltip--background);
@@ -58,7 +57,7 @@ $arrow-size: 4px;
     .arrow {
       right: -$arrow-size;
 
-      &:after {
+      &::after {
         right: 0;
         top: 0;
         border-left-color: var(--tooltip--background);
@@ -73,7 +72,7 @@ $arrow-size: 4px;
   width: 2 * $arrow-size;
   height: 2 * $arrow-size;
 
-  &:after {
+  &::after {
     content: ' ';
     position: absolute;
     height: 0;

package/src/components/index.ts

@@ -6,26 +6,25 @@ export { default as Dictionary } from './Dictionary';
 export { default as DictionaryInput } from './DictionaryInput';
 export { default as EmptyState } from './EmptyState';
 export { default as Key } from './Key';
-export { default as KeyMap } from './KeyMap';
 export { default as Loading } from './Loading';
 export { default as Logo } from './Logo';
+export { default as LogoSplashScreen } from './LogoSplashScreen';
+export { default as Modal } from './Modal';
 export { default as NavButtons } from './NavButtons';
 export { default as NotFound } from './NotFound';
 export { default as PlainTiles } from './PlainTiles';
+export { default as Progress } from './Progress';
 export { default as Rack } from './Rack';
 export { default as Radio } from './Radio';
-export { default as RemainingTiles } from './RemainingTiles';
+export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
-export { default as Screen } from './Screen';
-export { default as Settings } from './Settings';
-export { default as Sidebar } from './Sidebar';
+export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
-export { default as Splash } from './Splash';
+export { default as SplashScreen } from './SplashScreen';
 export { default as SquareButton } from './SquareButton';
 export { default as SvgFontCss } from './SvgFontCss';
 export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';
 export { default as Well } from './Well';
-export { default as Words } from './Words';

package/src/hooks/index.ts

@@ -1,7 +1,7 @@
 export { default as useDirection } from './useDirection';
-export { default as useIsTablet } from './useIsTablet';
 export { default as useIsTouchDevice } from './useIsTouchDevice';
 export { default as useLanguage } from './useLanguage';
 export { default as useLocalStorage } from './useLocalStorage';
+export { default as useMediaQuery } from './useMediaQuery';
 export { default as usePortal } from './usePortal';
 export { default as useUniqueId } from './useUniqueId';

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,11 @@
+import { buildMediaQuery } from 'include-media-query-builder';
+import { useMedia } from 'react-use';
+
+import { BREAKPOINTS } from 'parameters';
+
+const useMediaQuery = (query: string | string[], defaultState?: boolean | undefined): boolean => {
+  const mediaQuery = buildMediaQuery(BREAKPOINTS, query);
+  return useMedia(mediaQuery, defaultState);
+};
+
+export default useMediaQuery;

package/src/hooks/usePortal.tsx

@@ -29,7 +29,7 @@ const usePortal = (children: ReactNode, { disabled = false, tagName = 'div' }: P
       // "Attempted to synchronously unmount a root while React was already
       // rendering. React cannot finish unmounting the root until the current
       // render has completed, which may lead to a race condition.""
-      setTimeout(() => {
+      globalThis.setTimeout(() => {
         rootRef.current = null;
         root.unmount();
         element.remove();

package/src/i18n/de.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Lösen starten",
   "keyMap.rack": "Ablage",
   "keyMap.rack.insert-blank": "Blanko hinzufügen (Leertaste)",
+  "menu": "Menü",
   "rack.placeholder": "Steine…",
   "remaining-tiles": "Restliche Steine",
+  "results": "Ergebnisse",
   "results.empty-state.no-filtered-results": "Keine Ergebnisse für diese Anfrage.",
   "results.empty-state.no-results": "Keine Ergebnisse - kein Wort konnte generiert werden.",
   "results.empty-state.outdated": "Ergebnisse sind alt. Klicken zum Aktualisieren.",

package/src/i18n/en.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Start solving",
   "keyMap.rack": "Rack",
   "keyMap.rack.insert-blank": "Insert blank (spacebar)",
+  "menu": "Menu",
   "rack.placeholder": "Letters",
   "remaining-tiles": "Remaining tiles",
+  "results": "Results",
   "results.empty-state.no-filtered-results": "No result matches this query.",
   "results.empty-state.no-results": "No results - unable to generate any words.",
   "results.empty-state.outdated": "Results are outdated. Click below to update.",

package/src/i18n/es.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Empezar a resolver",
   "keyMap.rack": "Estante",
   "keyMap.rack.insert-blank": "Insertar espacio en blanco (barra espaciadora)",
+  "menu": "Menú",
   "rack.placeholder": "Letras…",
   "remaining-tiles": "Casillas restantes",
+  "results": "Resultados",
   "results.empty-state.no-filtered-results": "Ningún resultado coincide con esta consulta.",
   "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.",

package/src/i18n/fa.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "حل کردن",
   "keyMap.rack": "طاقچه",
   "keyMap.rack.insert-blank": "وارد کردن کاشی خالی (دکمه اسپیس)",
+  "menu": "منو",
   "rack.placeholder": "لیستحرف",
   "remaining-tiles": "کاشی های باقی مانده",
+  "results": "نتایج",
   "results.empty-state.no-filtered-results": "پاسخی یافت نشد.",
   "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
   "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",

package/src/i18n/fr.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Commencer la résolution",
   "keyMap.rack": "Chevalet",
   "keyMap.rack.insert-blank": "Inserer une case vide (spacebar)",
+  "menu": "Menu",
   "rack.placeholder": "Lettres",
   "remaining-tiles": "Cases restantes",
+  "results": "Résultats",
   "results.empty-state.no-filtered-results": "Aucun résultat ne correspond à cette requête",
   "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.",

package/src/i18n/pl.json

@@ -35,8 +35,10 @@
   "keyMap.board-and-rack.submit": "Rozpocznij wyszukiwanie",
   "keyMap.rack": "Stojak",
   "keyMap.rack.insert-blank": "Wstaw blanka (spacja)",
+  "menu": "Menu",
   "rack.placeholder": "Literki",
   "remaining-tiles": "Pozostałe płytki",
+  "results": "Wyniki",
   "results.empty-state.no-filtered-results": "Żaden wynik nie pasuje do tej kwerendy.",
   "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ć.",

package/src/icons/CardChecklist.svg

@@ -0,0 +1,5 @@
+<!-- https://icons.getbootstrap.com/icons/card-checklist/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z" fill="currentColor" />
+  <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z" fill="currentColor" />
+</svg>

package/src/icons/Check.svg

@@ -1,4 +1,4 @@
-<!-- https://icons.getbootstrap.com/icons/check/ -->
+<!-- https://icons.getbootstrap.com/icons/check2/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" fill="currentColor" />
+  <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" fill="currentColor" />
 </svg>

package/src/icons/ChevronDown.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-down/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" fill="currentColor" />
+</svg>

package/src/icons/CrossCircleFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/x-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 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" fill="currentColor" />
+</svg>

package/src/icons/ExclamationTriangleFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/exclamation-triangle-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" fill="currentColor" />
+</svg>

package/src/icons/InfoCircleFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/info-circle-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" fill="currentColor" />
+</svg>

package/src/icons/List.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/list/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" >
+  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" fill="currentColor" />
+</svg>

package/src/icons/Search.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/search/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -3,15 +3,19 @@ export { default as ArrowLeft } from './ArrowLeft.svg';
 export { default as ArrowRight } from './ArrowRight.svg';
 export { default as ArrowUp } from './ArrowUp.svg';
 export { default as BookHalf } from './BookHalf.svg';
+export { default as CardChecklist } from './CardChecklist.svg';
 export { default as Check } from './Check.svg';
 export { default as CheckboxChecked } from './CheckboxChecked.svg';
 export { default as CheckboxEmpty } from './CheckboxEmpty.svg';
+export { default as ChevronDown } from './ChevronDown.svg';
 export { default as Cog } from './Cog.svg';
 export { default as Cross } from './Cross.svg';
-export { default as CrossFill } from './CrossFill.svg';
+export { default as CrossCircleFill } from './CrossCircleFill.svg';
+export { default as CrossSquareFill } from './CrossSquareFill.svg';
 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 Flag } from './Flag.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFa } from './FlagFa.svg';
@@ -21,9 +25,11 @@ 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';
-export { default as Play } from './Play.svg';
+export { default as List } from './List.svg';
 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 Star } from './Star.svg';

package/src/{components/KeyMap/KeyMap.tsx → modals/KeyMapModal/KeyMapModal.tsx}

@@ -1,10 +1,8 @@
 import { FunctionComponent } from 'react';
 
+import { Key, Modal } from 'components';
 import { selectConfig, useTranslate, useTypedSelector } from 'state';
 
-import Key from '../Key';
-import Sidebar from '../Sidebar';
-
 import { Mapping } from './components';
 import { ARROWS, BACKSPACE, CTRL, DEL, ENTER, SPACE } from './keys';
 
@@ -14,13 +12,13 @@ interface Props {
   onClose: () => void;
 }
 
-const KeyMap: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
   const config = useTypedSelector(selectConfig);
 
   return (
-    <Sidebar className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
-      <Sidebar.Section title={translate('keyMap.board-and-rack')}>
+    <Modal className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
+      <Modal.Section title={translate('keyMap.board-and-rack')}>
         <Mapping description={translate('keyMap.board-and-rack.navigate')} mapping={[ARROWS]} />
         <Mapping description={translate('keyMap.board-and-rack.remove-tile')} mapping={[DEL, BACKSPACE]} />
         <Mapping description={translate('keyMap.board-and-rack.submit')} mapping={[ENTER]} />
@@ -39,18 +37,18 @@ const KeyMap: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
             ]}
           />
         )}
-      </Sidebar.Section>
+      </Modal.Section>
 
-      <Sidebar.Section title={translate('keyMap.board')}>
+      <Modal.Section title={translate('keyMap.board')}>
         <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE, [CTRL, <Key key="b">B</Key>]]} />
         <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[[CTRL, ARROWS]]} />
-      </Sidebar.Section>
+      </Modal.Section>
 
-      <Sidebar.Section title={translate('keyMap.rack')}>
+      <Modal.Section title={translate('keyMap.rack')}>
         <Mapping description={translate('keyMap.rack.insert-blank')} mapping={[SPACE]} />
-      </Sidebar.Section>
-    </Sidebar>
+      </Modal.Section>
+    </Modal>
   );
 };
 
-export default KeyMap;
+export default KeyMapModal;

package/src/modals/KeyMapModal/index.ts

@@ -0,0 +1 @@
+export { default } from './KeyMapModal';

package/src/{components/KeyMap → modals/KeyMapModal}/keys.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 
+import { Key } from 'components';
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'icons';
 import { isMac } from 'lib';
 
-import Key from '../Key';
-
 export const ARROW_DOWN = (
   <Key>
     <ArrowLeft />

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

@@ -0,0 +1,11 @@
+@import 'styles/mixins';
+
+.button {
+  width: 100%;
+  margin-bottom: var(--spacing--m);
+  text-transform: none;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

package/src/modals/MenuModal/MenuModal.tsx

@@ -0,0 +1,56 @@
+import { FunctionComponent } from 'react';
+
+import { Button, Modal } from 'components';
+import { CardChecklist, Cog, Github, Sack } from 'icons';
+import { GITHUB_PROJECT_URL } from 'parameters';
+import { useTranslate } from 'state';
+
+import styles from './MenuModal.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onShowRemainingTiles: () => void;
+  onShowSettings: () => void;
+  onShowWords: () => void;
+}
+
+const Menu: FunctionComponent<Props> = ({
+  className,
+  isOpen,
+  onClose,
+  onShowRemainingTiles,
+  onShowSettings,
+  onShowWords,
+}) => {
+  const translate = useTranslate();
+
+  return (
+    <Modal className={className} isOpen={isOpen} title={translate('menu')} onClose={onClose}>
+      <Button className={styles.button} Icon={Sack} onClick={onShowRemainingTiles}>
+        {translate('remaining-tiles')}
+      </Button>
+
+      <Button className={styles.button} Icon={CardChecklist} onClick={onShowWords}>
+        {translate('words')}
+      </Button>
+
+      <Button.Link
+        className={styles.button}
+        href={GITHUB_PROJECT_URL}
+        Icon={Github}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {translate('github')}
+      </Button.Link>
+
+      <Button className={styles.button} Icon={Cog} onClick={onShowSettings}>
+        {translate('settings')}
+      </Button>
+    </Modal>
+  );
+};
+
+export default Menu;

package/src/modals/MenuModal/index.ts

@@ -0,0 +1 @@
+export { default } from './MenuModal';

package/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss

@@ -0,0 +1,28 @@
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing--l);
+}
+
+.badge {
+  [dir='ltr'] & {
+    margin-left: var(--spacing--m);
+  }
+
+  [dir='rtl'] & {
+    margin-right: var(--spacing--m);
+  }
+}
+
+.character {
+  display: flex;
+  flex: 0 1;
+  max-width: 50px;
+}

package/src/{components/RemainingTiles/RemainingTiles.tsx → modals/RemainingTilesModal/RemainingTilesModal.tsx}

@@ -1,13 +1,11 @@
 import { FunctionComponent } from 'react';
 
+import { Badge, Modal } from 'components';
 import { LOCALE_FEATURES } from 'i18n';
 import { selectLocale, selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
 
-import Badge from '../Badge';
-import Sidebar from '../Sidebar';
-
-import Character from './Character';
-import styles from './RemainingTiles.module.scss';
+import { Character } from './components';
+import styles from './RemainingTilesModal.module.scss';
 
 interface Props {
   className?: string;
@@ -15,20 +13,20 @@ interface Props {
   onClose: () => void;
 }
 
-const RemainingTiles: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const RemainingTilesModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const groups = useTypedSelector(selectRemainingTilesGroups);
   const { direction } = LOCALE_FEATURES[locale];
 
   return (
-    <Sidebar className={className} isOpen={isOpen} title={translate('remaining-tiles')} onClose={onClose}>
+    <Modal className={className} isOpen={isOpen} title={translate('remaining-tiles')} onClose={onClose}>
       {groups.map(({ remainingCount, tiles, translationKey, totalCount }) => {
         const current = direction === 'ltr' ? remainingCount : totalCount;
         const total = direction === 'ltr' ? totalCount : remainingCount;
 
         return (
-          <Sidebar.Section
+          <Modal.Section
             key={translationKey}
             title={
               <span className={styles.title}>
@@ -41,14 +39,18 @@ const RemainingTiles: FunctionComponent<Props> = ({ className, isOpen, onClose }
           >
             <div className={styles.content}>
               {tiles.map((tile) => {
-                return <Character key={tile.character} tile={tile} />;
+                return (
+                  <div className={styles.character} key={tile.character}>
+                    <Character tile={tile} />
+                  </div>
+                );
               })}
             </div>
-          </Sidebar.Section>
+          </Modal.Section>
         );
       })}
-    </Sidebar>
+    </Modal>
   );
 };
 
-export default RemainingTiles;
+export default RemainingTilesModal;

package/src/{components/RemainingTiles → modals/RemainingTilesModal/components/Character}/Character.module.scss

@@ -12,7 +12,7 @@
     opacity: 1;
 
     .tile {
-      &:after {
+      &::after {
         position: absolute;
         top: 0;
         left: 0;
@@ -25,8 +25,12 @@
   }
 }
 
+.remaining {
+  height: 6px;
+  margin-top: var(--spacing--m);
+}
+
 .count {
   padding: var(--spacing--xs) 0;
-  text-align: center;
-  font-size: var(--font--size--s);
+  white-space: nowrap;
 }