@scrabble-solver/scrabble-solver 2.10.10 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.10",
+  "version": "2.11.0",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -28,22 +28,21 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.19.2",
+    "@floating-ui/react": "^0.20.1",
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.10.10",
-    "@scrabble-solver/constants": "^2.10.10",
-    "@scrabble-solver/dictionaries": "^2.10.10",
-    "@scrabble-solver/logger": "^2.10.10",
-    "@scrabble-solver/solver": "^2.10.10",
-    "@scrabble-solver/types": "^2.10.10",
-    "@scrabble-solver/word-definitions": "^2.10.10",
+    "@scrabble-solver/configs": "^2.11.0",
+    "@scrabble-solver/constants": "^2.11.0",
+    "@scrabble-solver/dictionaries": "^2.11.0",
+    "@scrabble-solver/logger": "^2.11.0",
+    "@scrabble-solver/solver": "^2.11.0",
+    "@scrabble-solver/types": "^2.11.0",
+    "@scrabble-solver/word-definitions": "^2.11.0",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "merge-refs": "^1.1.2",
-    "next": "^13.2.1",
+    "next": "^13.2.4",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -75,8 +74,8 @@
     "@types/redux-saga": "^0.10.5",
     "@types/uuid": "^9.0.1",
     "env-cmd": "^10.1.0",
-    "sass": "^1.58.3",
+    "sass": "^1.59.2",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "42551ac84b78ed24543230c19b861e1543f7a50a"
+  "gitHead": "493dd931e7f16c34c425295a0f048756d6c192c8"
 }

package/src/components/Board/components/Cell/Cell.module.scss

@@ -112,6 +112,7 @@
     font-size: 60%;
     font-weight: bold;
     color: var(--color--white);
+    transition: var(--transition);
     content: ' ';
 
     [lang='fa-IR'] & {

package/src/components/Board/hooks/useGrid.ts

@@ -333,7 +333,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, dispatch, locale, onDirectionToggle, rows]);
+  }, [changeActiveIndex, config, dispatch, locale, moveFocus, onDirectionToggle, rows]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

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

