Clean components and update dependencies

package.json

@@ -25,7 +25,7 @@
     "React"
   ],
   "dependencies": {
-    "@codex-storage/marketplace-ui-components": "^0.0.44",
+    "@codex-storage/marketplace-ui-components": "^0.0.45",
     "@codex-storage/sdk-js": "^0.0.15",
     "@sentry/browser": "^8.32.0",
     "@sentry/react": "^8.31.0",

playwright.config.ts

@@ -34,6 +34,8 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+
+    screenshot: "only-on-failure",
   },
 
   /* Configure projects for major browsers */

src/App.tsx

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-import "./App.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const queryClient = new QueryClient();

src/components/AppBar/appBar.css

@@ -87,9 +87,3 @@
     }
   }
 }
-
-/* @media (min-width: 1000px) {
-  .appBar-burger {
-    display: none;
-  }
-} */

src/components/Availability/AvailabilitiesTable.tsx

@@ -11,7 +11,6 @@ import { Times } from "../../utils/times";
 import { Fragment, useState } from "react";
 import { AvailabilityReservations } from "./AvailabilityReservations";
 import { AvailabilityIdCell } from "./AvailabilityIdCell";
-import { Arrays } from "../../utils/arrays";
 import { SlotRow } from "./SlotRow";
 import { AvailabilityWithSlots } from "./types";
 import { AvailabilityDiskRow } from "./AvailabilityDiskRow";
@@ -68,7 +67,8 @@ export function AvailabilitiesTable({ availabilities, space }: Props) {
   const rows = sorted.map((a) => {
     const showDetails = details.includes(a.id);
 
-    const onShowDetails = () => setDetails(Arrays.toggle(details, a.id));
+    const onShowDetails = () =>
+      setDetails(AvailabilityUtils.toggle(details, a.id));
     const hasSlots = a.slots.length > 0;
 
     return (

src/components/Availability/AvailabilityConfirm.css

@@ -3,29 +3,29 @@
     margin-top: 16px;
     margin-bottom: 16px;
   }
-}
 
-.availabilitConfirm-bottom {
-  margin-top: 1.5rem;
-  display: flex;
-  gap: 0.75rem;
-  align-items: flex-start;
-}
+  > div {
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
 
-.availabilitConfirm-subtitle {
-  margin-bottom: 0.5rem;
-  display: inline-block;
-}
+    > div:first-child {
+      background-color: rgb(var(--codex-color-primary-rgb), 0.2);
+      border-radius: 50%;
+      padding: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-.availabilitConfirm-iconContainer {
-  background-color: rgb(var(--codex-color-primary-rgb), 0.2);
-  border-radius: 50%;
-  padding: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+      svg {
+        color: rgb(var(--codex-color-primary-rgb));
+      }
+    }
 
-.availabilitConfirm-icon {
-  color: rgb(var(--codex-color-primary-rgb));
+    b {
+      margin-bottom: 0.5rem;
+      display: inline-block;
+    }
+  }
 }

src/components/Availability/AvailabilityConfirmation.tsx

@@ -54,15 +54,15 @@ export function AvailabilityConfirm({
           },
         ]}></SpaceAllocation>
 
-      <div className="availabilitConfirm-bottom">
-        <div className="availabilitConfirm-iconContainer">
-          <Info className="availabilitConfirm-icon" />
+      <div>
+        <div>
+          <Info />
         </div>
 
         <div>
-          <b className="availabilitConfirm-subtitle">Confirm your new sale</b>
+          <b>Confirm your new sale</b>
 
-          <p className="availabilitConfirm-message">
+          <p>
             By clicking 'Next', you will establish a new sale based on the space
             allocation specified above. Do you want to confirm ?
           </p>

src/components/Availability/AvailabilityEdit.tsx

@@ -42,9 +42,9 @@ export function AvailabilityEdit({
   hasLabel = true,
 }: Props) {
   const steps = useRef(["Sale", "Confirmation", "Success"]);
-  const [availability, setAvailability] = useState<AvailabilityState>(
-    defaultAvailabilityData
-  );
+  const [availability, setAvailability] = useState<
+    AvailabilityState & { slots?: unknown }
+  >(defaultAvailabilityData);
   const { state, dispatch } = useStepperReducer();
   const { mutateAsync, error } = useAvailabilityMutation(dispatch, state);
   const editAvailabilityValue = useRef(0);
@@ -112,7 +112,8 @@ export function AvailabilityEdit({
     WebStorage.set("availability-step", step);
 
     if (step == CONFIRM_STATE) {
-      const { slots, name, ...rest } = availability as any;
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      const { slots, name, ...rest } = availability;
       mutateAsync(rest);
     } else {
       dispatch({

src/components/Availability/AvailabilityReservations.tsx

@@ -11,14 +11,14 @@ import { Promises } from "../../utils/promises";
 import { CodexAvailability } from "@codex-storage/sdk-js";
 import { useEffect } from "react";
 import { ErrorPlaceholder } from "../ErrorPlaceholder/ErrorPlaceholder";
-import { availabilityColors } from "./availability.colors";
+import { AvailabilityUtils } from "./availability.utils";
 
 type Props = {
   availability: CodexAvailability | null;
   open: boolean;
   onClose: () => unknown;
 };
-// TODO remove this
+
 export function AvailabilityReservations({
   availability,
   onClose,
@@ -95,12 +95,15 @@ export function AvailabilityReservations({
     ...data.map((val, index) => ({
       title: val.id,
       size: parseInt(val.size, 10),
-      color: availabilityColors[index],
+      color: AvailabilityUtils.availabilityColors[index],
     })),
     {
       title: "Availability remaining",
       size: totalSize - totalUsed,
-      color: availabilityColors[availabilityColors.length - 1],
+      color:
+        AvailabilityUtils.availabilityColors[
+          AvailabilityUtils.availabilityColors.length - 1
+        ],
     },
   ];
   const isEmpty = !data.length;