forked from Rosetta/landing
Improve support and technical references
This commit is contained in:
rosetta
@@ -1,9 +1,34 @@
|
||||
import { Anchor, Box, Button, Paper, Stack, Text, Textarea, Title } from '@mantine/core';
|
||||
import { IconMail, IconSearch } from '@tabler/icons-react';
|
||||
import {
|
||||
ActionIcon,
|
||||
Anchor,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Container,
|
||||
Group,
|
||||
Paper,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
ThemeIcon,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconBook2,
|
||||
IconHelpCircle,
|
||||
IconLifebuoy,
|
||||
IconMail,
|
||||
IconMessageQuestion,
|
||||
IconSearch,
|
||||
IconShieldQuestion,
|
||||
IconX,
|
||||
} from '@tabler/icons-react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import knownIssues from '../../known-issues.json';
|
||||
import { LegalPage } from '../components/LegalPage/LegalPage';
|
||||
import { SEO } from '../components/SEO/SEO';
|
||||
import { SiteFooter } from '../components/SiteFooter/SiteFooter';
|
||||
import { SiteHeader } from '../components/SiteHeader/SiteHeader';
|
||||
import classes from './SupportPage.module.css';
|
||||
|
||||
export function SupportPage() {
|
||||
@@ -30,7 +55,7 @@ export function SupportPage() {
|
||||
})
|
||||
.filter(({ score }) => score > 0)
|
||||
.sort((left, right) => right.score - left.score)
|
||||
.slice(0, 4);
|
||||
.slice(0, 5);
|
||||
}, [normalizedQuery]);
|
||||
|
||||
return (
|
||||
@@ -41,98 +66,180 @@ export function SupportPage() {
|
||||
canonical="https://rosetta.im/support/"
|
||||
keywords="Rosetta support, known issues, account recovery, messaging help"
|
||||
/>
|
||||
<LegalPage eyebrow="Help centre" title="Support">
|
||||
<Text className={classes.intro}>
|
||||
Describe the problem in your own words. Rosetta will suggest a relevant known
|
||||
issue while you type. The text is processed only in this page and is not sent
|
||||
to the support service.
|
||||
</Text>
|
||||
<SiteHeader />
|
||||
<main className={classes.page}>
|
||||
<Box component="section" className={classes.hero}>
|
||||
<Container className={classes.heroInner}>
|
||||
<ThemeIcon
|
||||
className={`${classes.decorativeIcon} ${classes.iconOne}`}
|
||||
size={50}
|
||||
radius="xl"
|
||||
variant="white"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<IconHelpCircle size={26} />
|
||||
</ThemeIcon>
|
||||
<ThemeIcon
|
||||
className={`${classes.decorativeIcon} ${classes.iconTwo}`}
|
||||
size={44}
|
||||
radius="xl"
|
||||
variant="white"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<IconMessageQuestion size={22} />
|
||||
</ThemeIcon>
|
||||
<ThemeIcon
|
||||
className={`${classes.decorativeIcon} ${classes.iconThree}`}
|
||||
size={54}
|
||||
radius="xl"
|
||||
variant="white"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<IconLifebuoy size={27} />
|
||||
</ThemeIcon>
|
||||
<ThemeIcon
|
||||
className={`${classes.decorativeIcon} ${classes.iconFour}`}
|
||||
size={42}
|
||||
radius="xl"
|
||||
variant="white"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<IconShieldQuestion size={21} />
|
||||
</ThemeIcon>
|
||||
|
||||
<Box className={classes.searchArea}>
|
||||
<Textarea
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.currentTarget.value)}
|
||||
leftSection={<IconSearch size={18} />}
|
||||
leftSectionProps={{ style: { alignItems: 'flex-start', paddingTop: 16 } }}
|
||||
placeholder="For example: my attachment is still sending…"
|
||||
aria-label="Describe your Rosetta problem"
|
||||
minRows={6}
|
||||
autosize
|
||||
maxRows={10}
|
||||
radius="sm"
|
||||
className={classes.problemField}
|
||||
/>
|
||||
|
||||
{normalizedQuery && (
|
||||
<Paper withBorder radius="sm" className={classes.suggestions}>
|
||||
<Text fw={700} size="xs" tt="uppercase" c="dimmed">
|
||||
Suggested issues
|
||||
<Stack align="center" gap="sm" className={classes.heroContent}>
|
||||
<Text fw={700} size="sm" c="blue.8">
|
||||
Rosetta Support
|
||||
</Text>
|
||||
<Title order={1}>How can we help?</Title>
|
||||
<Text c="blue.9" ta="center" className={classes.heroDescription}>
|
||||
Search account access, messaging, media, privacy, and security help.
|
||||
</Text>
|
||||
{suggestions.length > 0 ? (
|
||||
<Stack gap={0} mt="xs">
|
||||
{suggestions.map(({ issue }) => (
|
||||
<Anchor
|
||||
key={issue.id}
|
||||
href={`#${issue.id}`}
|
||||
className={classes.suggestion}
|
||||
>
|
||||
<Text fw={600} size="sm">
|
||||
{issue.title}
|
||||
</Text>
|
||||
<Text c="dimmed" size="xs" mt={3}>
|
||||
{issue.summary}
|
||||
</Text>
|
||||
</Anchor>
|
||||
))}
|
||||
</Stack>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm" mt="xs">
|
||||
No matching known issue. You can contact support below.
|
||||
</Text>
|
||||
)}
|
||||
</Paper>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box component="section" className={classes.issuesSection}>
|
||||
<Title order={2}>Known issues</Title>
|
||||
<Text c="dimmed" size="sm" mt="xs" lh={1.7}>
|
||||
Common situations and the information needed to resolve them.
|
||||
</Text>
|
||||
<Box className={classes.searchWrap}>
|
||||
<TextInput
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.currentTarget.value)}
|
||||
leftSection={<IconSearch size={21} />}
|
||||
rightSection={
|
||||
query ? (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
onClick={() => setQuery('')}
|
||||
aria-label="Clear support search"
|
||||
>
|
||||
<IconX size={18} />
|
||||
</ActionIcon>
|
||||
) : null
|
||||
}
|
||||
placeholder="Describe your problem"
|
||||
aria-label="Search Rosetta support"
|
||||
size="xl"
|
||||
radius="xl"
|
||||
className={classes.searchInput}
|
||||
/>
|
||||
|
||||
<Box className={classes.issueList}>
|
||||
{knownIssues.map((issue) => (
|
||||
<Box component="article" id={issue.id} key={issue.id} className={classes.issue}>
|
||||
<Title order={3}>{issue.title}</Title>
|
||||
<Text c="dimmed" size="sm" mt={6} lh={1.7}>
|
||||
{issue.summary}
|
||||
</Text>
|
||||
<Text size="sm" mt="md" lh={1.75}>
|
||||
{issue.solution}
|
||||
</Text>
|
||||
{normalizedQuery && (
|
||||
<Paper
|
||||
withBorder
|
||||
shadow="lg"
|
||||
radius="md"
|
||||
className={classes.suggestions}
|
||||
>
|
||||
{suggestions.length > 0 ? (
|
||||
<Stack gap={0}>
|
||||
{suggestions.map(({ issue }) => (
|
||||
<Anchor
|
||||
key={issue.id}
|
||||
href={`#${issue.id}`}
|
||||
onClick={() => setQuery('')}
|
||||
className={classes.suggestion}
|
||||
>
|
||||
<IconHelpCircle size={18} />
|
||||
<Box>
|
||||
<Text fw={600} size="sm">
|
||||
{issue.title}
|
||||
</Text>
|
||||
<Text c="dimmed" size="xs" mt={3}>
|
||||
{issue.summary}
|
||||
</Text>
|
||||
</Box>
|
||||
</Anchor>
|
||||
))}
|
||||
</Stack>
|
||||
) : (
|
||||
<Box p="md">
|
||||
<Text fw={600} size="sm">
|
||||
No matching known issue
|
||||
</Text>
|
||||
<Text c="dimmed" size="xs" mt={4}>
|
||||
Try fewer words or contact the support team below.
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
<Box component="section" className={classes.contact}>
|
||||
<Title order={2}>Contact support</Title>
|
||||
<Text c="dimmed" size="sm" mt="xs" lh={1.7}>
|
||||
Include your operating system, Rosetta version, approximate time of the
|
||||
problem, and reproduction steps. Never send a recovery phrase or private
|
||||
key.
|
||||
</Text>
|
||||
<Button
|
||||
component="a"
|
||||
href="mailto:support@rosetta.im?subject=Rosetta%20Support%20Request"
|
||||
leftSection={<IconMail size={17} />}
|
||||
variant="default"
|
||||
mt="lg"
|
||||
>
|
||||
support@rosetta.im
|
||||
</Button>
|
||||
</Box>
|
||||
</LegalPage>
|
||||
<Container className={classes.content}>
|
||||
<Box component="section">
|
||||
<Group gap="sm">
|
||||
<ThemeIcon variant="light" radius="xl">
|
||||
<IconBook2 size={18} />
|
||||
</ThemeIcon>
|
||||
<Title order={2}>Known issues</Title>
|
||||
</Group>
|
||||
<Text c="dimmed" mt="xs" className={classes.sectionDescription}>
|
||||
Common situations and the information needed to resolve them.
|
||||
</Text>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg" mt="xl">
|
||||
{knownIssues.map((issue) => (
|
||||
<Card
|
||||
component="article"
|
||||
id={issue.id}
|
||||
key={issue.id}
|
||||
withBorder
|
||||
radius="md"
|
||||
padding="xl"
|
||||
className={classes.issue}
|
||||
>
|
||||
<Title order={3}>{issue.title}</Title>
|
||||
<Text c="dimmed" size="sm" mt="sm" lh={1.65}>
|
||||
{issue.summary}
|
||||
</Text>
|
||||
<Text size="sm" mt="lg" lh={1.7}>
|
||||
{issue.solution}
|
||||
</Text>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
<Paper component="section" radius="lg" className={classes.contact}>
|
||||
<Box>
|
||||
<Title order={2}>Still need help?</Title>
|
||||
<Text c="dimmed" size="sm" mt="xs" lh={1.7} maw={620}>
|
||||
Include your operating system, Rosetta version, approximate time,
|
||||
and reproduction steps. Never send a recovery phrase or private key.
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
component="a"
|
||||
href="mailto:support@rosetta.im?subject=Rosetta%20Support%20Request"
|
||||
leftSection={<IconMail size={17} />}
|
||||
variant="default"
|
||||
>
|
||||
support@rosetta.im
|
||||
</Button>
|
||||
</Paper>
|
||||
</Container>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user