From 97a978fb36fc5b8e8eb14f41febbd138f7e9e4cd Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 9 Aug 2023 17:45:53 +0200
Subject: [PATCH] feat: style impovements

---
 src/lib/components/secondaryTabs.svelte       |  8 ++++++-
 src/lib/components/secondaryTabsItem.svelte   | 24 +++++++++++++++----
 .../function-[function]/createCli.svelte      | 11 ++++++---
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/secondaryTabs.svelte b/src/lib/components/secondaryTabs.svelte
index 6dd4970ad..4cc2a0db6 100644
--- a/src/lib/components/secondaryTabs.svelte
+++ b/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>
diff --git a/src/lib/components/secondaryTabsItem.svelte b/src/lib/components/secondaryTabsItem.svelte
index 4273de88c..3a87b01d7 100644
--- a/src/lib/components/secondaryTabsItem.svelte
+++ b/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}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
index 4e4a719f7..d1867d4cd 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
+++ b/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}