client: minor styling improvements

This commit is contained in:
Max Leiter 2022-03-10 19:51:10 -08:00
parent 96fc4f38ae
commit f17ef649b9
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
7 changed files with 15 additions and 12 deletions

View file

@ -1,5 +1,3 @@
/* A centered auth page */
.container { .container {
padding: 2rem 2rem; padding: 2rem 2rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);

View file

@ -1,5 +1,5 @@
import { ButtonGroup, Button } from "@geist-ui/core" import { ButtonGroup, Button } from "@geist-ui/core"
import { Bold, Italic, Underline, Link, Image as ImageIcon } from '@geist-ui/icons' import { Bold, Italic, Link, Image as ImageIcon } from '@geist-ui/icons'
import { RefObject, useCallback, useMemo } from "react" import { RefObject, useCallback, useMemo } from "react"
// TODO: clean up // TODO: clean up

View file

@ -3,11 +3,11 @@
padding: 0 var(--gap); padding: 0 var(--gap);
} }
.tabs .current { .current {
border-bottom: 2px solid initial; padding-top: 100px !important;
} }
.tabs :global(.content) { .tabs .content {
display: none; display: none;
} }

View file

@ -1,4 +1,4 @@
import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, useTheme, Tabs, Loading, Spacer } from "@geist-ui/core"; import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, Tabs, Spacer } from "@geist-ui/core";
import { Github as GitHubIcon, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon, Moon, Sun } from "@geist-ui/icons"; import { Github as GitHubIcon, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon, Moon, Sun } from "@geist-ui/icons";
import { DriftProps } from "../../pages/_app"; import { DriftProps } from "../../pages/_app";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
@ -134,6 +134,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
// useEffect(() => { // useEffect(() => {
// setSelectedTab(pages.find((page) => { // setSelectedTab(pages.find((page) => {
// console.log(page.href, router.asPath)
// if (page.href && page.href === router.asPath) { // if (page.href && page.href === router.asPath) {
// return true // return true
// } // }
@ -155,7 +156,6 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
<Tabs <Tabs
value={selectedTab} value={selectedTab}
leftSpace={0} leftSpace={0}
activeClassName={styles.current}
align="center" align="center"
hideDivider hideDivider
hideBorder hideBorder
@ -193,7 +193,6 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
})} })}
</ButtonGroup> </ButtonGroup>
</div>)} </div>)}
</Page.Header > </Page.Header >
) )
} }

View file

@ -1,4 +1,4 @@
import { Button, ButtonDropdown, ButtonGroup, Input, Page, Select, Text, useToasts } from '@geist-ui/core' import { Button, ButtonDropdown, useToasts } from '@geist-ui/core'
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useCallback, useState } from 'react' import { useCallback, useState } from 'react'
import generateUUID from '../../lib/generate-uuid'; import generateUUID from '../../lib/generate-uuid';

View file

@ -7,6 +7,7 @@ import Document from '../../components/document'
import Header from "../../components/header"; import Header from "../../components/header";
import VisibilityBadge from "../../components/visibility-badge"; import VisibilityBadge from "../../components/visibility-badge";
import { ThemeProps } from "../_app"; import { ThemeProps } from "../_app";
import Head from "next/head";
const Post = ({ theme, changeTheme }: ThemeProps) => { const Post = ({ theme, changeTheme }: ThemeProps) => {
const [post, setPost] = useState<any>() const [post, setPost] = useState<any>()
@ -47,6 +48,11 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
return ( return (
<Page width={"100%"}> <Page width={"100%"}>
<Head>
{isLoading && <title>loading - Drift</title>}
{!isLoading && <title>{post.title} - Drift</title>}
{!isLoading && post.visibility !== 'private' && <meta name="description" content={post.description} />}
</Head>
<Page.Header> <Page.Header>
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />
</Page.Header> </Page.Header>
@ -68,9 +74,9 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
))} ))}
</>} </>}
</Page.Content> </Page.Content>
</Page > </Page >
) )
} }
export default Post export default Post