new alert styling + fix tests

cybersemics · Dec 30, 2024 · 32c8b1b · 32c8b1b
1 parent 42b1ef5
commit 32c8b1b
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 59 deletions.
diff --git a/src/colors.config.ts b/src/colors.config.ts
@@ -65,6 +65,8 @@ const colors = {
     exportTextareaColor: 'rgba(170, 170, 170, 1)', // #aaa, also used in anchorButton
     inherit: 'inherit',
     currentColor: 'currentColor',
+    alertBorder: 'rgba(36, 36, 36, 1)',
+    alertBg: 'rgba(23, 23, 23, 1)', // #171717
   },
   light: {
     // Background colors in capacitor app needs to be in hexadecimal codes
@@ -132,6 +134,8 @@ const colors = {
     exportTextareaColor: 'rgba(85, 85, 85, 1)',
     inherit: 'inherit',
     currentColor: 'currentColor',
+    alertBorder: 'rgba(219, 219, 219, 1)',
+    alertBg: 'rgba(232, 232, 232, 1)', // #171717
   },
 } as const
 

diff --git a/src/commands/__tests__/delete.ts b/src/commands/__tests__/delete.ts
@@ -35,7 +35,7 @@ describe('delete', () => {
 
       await act(vi.runAllTimersAsync)
 
-      const popupValue = await screen.findByTestId('popup-value')!
+      const popupValue = await screen.findByTestId('alert')!
       expect(popupValue.textContent).toBe('Permanently deleted test')
     })
   })

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -1,73 +1,33 @@
-import React, { FC, useCallback, useRef, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import React, { FC, useRef, useState } from 'react'
+import { useSelector } from 'react-redux'
 import { TransitionGroup } from 'react-transition-group'
-import { css, cx } from '../../styled-system/css'
-import { anchorButtonRecipe } from '../../styled-system/recipes'
+import { css } from '../../styled-system/css'
 import { token } from '../../styled-system/tokens'
-import { alertActionCreator } from '../actions/alert'
-import { redoActionCreator as redo } from '../actions/redo'
-import { undoActionCreator as undo } from '../actions/undo'
 import { AlertType } from '../constants'
-import isUndoEnabled from '../selectors/isUndoEnabled'
 import alertStore from '../stores/alert'
-import fastClick from '../util/fastClick'
 import strip from '../util/strip'
 import FadeTransition from './FadeTransition'
-import Popup from './Popup'
 import RedoIcon from './RedoIcon'
 import UndoIcon from './UndoIcon'
 
+const alertToIcon = {
+  [AlertType.Undo]: UndoIcon,
+  [AlertType.Redo]: RedoIcon,
+}
+
 /** An alert component that fades in and out. */
 const Alert: FC = () => {
   const popupRef = useRef<HTMLDivElement>(null)
   const [isDismissed, setDismiss] = useState(false)
-  const dispatch = useDispatch()
   const alert = useSelector(state => state.alert)
   const alertStoreValue = alertStore.useState()
   const value = strip(alertStoreValue ?? alert?.value ?? '')
-  const undoEnabled = useSelector(isUndoEnabled)
-  const redoEnabled = useSelector(state => state.redoPatches.length > 0)
   const fontSize = useSelector(state => state.fontSize)
   const iconSize = 0.78 * fontSize
 
-  /** Dismiss the alert on close. */
-  const onClose = useCallback(() => {
-    if (!alert?.showCloseLink) return
-    setDismiss(true)
-    dispatch(alertActionCreator(null))
-  }, [alert, dispatch])
-
-  const undoOrRedo = alert?.alertType === AlertType.Undo || alert?.alertType === AlertType.Redo
-  const buttons = undoOrRedo ? (
-    <div className={css({ marginTop: '0.5em' })}>
-      <a
-        className={cx(anchorButtonRecipe({ small: true, isDisabled: !undoEnabled }), css({ margin: '0.25em' }))}
-        {...fastClick(() => {
-          dispatch(undo())
-        })}
-      >
-        <UndoIcon
-          size={iconSize}
-          fill={token('colors.bg')}
-          cssRaw={css.raw({ position: 'relative', top: '0.25em', right: '0.25em' })}
-        />
-        Undo
-      </a>
-      <a
-        className={cx(anchorButtonRecipe({ small: true, isDisabled: !redoEnabled }), css({ margin: '0.25em' }))}
-        {...fastClick(() => {
-          dispatch(redo())
-        })}
-      >
-        Redo
-        <RedoIcon
-          size={iconSize}
-          fill={token('colors.bg')}
-          cssRaw={css.raw({ position: 'relative', top: '0.25em', left: '0.25em' })}
-        />
-      </a>
-    </div>
-  ) : null
+  const Icon =
+    alert?.alertType && alert.alertType in alertToIcon ? alertToIcon[alert.alertType as keyof typeof alertToIcon] : null
+  const renderedIcon = Icon ? <Icon size={iconSize} fill={token('colors.fg')} /> : null
 
   // if dismissed, set timeout to 0 to remove alert component immediately. Otherwise it will block toolbar interactions until the timeout completes.
   return (
@@ -78,10 +38,31 @@ const Alert: FC = () => {
       {alert ? (
         <FadeTransition duration='slow' nodeRef={popupRef} onEntering={() => setDismiss(false)}>
           {/* Specify a key to force the component to re-render and thus recalculate useSwipeToDismissProps when the alert changes. Otherwise the alert gets stuck off screen in the dismiss state. */}
-          <Popup {...alert} ref={popupRef} onClose={onClose} key={value}>
+          <div
+            className={css({
+              position: 'fixed',
+              boxSizing: 'border-box',
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'flex-start',
+              padding: '12px 16px',
+              gap: '8px',
+              bottom: '36px',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              background: 'alertBg',
+              border: '1px solid {colors.alertBorder}',
+              borderRadius: '8px',
+              zIndex: 'popup',
+            })}
+            ref={popupRef}
+            key={value}
+            data-testid='alert-content'
+          >
+            {renderedIcon}
             {value}
-            {buttons}
-          </Popup>
+          </div>
         </FadeTransition>
       ) : null}
     </TransitionGroup>

diff --git a/...tests__/__image_snapshots__/drag-and-drop/drag-alert-and-quick-drop-panel-1.png b/...tests__/__image_snapshots__/drag-and-drop/drag-alert-and-quick-drop-panel-1.png
diff --git a/src/e2e/puppeteer/__tests__/render-thoughts.ts b/src/e2e/puppeteer/__tests__/render-thoughts.ts
@@ -2,6 +2,7 @@ import path from 'path'
 import configureSnapshots from '../configureSnapshots'
 import click from '../helpers/click'
 import clickThought from '../helpers/clickThought'
+import hide from '../helpers/hide'
 import hideHUD from '../helpers/hideHUD'
 import keyboard from '../helpers/keyboard'
 import paste from '../helpers/paste'
@@ -167,7 +168,7 @@ describe('Font Size: 13', () => {
     await click('[data-testid=decrease-font]') // 13
 
     // close alert
-    await click('[data-testid=close-button]')
+    await hide('[data-testid=alert]')
 
     // scroll to top
     await scroll(0, 0)
@@ -185,7 +186,7 @@ describe('Font Size: 22', () => {
     await click('[data-testid=increase-font]') // 22
 
     // close alert
-    await click('[data-testid=close-button]')
+    await hide('[data-testid=alert]')
 
     // scroll to top
     await scroll(0, 0)

diff --git a/src/e2e/puppeteer/__tests__/url.ts b/src/e2e/puppeteer/__tests__/url.ts
@@ -1,6 +1,7 @@
 import path from 'path'
 import configureSnapshots from '../configureSnapshots'
 import click from '../helpers/click'
+import hide from '../helpers/hide'
 import hideHUD from '../helpers/hideHUD'
 import paste from '../helpers/paste'
 import press from '../helpers/press'
@@ -81,7 +82,7 @@ describe('multiline', () => {
     await click('[data-testid=decrease-font]') // 13
 
     // close alert
-    await click('[data-testid=close-button]')
+    await hide('[data-testid=alert]')
 
     // scroll to top
     await scroll(0, 0)

diff --git a/src/e2e/puppeteer/helpers/dragAndDropThought.ts b/src/e2e/puppeteer/helpers/dragAndDropThought.ts
@@ -93,7 +93,7 @@ const dragAndDropThought = async (
   }
 
   await page.locator('[data-testid="quick-drop-panel"]').wait()
-  await page.locator('[data-testid="popup-value"]').wait()
+  await page.locator('[data-testid="alert-content"]').wait()
 
   if (mouseUp) {
     await page.mouse.up()