Save changes automations

src/components/Molecules/ParagraphAnnotation/ParagraphAnnotation.tsx

@@ -31,9 +31,14 @@ const ParagraphAnnotationStyles = cva(["flex"], {
       annotationNear: "gap-2 items-center",
       annotationBelow: "flex-col gap-1.5",
     },
+    annotationVariant: {
+      white: "white",
+      default: "default",
+    },
   },
   defaultVariants: {
     variant: "annotationBelow",
+    annotationVariant: "default",
   },
 });
 
@@ -47,6 +52,7 @@ const ParagraphAnnotation = component$<ParagraphAnnotationType>(
     hasIconBox,
     textBoxClass,
     variant,
+    annotationVariant,
     ...props
   }: ParagraphAnnotationType) => {
     return (
@@ -58,7 +64,7 @@ const ParagraphAnnotation = component$<ParagraphAnnotationType>(
           )}
           onClick$={props.onClick$}
         >
-          <div class="flex items-center gap-4">
+          <div class={twMerge("flex items-center gap-4")}>
             {hasIconBox ? (
               <IconBox
                 tokenPath={props.iconBoxTokenPath}
@@ -77,7 +83,10 @@ const ParagraphAnnotation = component$<ParagraphAnnotationType>(
               )}
             >
               <Paragraph text={props.paragraphText} size="sm" />
-              <Annotation text={props.annotationText} />
+              <Annotation
+                text={props.annotationText}
+                variant={annotationVariant}
+              />
             </div>
           </div>
           <Slot />

src/routes/app/automation/_components/AutomationsMenu.tsx

@@ -94,7 +94,7 @@ export const AutomationsMenu = component$<AutomationsMenuProps>(() => {
 
   return (
     <>
-      <div class="grid grid-rows-[32px_40px_1fr] gap-6 border-r border-white/10 bg-white/3 p-6">
+      <div class="flex flex-col gap-6 border-r border-white/10 bg-white/3 p-6">
         <BoxHeader
           title="Automations"
           variantHeader="h4"

src/routes/app/automation/_components/CentralView.tsx

@@ -12,6 +12,7 @@ import { server$ } from "@builder.io/qwik-city";
 import { messagesContext } from "../../layout";
 import Annotation from "~/components/Atoms/Annotation/Annotation";
 import IconAdd from "@material-design-icons/svg/outlined/add.svg?jsx";
+import { SaveChanges } from "./SaveChanges/SaveChanges";
 
 const deleteActionFromDb = server$(async function (actionId, user) {
   // await updateIsActiveStatus(actionId, false);
@@ -61,50 +62,53 @@ export const CentralView = component$<CentralViewProps>(() => {
     }
   });
   return (
-    <div class="p-6">
+    <div class="">
       {automationPageContext.activeAutomation.value ? (
-        <div class="flex h-full w-full flex-col">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-2">
-              <Header
-                variant="h4"
-                text={automationPageContext.activeAutomation.value?.name}
-                class="font-normal"
-              />
-              <Button
-                leftIcon={<IconEdit class="h-3 w-3 fill-white" />}
-                customClass="bg-white/10 h-8 w-8 p-0"
-              />
-              <Button
-                leftIcon={<IconTrash class="h-4 w-4 fill-customRed" />}
-                customClass="bg-customRed/10 h-8 w-8 p-0"
-                onClick$={$(async () => {
-                  await handleDeleteAction();
-                })}
-              />
-              {/* <div class="flex items-center gap-2">
-          <Paragraph size="xs" class="text-customGreen" text="Active" />
-          <Checkbox variant="toggleTick" isChecked={true} class="" />
-        </div> */}
-            </div>
-          </div>
-          <div class="flex h-full items-center justify-center">
-            {!automationPageContext.activeAutomation.value.deployed ? (
-              <div class="flex w-[438px] flex-col gap-4">
-                <Annotation text="Trigger" />
+        <>
+          <div class="flex h-full w-full flex-col">
+            <div class="flex items-center justify-between p-6">
+              <div class="flex items-center gap-2">
+                <Header
+                  variant="h4"
+                  text={automationPageContext.activeAutomation.value?.name}
+                  class="font-normal"
+                />
                 <Button
-                  text="Add Trigger"
-                  customClass=""
-                  variant="dashed"
-                  leftIcon={<IconAdd class="h-4 w-4" />}
-                  onClick$={async () => {
-                    automationPageContext.isDraverOpen.value = true;
-                  }}
+                  leftIcon={<IconEdit class="h-3 w-3 fill-white" />}
+                  customClass="bg-white/10 h-8 w-8 p-0"
                 />
+                <Button
+                  leftIcon={<IconTrash class="h-4 w-4 fill-customRed" />}
+                  customClass="bg-customRed/10 h-8 w-8 p-0"
+                  onClick$={$(async () => {
+                    await handleDeleteAction();
+                  })}
+                />
+                {/* <div class="flex items-center gap-2">
+                <Paragraph size="xs" class="text-customGreen" text="Active" />
+                <Checkbox variant="toggleTick" isChecked={true} class="" />
+              </div> */}
               </div>
-            ) : null}
+            </div>
+            <div class="flex h-full items-center justify-center p-6">
+              {!automationPageContext.activeAutomation.value.deployed ? (
+                <div class="flex w-[438px] flex-col gap-4">
+                  <Annotation text="Trigger" />
+                  <Button
+                    text="Add Trigger"
+                    customClass=""
+                    variant="dashed"
+                    leftIcon={<IconAdd class="h-4 w-4" />}
+                    onClick$={async () => {
+                      automationPageContext.isDraverOpen.value = true;
+                    }}
+                  />
+                </div>
+              ) : null}
+            </div>
+            <SaveChanges />
           </div>
-        </div>
+        </>
       ) : null}
     </div>
   );

src/routes/app/automation/_components/SaveChanges/SaveChanges.tsx

@@ -0,0 +1,21 @@
+import { component$ } from "@builder.io/qwik";
+import Button from "~/components/Atoms/Buttons/Button";
+import IconError from "@material-design-icons/svg/filled/error_outline.svg?jsx";
+import ParagraphAnnotation from "~/components/Molecules/ParagraphAnnotation/ParagraphAnnotation";
+
+export const SaveChanges = component$(() => {
+  return (
+    <ParagraphAnnotation
+      hasIconBox={true}
+      iconBoxBorder="clear"
+      customClass="relative bottom-0 h-20 border-t border-white/10 bg-white/3 p-6"
+      iconBoxCustomClass="p-0 w-7"
+      iconBoxCustomIcon={<IconError class="h-7 w-7 fill-white" />}
+      textBoxClass="max-w-[290px]"
+      annotationVariant="white"
+      annotationText="Remember, saving changes sends a transaction to the blockchain and incurs a gas fee."
+    >
+      <Button size="small" text="Save Changes" customClass="font-normal" />
+    </ParagraphAnnotation>
+  );
+});