Update binding icon styles and fix theme editor

packages/builder/src/builderStore/store/theme.js

@@ -5,19 +5,8 @@ export const getThemeStore = () => {
   const initialValue = {
     darkMode: true,
   }
-
   const store = localStorageStore("bb-theme", initialValue)
 
-  // Resets the custom theme to the default dark theme.
-  // The reset option is only available when dark theme is on, which is why it
-  // sets dark mode to true here
-  store.reset = () => {
-    store.set({
-      ...initialValue,
-      darkMode: true,
-    })
-  }
-
   // Update theme when store changes
   store.subscribe(theme => {
     themeElement.classList.toggle("spectrum--darkest", theme.darkMode)

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

@@ -138,18 +138,19 @@
   }
 
   .icon {
-    right: 2px;
-    top: 2px;
-    bottom: 2px;
+    right: 1px;
+    top: 1px;
+    bottom: 1px;
     position: absolute;
     align-items: center;
     display: flex;
     box-sizing: border-box;
-    padding-left: 7px;
-    border-left: 1px solid var(--grey-4);
-    background-color: var(--grey-2);
-    border-top-right-radius: var(--border-radius-m);
-    border-bottom-right-radius: var(--border-radius-m);
+    padding-left: 4px;
+    padding-right: 2px;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
     color: var(--grey-7);
     font-size: 14px;
   }

packages/builder/src/components/settings/ThemeEditor.svelte

@@ -7,7 +7,7 @@
 
 <div class="content">
   <div>
-    <Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
+    <Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
   </div>
 </div>