diff --git a/client/app/(posts)/expired/page.tsx b/client/app/(posts)/expired/page.tsx index f19719e4..4073102a 100644 --- a/client/app/(posts)/expired/page.tsx +++ b/client/app/(posts)/expired/page.tsx @@ -5,7 +5,7 @@ import { Note, Text } from "@geist-ui/core/dist" export default function ExpiredPage() { return ( - Error: The Drift you're trying to view has expired. +

Error: The Drift you're trying to view has expired.

) } diff --git a/client/app/(posts)/new/components/drag-and-drop/index.tsx b/client/app/(posts)/new/components/drag-and-drop/index.tsx index 6a77cd60..52ea49d1 100644 --- a/client/app/(posts)/new/components/drag-and-drop/index.tsx +++ b/client/app/(posts)/new/components/drag-and-drop/index.tsx @@ -1,4 +1,4 @@ -import { Text, useMediaQuery, useTheme, useToasts } from "@geist-ui/core/dist" +import { useMediaQuery, useTheme, useToasts } from "@geist-ui/core/dist" import { useDropzone } from "react-dropzone" import styles from "./drag-and-drop.module.css" import generateUUID from "@lib/generate-uuid" @@ -79,7 +79,7 @@ function FileDropzone({ setDocs }: { setDocs: (docs: Document[]) => void }) { @@ -100,12 +100,12 @@ function FileDropzone({ setDocs }: { setDocs: (docs: Document[]) => void }) { {!isDragActive && (

Drag some files here, or {verb} to select files

)} - {isDragActive && Release to drop the files here} + {isDragActive &&

Release to drop the files here

} {fileRejections.length > 0 && ( )} diff --git a/client/app/(posts)/new/components/edit-document-list/edit-document/document.module.css b/client/app/(posts)/new/components/edit-document-list/edit-document/document.module.css index c966020e..3261a0a4 100644 --- a/client/app/(posts)/new/components/edit-document-list/edit-document/document.module.css +++ b/client/app/(posts)/new/components/edit-document-list/edit-document/document.module.css @@ -37,6 +37,7 @@ .actionWrapper .actions { position: absolute; right: 0; + top: 4px; } @media (max-width: 768px) { diff --git a/client/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx b/client/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx index 737c5564..4128eb5d 100644 --- a/client/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx +++ b/client/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx @@ -7,9 +7,10 @@ import List from "@geist-ui/icons/list" import ImageIcon from "@geist-ui/icons/image" import { RefObject, useMemo } from "react" import styles from "../document.module.css" -import { Button, ButtonGroup } from "@geist-ui/core/dist" import { TextareaMarkdownRef } from "textarea-markdown-editor" import Tooltip from "@components/tooltip" +import Button from "@components/button" +import ButtonGroup from "@components/button-group" // TODO: clean up @@ -69,11 +70,8 @@ const FormattingIcons = ({ key={name} > diff --git a/client/app/components/button-group/button-group.module.css b/client/app/components/button-group/button-group.module.css new file mode 100644 index 00000000..e9b14eb7 --- /dev/null +++ b/client/app/components/button-group/button-group.module.css @@ -0,0 +1,13 @@ +.button-group { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; +} + +.button-group > * { + flex: 1 1 auto; + margin: 0; +} \ No newline at end of file diff --git a/client/app/components/button-group/index.tsx b/client/app/components/button-group/index.tsx new file mode 100644 index 00000000..a0713bc3 --- /dev/null +++ b/client/app/components/button-group/index.tsx @@ -0,0 +1,14 @@ +import styles from "./button-group.module.css" + +export default function ButtonGroup({ + children, + ...props +}: { + children: React.ReactNode | React.ReactNode[] +} & React.HTMLAttributes) { + return ( +
+ {children} +
+ ) +} diff --git a/client/app/components/button/button.module.css b/client/app/components/button/button.module.css index ee406de9..05dbe050 100644 --- a/client/app/components/button/button.module.css +++ b/client/app/components/button/button.module.css @@ -9,14 +9,14 @@ border-radius: var(--radius); border: 1px solid var(--border); padding: var(--gap-half) var(--gap); + color: var(--darker-gray); } .button:hover, .button:focus { - outline: none; color: var(--hover); background: var(--hover-bg); - border: var(--); + border: 1px solid var(--darker-gray); } .button[disabled] { diff --git a/client/app/components/button/index.tsx b/client/app/components/button/index.tsx index d8936263..5e0fadff 100644 --- a/client/app/components/button/index.tsx +++ b/client/app/components/button/index.tsx @@ -2,12 +2,16 @@ import styles from "./button.module.css" import { forwardRef, Ref } from "react" type Props = React.HTMLProps & { - children: React.ReactNode + children?: React.ReactNode buttonType?: "primary" | "secondary" className?: string onClick?: (e: React.MouseEvent) => void iconRight?: React.ReactNode iconLeft?: React.ReactNode + height?: string | number + width?: string | number + padding?: string | number + margin?: string | number } // eslint-disable-next-line react/display-name @@ -22,6 +26,10 @@ const Button = forwardRef( disabled = false, iconRight, iconLeft, + height, + width, + padding, + margin, ...props }, ref @@ -32,15 +40,16 @@ const Button = forwardRef( className={`${styles.button} ${styles[type]} ${className || ""}`} disabled={disabled} onClick={onClick} + style={{ height, width, margin, padding }} {...props} > - {iconLeft && ( + {children && iconLeft && ( {iconLeft} )} - {children} - {iconRight && ( + {children ? children : {iconLeft || iconRight}} + {children && iconRight && ( {iconRight} diff --git a/client/app/components/header/header.module.css b/client/app/components/header/header.module.css index 04ca1406..eca83145 100644 --- a/client/app/components/header/header.module.css +++ b/client/app/components/header/header.module.css @@ -18,18 +18,16 @@ background: var(--bg); } -.tabs .buttons > a:hover, -.tabs .buttons > button:hover { - color: var(--fg); - box-shadow: inset 0 -1px 0 var(--fg); - transition: box-shadow 0.2s ease-in-out; +.tabs button, +.tabs a { + color: var(--darker-gray); + transition: color, box-shadow 0.2s ease-in-out; } -.tabs a:active, -.tabs a:focus, -.tabs button:active, -.tabs button:focus { - color: var(--darker-gray); +.tabs .buttons a:hover, +.tabs .buttons button:hover { + color: var(--fg); + box-shadow: inset 0 -1px 0 var(--fg); } .mobile { diff --git a/client/app/components/input/input.module.css b/client/app/components/input/input.module.css index 344d390f..3fabecc1 100644 --- a/client/app/components/input/input.module.css +++ b/client/app/components/input/input.module.css @@ -2,7 +2,6 @@ display: flex; flex-direction: row; align-items: center; - width: 100%; height: 100%; font-size: 1rem; } @@ -55,3 +54,9 @@ margin-bottom: var(--gap); } } + +.input:disabled { + background-color: var(--lighter-gray); + color: var(--fg); + cursor: not-allowed; +} diff --git a/client/app/components/post-list/index.tsx b/client/app/components/post-list/index.tsx index aa2e0096..f66ea527 100644 --- a/client/app/components/post-list/index.tsx +++ b/client/app/components/post-list/index.tsx @@ -1,7 +1,5 @@ "use client" -import { Button, Input, Text } from "@geist-ui/core/dist" - import styles from "./post-list.module.css" import ListItemSkeleton from "./list-item-skeleton" import ListItem from "./list-item" @@ -9,6 +7,8 @@ import { ChangeEvent, useCallback, useEffect, useState } from "react" import useDebounce from "@lib/hooks/use-debounce" import Link from "@components/link" import type { PostWithFiles } from "@lib/server/prisma" +import Input from "@components/input" +import Button from "@components/button" type Props = { initialPosts: string | PostWithFiles[] @@ -106,13 +106,13 @@ const PostList = ({
- {!posts && Failed to load.} + {!posts &&

Failed to load.

} {!posts?.length && searching && (
  • @@ -124,13 +124,13 @@ const PostList = ({
)} {posts?.length === 0 && posts && ( - +

No posts found. Create one{" "} here . - +

)} {posts?.length > 0 && (
diff --git a/client/app/components/post-list/list-item.tsx b/client/app/components/post-list/list-item.tsx index 9a7c5c0a..f49ccdf6 100644 --- a/client/app/components/post-list/list-item.tsx +++ b/client/app/components/post-list/list-item.tsx @@ -1,5 +1,4 @@ import VisibilityBadge from "../badges/visibility-badge" -import { Divider, Button } from "@geist-ui/core/dist" import FadeIn from "@components/fade-in" import Trash from "@geist-ui/icons/trash" import ExpirationBadge from "@components/badges/expiration-badge" @@ -14,6 +13,7 @@ import type { File } from "@lib/server/prisma" import Tooltip from "@components/tooltip" import Badge from "@components/badges/badge" import Card from "@components/card" +import Button from "@components/button" // TODO: isOwner should default to false so this can be used generically const ListItem = ({ @@ -41,7 +41,7 @@ const ListItem = ({ <>
-

+

- +
<> {post?.files?.map((file: File) => { return ( diff --git a/client/package.json b/client/package.json index 8b8e000b..2373c2c4 100644 --- a/client/package.json +++ b/client/package.json @@ -27,7 +27,6 @@ "jest": "^29.3.1", "next": "13.0.3", "next-auth": "^4.16.4", - "next-themes": "^0.2.1", "rc-table": "7.24.1", "react": "18.2.0", "react-datepicker": "4.8.0", diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml index c24935e0..e24781b7 100644 --- a/client/pnpm-lock.yaml +++ b/client/pnpm-lock.yaml @@ -25,7 +25,6 @@ specifiers: katex: ^0.16.3 next: 13.0.3 next-auth: ^4.16.4 - next-themes: ^0.2.1 next-unused: 0.0.6 prettier: 2.6.2 prisma: ^4.6.1 @@ -58,7 +57,6 @@ dependencies: jest: 29.3.1_@types+node@17.0.23 next: 13.0.3_biqbaboplfbrettd7655fr4n2y next-auth: 4.16.4_ogpkrxaz2lg6nectum6dl66tn4 - next-themes: 0.2.1_ogpkrxaz2lg6nectum6dl66tn4 rc-table: 7.24.1_biqbaboplfbrettd7655fr4n2y react: 18.2.0 react-datepicker: 4.8.0_biqbaboplfbrettd7655fr4n2y @@ -5117,18 +5115,6 @@ packages: uuid: 8.3.2 dev: false - /next-themes/0.2.1_ogpkrxaz2lg6nectum6dl66tn4: - resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==} - peerDependencies: - next: '*' - react: '*' - react-dom: '*' - dependencies: - next: 13.0.3_biqbaboplfbrettd7655fr4n2y - react: 18.2.0 - react-dom: 18.2.0_react@18.2.0 - dev: false - /next-unused/0.0.6: resolution: {integrity: sha512-dHFNNBanFq4wvYrULtsjfWyZ6BzOnr5VYI9EYMGAZYF2vkAhFpj2JOuT5Wu2o3LbFSG92PmAZnSUF/LstF82pA==} hasBin: true