feat: style impovements

src/lib/components/secondaryTabs.svelte

@@ -1,3 +1,9 @@
-<ul class="secondary-tabs">
+<script lang="ts">
+    export let large = false;
+    let classes: string = undefined;
+    export { classes as class };
+</script>
+
+<ul class="secondary-tabs {classes}" class:is-large={large}>
     <slot />
 </ul>

src/lib/components/secondaryTabsItem.svelte

@@ -1,21 +1,37 @@
 <script lang="ts">
     export let href: string = null;
     export let disabled = false;
+    export let stretch = false;
+    export let fullWidth = false;
+    export let center = false;
 </script>
 
-<li class="secondary-tabs-item">
+<li class="secondary-tabs-item" class:u-stretch={stretch}>
     {#if href}
         {#if disabled}
-            <button class="secondary-tabs-button" disabled>
+            <button
+                class="secondary-tabs-button"
+                class:u-width-full-line={fullWidth}
+                class:u-text-center={center}
+                disabled>
                 <span class="text"><slot /></span>
             </button>
         {:else}
-            <a class="secondary-tabs-button" {href}>
+            <a
+                class="secondary-tabs-button"
+                class:u-width-full-line={fullWidth}
+                class:u-text-center={center}
+                {href}>
                 <span class="text"><slot /></span>
             </a>
         {/if}
     {:else}
-        <button class="secondary-tabs-button" {disabled} on:click>
+        <button
+            class="secondary-tabs-button"
+            class:u-width-full-line={fullWidth}
+            class:u-text-center={center}
+            {disabled}
+            on:click>
             <span class="text"><slot /></span>
         </button>
     {/if}

src/routes/console/project-[project]/functions/function-[function]/createCli.svelte

@@ -99,10 +99,15 @@
         >.
     </Alert>
 
-    <div>
-        <SecondaryTabs>
+    <div class="editor-border">
+        <SecondaryTabs large class="u-sep-block-end u-padding-8">
             {#each ['Unix', 'CMD', 'PowerShell'] as cat}
-                <SecondaryTabsItem on:click={() => (category = cat)} disabled={category === cat}>
+                <SecondaryTabsItem
+                    stretch
+                    fullWidth
+                    center
+                    on:click={() => (category = cat)}
+                    disabled={category === cat}>
                     {cat}
                 </SecondaryTabsItem>
             {/each}