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 {
padding: 2rem 2rem;
border-radius: var(--border-radius);

View file

@ -1,5 +1,5 @@
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"
// TODO: clean up

View file

@ -3,11 +3,11 @@
padding: 0 var(--gap);
}
.tabs .current {
border-bottom: 2px solid initial;
.current {
padding-top: 100px !important;
}
.tabs :global(.content) {
.tabs .content {
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 { DriftProps } from "../../pages/_app";
import { useEffect, useMemo, useState } from "react";
@ -134,6 +134,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
// useEffect(() => {
// setSelectedTab(pages.find((page) => {
// console.log(page.href, router.asPath)
// if (page.href && page.href === router.asPath) {
// return true
// }
@ -155,7 +156,6 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
<Tabs
value={selectedTab}
leftSpace={0}
activeClassName={styles.current}
align="center"
hideDivider
hideBorder
@ -193,7 +193,6 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
})}
</ButtonGroup>
</div>)}
</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 { useCallback, useState } from 'react'
import generateUUID from '../../lib/generate-uuid';

View file

@ -21,4 +21,4 @@ const VisibilityBadge = ({ visibility }: Props) => {
return (<Badge marginLeft={'var(--gap)'} type={getBadgeType()}>{visibility}</Badge>)
}
export default VisibilityBadge
export default VisibilityBadge

View file

@ -7,6 +7,7 @@ import Document from '../../components/document'
import Header from "../../components/header";
import VisibilityBadge from "../../components/visibility-badge";
import { ThemeProps } from "../_app";
import Head from "next/head";
const Post = ({ theme, changeTheme }: ThemeProps) => {
const [post, setPost] = useState<any>()
@ -47,6 +48,11 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
return (
<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>
<Header theme={theme} changeTheme={changeTheme} />
</Page.Header>
@ -68,9 +74,9 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
))}
</>}
</Page.Content>
</Page >
)
}
export default Post