mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: design review
This commit is contained in:
Arman
@@ -60,49 +60,41 @@
|
||||
on:click={() => {
|
||||
show = false;
|
||||
}}>
|
||||
<span class="text">Contact our Support Team</span>
|
||||
<span class="text">Email support</span>
|
||||
</Button>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
<section class="drop-section u-grid u-gap-24 u-padding-24">
|
||||
<div>
|
||||
<h4 class="eyebrow-heading-3">Troubleshooting</h4>
|
||||
<section class="drop-section u-flex u-flex-vertical u-gap-16 u-padding-24">
|
||||
<h4 class="eyebrow-heading-3">Troubleshooting</h4>
|
||||
|
||||
<div class="u-margin-block-start-8 u-width-full-line">
|
||||
{#key $app.themeInUse}
|
||||
<iframe
|
||||
style="color-scheme: none"
|
||||
title="Appwrite Status"
|
||||
src={`https://status.appwrite.online/badge?theme=${
|
||||
$app.themeInUse === 'dark' ? 'dark' : 'light'
|
||||
}`}
|
||||
width="250"
|
||||
height="30"
|
||||
frameborder="0"
|
||||
scrolling="no">
|
||||
</iframe>
|
||||
{/key}
|
||||
</div>
|
||||
<div class="u-margin-block-start-8 u-width-full-line">
|
||||
{#key $app.themeInUse}
|
||||
<iframe
|
||||
style="color-scheme: none"
|
||||
title="Appwrite Status"
|
||||
src={`https://status.appwrite.online/badge?theme=${
|
||||
$app.themeInUse === 'dark' ? 'dark' : 'light'
|
||||
}`}
|
||||
width="250"
|
||||
height="30"
|
||||
frameborder="0"
|
||||
scrolling="no">
|
||||
</iframe>
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
<div class="u-flex u-gap-16">
|
||||
<a
|
||||
href="https://appwrite.io/docs"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="button is-secondary u-padding-inline-12 u-stretch u-main-center u-gap-4 u-flex-basis-auto">
|
||||
<span class="icon-book-open" aria-hidden="true" />
|
||||
<span class="text">Docs</span>
|
||||
<div class="u-flex u-flex-vertical u-gap-8">
|
||||
<a href="https://appwrite.io/docs" target="_blank" rel="noopener noreferrer" class="link">
|
||||
Visit our docs
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/appwrite/appwrite/issues"
|
||||
aria-label="Open issue on GitHub"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="button is-secondary u-padding-inline-12 u-stretch u-main-center u-gap-4 u-flex-basis-auto">
|
||||
<span class="icon-github" aria-hidden="true" />
|
||||
<span class="text">Open issue</span>
|
||||
class="link">
|
||||
Open a GitHub issue
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
export let tags: string[] = [];
|
||||
export let placeholder: string;
|
||||
export let options: Option[] = [];
|
||||
export let removable = false;
|
||||
|
||||
let search = '';
|
||||
let input: HTMLInputElement;
|
||||
@@ -54,6 +55,23 @@
|
||||
<li class="tags-item">
|
||||
<div class="input-tag">
|
||||
<span class="tag-text">{tag}</span>
|
||||
{#if removable}
|
||||
<button
|
||||
type="button"
|
||||
class="input-tag-delete-button"
|
||||
aria-label={`delete ${tag} tag`}
|
||||
on:click|preventDefault|stopPropagation={() => {
|
||||
tags = tags.filter((t) => t !== tag);
|
||||
options = options.map((option) => {
|
||||
if (option.value === tag) {
|
||||
option.checked = false;
|
||||
}
|
||||
return option;
|
||||
});
|
||||
}}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
Button,
|
||||
Form,
|
||||
FormList,
|
||||
InputCheckbox,
|
||||
InputSelect,
|
||||
InputSelectCheckbox,
|
||||
InputTextarea,
|
||||
@@ -36,6 +35,8 @@
|
||||
import FormItem from '$lib/elements/forms/formItem.svelte';
|
||||
import type { OrganizationList } from '$lib/stores/organization';
|
||||
import { BillingPlan } from '$lib/constants';
|
||||
import { Card } from '$lib/components';
|
||||
import { tooltip } from '$lib/actions/tooltip';
|
||||
|
||||
let previousPage: string = base;
|
||||
|
||||
@@ -74,7 +75,6 @@
|
||||
{ value: 'other', label: 'Other', checked: false },
|
||||
{ value: 'none', label: 'No particular product or serivce', checked: false }
|
||||
];
|
||||
let access = false;
|
||||
|
||||
onMount(async () => {
|
||||
if ($page.url.searchParams.has('org')) {
|
||||
@@ -106,10 +106,7 @@
|
||||
{ id: '48492', value: selectedOrgId ?? '' },
|
||||
{ id: '48491', value: originProjectId ?? '' },
|
||||
{ id: '48490', value: $user?.$id ?? '' }
|
||||
],
|
||||
metaFields: {
|
||||
temporaryAccess: access
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
trackEvent(Submit.SupportTicket);
|
||||
@@ -123,8 +120,8 @@
|
||||
} else {
|
||||
await goto(previousPage);
|
||||
addNotification({
|
||||
message:
|
||||
'Your support ticket was submitted successfully. The Appwrite team will get back to you shortly.',
|
||||
title: 'Request sent successfully',
|
||||
message: 'Our support team will reach out to you soon.',
|
||||
type: 'success'
|
||||
});
|
||||
}
|
||||
@@ -137,7 +134,7 @@
|
||||
endDay: 'Friday' as WeekDay
|
||||
};
|
||||
|
||||
$: supportTimings = `${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)} ${localeTimezoneName()}`;
|
||||
$: supportTimings = `${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)}`;
|
||||
$: supportWeekDays = `${utcWeekDayToLocaleWeekDay(workTimings.startDay, workTimings.start)} - ${utcWeekDayToLocaleWeekDay(workTimings.endDay, workTimings.end)}`;
|
||||
</script>
|
||||
|
||||
@@ -148,8 +145,7 @@
|
||||
<WizardSecondaryContainer href={previousPage}>
|
||||
<svelte:fragment slot="title">Support</svelte:fragment>
|
||||
<svelte:fragment slot="description">
|
||||
Please describe your request in detail, including reproduction steps or screenshots of any
|
||||
in-app issues.
|
||||
Please describe your request in detail, including reproduction steps of any in-app issues.
|
||||
</svelte:fragment>
|
||||
<WizardSecondaryContent>
|
||||
<Form bind:this={formComponent} onSubmit={handleSubmit} bind:isSubmitting>
|
||||
@@ -167,6 +163,7 @@
|
||||
<InputSelectCheckbox
|
||||
placeholder="Select product or service"
|
||||
name="product"
|
||||
removable
|
||||
bind:tags={product}
|
||||
options={productOptions.map((option) => ({
|
||||
...option,
|
||||
@@ -192,25 +189,10 @@
|
||||
placeholder="Type here..."
|
||||
bind:value={message}
|
||||
required />
|
||||
{#if category === 'technical'}
|
||||
<InputCheckbox
|
||||
required
|
||||
size="small"
|
||||
id="access"
|
||||
bind:checked={access}
|
||||
label="Allow temporary access to my Appwrite account">
|
||||
<svelte:fragment slot="description">
|
||||
<span style="margin-block-start: 1px;">
|
||||
Under some circumstances, you may want to provide access for help
|
||||
with issues related to your projects.
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
</InputCheckbox>
|
||||
{/if}
|
||||
</FormList>
|
||||
</Form>
|
||||
<svelte:fragment slot="aside">
|
||||
<div class="card u-flex-vertical u-gap-16">
|
||||
<Card class="u-flex-vertical u-gap-16" style="--card-padding:1.5rem;">
|
||||
<p class="text">
|
||||
We will contact you at <b>{$user.email}</b>. We try to respond to all messages
|
||||
within our office hours.
|
||||
@@ -218,6 +200,7 @@
|
||||
<ul>
|
||||
<li class="text">
|
||||
Available: <b>{supportWeekDays}, {supportTimings}</b>
|
||||
<span class="icon-info" use:tooltip={{ content: localeTimezoneName() }} />
|
||||
</li>
|
||||
<li class="u-flex u-gap-4 u-cross-center">
|
||||
<span>Currently:</span>
|
||||
@@ -248,7 +231,7 @@
|
||||
</iframe>
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</svelte:fragment>
|
||||
</WizardSecondaryContent>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user