client: minor styling improvements
This commit is contained in:
parent
96fc4f38ae
commit
f17ef649b9
7 changed files with 15 additions and 12 deletions
|
@ -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);
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 >
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue