Change component library to material-tailwind

h3poteto · Jan 9, 2024 · f8aa00b · f8aa00b
1 parent 7c97089
commit f8aa00b
Show file tree

Hide file tree

Showing 27 changed files with 974 additions and 4,471 deletions.
diff --git 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
@@ -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
@@ -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 (
-    <Modal show={props.open} onClose={props.close} size="6xl">
-      <Modal.Header />
-      <Modal.Body className="max-h-full max-w-full">
+    <Dialog open={props.open} handler={props.close} size="lg">
+      <DialogBody className="max-h-full max-w-full">
         {props.attachment && (
           <img
             src={props.attachment.url}
@@ -20,7 +19,8 @@ export default function Media(props: Props) {
             className="object-contain max-h-full max-w-full m-auto"
           />
         )}
-      </Modal.Body>
-    </Modal>
+        <></>
+      </DialogBody>
+    </Dialog>
   )
 }
diff --git 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<HTMLSelectElement>) => {
-    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 (
-    <Modal show={props.opened} onClose={props.close}>
-      <Modal.Header>
+    <Dialog open={props.opened} handler={props.close} size="sm">
+      <DialogHeader>
         <FormattedMessage id="settings.title" />
-      </Modal.Header>
-      <Modal.Body>
+      </DialogHeader>
+      <DialogBody>
         <div className="flex flex-col gap-4">
           <div>
             <div className="mb-2">
-              <Label htmlFor="fontsize">
+              <Typography>
                 <FormattedMessage id="settings.font_size" />
-              </Label>
+              </Typography>
             </div>
             <div>
-              <TextInput type="number" value={fontSize} onChange={fontSizeChanged} />
+              <Input type="number" value={fontSize} onChange={fontSizeChanged} />
             </div>
           </div>
           <div>
             <div className="mb-2">
-              <Label htmlFor="language">
+              <Typography>
                 <FormattedMessage id="settings.language" />
-              </Label>
+              </Typography>
             </div>
             <div>
-              <Select id="language" onChange={languageChanged} defaultValue={language}>
+              <Select id="language" onChange={languageChanged} value={language}>
                 {languages.map(lang => (
-                  <option key={lang.value} value={lang.value}>
+                  <Option key={lang.value} value={lang.value}>
                     {lang.label}
-                  </option>
+                  </Option>
                 ))}
               </Select>
             </div>
           </div>
         </div>
-      </Modal.Body>
-    </Modal>
+      </DialogBody>
+    </Dialog>
   )
 }
diff --git 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,26 +107,26 @@ export default function New(props: NewProps) {
 
   return (
     <>
-      <Modal dismissible={false} show={props.opened} onClose={close} size="lg">
-        <Modal.Header>
+      <Dialog open={props.opened} handler={close} size="xs">
+        <DialogHeader>
           <FormattedMessage id="accounts.new.title" />
-        </Modal.Header>
-        <Modal.Body>
+        </DialogHeader>
+        <DialogBody>
           {error && (
-            <Alert color="failure">
+            <Alert color="red">
               <span>{error}</span>
             </Alert>
           )}
           <form className="flex max-w-md flex-col gap-2">
             {sns === null ? (
               <>
                 <div className="block">
-                  <Label htmlFor="domain">
+                  <Typography>
                     <FormattedMessage id="accounts.new.domain" />
-                  </Label>
+                  </Typography>
                 </div>
-                <TextInput id="domain" placeholder="mastodon.social" required type="text" />
-                <Button color="blue" onClick={checkDomain} disabled={loading}>
+                <Input type="text" id="domain" placeholder="mastodon.social" />
+                <Button onClick={checkDomain} loading={loading} color="blue">
                   <FormattedMessage id="accounts.new.sign_in" />
                 </Button>
               </>
@@ -143,31 +143,31 @@ export default function New(props: NewProps) {
                     ) : (
                       <>
                         <div className="block">
-                          <Label htmlFor="authorization">
+                          <Typography>
                             <FormattedMessage id="accounts.new.authorization_code" />
-                          </Label>
-                          <p className="text-sm text-gray-600">
+                          </Typography>
+                          <Typography variant="small">
                             <FormattedMessage id="accounts.new.authorization_helper" />
-                          </p>
+                          </Typography>
                         </div>
-                        <TextInput id="authorization" required type="text" />
+                        <Input id="authorization" type="text" />
                       </>
                     )}
 
-                    <Button onClick={authorize} disabled={loading}>
+                    <Button onClick={authorize} disabled={loading} color="blue">
                       <FormattedMessage id="accounts.new.authorize" />
                     </Button>
                   </>
                 ) : (
                   <div className="text-center">
-                    <Spinner aria-label="Loading" />
+                    <Spinner />
                   </div>
                 )}
               </>
             )}
           </form>
-        </Modal.Body>
-      </Modal>
+        </DialogBody>
+      </Dialog>
     </>
   )
 }