Work on add space modal

src/lib/components/CardButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import cx from 'classnames'
+  import Icon from "@lib/components/Icon.svelte"
+
+  export let icon
+  export let title
+</script>
+
+<button on:click class={cx($$props.class, "btn btn-neutral btn-lg text-left h-24")}>
+  <div class="flex gap-6 py-4 flex-grow items-center">
+    <Icon class="bg-accent" size={7} {icon} />
+    <div class="flex flex-col gap-1 flex-grow">
+      <p class="text-stark-content">{title}</p>
+      <p class="text-xs"><slot /></p>
+    </div>
+    <Icon size={7} icon="alt-arrow-right" />
+  </div>
+</button>

src/lib/components/Field.svelte

@@ -0,0 +1,9 @@
+<div class="flex flex-col gap-2">
+  <label class="flex items-center gap-2 font-bold">
+    <slot name="label" />
+  </label>
+  <slot name="input" />
+  <p class="text-sm text-neutral-200">
+    <slot name="info" />
+  </p>
+</div>

src/lib/components/Icon.svelte

@@ -11,6 +11,7 @@
   import AddSquare from "@assets/icons/Add Square.svg?dataurl"
   import AddCircle from "@assets/icons/Add Circle.svg?dataurl"
   import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/Alt Arrow Left.svg?dataurl"
   import ClipboardText from "@assets/icons/Clipboard Text.svg?dataurl"
   import Compass from "@assets/icons/Compass.svg?dataurl"
   import CompassBig from "@assets/icons/Compass Big.svg?dataurl"
@@ -30,6 +31,7 @@
     "add-square": AddSquare,
     "add-circle": AddCircle,
     "alt-arrow-right": AltArrowRight,
+    "alt-arrow-left": AltArrowLeft,
     "clipboard-text": ClipboardText,
     compass: Compass,
     "compass-big": CompassBig,

src/lib/components/ModalBox.svelte

@@ -0,0 +1,32 @@
+<script context="module" lang="ts">
+  const modalHeight = tweened(0, {
+		duration: 700,
+		easing: quintOut
+	})
+</script>
+
+<script lang="ts">
+  import {onMount} from 'svelte'
+  import {slide} from 'svelte/transition'
+	import {quintOut} from 'svelte/easing'
+	import {tweened} from 'svelte/motion'
+  import {last} from '@welshman/lib'
+
+	export let component
+	export let props
+
+  let box: HTMLElement
+  let content: HTMLElement
+  let naturalHeight = 0
+
+  onMount(() => {
+    naturalHeight = content.clientHeight + 48
+    $modalHeight = naturalHeight
+  })
+</script>
+
+<div class="modal-box" bind:this={box} style={`height: ${$modalHeight}px`} class:overflow-hidden={$modalHeight !== naturalHeight}>
+  <div bind:this={content}>
+    <svelte:component this={component} {...props} />
+  </div>
+</div>

src/lib/components/PrimaryNavItem.svelte

@@ -2,10 +2,10 @@
   export let title
 </script>
 
-<div class="relative z-nav-item flex h-14 w-14 items-center justify-center">
+<button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
   <div
     class="avatar tooltip tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
     data-tip={title}>
     <slot />
   </div>
-</div>
+</button>

src/lib/components/SecondaryNavItem.svelte

@@ -8,10 +8,29 @@
 
 <a
   {href}
-  class="button group justify-start border-none transition-all hover:bg-base-100"
+  class="group justify-start border-none transition-all hover:bg-base-100"
   class:text-stark-content={active}
   class:bg-base-100={active}>
   <div class="flex items-center gap-3">
     <slot />
   </div>
 </a>
+
+<style>
+a {
+  padding: 12px 16px;
+  display: flex;
+  border-radius: var(--rounded-btn, 0.5rem);
+  cursor: pointer;
+  animation: nav-button-pop 200ms ease-out;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+a:active:hover,
+a:active:focus {
+  animation: button-pop 0s ease-out;
+  transform: scale(var(--btn-focus-scale, 0.97));
+}
+</style>