@@ -1,15 +1,26 @@
 .dictionary {
   position: relative;
+  max-height: var(--dictionary--height);
   height: var(--dictionary--height);
   overflow-y: auto;
   word-break: break-word;
   transition: var(--transition);
+
+  &.isAllowed {
+    background-color: var(--color--green--light);
+  }
+
+  &.isNotAllowed {
+    background-color: var(--color--red--light);
+  }
 }
 
 .result {
   transition: var(--transition);
 
   &.isAllowed {
+    background-color: var(--color--green--light);
+
     & + & {
       .content {
         padding-top: 0;
@@ -18,6 +29,8 @@
   }
 
   &.isNotAllowed {
+    background-color: var(--color--red--light);
+
     & + & {
       .content {
         padding-top: 0;
@@ -37,14 +50,6 @@
   text-transform: uppercase;
 }
 
-.isAllowed {
-  background-color: var(--color--green--light);
-}
-
-.isNotAllowed {
-  background-color: var(--color--red--light);
-}
-
 .definitions {
   margin: 0;
 

package/src/components/Dictionary/Dictionary.tsx

@@ -16,18 +16,18 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
   const { results, isLoading } = useTypedSelector(selectDictionary);
   const error = useTypedSelector(selectDictionaryError);
-  const isFirstAllowed = results.length > 0 ? results[0].isAllowed : undefined;
+  const isLastAllowed = results.length > 0 ? results[results.length - 1].isAllowed : undefined;
 
   return (
     <div
       className={classNames(styles.dictionary, className, {
-        [styles.isAllowed]: isFirstAllowed === true,
-        [styles.isNotAllowed]: isFirstAllowed === false,
+        [styles.isAllowed]: isLastAllowed === true,
+        [styles.isNotAllowed]: isLastAllowed === false,
       })}
     >
-      {typeof error !== 'undefined' && <EmptyState variant="error">{error.message}</EmptyState>}
+      {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
 
-      {results.length === 0 && (
+      {typeof error === 'undefined' && !isLoading && results.length === 0 && (
         <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
       )}
 

package/src/components/Loading/Loading.tsx

@@ -29,7 +29,7 @@ const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   const content = useMemo(() => prepareContent(message), [message]);
 
   return (
-    <div className={classNames(styles.loading, className)}>
+    <div aria-label={translation} className={classNames(styles.loading, className)} role="status">
       <div className={styles.dim} />
       <div className={styles.logo}>
         <PlainTiles className={classNames(styles.tiles)} content={content} dropShadow wave={wave} />

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

@@ -115,7 +115,6 @@
   position: relative;
   flex: 1;
   min-height: 0;
-  margin-top: calc(-1 * var(--spacing--l));
   padding: var(--spacing--l);
   overflow: auto;
 }

package/src/components/NavButtons/NavButtons.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { useIsTouchDevice, useMediaQuery } from 'hooks';
+import { useAppLayout } from 'hooks';
 import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
@@ -30,10 +30,9 @@ const NavButtons: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
-  const isTouchDevice = useIsTouchDevice();
-  const isLessThanS = useMediaQuery('<s');
+  const { showKeyMap, showShortNav } = useAppLayout();
 
-  if (isLessThanS) {
+  if (showShortNav) {
     return (
       <div className={styles.navButtons}>
         <div className={styles.group}>
@@ -114,7 +113,7 @@ const NavButtons: FunctionComponent<Props> = ({
       <div className={styles.separator} />
 
       <div className={styles.group}>
-        {!isTouchDevice && (
+        {showKeyMap && (
           <IconButton
             aria-label={translate('keyMap')}
             className={styles.button}

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

@@ -7,6 +7,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   flex-direction: column;
   height: 100%;
+  background: var(--color--background--element);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
   font-family: var(--font--family--title);
 }
 
@@ -14,8 +17,18 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   flex: 1;
 }
 
+.content {
+  flex: 1;
+  position: relative;
+  height: 100%;
+}
+
+.listContainer {
+  position: absolute;
+  top: 0;
+}
+
 .list {
-  flex: 1 1 auto;
   transition: var(--transition);
 
   &.outdated {
@@ -29,8 +42,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: var(--border);
   font-weight: 700;
+  border-bottom: var(--border);
 }
 
 .headerButton {

package/src/components/Results/Results.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 import { FunctionComponent, useEffect, useMemo, useState } from 'react';
+import { useLatest, useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
 
 import { LOCALE_FEATURES } from 'i18n';
-import { BORDER_WIDTH, RESULTS_HEADER_HEIGHT, RESULTS_INPUT_HEIGHT, RESULTS_ITEM_HEIGHT } from 'parameters';
+import { RESULTS_ITEM_HEIGHT } from 'parameters';
 import {
   selectAreResultsOutdated,
   selectIsLoading,
@@ -18,6 +19,7 @@ import {
 import EmptyState from '../EmptyState';
 import Loading from '../Loading';
 import ResultsInput from '../ResultsInput';
+import Sizer from '../Sizer';
 
 import HeaderButton from './HeaderButton';
 import Result from './Result';
@@ -28,12 +30,11 @@ import useColumns from './useColumns';
 
 interface Props {
   callbacks: ResultCallbacks;
-  height: number;
+  className?: string;
   highlightedIndex?: number;
-  width: number;
 }
 
-const Results: FunctionComponent<Props> = ({ callbacks, height, highlightedIndex, width }) => {
+const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIndex }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
@@ -44,92 +45,102 @@ const Results: FunctionComponent<Props> = ({ callbacks, height, highlightedIndex
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
   const itemData = useMemo(() => ({ ...callbacks, highlightedIndex, results }), [callbacks, highlightedIndex, results]);
+  const [sizerRef, { height, width }] = useMeasure<HTMLDivElement>();
   const [listRef, setListRef] = useState<FixedSizeList<ResultData> | null>(null);
   const columns = useColumns();
   const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
+  const scrollToIndexRef = useLatest(scrollToIndex);
+  const hasResults =
+    typeof error === 'undefined' && typeof filteredResults !== 'undefined' && typeof allResults !== 'undefined';
 
   useEffect(() => {
     // without setTimeout, the initial scrolling offset is calculated
     // incorrectly, as the list is not fully rendered by the browser yet
     const timeout = globalThis.setTimeout(() => {
       if (listRef) {
-        listRef.scrollToItem(scrollToIndex, 'center');
+        listRef.scrollToItem(scrollToIndexRef.current, 'center');
       }
     }, 0);
 
     return () => {
       globalThis.clearTimeout(timeout);
     };
-  }, [listRef, scrollToIndex]);
+  }, [allResults, listRef, scrollToIndexRef]);
 
   return (
-    <div className={styles.results}>
+    <div className={classNames(styles.results, className)}>
       <div className={styles.header}>
         {columns.map((column) => (
           <HeaderButton column={column} key={column.id} />
         ))}
       </div>
 
-      {typeof error !== 'undefined' && (
-        <EmptyState className={styles.emptyState} variant="error">
-          {error.message}
-        </EmptyState>
-      )}
-
-      {typeof error === 'undefined' && typeof filteredResults === 'undefined' && (
-        <EmptyState className={styles.emptyState} variant="info">
-          {translate('results.empty-state.uninitialized')}
-
-          <SolveButton className={styles.solveButton} />
-        </EmptyState>
-      )}
-
-      {typeof error === 'undefined' && typeof filteredResults !== 'undefined' && typeof allResults !== 'undefined' && (
-        <>
-          {isOutdated && (
-            <EmptyState className={styles.emptyState} variant="info">
-              {translate('results.empty-state.outdated')}
-
-              <SolveButton className={styles.solveButton} />
-            </EmptyState>
-          )}
-
-          {!isOutdated && (
-            <>
-              {allResults.length === 0 && (
-                <EmptyState className={styles.emptyState} variant="warning">
-                  {translate('results.empty-state.no-results')}
-                </EmptyState>
-              )}
-
-              {allResults.length > 0 && filteredResults.length === 0 && (
-                <EmptyState className={styles.emptyState} variant="info">
-                  {translate('results.empty-state.no-filtered-results')}
-                </EmptyState>
-              )}
-
-              {allResults.length > 0 && filteredResults.length > 0 && (
-                <FixedSizeList
-                  className={classNames(styles.list, {
-                    [styles.outdated]: isOutdated,
-                  })}
-                  direction={direction}
-                  height={height - RESULTS_HEADER_HEIGHT - RESULTS_INPUT_HEIGHT - 2 * BORDER_WIDTH}
-                  itemCount={filteredResults.length}
-                  itemData={itemData}
-                  itemSize={RESULTS_ITEM_HEIGHT}
-                  ref={setListRef}
-                  width={width}
-                >
-                  {Result}
-                </FixedSizeList>
-              )}
-
-              {allResults.length > 0 && <ResultsInput className={styles.input} />}
-            </>
-          )}
-        </>
-      )}
+      <div className={styles.content}>
+        <Sizer ref={sizerRef} />
+
+        {typeof error !== 'undefined' && (
+          <EmptyState className={styles.emptyState} variant="error">
+            {error.message}
+          </EmptyState>
+        )}
+
+        {typeof error === 'undefined' && typeof filteredResults === 'undefined' && (
+          <EmptyState className={styles.emptyState} variant="info">
+            {translate('results.empty-state.uninitialized')}
+
+            <SolveButton className={styles.solveButton} />
+          </EmptyState>
+        )}
+
+        {hasResults && (
+          <>
+            {isOutdated && (
+              <EmptyState className={styles.emptyState} variant="info">
+                {translate('results.empty-state.outdated')}
+
+                <SolveButton className={styles.solveButton} />
+              </EmptyState>
+            )}
+
+            {!isOutdated && (
+              <>
+                {allResults.length === 0 && (
+                  <EmptyState className={styles.emptyState} variant="warning">
+                    {translate('results.empty-state.no-results')}
+                  </EmptyState>
+                )}
+
+                {allResults.length > 0 && filteredResults.length === 0 && (
+                  <EmptyState className={styles.emptyState} variant="info">
+                    {translate('results.empty-state.no-filtered-results')}
+                  </EmptyState>
+                )}
+
+                {allResults.length > 0 && filteredResults.length > 0 && (
+                  <div className={styles.listContainer}>
+                    <FixedSizeList
+                      className={classNames(styles.list, {
+                        [styles.outdated]: isOutdated,
+                      })}
+                      direction={direction}
+                      height={height}
+                      itemCount={filteredResults.length}
+                      itemData={itemData}
+                      itemSize={RESULTS_ITEM_HEIGHT}
+                      ref={setListRef}
+                      width={width}
+                    >
+                      {Result}
+                    </FixedSizeList>
+                  </div>
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
+
+      {hasResults && allResults.length > 0 && !isOutdated && <ResultsInput className={styles.input} />}
 
       {isLoading && <Loading />}
     </div>

package/src/components/ResultsInput/ResultsInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ChangeEvent, FunctionComponent, useState } from 'react';
+import { ChangeEvent, FormEventHandler, FunctionComponent, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { isRegExp } from 'lib';
@@ -27,8 +27,12 @@ const ResultsInput: FunctionComponent<Props> = ({ className }) => {
     }
   };
 
+  const handleSubmit: FormEventHandler = (event) => {
+    event.preventDefault();
+  };
+
   return (
-    <form className={classNames(styles.resultsInput, className)}>
+    <form className={classNames(styles.resultsInput, className)} onSubmit={handleSubmit}>
       <input
         className={styles.input}
         placeholder={translate('results.input.placeholder')}

package/src/components/Solver/Solver.module.scss

@@ -32,6 +32,7 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--solver-column--width);
   gap: var(--spacing);
+  height: 100%;
   margin: 0 auto;
 
   @include media('<l') {
@@ -62,17 +63,17 @@
   }
 }
 
-.resultsContainer {
-  flex: 1;
-  position: relative;
-}
-
-.dictionary {
+.dictionaryContainer {
+  flex: 0 0 auto;
+  height: var(--dictionary--height);
   display: flex;
   flex-direction: column;
+  background-color: var(--color--background--element);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
 }
 
-.dictionaryOutput {
+.dictionary {
   flex: 1;
   border-bottom: var(--border);
 }
@@ -113,6 +114,7 @@
 
   position: fixed;
   bottom: var(--spacing);
+  z-index: 1;
 
   @include media('<xs') {
     --spacing: var(--spacing--m);

package/src/components/Solver/Solver.tsx

@@ -4,17 +4,8 @@ import { FunctionComponent, SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useMeasure } from 'react-use';
 
-import { useIsTouchDevice, useMediaQuery } from 'hooks';
-import {
-  BOARD_TILE_SIZE_MAX,
-  BOARD_TILE_SIZE_MIN,
-  BORDER_WIDTH,
-  COLUMN_MIN_HEIGHT,
-  COMPONENTS_SPACING,
-  COMPONENTS_SPACING_SMALL,
-  DICTIONARY_HEIGHT,
-  RACK_TILE_SIZE_MAX,
-} from 'parameters';
+import { useAppLayout, useIsTouchDevice } from 'hooks';
+import { BOARD_TILE_SIZE_MAX, BOARD_TILE_SIZE_MIN, BORDER_WIDTH, RACK_TILE_SIZE_MAX } from 'parameters';
 import {
   resultsSlice,
   selectAreResultsOutdated,
@@ -33,9 +24,8 @@ import Dictionary from '../Dictionary';
 import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
 import Results from '../Results';
-import Well from '../Well';
 
-import { EmptyState, ResultCandidatePicker, SolveButton } from './components';
+import { EmptyState, FloatingSolveButton, ResultCandidatePicker } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -50,18 +40,12 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
+  const { componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
+    useAppLayout();
   const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
-  const [resultsContainerRef, { width: resultsContainerWidth }] = useMeasure<HTMLDivElement>();
-  const isLessThanXl = useMediaQuery('<xl');
-  const isLessThanL = useMediaQuery('<l');
-  const isLessThanM = useMediaQuery('<m');
-  const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
-  const maxBoardWidth = width - resultsContainerWidth - (isLessThanL ? 0 : componentsSpacing) - 2 * componentsSpacing;
-  const maxBoardHeight = Math.max(
-    height - bottomContainerHeight,
-    isLessThanL ? 0 : COLUMN_MIN_HEIGHT,
-    isLessThanM ? Number.POSITIVE_INFINITY : 0,
-  );
+  const [columnRef, { width: columnWidth }] = useMeasure<HTMLDivElement>();
+  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
+  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const config = useTypedSelector(selectConfig);
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
@@ -74,8 +58,6 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const cellSize = Math.min(cellWidth, cellHeight);
   const cellSizeSafe = Math.min(Math.max(cellSize, BOARD_TILE_SIZE_MIN), BOARD_TILE_SIZE_MAX);
   const tileSize = Math.min((maxBoardWidth - 2 * BORDER_WIDTH) / config.maximumCharactersCount, RACK_TILE_SIZE_MAX);
-  const boardSize = (cellSizeSafe + BORDER_WIDTH) * Math.max(config.boardWidth, config.boardHeight) + BORDER_WIDTH;
-  const resultsHeight = boardSize - DICTIONARY_HEIGHT - componentsSpacing - 4 * BORDER_WIDTH;
   const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
   const touchCallbacks = useMemo(
     () => ({
@@ -116,53 +98,43 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const handleSubmit = (event: SyntheticEvent) => {
     event.preventDefault();
 
-    if (isLessThanL) {
-      onShowResults();
-    }
-
     dispatch(solveSlice.actions.submit());
   };
 
   useEffect(() => {
-    if (isLessThanL && bestResult && !isOutdated) {
+    if (showCompactControls && bestResult && !isOutdated) {
       dispatch(resultsSlice.actions.changeResultCandidate(bestResult));
     }
-  }, [bestResult, dispatch, isLessThanL, isOutdated]);
+  }, [bestResult, dispatch, showCompactControls, isOutdated]);
 
   return (
     <div className={classNames(styles.solver, className)}>
       <div className={styles.container}>
         <div className={styles.content}>
-          <form className={styles.boardContainer} onSubmit={handleSubmit}>
+          <form id="a" className={styles.boardContainer} onSubmit={handleSubmit}>
             <Board cellSize={cellSizeSafe} className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          <div className={styles.column}>
-            <Well className={styles.resultsContainer} ref={resultsContainerRef}>
-              {resultsContainerWidth > 0 && resultsHeight > 0 && (
-                <Results callbacks={callbacks} height={resultsHeight} width={resultsContainerWidth} />
-              )}
-            </Well>
-
-            <Well>
-              <div className={styles.dictionary} style={{ height: DICTIONARY_HEIGHT }}>
-                <Dictionary className={styles.dictionaryOutput} />
-                <DictionaryInput className={styles.dictionaryInput} />
-              </div>
-            </Well>
+          <div className={styles.column} ref={columnRef}>
+            <Results callbacks={callbacks} />
+
+            <div className={styles.dictionaryContainer}>
+              <Dictionary className={styles.dictionary} />
+              <DictionaryInput className={styles.dictionaryInput} />
+            </div>
           </div>
         </div>
       </div>
 
       <div className={styles.bottomContainer} ref={bottomContainerRef}>
         <div className={styles.bottomContent}>
-          <form onSubmit={handleSubmit}>
+          <form id="b" onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          {isLessThanL && (
+          {showCompactControls && (
             <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
               <ResultCandidatePicker onResultClick={onShowResults} />
 
@@ -182,7 +154,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
         </div>
       </div>
 
-      {isTouchDevice && <SolveButton className={styles.solve} onClick={handleSubmit} />}
+      {showFloatingSolveButton && <FloatingSolveButton className={styles.solve} onClick={handleSubmit} />}
     </div>
   );
 };

package/src/components/Solver/components/FloatingSolveButton/FloatingSolveButton.module.scss

@@ -0,0 +1,7 @@
+@import 'styles/animations';
+
+.floatingSolveButton {
+  padding: var(--spacing--l);
+  border-radius: 50%;
+  box-shadow: var(--box-shadow) !important;
+}