Fix button sizes in settings

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte

@@ -51,7 +51,7 @@
   }
 </script>
 
-<Button primary on:click={drawer.show}>Define Actions</Button>
+<Button secondary size="S" on:click={drawer.show}>Define Actions</Button>
 <Drawer bind:this={drawer} title={'Actions'}>
   <svelte:fragment slot="description">
     Define what actions to run.

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte

@@ -35,7 +35,7 @@
   }
 </script>
 
-<Button secondary wide on:click={drawer.show}>Define Filters</Button>
+<Button size="S" secondary wide on:click={drawer.show}>Define Filters</Button>
 <Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <DrawerContent slot="body">

packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte

@@ -80,11 +80,11 @@
     "field/link": RelationshipFieldSelect,
   }
 
-  const getControl = type => {
+  const getControl = (type) => {
     return controlMap[type]
   }
 
-  const canRenderControl = setting => {
+  const canRenderControl = (setting) => {
     const control = getControl(setting?.type)
     if (!control) {
       return false
@@ -95,7 +95,7 @@
     return true
   }
 
-  const onInstanceNameChange = name => {
+  const onInstanceNameChange = (name) => {
     onChange("_instanceName", name)
   }
 
@@ -103,13 +103,13 @@
     const form = findClosestMatchingComponent(
       $currentAsset.props,
       componentInstance._id,
-      component => component._component.endsWith("/form")
+      (component) => component._component.endsWith("/form")
     )
     const dataSource = form?.dataSource
     const fields = makeDatasourceFormComponents(dataSource)
     onChange(
       "_children",
-      fields.map(field => field.json())
+      fields.map((field) => field.json())
     )
   }
 </script>
@@ -123,7 +123,8 @@
         label={def.label}
         key={def.key}
         value={get(assetInstance, def.key)}
-        onChange={val => onScreenPropChange(def.key, val)} />
+        onChange={(val) => onScreenPropChange(def.key, val)}
+      />
     {/each}
   {/if}
 
@@ -134,7 +135,8 @@
       label="Name"
       key="_instanceName"
       value={componentInstance._instanceName}
-      onChange={onInstanceNameChange} />
+      onChange={onInstanceNameChange}
+    />
   {/if}
 
   {#if settings && settings.length > 0}
@@ -145,10 +147,12 @@
           control={getControl(setting.type)}
           label={setting.label}
           key={setting.key}
-          value={componentInstance[setting.key] ?? componentInstance[setting.key]?.defaultValue}
+          value={componentInstance[setting.key] ??
+            componentInstance[setting.key]?.defaultValue}
           {componentInstance}
-          onChange={val => onChange(setting.key, val)}
+          onChange={(val) => onChange(setting.key, val)}
-          props={{ options: setting.options, placeholder: setting.placeholder }} />
+          props={{ options: setting.options, placeholder: setting.placeholder }}
+        />
       {/if}
     {/each}
   {:else}
@@ -157,10 +161,12 @@
     </div>
   {/if}
 
-  {#if componentDefinition?.component?.endsWith('/fieldgroup')}
+  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
-    <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
+    <div class="buttonWrapper">
-      Update Form Fields
+      <Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
-    </Button>
+        Update Form Fields
+      </Button>
+    </div>
   {/if}
 </div>
 <ConfirmDialog
@@ -168,7 +174,8 @@
   body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to update this Field Group?`}
   okText="Update"
   onOk={resetFormFields}
-  title="Confirm Form Field Update" />
+  title="Confirm Form Field Update"
+/>
 
 <style>
   .settings-view-container {
@@ -183,4 +190,9 @@
     margin-top: var(--spacing-m);
     color: var(--grey-6);
   }
+  .buttonWrapper {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+  }
 </style>