move styling and icon to DomainTest component and continue mobile menu styles

src/components/Header.astro

@@ -76,6 +76,7 @@ import MobileMenuButton from "./MobileMenuButton.astro";
       position: static;
       gap: var(--spacing-default);
       box-shadow: none;
+      background-color: transparent;
 
       &[aria-hidden="false"] {
         display: flex;
@@ -83,6 +84,7 @@ import MobileMenuButton from "./MobileMenuButton.astro";
         position: static;
         align-items: center;
         box-shadow: none;
+        background-color: transparent;
       }
     }
   }

src/components/Navigation.astro

@@ -18,7 +18,11 @@ const { pathname } = Astro.url;
 <style>
   .zm-menu {
     display: flex;
-    margin-left: var(--spacing-l);
+    width: 100%;
+
+    @media screen and (min-width: 769px) {
+      margin-left: var(--spacing-l);
+    }
   }
 
   .zm-menu-list {
@@ -43,26 +47,31 @@ const { pathname } = Astro.url;
     display: flex;
     align-items: center;
     color: var(--color-muted);
-    height: var(--site-header-height);
     padding: 0 var(--spacing-xs);
 
     &.active {
       font-weight: var(--font-heading-weight);
     }
 
+    @media screen and (min-width: 769px) {
+      height: var(--site-header-height);
+    }
+
     &:hover,
     &.active {
       color: var(--color-text);
       position: relative;
 
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 5px;
-        background-color: var(--color-palette-main-30);
+      @media screen and (min-width: 769px) {
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 5px;
+          background-color: var(--color-palette-main-30);
+        }
       }
     }
   }

src/lib/components/Button/Button.svelte

@@ -18,18 +18,19 @@
     onClick,
     disabled,
     children,
+    class: className = '',
     ...restProps
   }: Props = $props();
 </script>
 
 <button
   type={type}
-  class={['zm-button', variant, size, restProps.class]}
+  class={['zm-button', variant, size, className]}
   onclick={onClick}
   disabled={disabled}
+  {...restProps}
 >
   {@render children?.()}
-  <i class="bi bi-person-walking"></i>
 </button>
 
 <style>
@@ -51,22 +52,6 @@
     line-height: 1;
     white-space: nowrap;
     cursor: pointer;
-
-    i {
-      display: none;
-    }
-
-    &[disabled] {
-      background: var(--color-disabled);
-      color: var(--color-muted-text);
-      box-shadow: 0 0 0 2px inset var(--button-disabled);
-      text-shadow: 0 1px 0 var(--color-palette-black-0);
-      cursor: not-allowed;
-
-      i {
-        display: initial;
-      }
-    }
   }
 
   .secondary {

src/lib/components/DomainTest/DomainTest.svelte

@@ -27,8 +27,9 @@
 <form novalidate onsubmit={startTest} class="zm-domain-test">
   <Stack>
     <Input type="text" bind:value={domain} placeholder="{m.domain()}" />
-    <Button type="submit" disabled={currentState !== 'IDLE'}>
+    <Button type="submit" disabled={currentState !== 'IDLE'} variant="primary" class="zm-domain-test-button">
       {currentState === 'IDLE' ? m.startTestBtn() : m.runningTest()}
+      <i class="bi bi-person-walking"></i>
     </Button>
   </Stack>
   <Switch id="advanced-toggle" controls="advanced-options" active={advanced} onClick={() => advanced = !advanced}>
@@ -49,4 +50,22 @@
     margin-top: calc(var(--rhythm) / 2);
     padding: var(--spacing-default);
   }
+
+  .zm-domain-test-button {
+    i {
+      display: none;
+    }
+
+    &[disabled] {
+      background: var(--color-disabled);
+      color: var(--color-muted-text);
+      box-shadow: 0 0 0 2px inset var(--button-disabled);
+      text-shadow: 0 1px 0 var(--color-palette-black-0);
+      cursor: not-allowed;
+
+      i {
+        display: initial;
+      }
+    }
+  }
 </style>

src/lib/components/Stack/Stack.svelte

@@ -41,6 +41,7 @@
   .stack {
     display: flex;
     gap: var(--gap);
+    flex-wrap: wrap;
   }
 
   .wrap {

src/lib/components/Switch/Switch.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {Snippet} from "svelte";
+  import Button from '@/lib/components/Button/Button.svelte';
 
   type Props = {
     id: string;
@@ -18,6 +19,12 @@
   }: Props = $props();
 </script>
 <div class="zm-switch">
-  <button type="button" id="{id}" aria-controls="{controls || null}" class="switch-toggle" aria-expanded={active} aria-labelledby="{id}-label" onclick={onClick}></button>
+  <Button type="button" id="{id}" aria-controls="{controls || null}" variant="primary" class="switch-toggle" aria-expanded={active} aria-labelledby="{id}-label" onclick={onClick}></Button>
   <label for="{id}" id="{id}-label">{@render children?.()}</label>
 </div>
+
+<style>
+  .zm-switch {
+
+  }
+</style>