@scrabble-solver/scrabble-solver 2.11.5 → 2.11.7

package/src/components/Board/lib/getBonusColor.ts

@@ -0,0 +1,18 @@
+import { BONUS_WORD } from '@scrabble-solver/constants';
+import { Bonus } from '@scrabble-solver/types';
+
+import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from 'parameters';
+
+const getBonusColor = (bonus: Bonus): string => {
+  if (bonus.type === BONUS_WORD) {
+    return COLOR_BONUS_WORD[bonus.multiplier];
+  }
+
+  if (bonus.score) {
+    return COLOR_BONUS_CHARACTER[bonus.score];
+  }
+
+  return COLOR_BONUS_CHARACTER_MULTIPLIER[bonus.multiplier];
+};
+
+export default getBonusColor;

package/src/components/Board/lib/index.ts

@@ -1 +1,2 @@
+export { default as getBonusColor } from './getBonusColor';
 export { default as getPositionInGrid } from './getPositionInGrid';

package/src/components/Dictionary/Dictionary.module.scss

@@ -49,7 +49,6 @@
 
 .word {
   margin-bottom: var(--spacing--m);
-  font-family: var(--font--family--title);
   font-size: var(--font--size--h2);
   text-transform: uppercase;
 }

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -1,9 +1,9 @@
-import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import classNames from 'classnames';
 import { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { dictionarySlice, selectDictionary, useTranslate, useTypedSelector } from 'state';
+import { LOCALE_FEATURES } from 'i18n';
+import { dictionarySlice, selectDictionary, selectLocale, useTranslate, useTypedSelector } from 'state';
 
 import styles from './DictionaryInput.module.scss';
 
@@ -14,7 +14,9 @@ interface Props {
 const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const { input } = useTypedSelector(selectDictionary);
+  const { comma } = LOCALE_FEATURES[locale];
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     dispatch(dictionarySlice.actions.changeInput(event.target.value));
@@ -29,7 +31,7 @@ const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     <form className={classNames(styles.dictionaryInput, className)} onSubmit={handleSubmit}>
       <input
         className={styles.input}
-        pattern={`.*[^\\s${COMMA_ARABIC}${COMMA_LATIN}].*`}
+        pattern={`.*[^\\s${comma}].*`}
         placeholder={translate('dictionary.input.placeholder')}
         required
         title={translate('dictionary.input.title')}

package/src/components/EmptyState/EmptyState.module.scss

@@ -1,6 +1,5 @@
 .emptyState {
   padding: var(--spacing--xl);
-  font-family: var(--font--family);
   color: var(--color--foreground--secondary);
   text-align: center;
   text-transform: none;

package/src/components/Key/Key.module.scss

@@ -1,4 +1,4 @@
-$key-size: 28px;
+$key-size: 36px;
 $icon-size: 15px;
 
 .key {

package/src/components/PlainTiles/PlainTiles.tsx

@@ -1,11 +1,6 @@
 import classNames from 'classnames';
 import { CSSProperties, FunctionComponent, useMemo } from 'react';
 
-import { LOCALE_FEATURES } from 'i18n';
-import { selectLocale, useTypedSelector } from 'state';
-
-import SvgFontCss from '../SvgFontCss';
-
 import { createPlainTiles, getViewbox } from './lib';
 import styles from './PlainTiles.module.scss';
 import Tile from './Tile';
@@ -21,8 +16,6 @@ interface Props {
 }
 
 const PlainTiles: FunctionComponent<Props> = ({ className, color, content, dropShadow, showPoints, style, wave }) => {
-  const locale = useTypedSelector(selectLocale);
-  const { fontFamily } = LOCALE_FEATURES[locale];
   const tiles = useMemo(() => createPlainTiles({ color, content, showPoints }), [color, content, showPoints]);
 
   return (
@@ -35,14 +28,11 @@ const PlainTiles: FunctionComponent<Props> = ({ className, color, content, dropS
       viewBox={getViewbox(content)}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <SvgFontCss fontFamily={fontFamily} />
-
       {tiles.map((tile, index) => (
         <Tile
           character={tile.character}
           className={styles.tile}
           color={tile.color}
-          fontFamily={fontFamily}
           key={index}
           points={tile.points}
           size={tile.size}

package/src/components/PlainTiles/Tile.tsx

@@ -4,7 +4,6 @@ interface Props {
   character: string;
   className?: string;
   color: string;
-  fontFamily: string;
   points?: number;
   size: number;
   transform?: string;
@@ -12,13 +11,12 @@ interface Props {
   y: number;
 }
 
-const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamily, points, size, transform, x, y }) => (
+const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, transform, x, y }) => (
   <g className={className} transform={transform}>
     <rect fill={color} height={size} rx={size * 0.15} width={size} x={x} y={y} />
 
     <text
       dominantBaseline="central"
-      fontFamily={fontFamily}
       fontSize={size * 0.6}
       fontWeight="bold"
       textAnchor="middle"
@@ -31,7 +29,6 @@ const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamil
     {typeof points === 'number' && (
       <text
         dominantBaseline="text-after-edge"
-        fontFamily={fontFamily}
         fontSize={size * 0.25}
         fontWeight="bold"
         textAnchor="end"

package/src/components/Results/Cell.tsx

@@ -22,9 +22,9 @@ const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, va
   const triggerProps = useTooltip(`${translate(translationKey)}: ${tooltip || formattedValue}`);
 
   return (
-    <span className={classNames(styles.cell, className)} {...triggerProps}>
+    <div className={classNames(styles.cell, className)} {...triggerProps}>
       {formattedValue}
-    </span>
+    </div>
   );
 };
 

package/src/components/Results/Result.tsx

@@ -30,10 +30,10 @@ const Result = ({ data, index, style }: Props): ReactElement => {
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
-  const { consonants, vowels } = LOCALE_FEATURES[locale];
+  const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
-  const otherWords = result.words.slice(1).join(' / ').toLocaleUpperCase();
+  const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
   const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
@@ -60,11 +60,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     >
       <span className={styles.resultContent}>
         {enabledColumns[ResultColumn.Word] && (
-          <Cell
-            className={styles.word}
-            translationKey="common.word"
-            value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
-          />
+          <Cell className={styles.word} translationKey="common.word" value={result.word} />
         )}
 
         {enabledColumns[ResultColumn.TilesCount] && (
@@ -87,7 +83,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
           <Cell
             className={styles.stat}
             translationKey="common.words"
-            tooltip={`${result.wordsCount} (${result.words.join(' / ').toLocaleUpperCase()})`}
+            tooltip={`${result.wordsCount.toLocaleString(locale)} (${words.join(separator)})`}
             value={result.wordsCount}
           />
         )}

package/src/components/Results/Results.module.scss

@@ -10,7 +10,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   background: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-  font-family: var(--font--family--title);
 }
 
 .emptyState {
@@ -61,7 +60,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   cursor: pointer;
   text-transform: uppercase;
   transition: var(--transition);
-  padding: var(--spacing--s) 0;
 
   &:focus,
   &:hover {
@@ -136,6 +134,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 100%;
 
   .word {
     @include ellipsis;
@@ -146,8 +145,10 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
   padding: 0 var(--spacing--s);
   gap: var(--spacing--s);
+  line-height: var(--results--item--height);
 
   .result &:first-child,
   .headerButton:first-child & {
@@ -181,12 +182,12 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .word {
-  flex: 1 0 180px;
+  flex: 1 0;
   text-transform: uppercase;
 }
 
 .stat {
-  $width: 50px;
+  $width: 55px;
 
   flex: 0 0 $width;
   max-width: $width;

package/src/components/Solver/Solver.tsx

@@ -34,7 +34,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { cellSize, maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
+  const { maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
@@ -93,7 +93,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
       <div className={styles.container}>
         <div className={styles.content}>
           <form className={styles.boardContainer} onSubmit={handleSubmit}>
-            <Board cellSize={cellSize} className={styles.board} />
+            <Board className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 

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

@@ -1,10 +1,12 @@
 .tooltip {
+  max-width: var(--tooltip--max-width);
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
   background-color: var(--color--tooltip--background);
   color: var(--color--tooltip--foreground);
   z-index: var(--z-index--tooltip);
+  text-align: center;
 }
 
 .arrow {

package/src/components/index.ts

@@ -22,7 +22,5 @@ export { default as ResultsInput } from './ResultsInput';
 export { default as SeoMessage } from './SeoMessage';
 export { default as Solver } from './Solver';
 export { default as Spinner } from './Spinner';
-export { default as SvgFontCss } from './SvgFontCss';
-export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';

package/src/hooks/useAppLayout.ts

@@ -60,6 +60,7 @@ const useAppLayout = () => {
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
     animateTile: !isLessThanXs,
+    boardSize,
     cellSize,
     dictionaryHeight,
     isModalFullWidth: isLessThanS,

package/src/hooks/useDirection.ts

@@ -1,9 +1,9 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 
 import { noop } from 'lib';
 
 const useDirection = (direction: 'ltr' | 'rtl') => {
-  useLayoutEffect(() => {
+  useEffect(() => {
     const html = document.body.parentElement;
 
     if (!html) {

package/src/hooks/useLanguage.ts

@@ -1,9 +1,9 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 
 import { noop } from 'lib';
 
 const useLanguage = (language: string) => {
-  useLayoutEffect(() => {
+  useEffect(() => {
     const html = document.body.parentElement;
 
     if (!html) {

package/src/i18n/constants.ts

@@ -1,3 +1,4 @@
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import { Locale } from '@scrabble-solver/types';
 import { FunctionComponent, SVGAttributes } from 'react';
 
@@ -6,53 +7,61 @@ import { FlagDe, FlagEs, FlagFa, FlagFr, FlagGb, FlagPl, FlagUs } from 'icons';
 import styles from './i18n.module.scss';
 
 interface LocaleFeatures {
-  direction: 'ltr' | 'rtl';
-  fontFamily: string;
+  comma: string;
   consonants: boolean;
+  direction: 'ltr' | 'rtl';
+  separator: string;
   vowels: boolean;
 }
 
 export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
   [Locale.DE_DE]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_GB]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_US]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.ES_ES]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.FA_IR]: {
-    direction: 'rtl',
-    fontFamily: 'Vazirmatn',
+    comma: COMMA_ARABIC,
     consonants: false,
+    direction: 'rtl',
+    separator: `${COMMA_ARABIC} `,
     vowels: false,
   },
   [Locale.FR_FR]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.PL_PL]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
 };

package/src/i18n/de.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Zielort - klicken zum Wechseln",
+  "cell.filter-cell": "Zielort",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
   "cell.tile.location": "Brett: Stein ({{x}}, {{y}})",
-  "cell.toggle-direction": "Schreibrichtung - klicken zum Wechseln",
+  "cell.toggle-direction": "Schreibrichtung",
   "common.blanks": "Blankos",
   "common.clear": "Löschen",
   "common.close": "Schließen",

package/src/i18n/en.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Target destination - click to toggle",
+  "cell.filter-cell": "Target destination",
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
   "cell.tile.location": "Board: tile ({{x}}, {{y}})",
-  "cell.toggle-direction": "Typing direction - click to toggle",
+  "cell.toggle-direction": "Typing direction",
   "common.blanks": "Blanks",
   "common.clear": "Clear",
   "common.close": "Close",

package/src/i18n/es.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Destino objetivo: haga clic para alternar",
+  "cell.filter-cell": "Destino objetivo",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
   "cell.tile.location": "Tablero: espacio ({{x}}, {{y}})",
-  "cell.toggle-direction": "Dirección de escritura: haga clic para alternar",
+  "cell.toggle-direction": "Dirección de escritura",
   "common.blanks": "Blancos",
   "common.clear": "Borrar",
   "common.close": "Cerrar",

package/src/i18n/fa.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "مقصد - کلیک برای تغییر",
+  "cell.filter-cell": "مقصد",
   "cell.set-blank": "علامت گذاری به عنوان خالی",
   "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
-  "cell.toggle-direction": "جهت تایپ - کلیک برای تغییر",
   "cell.tile.location": "({{x}}، {{y}}) کاشی: صفحه",
+  "cell.toggle-direction": "جهت تایپ",
   "common.blanks": "خالی",
   "common.clear": "پاک کردن",
   "common.close": "بستن",

package/src/i18n/fr.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Destination cible - cliquer pour changer",
+  "cell.filter-cell": "Destination cible",
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
   "cell.tile.location": "Plateau: la case ({{x}}, {{y}})",
-  "cell.toggle-direction": "Direction d'écriture - cliquer pour changer",
+  "cell.toggle-direction": "Direction d'écriture",
   "common.blanks": "Cases vides",
   "common.clear": "Effacer",
   "common.close": "Fermer",

package/src/i18n/pl.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Miejsce docelowe - kliknij aby zmienić",
+  "cell.filter-cell": "Miejsce docelowe",
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
   "cell.tile.location": "Plansza: płytka ({{x}}, {{y}})",
-  "cell.toggle-direction": "Kierunek wpisywania - kliknij aby zmienić",
+  "cell.toggle-direction": "Kierunek wpisywania",
   "common.blanks": "Blanki",
   "common.clear": "Wyczyść",
   "common.close": "Zamknij",

package/src/lib/dataUrlToBlob.ts

@@ -0,0 +1,20 @@
+const dataUrlToBlob = (dataUrl: string): Blob => {
+  const [mime = '', data] = dataUrl.split(',');
+  const [, type] = mime.match(/:(.*?);/) || [];
+
+  if (typeof type !== 'string') {
+    throw new Error('Unsupported data URL');
+  }
+
+  const byteString = globalThis.atob(data);
+  const u8arr = new Uint8Array(byteString.length);
+  let index = byteString.length;
+
+  while (index--) {
+    u8arr[index] = byteString.charCodeAt(index);
+  }
+
+  return new Blob([u8arr], { type });
+};
+
+export default dataUrlToBlob;

package/src/lib/index.ts

@@ -8,6 +8,7 @@ export { default as createKeyComparator } from './createKeyComparator';
 export { default as createNullMovingComparator } from './createNullMovingComparator';
 export { default as createRegExp } from './createRegExp';
 export { default as createStringComparator } from './createStringComparator';
+export { default as dataUrlToBlob } from './dataUrlToBlob';
 export { default as detectLocale } from './detectLocale';
 export { default as extractCharacters } from './extractCharacters';
 export { default as extractInputValue } from './extractInputValue';

package/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss

@@ -9,7 +9,6 @@
 .description {
   margin-bottom: var(--spacing--m);
   font-size: var(--font--size--h3);
-  font-family: var(--font--family--title);
   font-weight: 300;
 }
 

package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.module.scss

@@ -9,5 +9,4 @@
 .label {
   display: flex;
   align-items: center;
-  font-family: var(--font--family--latin);
 }

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss

@@ -10,11 +10,6 @@
   display: flex;
   align-items: center;
   gap: var(--spacing--l);
-  font-family: var(--font--family--latin);
-
-  &.fa {
-    font-family: var(--font--family--arabic);
-  }
 }
 
 .flag {

package/src/pages/_app.tsx

@@ -4,7 +4,7 @@ import { FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
 import { SeoMessage } from 'components';
-import { createAppStore } from 'state';
+import { store } from 'state';
 
 import 'styles/global.scss';
 
@@ -40,8 +40,6 @@ const KEYWORDS = [
   'Kamil Mielnik',
 ].join(',');
 
-const store = createAppStore();
-
 const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
   <>
     <Head>

package/src/pages/index.tsx

@@ -4,7 +4,7 @@ import { FunctionComponent, useCallback, useState } from 'react';
 import ReactModal from 'react-modal';
 import { useDispatch } from 'react-redux';
 
-import { Logo, NavButtons, Solver, SvgFontFix } from 'components';
+import { Logo, NavButtons, Solver } from 'components';
 import { useDirection, useEffectOnce, useLanguage, useLocalStorage } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import {
@@ -75,8 +75,6 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
   return (
     <>
-      <SvgFontFix />
-
       <nav className={styles.nav}>
         <div className={styles.navContent}>
           <div className={styles.navLogo}>

package/src/parameters/index.ts

@@ -19,6 +19,34 @@ export const COLOR_GREEN = '#bae3ba';
 export const COLOR_RED = '#f7c2aa';
 export const COLOR_YELLOW = '#efe3ae';
 
+export const COLOR_BONUS_CHARACTER_1 = '#f7f1d6';
+export const COLOR_BONUS_CHARACTER_2 = '#d6ebd6';
+export const COLOR_BONUS_CHARACTER_3 = '#dde4f6';
+export const COLOR_BONUS_CHARACTER_5 = '#fbe0d4';
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = '#b8d5ed';
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = '#86aed1';
+export const COLOR_BONUS_START = '#b284b8';
+export const COLOR_BONUS_WORD_MULTIPLIER_2 = '#fbc997';
+export const COLOR_BONUS_WORD_MULTIPLIER_3 = '#f19393';
+export const COLOR_FILTERED = '#444';
+
+export const COLOR_BONUS_CHARACTER: Record<number, string> = {
+  1: COLOR_BONUS_CHARACTER_1,
+  2: COLOR_BONUS_CHARACTER_2,
+  3: COLOR_BONUS_CHARACTER_3,
+  5: COLOR_BONUS_CHARACTER_5,
+};
+
+export const COLOR_BONUS_CHARACTER_MULTIPLIER: Record<number, string> = {
+  2: COLOR_BONUS_CHARACTER_MULTIPLIER_2,
+  3: COLOR_BONUS_CHARACTER_MULTIPLIER_3,
+};
+
+export const COLOR_BONUS_WORD: Record<number, string> = {
+  2: COLOR_BONUS_WORD_MULTIPLIER_2,
+  3: COLOR_BONUS_WORD_MULTIPLIER_3,
+};
+
 export const SPACING_XS = 2;
 export const SPACING_S = 5;
 export const SPACING_M = 10;
@@ -40,6 +68,9 @@ export const BOARD_TILE_SIZE_MAX = 64;
  */
 export const BOARD_TILE_SIZE_MIN = 20;
 
+export const BORDER_COLOR = '#cdcdcd';
+export const BORDER_COLOR_LIGHT = '#d9d9d9';
+export const BORDER_RADIUS = 5;
 export const BORDER_WIDTH = 1;
 
 export const BUTTON_ICON_SIZE = 24;
@@ -90,10 +121,10 @@ export const RACK_TILE_SIZE_MAX = 80;
 
 export const REMAINING_TILES_TILE_SIZE = 50;
 
-export const RESULTS_HEADER_HEIGHT = 35;
-
 export const RESULTS_ITEM_HEIGHT = 40;
 
+export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
+
 export const SOLVER_COLUMN_WIDTH = 580;
 
 export const TEXT_INPUT_HEIGHT = 40;

package/src/state/index.ts

@@ -1,7 +1,7 @@
 export * from './actions';
-export { default as createAppStore } from './createAppStore';
 export { default as localStorage } from './localStorage';
 export * from './selectors';
 export * from './slices';
+export { default as store } from './store';
 export { default as useTranslate } from './useTranslate';
 export { default as useTypedSelector } from './useTypedSelector';