app/ui/components/affinities-form-dialog.tsx

@@ -48,6 +48,16 @@ export default function AffinitiesFormDialog({ groups, group, visible, onHide }:
     });
   }
 
+  function resetAffinities() {
+    fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/default`, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      }
+    }).then((response) => response.json())
+      .then(setAffinities);
+  }
+
   return (
     <Dialog header="Update affinities" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
       {!isLoadingAffinities && <div className="card justify-evenly py-5 bg-gray-200 flex flex-col">
@@ -61,7 +71,10 @@ export default function AffinitiesFormDialog({ groups, group, visible, onHide }:
             </div>)
         }
 
-        <button className={classNames('primary')} onClick={submitAffinities} >Update</button>
+        <div className="flex justify-center">
+          <button className={classNames('gray')} onClick={resetAffinities} >Reset</button>
+          <button className={classNames('primary')} onClick={submitAffinities} >Update</button>
+        </div>
       </div>
       }
     </Dialog>

app/ui/components/button.tsx

@@ -2,13 +2,14 @@
 
 import clsx from "clsx";
 
-type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow';
+type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
 
 export function classNames(type: ButtonColor) {
     return (clsx("text-white py-1 px-2 mx-1 rounded disabled:opacity-50 disabled:cursor-not-allowed", {
         'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
         'bg-green-500 hover:bg-green-600': type === 'green',
         'bg-red-500 hover:bg-red-600': type === 'red',
-        'bg-yellow-500 hover:bg-yellow-700': type === 'yellow'
+        'bg-yellow-500 hover:bg-yellow-700': type === 'yellow',
+        'bg-gray-500 hover:bg-gray-700': type === 'gray'
     }))
 }