Add option to keep un-ticked items when archiving, use global styles …

…for forms and buttons (#28)
davidje13 · Dec 20, 2024 · 22ae8ee · 22ae8ee
1 parent 406793a
commit 22ae8ee
Show file tree

Hide file tree

Showing 38 changed files with 347 additions and 509 deletions.
diff --git a/frontend/src/actions/retro.ts b/frontend/src/actions/retro.ts
@@ -82,15 +82,17 @@ export const deleteRetroItem = (itemId: string): Spec<Retro>[] => [
   { items: ['delete', ['all', { id: ['=', itemId] }]] },
 ];
 
-export const clearCovered = (): Spec<Retro>[] => [
+export const clearCovered = (preserveNotDone: boolean): Spec<Retro>[] => [
   {
     state: ['=', {}],
     groupStates: ['=', {}],
     items: [
-      'seq',
+      'delete',
       [
-        'delete',
-        ['all', ['or', { category: ['!=', 'action'] }, { doneTime: ['>', 0] }]],
+        'all',
+        preserveNotDone
+          ? { doneTime: ['>', 0] }
+          : ['or', { category: ['!=', 'action'] }, { doneTime: ['>', 0] }],
       ],
     ],
   },

diff --git a/frontend/src/components/App.less b/frontend/src/components/App.less
@@ -1,14 +1,16 @@
 @import (reference) './colours.less';
-@import './opensans.less';
+@import './global-styles/opensans.less';
+@import './global-styles/form.less';
+@import './global-styles/button.less';
 
 body,
 input,
 textarea,
-button {
+button,
+dialog {
   font:
-    300 1em 'Open Sans',
+    300 1em / 1.4 'Open Sans',
     sans-serif;
-  line-height: 1.4;
 }
 
 article {

diff --git a/frontend/src/components/attachments/giphy/GiphyButton.tsx b/frontend/src/components/attachments/giphy/GiphyButton.tsx
@@ -3,7 +3,6 @@ import { type RetroItemAttachment } from '../../../shared/api-entities';
 import { useEvent } from '../../../hooks/useEvent';
 import { useBoolean } from '../../../hooks/useBoolean';
 import { Popup } from '../../common/Popup';
-import { WrappedButton } from '../../common/WrappedButton';
 import { GiphyPopup } from './GiphyPopup';
 
 interface PropsT {
@@ -21,8 +20,8 @@ export const GiphyButton = memo(
 
     return (
       <>
-        <WrappedButton
-          key="giphy"
+        <button
+          type="button"
           title="Add GIPHY image"
           className="open-giphy"
           onClick={visible.setTrue}

diff --git a/frontend/src/components/attachments/giphy/GiphyPopup.less b/frontend/src/components/attachments/giphy/GiphyPopup.less
@@ -16,22 +16,6 @@
       padding: 8px 16px;
       flex: 1;
     }
-
-    button {
-      margin: 0 0 0 8px;
-      padding: 8px 16px;
-      background: #eeeeee;
-      color: @green-text-on-white;
-      transition: box-shadow 0.2s ease;
-
-      &:hover {
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-      }
-
-      &:active {
-        box-shadow: none;
-      }
-    }
   }
 
   .credit {
@@ -77,17 +61,5 @@
 
   .dialog-options button {
     margin: 0 16px;
-    padding: 8px 16px;
-    background: #eeeeee;
-    color: @green-text-on-white;
-    transition: box-shadow 0.2s ease;
-
-    &:hover {
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    }
-
-    &:active {
-      box-shadow: none;
-    }
   }
 }
diff --git a/frontend/src/components/attachments/giphy/GiphyPopup.tsx b/frontend/src/components/attachments/giphy/GiphyPopup.tsx
@@ -1,8 +1,6 @@
 import { useState, memo } from 'react';
 import useAwaited from 'react-hook-awaited';
 import { type RetroItemAttachment } from '../../../shared/api-entities';
-import { WrappedButton } from '../../common/WrappedButton';
-import { Input } from '../../common/Input';
 import { giphyService } from '../../../api/api';
 import './GiphyPopup.less';
 
@@ -22,12 +20,15 @@ export const GiphyPopup = memo(
     );
 
     const deleteButton = defaultAttachment ? (
-      <WrappedButton onClick={() => onConfirm(null)}>Remove</WrappedButton>
+      <button type="button" onClick={() => onConfirm(null)}>
+        Remove
+      </button>
     ) : null;
 
     const optionElements = options.latestData?.map(({ small, medium }) => (
-      <WrappedButton
+      <button
         key={medium}
+        type="button"
         onClick={() => onConfirm({ type: 'giphy', url: medium })}
       >
         <img
@@ -36,7 +37,7 @@ export const GiphyPopup = memo(
           crossOrigin="anonymous"
           referrerPolicy="no-referrer"
         />
-      </WrappedButton>
+      </button>
     ));
 
     return (
@@ -47,13 +48,16 @@ export const GiphyPopup = memo(
             setAppliedQuery(query);
           }}
         >
-          <Input
+          <input
             type="text"
             value={query}
             placeholder="Enter a search term"
-            onChange={setQuery}
+            onChange={(e) => setQuery(e.currentTarget.value)}
+            autoComplete="off"
           />
-          <button type="submit">Search</button>
+          <button type="submit" className="global-button primary">
+            Search
+          </button>
         </form>
         <p className="credit">
           Powered By{' '}
@@ -68,7 +72,9 @@ export const GiphyPopup = memo(
         <p className="choices">{optionElements}</p>
         <p className="dialog-options">
           {deleteButton}
-          <WrappedButton onClick={onCancel}>Cancel</WrappedButton>
+          <button type="button" className="global-button" onClick={onCancel}>
+            Cancel
+          </button>
         </p>
       </div>
     );

diff --git a/frontend/src/components/common/Alert.tsx b/frontend/src/components/common/Alert.tsx
@@ -3,19 +3,17 @@ import Warning from '../../../resources/warning.svg';
 import './Alert.less';
 
 interface PropsT {
-  show?: boolean;
   warning?: boolean;
-  message?: string | undefined;
-  children?: ReactNode;
+  message?: ReactNode | undefined;
+  suffix?: ReactNode;
 }
 
-export const Alert = memo(
-  ({ show, warning = false, message, children }: PropsT) =>
-    show !== false && (message || children) ? (
-      <div className={`alert-message ${warning ? 'warning' : 'error'}`}>
-        <Warning title={warning ? 'Warning' : 'Error'} />
-        {message}
-        {children}
-      </div>
-    ) : null,
+export const Alert = memo(({ warning = false, message, suffix }: PropsT) =>
+  message ? (
+    <div className={`alert-message ${warning ? 'warning' : 'error'}`}>
+      <Warning title={warning ? 'Warning' : 'Error'} />
+      {message}
+      {suffix}
+    </div>
+  ) : null,
 );
diff --git a/frontend/src/components/common/HeaderLinkItem.tsx b/frontend/src/components/common/HeaderLinkItem.tsx
@@ -1,6 +1,5 @@
 import { memo, HTMLAttributes } from 'react';
 import { Link } from 'wouter';
-import { WrappedButton } from './WrappedButton';
 
 export interface LinkPropsT
   extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
@@ -19,9 +18,9 @@ export const HeaderLinkItem = memo(
     }
 
     return (
-      <WrappedButton onClick={action} {...props}>
+      <button type="button" onClick={action} {...props}>
         {label}
-      </WrappedButton>
+      </button>
     );
   },
 );
diff --git a/frontend/src/components/common/Input.tsx b/frontend/src/components/common/Input.tsx
diff --git a/frontend/src/components/common/WrappedButton.tsx b/frontend/src/components/common/WrappedButton.tsx
diff --git a/frontend/src/components/global-styles/button.less b/frontend/src/components/global-styles/button.less
@@ -0,0 +1,30 @@
+@import (reference) '../colours.less';
+
+.global-button {
+  display: inline-block;
+  padding: 8px 16px;
+  background: #eeeeee;
+  color: @green-text-on-white;
+  transition: box-shadow 0.2s ease;
+  text-align: center;
+
+  &:hover,
+  &:focus {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    text-decoration: none;
+  }
+
+  &:active {
+    box-shadow: none;
+    text-decoration: none;
+  }
+
+  &.primary {
+    background: @green-button-dark;
+    color: #ffffff;
+  }
+
+  &:disabled {
+    background: @beige-shadow;
+  }
+}