feat(web): visually update snapshot modal

LordTermor · Sep 2, 2024 · b2ee97a · b2ee97a
1 parent 9e5fabd
commit b2ee97a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/web/src/components/SectionSelect.tsx b/web/src/components/SectionSelect.tsx
@@ -63,7 +63,7 @@ export default function SectionSelect({
                 <daisyui.Dropdown>
                     <components.Control
                         className={
-                            "input input-bordered input-sm bg-base-100 " +
+                            "input input-bordered input-sm bg-base-100 w-full" +
                             classNames
                         }
                         {...rest}
@@ -130,7 +130,7 @@ export default function SectionSelect({
     );
 
     return (
-        <span className="flex justify-stretch items-center w-full space-x-1">
+        <span className="flex justify-between items-center w-full space-x-1">
             <Select<IOption>
                 unstyled={true}
                 components={makeComponents(faCodeBranch)}

diff --git a/web/src/modals/SnapshotModal.tsx b/web/src/modals/SnapshotModal.tsx
@@ -17,6 +17,8 @@ import { Button, Form, Modal, ModalProps, Select } from "react-daisyui";
 import { createPortal } from "react-dom";
 import axios from "axios";
 import SectionSelect from "../components/SectionSelect";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowDown, faCopy } from "@fortawesome/free-solid-svg-icons";
 
 export type ISnapshotModalProps = ModalProps & {
     sections: Section[];
@@ -33,6 +35,7 @@ export const SnapshotModal = forwardRef<HTMLDialogElement, ISnapshotModalProps>(
         useEffect(() => {
             setSourceSection({
                 ...props.sections.at(0),
+                ...{ repository: undefined },
                 ...props.sourceSection
             });
         }, [props.sourceSection, props.sections]);
@@ -82,17 +85,24 @@ export const SnapshotModal = forwardRef<HTMLDialogElement, ISnapshotModalProps>(
 
         return createPortal(
             <Modal ref={internalRef} {...props}>
-                <h1 className="text-3xl font-bold">Snapshot</h1>
+                <h1 className="text-3xl font-bold">
+                    <FontAwesomeIcon className="pr-2" size="xs" icon={faCopy} />
+                    Snapshot
+                </h1>
                 <Form>
                     <Form.Label title="Source section" />
                     <SectionSelect
+                        disabled={[false, true, false]}
                         selectedSection={sourceSection}
                         sections={props.sections}
                         onSelected={(value) => {
                             setSourceSection(value);
                         }}
                     />
                 </Form>
+                <div className="flex justify-center my-4">
+                    <FontAwesomeIcon icon={faArrowDown} className="h-6 w-6" />
+                </div>
 
                 <Form>
                     <Form.Label title="Target section" />