Merge pull request #56 from dallen4/ui-tweaks

General UI & Docs Updates
dallen4 · Dec 2, 2023 · ceb4743 · ceb4743
2 parents 3390eff + 08d434f
commit ceb4743
Show file tree

Hide file tree

Showing 17 changed files with 301 additions and 71 deletions.
diff --git a/cli/lib/util.ts b/cli/lib/util.ts
@@ -1,13 +1,9 @@
-import { GRAB_PATH } from '@shared/config/paths';
 import { satisfies as isValidVersion } from 'semver';
 import { engines } from '../../package.json';
+import { generateGrabUrl as baseGenerateGrabUrl } from '@shared/lib/util';
 
-export const generateGrabUrl = (id: string) => {
-    const params = new URLSearchParams({ drop: id });
-    const baseUrl = new URL(GRAB_PATH, process.env.DEADDROP_API_URL!);
-
-    return `${baseUrl.toString()}?${params.toString()}`;
-};
+export const generateGrabUrl = (id: string) =>
+    baseGenerateGrabUrl(process.env.DEADDROP_API_URL!, id);
 
 export const checkNodeVersion = () => {
     const neededVersion = engines.node;

diff --git a/shared/lib/util.ts b/shared/lib/util.ts
@@ -1,3 +1,4 @@
+import { GRAB_PATH } from '../config/paths';
 import { randomBytes } from 'crypto';
 import { customAlphabet } from 'nanoid';
 
@@ -20,3 +21,10 @@ export const generateId = () => customAlphabet(alphanumeric, 12)();
 export const generateIV = () => randomBytes(12).toString('binary');
 
 export const getIVBuffer = (iv: string) => Buffer.from(iv, 'binary');
+
+export const generateGrabUrl = (url: string, id: string) => {
+    const params = new URLSearchParams({ drop: id });
+    const baseUrl = new URL(GRAB_PATH, url);
+
+    return `${baseUrl.toString()}?${params.toString()}`;
+};
diff --git a/web/atoms/Footer.tsx b/web/atoms/Footer.tsx
@@ -33,11 +33,11 @@ const Footer = () => {
                 <IconBrandGithub color={theme.colors.gray[5]} />
             </Anchor>
             <Text size={'xs'}>
-                Copyright &copy;{' '}
+                &copy; {new Date().getFullYear()} deadrop by{' '}
                 <Anchor href={'https://nieky.info/'} target={'_blank'}>
-                    Nieky Allen
-                </Anchor>{' '}
-                {new Date().getFullYear()}.
+                    Nieky
+                </Anchor>
+                .
             </Text>
         </BaseFooter>
     );

diff --git a/web/atoms/header/Brand.tsx b/web/atoms/header/Brand.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { HOME_PATH } from '@shared/config/paths';
-import { Box, Text, clsx, createStyles } from '@mantine/core';
+import { Box, Title, clsx, createStyles } from '@mantine/core';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useMediaQuery } from '@mantine/hooks';
@@ -15,7 +15,7 @@ const useStyles = createStyles((theme) => ({
         marginLeft: '7px',
     },
     headerName: {
-        ...theme.headings.sizes.h1,
+        color: 'white',
         fontWeight: 'bold',
         float: 'left',
         ':hover': {
@@ -31,28 +31,28 @@ const useStyles = createStyles((theme) => ({
 
 const Brand = () => {
     const { classes } = useStyles();
-    const renderLogo = useMediaQuery('(min-width: 490px)');
+    const renderBrandName = useMediaQuery('(min-width: 505px)');
 
     return (
         <Link href={HOME_PATH}>
             <Box className={classes.linkContainer}>
-                {renderLogo && (
-                    <Image
-                        src={'/icons/android-chrome-192x192.png'}
-                        height={54}
-                        width={54}
-                        className={classes.hoverPointer}
-                    />
+                <Image
+                    src={'/icons/apple-touch-icon.png'}
+                    height={60}
+                    width={60}
+                    className={classes.hoverPointer}
+                />
+                {renderBrandName && (
+                    <Title
+                        className={clsx(
+                            classes.headerName,
+                            classes.hoverPointer,
+                            classes.logoSpacing,
+                        )}
+                    >
+                        deadrop
+                    </Title>
                 )}
-                <Text
-                    className={clsx(
-                        classes.headerName,
-                        classes.hoverPointer,
-                        renderLogo && classes.logoSpacing,
-                    )}
-                >
-                    deadrop
-                </Text>
             </Box>
         </Link>
     );

diff --git a/web/lib/util.ts b/web/lib/util.ts
@@ -1,6 +1,6 @@
 import randomColor from 'randomcolor';
-import { GRAB_PATH } from '@shared/config/paths';
 import { UAParser } from 'ua-parser-js';
+import { generateGrabUrl as baseGenerateGrabUrl } from '@shared/lib/util';
 
 // ref: https://github.com/davidmerfield/randomColor#options
 const hues = [
@@ -27,13 +27,9 @@ export const generateColorSet = (amount = 2) => {
 };
 
 export const generateGrabUrl = (id: string) => {
-    const params = new URLSearchParams({ drop: id });
-    const baseUrl = new URL(
-        GRAB_PATH,
-        window.location.protocol + window.location.host,
-    );
+    const url = window.location.protocol + window.location.host;
 
-    return `${baseUrl.toString()}?${params.toString()}`;
+    return baseGenerateGrabUrl(url, id);
 };
 
 export const formatDropKey = (id: string) => `drop:${id}`;

diff --git a/web/mdx-components.tsx b/web/mdx-components.tsx
@@ -49,7 +49,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
         ),
         blockquote: ({ children }) => <Blockquote>{children}</Blockquote>,
         code: ({ children }) => (
-            <Code style={{ padding: theme.spacing.xs * 0.7 }}>{children}</Code>
+            <Code block style={{ padding: theme.spacing.sm }}>{children}</Code>
         ),
         em: ({ children }) => (
             <LargeText component={'span'} fs={'italic'}>

diff --git a/web/molecules/Header.tsx b/web/molecules/Header.tsx
@@ -5,28 +5,44 @@ import {
     Box,
     Button,
     Flex,
+    Group,
     Loader,
     Popover,
-    useMantineTheme,
+    createStyles,
 } from '@mantine/core';
 import Brand from 'atoms/header/Brand';
 import { useUser } from '@auth0/nextjs-auth0/client';
 import { useRouter } from 'next/router';
-import { LOGIN_PATH, LOGOUT_PATH } from '@shared/config/paths';
+import {
+    LOGIN_PATH,
+    LOGOUT_PATH,
+    OVERVIEW_DOCS_PATH,
+} from '@shared/config/paths';
+import { useMediaQuery } from '@mantine/hooks';
+
+const useStyles = createStyles((theme) => ({
+    navButton: {
+        fontWeight: 'bold',
+    },
+}));
 
 const Header = () => {
     const router = useRouter();
     const { user, isLoading } = useUser();
+    const { classes, theme } = useStyles();
+    const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm}px)`);
 
     const onLogin = () => router.push(LOGIN_PATH);
 
+    const onDocsClick = () => router.push(OVERVIEW_DOCS_PATH);
+
     return (
         <BaseHeader
             height={102}
             withBorder={false}
             styles={(theme) => ({
                 root: {
-                    padding: theme.spacing.xl,
+                    padding: isMobile ? theme.spacing.md : theme.spacing.xl,
                 },
             })}
         >
@@ -40,14 +56,14 @@ const Header = () => {
                 >
                     <Brand />
                 </Box>
-                <Box
-                    style={{
-                        flex: 1,
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                        alignItems: 'center',
-                    }}
-                >
+                <Group ml={50}>
+                    <Button
+                        variant={'subtle'}
+                        className={classes.navButton}
+                        onClick={onDocsClick}
+                    >
+                        Docs
+                    </Button>
                     {user ? (
                         <Popover position={'bottom-end'}>
                             <Popover.Target>
@@ -80,7 +96,7 @@ const Header = () => {
                             )}
                         </Button>
                     )}
-                </Box>
+                </Group>
             </Flex>
         </BaseHeader>
     );

diff --git a/web/molecules/HeroBanner.tsx b/web/molecules/HeroBanner.tsx
@@ -1,7 +1,15 @@
 import React from 'react';
-import { Title, Text, Container, Button, createStyles, Anchor } from '@mantine/core';
+import {
+    Title,
+    Text,
+    Container,
+    Button,
+    createStyles,
+    Anchor,
+} from '@mantine/core';
 import { useRouter } from 'next/router';
 import { DROP_PATH } from '@shared/config/paths';
+import { TypeAnimation } from 'react-type-animation';
 
 // based off of: https://ui.mantine.dev/category/hero
 
@@ -12,7 +20,7 @@ const useStyles = createStyles((theme) => ({
         paddingBottom: 105,
 
         '@media (max-width: 520px)': {
-            paddingTop: 80,
+            paddingTop: 65,
             paddingBottom: 50,
         },
     },
@@ -22,12 +30,25 @@ const useStyles = createStyles((theme) => ({
         zIndex: 1,
     },
 
+    brandName: {
+        display: 'none',
+        paddingBottom: theme.spacing.xs,
+        color: theme.white,
+        fontSize: (theme.headings.sizes.h1.fontSize! as number) * 1.4,
+
+        '@media (max-width: 504px)': {
+            display: 'block',
+        },
+    },
+
+    brandNameDrop: {
+        color: theme.colors.blue['4'],
+    },
+
     title: {
         fontWeight: 800,
         fontSize: 40,
         letterSpacing: -1,
-        paddingLeft: theme.spacing.md,
-        paddingRight: theme.spacing.md,
         color: theme.white,
         marginBottom: theme.spacing.xs,
         textAlign: 'center',
@@ -56,8 +77,6 @@ const useStyles = createStyles((theme) => ({
         marginTop: theme.spacing.xl * 1.5,
         display: 'flex',
         justifyContent: 'center',
-        paddingLeft: theme.spacing.md,
-        paddingRight: theme.spacing.md,
 
         '@media (max-width: 520px)': {
             flexDirection: 'column',
@@ -88,18 +107,30 @@ export function HeroBanner() {
     return (
         <div className={classes.wrapper}>
             <div className={classes.inner}>
+                <Title className={classes.brandName}>
+                    dea<span className={classes.brandNameDrop}>drop</span>
+                </Title>
                 <Title className={classes.title}>
                     Quickly and securely share{' '}
-                    <Text
-                        component="span"
-                        inherit
+                    <TypeAnimation
+                        sequence={[
+                            'passwords',
+                            2500,
+                            'API keys',
+                            2500,
+                            '.env files',
+                            2500,
+                            'secrets',
+                            2500,
+                        ]}
+                        wrapper={'span'}
                         className={classes.highlight}
-                    >
-                        secrets
-                    </Text>
+                        speed={15}
+                        repeat={Infinity}
+                    />
                 </Title>
 
-                <Container size={640}>
+                <Container size={640} p={0}>
                     <Text size={'lg'} className={classes.description}>
                         Avoid messy and unsafe methods of sharing configuration
                         files, keys, and credentials.

diff --git a/web/molecules/sections/Faq.tsx b/web/molecules/sections/Faq.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
-import { Container, Title, Accordion, createStyles } from '@mantine/core';
+import { Container, Accordion, createStyles } from '@mantine/core';
+import { SectionTitle } from './SectionTitle';
 
 // based off of: https://ui.mantine.dev/category/faq
 
 const useStyles = createStyles((theme) => ({
     wrapper: {
         paddingTop: theme.spacing.xl * 2,
-        paddingBottom: theme.spacing.xl * 2,
         minHeight: 580,
+
+        '@media (max-width: 520px)': {
+            paddingLeft: 0,
+            paddingRight: 0,
+        },
     },
 
     title: {
@@ -63,11 +68,10 @@ const questions = [
 
 export function Faq() {
     const { classes } = useStyles();
+
     return (
         <Container size={'sm'} className={classes.wrapper}>
-            <Title id={'faq-section'} align={'center'} className={classes.title}>
-                FAQs
-            </Title>
+            <SectionTitle label={'FAQs'} id={'faq-section'} />
 
             <Accordion variant={'separated'} defaultValue={questions[0].id}>
                 {questions.map(({ id, question, answer }, index) => (

diff --git a/web/molecules/sections/SectionTitle.tsx b/web/molecules/sections/SectionTitle.tsx
@@ -0,0 +1,17 @@
+import { Title, createStyles } from '@mantine/core';
+
+const useStyles = createStyles((theme) => ({
+    title: {
+        marginBottom: theme.spacing.xl * 1.5,
+    },
+}));
+
+export function SectionTitle({ id, label }: { id: string; label: string }) {
+    const { classes } = useStyles();
+
+    return (
+        <Title id={id} align={'center'} className={classes.title}>
+            {label}
+        </Title>
+    );
+}