idea: clean up Builder UI

apps/widget-builder/src/components/buttons/DownloadJsonBtn.tsx

@@ -1,3 +1,4 @@
+import DownloadIcon from "@mui/icons-material/Download";
 import { Button } from "@mui/material";
 import { FC } from "react";
 
@@ -12,12 +13,13 @@ const DownloadJsonBtn: FC<DownloadJsonBtnProps> = ({ json }) => (
     data-testid="download-button"
     fullWidth
     size="large"
+    color="primary"
     variant="contained"
     href={URL.createObjectURL(
       new Blob([JSON.stringify(json, null, 2)], { type: "application/json" }),
     )}
     download={`widget.json`}
-    sx={{ color: "white" }}
+    startIcon={<DownloadIcon />}
   >
     Download JSON
   </Button>

apps/widget-builder/src/components/buttons/IPFSPublishBtn.tsx

@@ -1,3 +1,5 @@
+import CloudDoneIcon from "@mui/icons-material/CloudDone";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { LoadingButton } from "@mui/lab";
 import { Stack, Typography } from "@mui/material";
 import { SuperfluidButton } from "@superfluid-finance/widget/components";
@@ -14,20 +16,22 @@ const IPFSPublishBtn: FC<IPFSPublishBtnProps> = ({ json }) => {
   const { publish, isLoading, ipfsHash } = usePinataIpfs({
     pinataMetadata: { name: `${json.productDetails.name}-superfluid-widget` },
   });
+  const isPublished = !!ipfsHash;
 
   return (
     <Stack direction="column" gap={2}>
       <LoadingButton
         data-testid="publish-button"
         size="large"
         loading={isLoading}
+        disabled={isPublished}
         variant="contained"
         onClick={() => publish(json)}
+        startIcon={isPublished ? <CloudDoneIcon /> : <CloudUploadIcon />}
       >
-        Publish
+        {isPublished ? "Published to IPFS" : "Publish to IPFS"}
       </LoadingButton>
-
-      {ipfsHash && (
+      {isPublished && (
         <Stack direction="column" sx={{ alignItems: "center", mt: 4 }} gap={2}>
           <Typography
             data-testid="published-message"

apps/widget-builder/src/components/config-editor/ConfigEditorDrawer.tsx

@@ -19,6 +19,7 @@ export const ConfigEditorDrawer: FC<ConfigEditorDrawerProps> = ({
   setValue,
 }) => (
   <Drawer
+    variant="temporary"
     open={isOpen}
     onClose={() => setIsOpen(false)}
     keepMounted={true}

apps/widget-builder/src/components/export-editor/ExportEditor.tsx

@@ -1,11 +1,4 @@
-import {
-  Box,
-  Divider,
-  MenuItem,
-  Select,
-  Stack,
-  Typography,
-} from "@mui/material";
+import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
 import { FC, useMemo, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
@@ -76,10 +69,13 @@ const ExportEditor: FC = () => {
     useState<ExportOption>("ipfs");
 
   return (
-    <Stack gap={4}>
+    <Stack height="100%" gap={2}>
+      <Typography variant="h6" component="h2">
+        Checkout Export
+      </Typography>
       <Box>
         <InputWrapper
-          title="Select export option"
+          title="Export option"
           sx={{
             width: "100%",
           }}
@@ -104,10 +100,10 @@ const ExportEditor: FC = () => {
           )}
         </InputWrapper>
         <Box textAlign="center" sx={{ my: 3 }}>
-          <Typography variant="h5" color="grey.900" sx={{ mb: 1 }}>
+          <Typography variant="h6" component="h3" sx={{ mb: 1 }}>
             How does it work?
           </Typography>
-          <Typography color="grey.800">
+          <Typography color="text.secondary">
             {selectedExportOption === "ipfs"
               ? "You’ll create a hosted link to your checkout which you can embed in your CTAs."
               : selectedExportOption === "json"
@@ -118,17 +114,15 @@ const ExportEditor: FC = () => {
         {switchExportOption(selectedExportOption, json)}
       </Box>
 
-      <Divider />
-
-      <Box textAlign="center">
-        <Typography variant="h5" color="grey.900" sx={{ mb: 1 }}>
+      <Stack height="100%" justifyContent="flex-end" alignItems="center">
+        <Typography variant="h6" component="h3" sx={{ mb: 1 }}>
           Do you have more questions?
         </Typography>
-        <Typography color="grey.800" sx={{ mb: 3 }}>
+        <Typography color="text.secondary" sx={{ mb: 3 }}>
           We’ll show you how your business can benefit from using our checkout.
         </Typography>
         <BookDemoBtn>Book a Demo</BookDemoBtn>
-      </Box>
+      </Stack>
     </Stack>
   );
 };

apps/widget-builder/src/components/form/InputWrapper.tsx

@@ -1,11 +1,12 @@
-import InfoIcon from "@mui/icons-material/Info";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import {
   FormControl,
   FormHelperText,
   FormLabel,
   Stack,
   SxProps,
   Tooltip,
+  Typography,
   useTheme,
 } from "@mui/material";
 import { FC, PropsWithChildren, useId } from "react";
@@ -19,7 +20,7 @@ export const InputInfo: FC<InputInfoProps> = ({ tooltip }) => {
 
   return (
     <Tooltip title={tooltip}>
-      <InfoIcon fontSize="small" sx={{ color: theme.palette.grey[500] }} />
+      <InfoOutlinedIcon fontSize="small" sx={{ color: "text.secondary" }} />
     </Tooltip>
   );
 };
@@ -30,7 +31,9 @@ interface InputWrapperProps {
   tooltip?: string;
   sx?: SxProps;
   helperText?: string;
-  children: (inputId: string) => PropsWithChildren["children"];
+  optional?: boolean;
+  error?: boolean;
+  children: (inputId: string, error?: boolean) => PropsWithChildren["children"];
 }
 
 const InputWrapper: FC<InputWrapperProps> = ({
@@ -39,23 +42,37 @@ const InputWrapper: FC<InputWrapperProps> = ({
   sx = {},
   helperText,
   children,
+  optional,
+  error,
   ...props
 }) => {
   const generatedId = useId();
   const inputId = props.id ?? generatedId;
   const labelId = `label-${inputId}`;
   return (
-    <FormControl sx={sx}>
+    <FormControl sx={sx} error={error}>
       <Stack direction="row" alignItems="center" gap={1} sx={{ mb: 0.75 }}>
         {!!title && (
           <FormLabel id={labelId} htmlFor={inputId} focused={false}>
             {title}
+            {!!optional && (
+              <Typography
+                component="span"
+                variant="caption"
+                color="text.secondary"
+                sx={{ ml: 1 }}
+              >
+                (optional)
+              </Typography>
+            )}
           </FormLabel>
         )}
         {!!tooltip && <InputInfo tooltip={tooltip} />}
       </Stack>
-      {children(inputId)}
-      {!!helperText && <FormHelperText>{helperText}</FormHelperText>}
+      {children(inputId, error)}
+      {!!helperText && (
+        <FormHelperText aria-describedby={labelId}>{helperText}</FormHelperText>
+      )}
     </FormControl>
   );
 };

apps/widget-builder/src/components/image-select/ImageSelect.tsx

@@ -1,24 +1,17 @@
 import AddIcon from "@mui/icons-material/Add";
 import CancelIcon from "@mui/icons-material/Cancel";
-import {
-  Box,
-  Button,
-  IconButton,
-  Stack,
-  Typography,
-  useTheme,
-} from "@mui/material";
+import { Box, Button, IconButton, Stack, useTheme } from "@mui/material";
 import { ChangeEvent, FC, useRef } from "react";
 
 type ImageSelectProps = {
-  label: string;
+  id: string;
   imageSrc?: string;
   onClick: (file: File) => void;
   onRemove: () => void;
 };
 
 const ImageSelect: FC<ImageSelectProps> = ({
-  label,
+  id,
   imageSrc,
   onClick,
   onRemove,
@@ -39,19 +32,13 @@ const ImageSelect: FC<ImageSelectProps> = ({
 
   return (
     <Stack direction="column" gap={1} sx={{ flex: 1 }}>
-      <Stack
-        direction="row"
-        sx={{ alignItems: "center", justifyContent: "space-between" }}
-      >
-        <Typography variant="body1" fontWeight="500">
-          {label}
-        </Typography>
-        {imageSrc && (
+      {imageSrc && (
+        <Stack direction="row" justifyContent="flex-end">
           <IconButton onClick={onRemove} size="small" sx={{ p: 0 }}>
             <CancelIcon data-testid="remove-image-button" />
           </IconButton>
-        )}
-      </Stack>
+        </Stack>
+      )}
 
       {imageSrc ? (
         <Box
@@ -74,7 +61,7 @@ const ImageSelect: FC<ImageSelectProps> = ({
             data-testid="file-upload-field"
             hidden
             type="file"
-            name={label}
+            name={id}
             ref={inputRef}
             onChange={handleFileUpload}
           />
@@ -92,16 +79,6 @@ const ImageSelect: FC<ImageSelectProps> = ({
               height: 90,
             }}
           >
-            <Typography
-              variant="caption"
-              sx={{
-                color: theme.palette.grey[500],
-                textTransform: "none",
-                textAlign: "left",
-              }}
-            >
-              Optional
-            </Typography>
             <Box
               sx={{
                 display: "flex",