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 }) {
{errors.map((e) => (
- {e.message}
+ {e.message}
))}
@@ -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}
>
e.preventDefault()}
onClick={action}
/>
diff --git a/client/app/(posts)/new/components/edit-document-list/edit-document/index.tsx b/client/app/(posts)/new/components/edit-document-list/edit-document/index.tsx
index 4fd6bca7..d0994aeb 100644
--- a/client/app/(posts)/new/components/edit-document-list/edit-document/index.tsx
+++ b/client/app/(posts)/new/components/edit-document-list/edit-document/index.tsx
@@ -11,8 +11,9 @@ import Trash from "@geist-ui/icons/trash"
import FormattingIcons from "./formatting-icons"
import TextareaMarkdown, { TextareaMarkdownRef } from "textarea-markdown-editor"
-import { Button, Input, Spacer, Tabs, Textarea } from "@geist-ui/core/dist"
+import { Input, Tabs, Textarea } from "@geist-ui/core/dist"
import Preview from "../../../../components/preview"
+import Button from "@components/button"
// import Link from "next/link"
type Props = {
@@ -103,12 +104,11 @@ const Document = ({
/>
{remove && (
}
- auto
+ iconLeft={ }
height={"36px"}
- width={"36px"}
+ width={"48px"}
+ padding={0}
+ margin={0}
onClick={() => removeFile(remove)}
/>
)}
diff --git a/client/app/(posts)/new/components/new.tsx b/client/app/(posts)/new/components/new.tsx
index ccfe277e..9f831ec7 100644
--- a/client/app/(posts)/new/components/new.tsx
+++ b/client/app/(posts)/new/components/new.tsx
@@ -1,6 +1,6 @@
"use client"
-import { Button, useToasts, Input, ButtonDropdown } from "@geist-ui/core/dist"
+import { useToasts, Input, ButtonDropdown } from "@geist-ui/core/dist"
import { useRouter } from "next/navigation"
import { useCallback, useState } from "react"
import generateUUID from "@lib/generate-uuid"
@@ -14,6 +14,7 @@ import { PostWithFiles } from "@lib/server/prisma"
import PasswordModal from "../../../components/password-modal"
import Title from "./title"
import FileDropzone from "./drag-and-drop"
+import Button from "@components/button"
const emptyDoc = {
title: "",
content: "",
@@ -162,21 +163,19 @@ const Post = ({
const onChangeExpiration = (date: Date) => setExpiresAt(date)
- const onChangeTitle =
- (e: ChangeEvent) => {
- setTitle(e.target.value)
- }
+ const onChangeTitle = (e: ChangeEvent) => {
+ setTitle(e.target.value)
+ }
- const onChangeDescription =
- (e: ChangeEvent) => {
- setDescription(e.target.value)
- }
+ const onChangeDescription = (e: ChangeEvent) => {
+ setDescription(e.target.value)
+ }
const updateDocTitle = (i: number) => (title: string) => {
- setDocs((docs) =>
- docs.map((doc, index) => (i === index ? { ...doc, title } : doc))
- )
- }
+ setDocs((docs) =>
+ docs.map((doc, index) => (i === index ? { ...doc, title } : doc))
+ )
+ }
const updateDocContent = (i: number) => (content: string) => {
setDocs((docs) =>
@@ -278,6 +277,9 @@ const Post = ({
])
}}
type="default"
+ style={{
+ flex: 1
+ }}
>
Add a File
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 = ({
<>
-
+
}
+ iconRight={ }
onClick={viewParentClick}
+ height={38}
/>
)}
- } onClick={editACopy} />
+ } onClick={editACopy} height={38} />
- } onClick={deletePost} auto />
+ } onClick={deletePost} height={38} />
)}
@@ -86,7 +86,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