From 2c1cd7eea8250f02588bc151bab8faf07ee7133d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?= <43071496+adam-kov@users.noreply.github.com> Date: Thu, 13 Oct 2022 14:04:26 +0200 Subject: [PATCH] feat(frontend): Typography update (#725) * feat(frontend): Add new font face * feat(frontend): Typography update * fix(frontend): Import Inter font * fix(frontend): Font fixes * fix(front): Fix spacing and font inconsistencies * fix(frontend): Visual changes and fixes * fix(frontend): Minor visual fixes * fix(frontend): Remove comment --- frontend/src/app.css | 9 ++ frontend/src/lib/components/AppConnect.svelte | 19 ++- frontend/src/lib/components/EditorBar.svelte | 12 +- .../src/lib/components/FieldHeader.svelte | 11 +- .../src/lib/components/FlowBuilder.svelte | 2 +- frontend/src/lib/components/GroupModal.svelte | 76 ++++----- .../lib/components/IconedResourceType.svelte | 4 +- frontend/src/lib/components/PageHeader.svelte | 12 +- frontend/src/lib/components/Password.svelte | 2 +- frontend/src/lib/components/Path.svelte | 10 +- frontend/src/lib/components/Required.svelte | 4 +- .../lib/components/ResourceTypePicker.svelte | 4 +- .../src/lib/components/SchemaEditor.svelte | 2 +- .../src/lib/components/SchemaModal.svelte | 146 +++++++++--------- .../src/lib/components/ScriptBuilder.svelte | 89 +++++------ .../src/lib/components/ScriptEditor.svelte | 14 +- .../src/lib/components/ScriptSchema.svelte | 43 +++--- frontend/src/lib/components/ShareModal.svelte | 88 ++++++----- .../src/lib/components/VariableEditor.svelte | 80 +++++----- .../components/common/button/Button.svelte | 5 +- .../src/lib/components/common/kbd/Kbd.svelte | 2 +- .../flows/common/FlowCardHeader.svelte | 4 +- .../flows/content/FlowModule.svelte | 2 +- .../flows/content/FlowSettings.svelte | 33 ++-- .../flows/header/FlowImportExportMenu.svelte | 3 +- .../src/lib/components/jobs/JobDetail.svelte | 4 +- .../landing/FlowGettingStarted.svelte | 2 +- .../landing/RessourceGettingStarted.svelte | 2 +- .../landing/ScriptGettingStarted.svelte | 2 +- .../propertyPicker/ObjectViewer.svelte | 5 +- .../components/sidebar/WorkspaceMenu.svelte | 30 ++-- frontend/src/routes/flows.svelte | 25 +-- frontend/src/routes/index.svelte | 34 ++-- frontend/src/routes/resources.svelte | 36 +++-- frontend/src/routes/runs/[...path].svelte | 25 +-- frontend/src/routes/schedule/add.svelte | 15 +- frontend/src/routes/schedules.svelte | 2 +- frontend/src/routes/scripts.svelte | 29 ++-- .../src/routes/scripts/get/[...hash].svelte | 10 +- .../src/routes/user/workspaces@user.svelte | 8 +- frontend/src/routes/workers.svelte | 4 +- frontend/static/Inter-Variable.ttf | Bin 0 -> 803384 bytes frontend/tailwind.config.cjs | 116 ++++++++++++-- 43 files changed, 561 insertions(+), 464 deletions(-) create mode 100644 frontend/static/Inter-Variable.ttf diff --git a/frontend/src/app.css b/frontend/src/app.css index 1a7b7cf38b..eb7e86f5a4 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -2,3 +2,12 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + @font-face { + font-family: 'Inter'; + src: url('/Inter-Variable.ttf'); + font-weight: 100 900; + font-display: swap; + } +} \ No newline at end of file diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte index e3a1f29a2f..dbb0ccc71f 100644 --- a/frontend/src/lib/components/AppConnect.svelte +++ b/frontend/src/lib/components/AppConnect.svelte @@ -20,10 +20,7 @@ import { oauthStore, userStore, workspaceStore } from '$lib/stores' import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons' import IconedResourceType from './IconedResourceType.svelte' - import PageHeader from './PageHeader.svelte' - import { OauthService, ResourceService, VariableService, type TokenResponse } from '$lib/gen' - import { page } from '$app/stores' import { sendUserToast, truncateRev } from '$lib/utils' import { createEventDispatcher } from 'svelte' @@ -209,10 +206,11 @@

{/if} - +
OAuth APIs
{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]} {/each}
- +
Scopes
{#if !manual && resource_type != ''} {#each scopes as v}
@@ -266,7 +264,7 @@ {:else}

Pick an OAuth API and customize the scopes here

{/if} - +
Extra params
{#if !manual && resource_type != ''} {#each extra_params as [k, v]}
@@ -306,10 +304,11 @@ {:else}

Pick an OAuth API and customize the extra parameters here

{/if} - +
Non OAuth APIs
{#each connectsManual as [key, instructions]} {/each}
{:else if step == 2} {#if manual} - +
Instructions
{apiTokenApps[resource_type].instructions}
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte index dc489f9e56..35ecac579c 100644 --- a/frontend/src/lib/components/EditorBar.svelte +++ b/frontend/src/lib/components/EditorBar.svelte @@ -196,7 +196,7 @@
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index ca1c4c00bb..7033d0063c 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -15,7 +15,7 @@ import Icon from 'svelte-awesome' import { writable } from 'svelte/store' import CenteredPage from './CenteredPage.svelte' - import Button from './common/button/Button.svelte' + import { Button } from './common' import { dirtyStore } from './common/confirmationModal/dirtyStore' import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte' import { OFFSET } from './CronInput.svelte' diff --git a/frontend/src/lib/components/GroupModal.svelte b/frontend/src/lib/components/GroupModal.svelte index b9e92e81b3..c0f47d4c8c 100644 --- a/frontend/src/lib/components/GroupModal.svelte +++ b/frontend/src/lib/components/GroupModal.svelte @@ -54,13 +54,19 @@ -
group {name}
-
- -

{group?.summary ?? 'No summary'}

- +
+ {name} + (group) +
+
+
+
Summary
+

{group?.summary ?? 'No summary'}

+
+
+
Members
{#if can_write} -
+
{/if} - - - - user - admin of group - - - - {#each members as { name, isAdmin }} - {name} - {isAdmin ? 'admin' : ''} - - {#if can_write} - - {/if} - {/each} - + + + user + admin of group + + + + {#each members as { name, isAdmin }} + {name} + {isAdmin ? 'admin' : ''} + + {#if can_write} + + {/if} + {/each} + + +
diff --git a/frontend/src/lib/components/IconedResourceType.svelte b/frontend/src/lib/components/IconedResourceType.svelte index 7d1a0d5b81..7466b63be4 100644 --- a/frontend/src/lib/components/IconedResourceType.svelte +++ b/frontend/src/lib/components/IconedResourceType.svelte @@ -28,7 +28,7 @@ export let width = '24px' -
+
{#if !silent && !after} {name} {/if} @@ -44,7 +44,7 @@ {:else if name === 'slack'} {:else if name === 'github'} - + {:else if name === 'gmail'} {:else if name === 'gsheets'} diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte index 973ee9807c..8b24fa9ce0 100644 --- a/frontend/src/lib/components/PageHeader.svelte +++ b/frontend/src/lib/components/PageHeader.svelte @@ -6,17 +6,17 @@ export let primary: boolean = true -
+
{#if primary} - - {title} + +

{title}

{#if tooltip} {tooltip} {/if}
- {:else} - - {title} + {:else} + +

{title}

{#if tooltip} {tooltip} {/if} diff --git a/frontend/src/lib/components/Password.svelte b/frontend/src/lib/components/Password.svelte index 91e27aa6c1..aa7dbc1e7a 100644 --- a/frontend/src/lib/components/Password.svelte +++ b/frontend/src/lib/components/Password.svelte @@ -28,7 +28,7 @@ }) - +
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte index 56a3e944fa..b1f5571c91 100644 --- a/frontend/src/lib/components/Path.svelte +++ b/frontend/src/lib/components/Path.svelte @@ -14,6 +14,7 @@ import { userStore, workspaceStore } from '$lib/stores' import { sleep } from '$lib/utils' import { createEventDispatcher } from 'svelte' + import Required from './Required.svelte' type PathKind = 'resource' | 'script' | 'variable' | 'flow' | 'schedule' export let meta: Meta = { @@ -175,7 +176,7 @@ {#if meta.ownerKind === 'user'}
diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte index e66a635907..93cf1dfe05 100644 --- a/frontend/src/lib/components/SchemaEditor.svelte +++ b/frontend/src/lib/components/SchemaEditor.svelte @@ -143,7 +143,7 @@