Center browsers

src/renderer/__tests__/tiles.spec.tsx

@@ -23,14 +23,14 @@ test('tiles', () => {
   expect(screen.getByRole('button', { name: 'Safari Tile' })).toBeVisible()
 
   // Make sure no tile set as favourite
-  expect(screen.queryByText('space')).not.toBeInTheDocument()
+  expect(screen.queryByLabelText('Favourite')).not.toBeInTheDocument()
 
   // Set Safari as favourite
   fireEvent.click(screen.getByRole('button', { name: 'Tiles Menu' }))
   fireEvent.click(screen.getByRole('button', { name: 'Favourite Safari' }))
   fireEvent.click(screen.getByRole('button', { name: 'Tiles Menu' }))
   const safariTile = screen.getByRole('button', { name: 'Safari Tile' })
-  expect(within(safariTile).getByText('space')).toBeVisible()
+  expect(within(safariTile).getByLabelText('Favourite')).toBeVisible()
 
   // Correct info sent to main when tile clicked
   fireEvent.click(screen.getByRole('button', { name: 'Firefox Tile' }))

src/renderer/components/app.tsx

@@ -3,9 +3,8 @@ import { Provider } from 'react-redux'
 
 import { mainLog } from '../sendToMain'
 import store from '../store'
-import FavTile from './app__fav-tile'
-import NormalTiles from './app__normal-tiles'
 import StatusBar from './app__status-bar'
+import Tiles from './app__tiles'
 import UrlBar from './app__url-bar'
 import KeyboardManager from './manager__keyboard'
 import MainEventsManager from './manager__main-events'
@@ -18,18 +17,12 @@ const App: React.FC = () => {
 
   return (
     <Provider store={store}>
-      <div className="h-screen w-screen select-none overflow-hidden text-grey-300 flex flex-col relative p-4">
-        <UrlBar className="mb-4" />
-        <div className="flex-grow flex items-center">
-          <FavTile />
+      <div className="h-screen w-screen select-none overflow-hidden text-grey-300 flex flex-col relative pt-4 px-4 pb-2">
+        <UrlBar className="mb-2" />
+        <div className="flex-grow flex flex-col h-full overflow-hidden">
+          <Tiles />
 
-          <div className="flex-grow flex flex-col h-full">
-            <div className="flex-grow flex items-center">
-              <NormalTiles />
-            </div>
-
-            <StatusBar />
-          </div>
+          <StatusBar />
         </div>
 
         <MenusManager />

src/renderer/components/app__status-bar.tsx

@@ -44,80 +44,84 @@ const StatusBar: React.FC<Props> = ({ className }) => {
     <div
       className={clsx(
         className,
-        'flex-shrink-0 leading-none flex justify-end items-center space-x-2',
+        'flex-shrink-0 leading-none flex justify-between items-center',
       )}
     >
-      <div className="text-xxs text-grey-500 font-bold">
-        {updateStatus === 'available'
-          ? 'Downloading update…'
-          : displayedVersion}
-      </div>
-
-      {!isDefaultProtocolClient && (
+      <div>
         <Button
-          className="opacity-50"
-          onClick={setAsDefaultBrowser}
+          aria-label="Tiles Menu"
+          className={clsx(openMenu === 'tiles' && 'z-20')}
+          onClick={handleTilesMenuButtonClick}
           size="xxs"
-          title="Accept incoming URLs"
         >
-          Set As Default Browser
+          {openMenu === 'tiles' ? (
+            <FontAwesomeIcon fixedWidth icon={faTimes} title="Close menu" />
+          ) : (
+            <FontAwesomeIcon
+              fixedWidth
+              icon={faGripHorizontal}
+              title="Tiles menu"
+            />
+          )}
         </Button>
-      )}
+      </div>
 
-      <Button
-        aria-label="Tiles Menu"
-        className={clsx(openMenu === 'tiles' && 'z-20')}
-        onClick={handleTilesMenuButtonClick}
-        size="xxs"
-      >
-        {openMenu === 'tiles' ? (
-          <FontAwesomeIcon fixedWidth icon={faTimes} title="Close menu" />
-        ) : (
-          <FontAwesomeIcon
-            fixedWidth
-            icon={faGripHorizontal}
-            title="Tiles menu"
-          />
-        )}
-      </Button>
+      <div className="flex justify-between items-center space-x-2">
+        <div className="text-xxs text-grey-500 font-bold">
+          {updateStatus === 'available'
+            ? 'Downloading update…'
+            : displayedVersion}
+        </div>
 
-      <Button
-        className={clsx(openMenu === 'sponsor' && 'z-20')}
-        onClick={handleSponsorMenuButtonClick}
-        size="xxs"
-        tone={openMenu === 'sponsor' ? undefined : 'sponsor'}
-      >
-        {openMenu === 'sponsor' ? (
-          <FontAwesomeIcon fixedWidth icon={faTimes} title="Close menu" />
-        ) : (
-          <FontAwesomeIcon
-            fixedWidth
-            icon={faHeart}
-            title="Sponsor information"
-          />
+        {!isDefaultProtocolClient && (
+          <Button
+            className="opacity-50"
+            onClick={setAsDefaultBrowser}
+            size="xxs"
+            title="Accept incoming URLs"
+          >
+            Set As Default Browser
+          </Button>
         )}
-      </Button>
 
-      {updateStatus === 'downloaded' && (
         <Button
-          className="space-x-2"
-          onClick={updateRestart}
+          className={clsx(openMenu === 'sponsor' && 'z-20')}
+          onClick={handleSponsorMenuButtonClick}
           size="xxs"
-          title="Restart app and update"
-          tone="primary"
+          tone={openMenu === 'sponsor' ? undefined : 'sponsor'}
         >
-          <FontAwesomeIcon icon={faGift} />
-          <span>Update</span>
+          {openMenu === 'sponsor' ? (
+            <FontAwesomeIcon fixedWidth icon={faTimes} title="Close menu" />
+          ) : (
+            <FontAwesomeIcon
+              fixedWidth
+              icon={faHeart}
+              title="Sponsor information"
+            />
+          )}
         </Button>
-      )}
 
-      <Button onClick={reload} size="xxs" title="Reload">
-        <FontAwesomeIcon fixedWidth icon={faSync} />
-      </Button>
+        {updateStatus === 'downloaded' && (
+          <Button
+            className="space-x-2"
+            onClick={updateRestart}
+            size="xxs"
+            title="Restart app and update"
+            tone="primary"
+          >
+            <FontAwesomeIcon icon={faGift} />
+            <span>Update</span>
+          </Button>
+        )}
+
+        <Button onClick={reload} size="xxs" title="Reload">
+          <FontAwesomeIcon fixedWidth icon={faSync} />
+        </Button>
 
-      <Button onClick={quit} size="xxs" title="Quit">
-        <FontAwesomeIcon fixedWidth icon={faSignOutAlt} />
-      </Button>
+        <Button onClick={quit} size="xxs" title="Quit">
+          <FontAwesomeIcon fixedWidth icon={faSignOutAlt} />
+        </Button>
+      </div>
     </div>
   )
 }

src/renderer/components/app__tiles.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import React from 'react'
+
+import { useFavTileSelector, useNormalTilesSelector } from '../store/selectors'
+import Tile from './organisms/tile'
+
+const Tiles: React.FC = () => {
+  const favTile = useFavTileSelector()
+  const normalTiles = useNormalTilesSelector()
+
+  return (
+    <div
+      className={clsx(
+        'flex-grow flex items-center justify-center overflow-hidden',
+        normalTiles.length < 8 && 'space-x-8',
+        normalTiles.length >= 8 && normalTiles.length < 16 && 'space-x-4',
+        normalTiles.length >= 16 && 'space-x-1',
+      )}
+    >
+      {favTile && <Tile app={favTile} isFav />}
+      {normalTiles.map((app, i) => {
+        const key = app.id + i
+        return <Tile key={key} app={app} />
+      })}
+    </div>
+  )
+}
+
+export default Tiles

src/renderer/components/atoms/kbd.tsx

@@ -3,15 +3,17 @@ import React from 'react'
 
 interface Props {
   className?: string
+  style?: React.CSSProperties
 }
 
-const Kbd: React.FC<Props> = ({ children, className }) => {
+const Kbd: React.FC<Props> = ({ children, className, style }) => {
   return (
     <kbd
       className={clsx(
         className,
         'text-xs tracking-widest font-bold uppercase py-1 px-2 rounded text-center',
       )}
+      style={style}
     >
       {children}
     </kbd>

src/renderer/components/menu__sponsor.tsx

@@ -17,22 +17,22 @@ const SponsorMenu: React.FC = () => {
   return (
     <div
       className={clsx(
-        'absolute bg-grey-800 rounded overflow-y-auto overflow-x-hidden border border-grey-600 shadow-xl z-30',
+        'absolute bg-grey-800 rounded overflow-hidden border border-grey-600 shadow-xl z-30',
         'animate__animated animate__fadeInUp animate__faster',
+        'p-4',
+        'flex flex-col justify-between',
       )}
       style={{ top: '8px', left: '50%', bottom: '45px', right: '8px' }}
     >
-      <div className="p-4">
-        <p className="mb-4 font-medium">
-          Maintaining open source projects takes a lot of time. With your
-          support I can continue to maintain projects such as this one, which is
-          free and always will be.
-        </p>
-        <Button onClick={handleButtonClick} tone="sponsor">
-          <FontAwesomeIcon fixedWidth icon={faHeart} />
-          <span>Sponsor from $1 / month</span>
-        </Button>
-      </div>
+      <p className="mb-4 font-medium">
+        Maintaining open source projects takes a lot of time. With your support
+        I can continue to maintain projects such as this one, which is free and
+        always will be.
+      </p>
+      <Button onClick={handleButtonClick} tone="sponsor">
+        <FontAwesomeIcon fixedWidth icon={faHeart} />
+        <span>Sponsor from $1 / month</span>
+      </Button>
     </div>
   )
 }

src/renderer/components/organisms/tile.tsx

@@ -34,46 +34,39 @@ const Tile: React.FC<Props> = ({ app, isFav, className }) => {
       key={app.id}
       aria-label={`${app.name} Tile`}
       className={clsx(
-        isFav && 'flex-shrink-0',
-        'flex flex-col items-center justify-center',
+        'flex-grow flex flex-col items-center justify-center max-h-full',
         'focus:outline-none',
         'active:opacity-50',
         'group',
         className,
       )}
       onClick={handleClick}
       style={{
-        maxWidth: isFav ? '100px' : '85px',
-        height: isFav ? '134px' : '90px',
+        maxWidth: '75px',
+        maxHeight: '108px',
+        flexBasis: 0,
       }}
       type="button"
     >
       <div className="overflow-hidden flex justify-center items-center">
         <img
           alt={app.name}
-          className={clsx('object-contain w-full max-h-full')}
+          className="object-contain w-full max-h-full"
           src={logos[app.id]}
         />
       </div>
-      <div
-        className="flex-shrink-0 mt-2 flex flex-col items-center"
-        // To avoid logos growing into space when no hotkey
-        style={{ minHeight: '1em' }}
-      >
-        <Kbd className="group-hover:bg-grey-900 group-hover:text-grey-100">
-          {hotkey}
-        </Kbd>
-
+      <Kbd className="flex-shrink-0 flex justify-center items-center group-hover:bg-grey-900 group-hover:text-grey-100 mt-2">
         {isFav && (
-          <Kbd className="mt-1 space-x-1 group-hover:bg-grey-900 group-hover:text-grey-100">
-            <FontAwesomeIcon
-              className="text-yellow-400 align-text-top"
-              icon={faStar}
-            />
-            <span>space</span>
-          </Kbd>
+          <FontAwesomeIcon
+            aria-label="Favourite"
+            className="text-yellow-400 mr-2"
+            icon={faStar}
+            role="img"
+          />
         )}
-      </div>
+        {/* Prevents box collapse when hotkey not set */}
+        {hotkey || <span className="opacity-0">.</span>}
+      </Kbd>
     </button>
   )
 }