Merge pull request #404 from will-stone/text

Text

package.json

@@ -192,25 +192,25 @@
     "@electron-forge/plugin-webpack": "6.0.0-beta.56",
     "@fullhuman/postcss-purgecss": "^3.1.3",
     "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/react": "^11.2.7",
     "@types/jest": "^26.0.23",
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.41",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@types/react-redux": "^7.1.16",
-    "@will-stone/eslint-config": "^2.8.0",
+    "@will-stone/eslint-config": "^2.9.0",
     "@will-stone/prettier-config": "^4.0.0",
     "concurrently": "^6.0.1",
     "copy-webpack-plugin": "^6.0.3",
     "css-loader": "^5.2.4",
     "dotenv": "^8.2.0",
-    "electron": "^13.0.0",
-    "eslint": "^7.24.0",
+    "electron": "^13.1.1",
+    "eslint": "^7.27.0",
     "fork-ts-checker-webpack-plugin": "^5.2.0",
     "husky": "^6.0.0",
-    "jest": "^27.0.3",
+    "jest": "^27.0.4",
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.6.0",
     "node-loader": "^1.0.2",

src/main/main.ts

@@ -13,12 +13,14 @@ import { apps } from '../config/apps'
 import {
   appStarted,
   changedHotkey,
+  clickedAlreadyDonated,
   clickedBWebsiteButton,
-  clickedCarrotButton,
   clickedCloseMenuButton,
   clickedCopyButton,
+  clickedDonate,
   clickedEyeButton,
   clickedFavButton,
+  clickedMaybeLater,
   clickedQuitButton,
   clickedReloadButton,
   clickedSetAsDefaultBrowserButton,
@@ -142,10 +144,10 @@ electron.app.on('ready', async () => {
       enableRemoteModule: false,
     },
     center: true,
-    height: bounds?.height || 212,
-    minHeight: 212,
-    width: bounds?.width || 458,
-    minWidth: 458,
+    height: bounds?.height || 204,
+    minHeight: 204,
+    width: bounds?.width || 424,
+    minWidth: 424,
     show: false,
     minimizable: false,
     maximizable: false,
@@ -399,11 +401,6 @@ electron.ipcMain.on('FROM_RENDERER', async (_, action: AnyAction) => {
     isEditMode = false
   }
 
-  // Click carrot
-  else if (clickedCarrotButton.match(action)) {
-    isEditMode = false
-  }
-
   // Click B's website button in settings
   else if (clickedBWebsiteButton.match(action)) {
     isEditMode = false
@@ -417,4 +414,14 @@ electron.ipcMain.on('FROM_RENDERER', async (_, action: AnyAction) => {
       bWindow?.hide()
     }
   }
+
+  // Donate button or maybe later buttons clicked
+  else if (clickedDonate.match(action) || clickedMaybeLater.match(action)) {
+    store.set('supportMessage', Date.now())
+  }
+
+  // Already donated button clicked
+  else if (clickedAlreadyDonated.match(action)) {
+    store.set('supportMessage', -1)
+  }
 })

src/main/store.ts

@@ -9,21 +9,28 @@ import { App } from '../config/types'
 export type Hotkeys = { [key in string]: App['id'] }
 
 export interface Store {
+  supportMessage: number
   fav: string
   firstRun?: boolean
   hotkeys: Hotkeys
   hiddenTileIds: string[]
-  theme: 'dark' | 'dracula' | 'light'
+  // TODO [>=15] Deprecated, remove when reach v15
+  theme?: 'dark' | 'dracula' | 'light'
   bounds?: Rectangle
 }
 
 export const store = new ElectronStore<Store>({
   name: 'store',
   defaults: {
+    supportMessage: 0,
     fav: 'com.apple.Safari',
     firstRun: true,
     hotkeys: {},
     hiddenTileIds: [],
-    theme: 'dark',
+  },
+  migrations: {
+    '>=14.2.2': (storeInstance) => {
+      storeInstance.delete('theme')
+    },
   },
 })

src/renderer/components/atoms/button.tsx

@@ -12,10 +12,9 @@ const Button: React.FC<React.ComponentPropsWithoutRef<'button'>> = ({
     <button
       className={clsx(
         className,
-        'active:shadow-none focus:outline-none active:opacity-75',
+        'focus:outline-none active:opacity-75',
         'px-3 py-2',
         'rounded-md',
-        'text-xs',
         'leading-none',
         'inline-flex items-center',
         'bg-black bg-opacity-10',

src/renderer/components/atoms/kbd.tsx

@@ -11,7 +11,7 @@ const Kbd: React.FC<Props> = ({ children, className, style }) => {
     <kbd
       className={clsx(
         className,
-        'text-xs tracking-widest uppercase rounded text-center',
+        'tracking-widest uppercase rounded text-center',
       )}
       style={style}
     >

src/renderer/components/layout.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 import { useSelector } from '../store'
 import { useKeyboardEvents } from './hooks/use-keyboard-events'
+import SupportMessage from './organisms/support-message'
 import Tiles from './organisms/tiles'
 import UrlBar from './organisms/url-bar'
 
@@ -19,6 +20,7 @@ const App: React.FC = () => {
     >
       <Tiles />
       <UrlBar />
+      <SupportMessage />
     </div>
   )
 }

src/renderer/components/molecules/tile.tsx

@@ -15,45 +15,52 @@ import {
   clickedTile,
 } from '../../store/actions'
 import { ExtendedApp } from '../../store/selector-hooks'
-import AppButton from '../atoms/app-button'
 import AppLogo from '../atoms/app-logo'
 import { Carrot } from '../atoms/carrot'
 import Kbd from '../atoms/kbd'
 
 interface Props {
   app: ExtendedApp
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
   controls: { favourite: boolean; hotkey: boolean; visibility: boolean }
 }
 
-const Tile: React.FC<Props> = ({ app, onClick, controls }) => {
+const Tile: React.FC<Props> = ({ app, controls }) => {
   const dispatch = useDispatch()
   const url = useSelector((state) => state.ui.url)
   const isEditMode = useSelector((state) => state.ui.isEditMode)
   const isDarkMode = useSelector((state) => state.theme.isDarkMode)
 
   return (
-    <div className={clsx('relative', 'w-28')}>
-      <AppButton
-        app={app}
+    <div className="relative w-32">
+      <button
+        key={app.id}
+        aria-label={`${app.name} Tile`}
+        className={clsx(
+          'w-full p-8',
+          'flex flex-col items-center justify-center max-h-full',
+          'focus:outline-none',
+          'space-y-2',
+          !isEditMode && 'hover:bg-black hover:bg-opacity-10',
+        )}
         disabled={isEditMode}
         onClick={(event) =>
-          onClick
-            ? onClick(event)
-            : dispatch(
-                clickedTile({
-                  url,
-                  appId: app.id,
-                  isAlt: event.altKey,
-                  isShift: event.shiftKey,
-                }),
-              )
+          !isEditMode &&
+          dispatch(
+            clickedTile({
+              url,
+              appId: app.id,
+              isAlt: event.altKey,
+              isShift: event.shiftKey,
+            }),
+          )
         }
+        title={app.name}
+        type="button"
       >
         {
           // TODO what can be done so this isn't hardcoded?
           app.id === 'carrot' ? (
-            <Carrot className="text-3xl" />
+            <Carrot className="text-4xl" />
           ) : (
             <AppLogo app={app} wiggle={isEditMode} />
           )
@@ -62,19 +69,18 @@ const Tile: React.FC<Props> = ({ app, onClick, controls }) => {
         {isEditMode && controls.hotkey && (
           <div
             className={clsx(
-              'flex-shrink-0 flex justify-center items-center space-x-1',
+              'flex-shrink-0 flex justify-center items-center space-x-2',
             )}
           >
             <FontAwesomeIcon
               className="opacity-50"
               fixedWidth
               icon={faKeyboard}
-              size="xs"
             />
             <input
               aria-label={`${app.name} hotkey`}
               className={clsx(
-                'text-xs uppercase focus:outline-none min-w-0 w-full text-center rounded',
+                'uppercase focus:outline-none min-w-0 w-full text-center rounded',
                 'shadow bg-opacity-50',
                 isDarkMode ? 'text-white bg-black' : 'text-black bg-white',
               )}
@@ -116,18 +122,16 @@ const Tile: React.FC<Props> = ({ app, onClick, controls }) => {
           </Kbd>
         )}
 
-        {!controls.hotkey && (
-          <div className="text-xs opacity-50">{app.name}</div>
-        )}
-      </AppButton>
+        {!controls.hotkey && <div className="opacity-50">{app.name}</div>}
+      </button>
 
       {isEditMode && controls.favourite && (
         <button
           aria-label={`Favourite ${app.name}`}
           className={clsx(
             'absolute top-5 left-5',
             'flex justify-center items-center',
-            'focus:outline-none shadow rounded-full h-6 w-6',
+            'focus:outline-none shadow rounded-full h-8 w-8',
             isDarkMode ? 'bg-black' : 'bg-white',
             'bg-opacity-50',
             !app.isFav && 'text-sm',
@@ -139,7 +143,6 @@ const Tile: React.FC<Props> = ({ app, onClick, controls }) => {
             className={clsx(!app.isFav && 'opacity-25')}
             fixedWidth
             icon={faStar}
-            size="xs"
           />
         </button>
       )}
@@ -149,7 +152,7 @@ const Tile: React.FC<Props> = ({ app, onClick, controls }) => {
           className={clsx(
             'absolute top-5 right-5',
             'flex justify-center items-center',
-            'focus:outline-none shadow rounded-full h-6 w-6',
+            'focus:outline-none shadow rounded-full h-8 w-8',
             isDarkMode ? 'bg-black' : 'bg-white',
             'bg-opacity-50',
             !app.isVisible && 'text-sm',
@@ -161,7 +164,6 @@ const Tile: React.FC<Props> = ({ app, onClick, controls }) => {
             className={clsx(!app.isVisible && 'opacity-25')}
             fixedWidth
             icon={app.isVisible ? faEye : faEyeSlash}
-            size="xs"
           />
         </button>
       )}