From b49c1e01a9f450b2251ce1a1c0c8c8edb5b5afba Mon Sep 17 00:00:00 2001 From: AkiraFukushima Date: Tue, 9 Jan 2024 21:30:05 +0900 Subject: [PATCH] Change component library to material-tailwind --- locales/en/translation.json | 2 +- package.json | 5 +- renderer/components/Media.tsx | 12 +- renderer/components/Settings.tsx | 35 +- renderer/components/accounts/New.tsx | 38 +- renderer/components/compose/Compose.tsx | 237 +- renderer/components/compose/EditMedia.tsx | 21 +- renderer/components/detail/Profile.tsx | 174 +- renderer/components/detail/profile/User.tsx | 4 +- renderer/components/layouts/account.tsx | 87 +- renderer/components/layouts/timelines.tsx | 92 +- renderer/components/report/Report.tsx | 21 +- .../components/timelines/Notifications.tsx | 52 +- renderer/components/timelines/Timeline.tsx | 60 +- .../timelines/notification/Follow.tsx | 4 +- .../timelines/notification/Reaction.tsx | 4 +- .../components/timelines/status/Actions.tsx | 89 +- renderer/components/timelines/status/Body.tsx | 4 +- .../components/timelines/status/Media.tsx | 4 +- renderer/components/timelines/status/Poll.tsx | 16 +- .../components/timelines/status/Status.tsx | 11 +- renderer/pages/_app.tsx | 103 +- renderer/pages/accounts/[id]/index.tsx | 4 +- renderer/pages/index.tsx | 4 +- renderer/tailwind.config.js | 28 +- renderer/utils/toast.tsx | 17 +- yarn.lock | 4107 +---------------- 27 files changed, 864 insertions(+), 4371 deletions(-) diff --git a/locales/en/translation.json b/locales/en/translation.json index 8d424231..2eefbb4d 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -91,7 +91,7 @@ }, "nsfw": "Sensitive", "poll": { - "add": "Add a choice", + "add": "Add", "5min": "5 minutes", "30min": "30 minutes", "1h": "1 hour", diff --git a/package.json b/package.json index ab87d755..26a15104 100644 --- a/package.json +++ b/package.json @@ -16,14 +16,13 @@ }, "dependencies": { "@emoji-mart/react": "^1.1.1", + "@material-tailwind/react": "^2.1.8", "blurhash": "^2.0.5", "dayjs": "^1.11.10", "dexie": "^3.2.4", "electron-serve": "^1.1.0", "electron-store": "^8.1.0", "emoji-mart": "^5.5.2", - "flowbite": "^2.0.0", - "flowbite-react": "^0.7.0", "megalodon": "^9.1.1", "react-blurhash": "^0.3.0", "react-hotkeys-hook": "^4.4.1", @@ -36,7 +35,7 @@ "@babel/runtime-corejs3": "^7.23.2", "@electron/notarize": "^2.1.0", "@types/node": "^20.0.0", - "@types/react": "^18.0.26", + "@types/react": "18.2.19", "@types/sanitize-html": "^2.9.4", "@typescript-eslint/eslint-plugin": "^6.13.1", "@typescript-eslint/parser": "^6.13.1", diff --git a/renderer/components/Media.tsx b/renderer/components/Media.tsx index 25ca8bfe..d0d80648 100644 --- a/renderer/components/Media.tsx +++ b/renderer/components/Media.tsx @@ -1,4 +1,4 @@ -import { Modal } from 'flowbite-react' +import { Dialog, DialogBody } from '@material-tailwind/react' import { Entity } from 'megalodon' type Props = { @@ -9,9 +9,8 @@ type Props = { export default function Media(props: Props) { return ( - - - + + {props.attachment && ( )} - - + <> + + ) } diff --git a/renderer/components/Settings.tsx b/renderer/components/Settings.tsx index b47360ac..fcc210b6 100644 --- a/renderer/components/Settings.tsx +++ b/renderer/components/Settings.tsx @@ -1,5 +1,5 @@ import { localeType } from '@/utils/i18n' -import { Label, Modal, Select, TextInput } from 'flowbite-react' +import { Dialog, DialogBody, DialogHeader, Input, Option, Select, Typography } from '@material-tailwind/react' import { ChangeEvent, useEffect, useState } from 'react' import { FormattedMessage } from 'react-intl' @@ -31,10 +31,9 @@ export default function Settings(props: Props) { } }, []) - const languageChanged = (e: ChangeEvent) => { - setLanguage(e.target.value as localeType) + const languageChanged = (e: string) => { if (typeof localStorage !== 'undefined') { - localStorage.setItem('language', e.target.value) + localStorage.setItem('language', e) } props.reloadSettings() } @@ -48,40 +47,40 @@ export default function Settings(props: Props) { } return ( - - + + - - + +
- +
- +
- +
- {languages.map(lang => ( - + ))}
-
-
+ + ) } diff --git a/renderer/components/accounts/New.tsx b/renderer/components/accounts/New.tsx index 7ad5f6b0..c87fc4ca 100644 --- a/renderer/components/accounts/New.tsx +++ b/renderer/components/accounts/New.tsx @@ -1,8 +1,8 @@ -import { Label, Modal, TextInput, Button, Alert, Spinner } from 'flowbite-react' import generator, { MegalodonInterface, OAuth, detector } from 'megalodon' import { useState } from 'react' import { db } from '@/db' import { FormattedMessage, useIntl } from 'react-intl' +import { Alert, Button, Dialog, DialogBody, DialogHeader, Input, Spinner, Typography } from '@material-tailwind/react' type NewProps = { opened: boolean @@ -107,13 +107,13 @@ export default function New(props: NewProps) { return ( <> - - + + - - + + {error && ( - + {error} )} @@ -121,12 +121,12 @@ export default function New(props: NewProps) { {sns === null ? ( <>
- +
- - @@ -143,31 +143,31 @@ export default function New(props: NewProps) { ) : ( <>
- -

+ + -

+
- + )} - ) : (
- +
)} )} -
-
+ + ) } diff --git a/renderer/components/compose/Compose.tsx b/renderer/components/compose/Compose.tsx index f8105d7d..6e95b24f 100644 --- a/renderer/components/compose/Compose.tsx +++ b/renderer/components/compose/Compose.tsx @@ -1,17 +1,3 @@ -import { - Button, - Checkbox, - CustomFlowbiteTheme, - Dropdown, - Flowbite, - Label, - Radio, - Select, - Spinner, - TextInput, - Textarea, - ToggleSwitch -} from 'flowbite-react' import { ChangeEvent, Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react' import { FormattedMessage, useIntl } from 'react-intl' import { @@ -31,6 +17,22 @@ import { useToast } from '@/utils/toast' import Picker from '@emoji-mart/react' import { data } from '@/utils/emojiData' import EditMedia from './EditMedia' +import { + Button, + Checkbox, + IconButton, + Input, + List, + ListItem, + Option, + Popover, + PopoverContent, + PopoverHandler, + Radio, + Select, + Switch, + Textarea +} from '@material-tailwind/react' type Props = { client: MegalodonInterface @@ -43,17 +45,6 @@ type Poll = { multiple: boolean } -const customTheme: CustomFlowbiteTheme = { - dropdown: { - content: 'focus:outline-none', - floating: { - item: { - base: 'hidden' - } - } - } -} - export default function Compose(props: Props) { const [body, setBody] = useState('') const [visibility, setVisibility] = useState<'public' | 'unlisted' | 'private' | 'direct'>('public') @@ -65,11 +56,13 @@ export default function Compose(props: Props) { const [editMedia, setEditMedia] = useState() const [maxCharacters, setMaxCharacters] = useState(null) const [remaining, setRemaining] = useState(null) + const [popoverVisibility, setPopoverVisibility] = useState(false) + const [popoverEmoji, setPopoverEmoji] = useState(false) const { formatMessage } = useIntl() const uploaderRef = useRef(null) const showToast = useToast() - const textareaRef = useRef(null) + const textareaRef = useRef(null) useEffect(() => { if (!props.client) return @@ -228,19 +221,18 @@ export default function Compose(props: Props) { } else if (emoji.shortcodes) { setBody(current => `${current.slice(0, cursor)}${emoji.shortcodes} ${current.slice(cursor)}`) } - const dummy = document.getElementById('dummy-emoji-picker') - dummy.click() + setPopoverEmoji(false) } return (
{cw && ( - setSpoiler(ev.target.value)} placeholder={formatMessage({ id: 'compose.spoiler.placeholder' })} @@ -249,6 +241,7 @@ export default function Compose(props: Props) {