feat: functions review fixes v2

src/lib/elements/forms/inputSecret.svelte

@@ -12,7 +12,7 @@
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
-    <div class="input-text-wrapper" style="--amount-of-buttons:1">
+    <div class="input-text-wrapper" style=" --amount-of-buttons: 1;">
         {#if showInPlainText}
             <div
                 contenteditable="true"
@@ -31,17 +31,15 @@
                 autocomplete="off"
                 bind:value />
         {/if}
-        <div class="options-list">
-            <button
-                type="button"
-                on:click={() => (showInPlainText = !showInPlainText)}
-                class="options-list-button"
-                aria-label="show / hide password">
-                <span
-                    class:icon-eye={!showInPlainText}
-                    class:icon-eye-off={showInPlainText}
-                    aria-hidden="true" />
-            </button>
-        </div>
+        <button
+            type="button"
+            on:click={() => (showInPlainText = !showInPlainText)}
+            class="show-password-button"
+            aria-label="show / hide password">
+            <span
+                class:icon-eye={!showInPlainText}
+                class:icon-eye-off={showInPlainText}
+                aria-hidden="true" />
+        </button>
     </div>
 </FormItem>

src/lib/layout/logs.svelte

@@ -83,11 +83,10 @@
                         <div>Size: {size.value} {size.unit}</div>
                     </div>
                     <div class="status u-margin-inline-start-auto">
-                        <div class="u-flex u-flex-vertical u-cross-end">
+                        <div class="status u-margin-inline-start-auto">
                             <Status status={$log.data.status}>{$log.data.status}</Status>
-                            <p class="text">
-                                {calculateTime($log.data.buildTime)}
-                            </p>
+
+                            <time>{calculateTime($log.data.buildTime)}</time>
                         </div>
                     </div>
                 </div>

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

@@ -12,13 +12,13 @@
         Pagination
     } from '$lib/components';
     import {
-        Table,
         TableHeader,
         TableBody,
         TableRow,
         TableCellHead,
         TableCell,
-        TableCellText
+        TableCellText,
+        TableScroll
     } from '$lib/elements/table';
     import { execute, func } from '../store';
     import { Container } from '$lib/layout';
@@ -156,7 +156,7 @@
             <Heading tag="h3" size="7">Inactive</Heading>
         </div>
         {#if data.deployments.total > 1}
-            <Table>
+            <TableScroll>
                 <TableHeader>
                     <TableCellHead width={90}>Deployment ID</TableCellHead>
                     <TableCellHead width={140}>Created</TableCellHead>
@@ -246,7 +246,7 @@
                         {/if}
                     {/each}
                 </TableBody>
-            </Table>
+            </TableScroll>
         {:else}
             <Empty single target="deployment" on:click={() => (showCreate = true)}>
                 <div class="u-text-center">

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

@@ -26,13 +26,15 @@
     let files: FileList;
     let lang = 'js';
     let codeSnippets = {};
+    let os = 'unknown';
 
     const functionId = $page.params.function;
     const dispatch = createEventDispatcher();
 
     onMount(() => {
         lang = setLanguage($func.runtime);
         codeSnippets = setCodeSnippets(lang);
+        os = navigator['userAgentData']?.platform || navigator?.platform || 'unknown';
     });
 
     function setLanguage(runtime: string) {
@@ -107,6 +109,21 @@
             });
         }
     }
+
+    function openCategory(category: string, index: number) {
+        switch (category) {
+            case 'CMD':
+                return os.includes('Win');
+            case 'PowerShell':
+                return os.includes('Win');
+            case 'Unix':
+                return (
+                    os === 'unknown' || os.includes('Linux') || os.includes('Mac') || index === 0
+                );
+            default:
+                return index === 0;
+        }
+    }
 </script>
 
 <Modal size="big" bind:show={showCreate} on:submit={create}>
@@ -119,7 +136,7 @@
             on:click={() => (mode = Mode.Github)}
             selected={mode === Mode.Github}
             event="deploy_github">
-            GitHub - (Soon!)
+            GitHub - (Soon)
         </Tab>
         <Tab
             on:click={() => (mode = Mode.Manual)}
@@ -144,7 +161,7 @@
         </p>
         <Collapsible>
             {#each ['Unix', 'CMD', 'PowerShell'] as category, i}
-                <CollapsibleItem open={i === 0}>
+                <CollapsibleItem open={openCategory(category, i)}>
                     <svelte:fragment slot="title">{category}</svelte:fragment>
                     <Code
                         withLineNumbers
@@ -156,19 +173,17 @@
             {/each}
         </Collapsible>
     {:else if mode === Mode.Github}
-        <div class="common-section grid-1-2">
-            <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
-                {#if $app.themeInUse === 'dark'}
-                    <img src={GithubDark} alt="github" />
-                {:else}
-                    <img src={GithubLight} alt="github" />
-                {/if}
-            </div>
-            <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-24">
+        <div class="grid-1-1 u-gap-16">
+            {#if $app.themeInUse === 'dark'}
+                <img src={GithubDark} alt="github" />
+            {:else}
+                <img src={GithubLight} alt="github" />
+            {/if}
+            <div class="u-flex u-flex-vertical u-gap-24">
                 <h3 class="body-text-1">Coming Soon!</h3>
                 <p>
                     Creating deployments will be easier than ever with our upcoming Git Integration.
-                    Just set up a repository and we’ll do the rest.
+                    Just set up a repository and we'll do the rest.
                 </p>
             </div>
         </div>

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

@@ -1,5 +1,7 @@
 <script lang="ts">
-    import { afterNavigate } from '$app/navigation';
+    import { afterNavigate, goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { trackEvent } from '$lib/actions/analytics';
     import { Code, Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -33,6 +35,9 @@
                 data?.length ? data : undefined,
                 true
             );
+            goto(
+                `${base}/console/project-${$page.params.project}/functions/function-${selectedFunction.$id}/executions`
+            );
             close();
             addNotification({
                 type: 'success',

src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte

@@ -3,13 +3,13 @@
     import { Pill } from '$lib/elements';
     import { Copy, Status, Heading, Pagination, EmptySearch } from '$lib/components';
     import {
-        Table,
         TableHeader,
         TableBody,
         TableCellHead,
         TableCell,
         TableCellText,
-        TableRow
+        TableRow,
+        TableScroll
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { calculateTime } from '$lib/helpers/timeConversion';
@@ -49,7 +49,7 @@
         <Heading tag="h2" size="5">Logs</Heading>
     </div>
     {#if data.executions.total}
-        <Table>
+        <TableScroll>
             <TableHeader>
                 <TableCellHead width={90}>Execution ID</TableCellHead>
                 <TableCellHead width={140}>Created</TableCellHead>
@@ -98,7 +98,7 @@
                     </TableRow>
                 {/each}
             </TableBody>
-        </Table>
+        </TableScroll>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {data.executions.total}</p>
             <Pagination