Add wide button variant and use it in the mobile menu, center button …

…content horizontally on desktop - Fixes #368
kamilmielnik · Oct 26, 2024 · 08920a2 · 08920a2
1 parent 5e638b7
commit 08920a2
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/packages/scrabble-solver/src/components/Button/Button.module.scss b/packages/scrabble-solver/src/components/Button/Button.module.scss
@@ -60,8 +60,13 @@
 .content {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: var(--spacing--l);
   line-height: var(--button--icon--size);
+
+  @include media('<l') {
+    gap: var(--spacing--m);
+  }
 }
 
 .icon {
@@ -74,8 +79,18 @@
 .label {
   @include ellipsis;
 
-  flex: 1;
   font-size: var(--font--size--h3);
   transition: var(--transition);
   text-align: start;
 }
+
+.wide {
+  .content {
+    justify-content: normal;
+    gap: var(--spacing--l);
+  }
+
+  .label {
+    flex: 1;
+  }
+}
diff --git a/packages/scrabble-solver/src/components/Button/Button.tsx b/packages/scrabble-solver/src/components/Button/Button.tsx
@@ -12,6 +12,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconClassName?: string;
   tooltip?: ReactNode;
   variant?: 'default' | 'primary';
+  wide?: boolean;
 }
 
 const Button: FunctionComponent<Props> = ({
@@ -21,6 +22,7 @@ const Button: FunctionComponent<Props> = ({
   iconClassName,
   tooltip,
   variant = 'default',
+  wide,
   ...props
 }) => {
   return (
@@ -29,6 +31,7 @@ const Button: FunctionComponent<Props> = ({
         className={classNames(styles.button, className, {
           [styles.default]: variant === 'default',
           [styles.primary]: variant === 'primary',
+          [styles.wide]: wide,
         })}
         type="button"
         {...props}

diff --git a/packages/scrabble-solver/src/components/Button/Link.tsx b/packages/scrabble-solver/src/components/Button/Link.tsx
@@ -12,6 +12,7 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
   iconClassName?: string;
   tooltip?: ReactNode;
   variant?: 'default' | 'primary';
+  wide?: boolean;
 }
 
 const Link: FunctionComponent<Props> = ({
@@ -21,6 +22,7 @@ const Link: FunctionComponent<Props> = ({
   iconClassName,
   tooltip,
   variant = 'default',
+  wide,
   ...props
 }) => {
   return (
@@ -29,6 +31,7 @@ const Link: FunctionComponent<Props> = ({
         className={classNames(styles.button, className, {
           [styles.default]: variant === 'default',
           [styles.primary]: variant === 'primary',
+          [styles.wide]: wide,
         })}
         {...props}
       >

diff --git a/packages/scrabble-solver/src/modals/MenuModal/MenuModal.tsx b/packages/scrabble-solver/src/modals/MenuModal/MenuModal.tsx
@@ -37,16 +37,23 @@ const MenuModal: FunctionComponent<Props> = ({
         aria-label={translate('remaining-tiles')}
         className={styles.button}
         Icon={Sack}
+        wide
         onClick={onShowRemainingTiles}
       >
         {translate('remaining-tiles')}
       </Button>
 
-      <Button aria-label={translate('words')} className={styles.button} Icon={CardChecklist} onClick={onShowWords}>
+      <Button aria-label={translate('words')} className={styles.button} Icon={CardChecklist} wide onClick={onShowWords}>
         {translate('words')}
       </Button>
 
-      <Button aria-label={translate('dictionary')} className={styles.button} Icon={BookHalf} onClick={onShowDictionary}>
+      <Button
+        aria-label={translate('dictionary')}
+        className={styles.button}
+        Icon={BookHalf}
+        wide
+        onClick={onShowDictionary}
+      >
         {translate('dictionary')}
       </Button>
 
@@ -57,11 +64,12 @@ const MenuModal: FunctionComponent<Props> = ({
         Icon={Github}
         rel="noopener noreferrer"
         target="_blank"
+        wide
       >
         {translate('github')}
       </Button.Link>
 
-      <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
+      <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} wide onClick={onShowSettings}>
         <div className={styles.settings}>
           <div className={styles.settingsLabel}>{translate('settings')}</div>
           <Icon aria-hidden="true" className={styles.flag} role="img" />