From fdc7901eff4f28171bf363ee2d55fd3ba8e012c8 Mon Sep 17 00:00:00 2001 From: diced Date: Fri, 24 Mar 2023 17:56:53 -0700 Subject: [PATCH] feat: new icons / oauth icons changed --- src/components/File/FileModal.tsx | 8 ++++---- src/components/Layout.tsx | 10 ++++++---- src/components/Theming.tsx | 8 ++------ src/components/icons/DiscordIcon.tsx | 24 ------------------------ src/components/icons/GitHubIcon.tsx | 14 -------------- src/components/icons/GoogleIcon.tsx | 15 --------------- src/components/icons/index.tsx | 5 +---- src/components/pages/Folders/index.tsx | 12 +++++++----- src/components/pages/Manage/index.tsx | 20 ++++++++------------ src/components/pages/Upload/File.tsx | 3 ++- src/lib/mimes.ts | 4 +++- src/pages/auth/login.tsx | 10 +++++----- src/pages/view/[id].tsx | 1 - 13 files changed, 38 insertions(+), 96 deletions(-) delete mode 100644 src/components/icons/DiscordIcon.tsx delete mode 100644 src/components/icons/GitHubIcon.tsx delete mode 100644 src/components/icons/GoogleIcon.tsx diff --git a/src/components/File/FileModal.tsx b/src/components/File/FileModal.tsx index 74aadf4b..1ac01f1d 100644 --- a/src/components/File/FileModal.tsx +++ b/src/components/File/FileModal.tsx @@ -21,9 +21,9 @@ import { IconEyeglass, IconFile, IconFileDownload, + IconFolderCancel, IconFolderMinus, IconFolderPlus, - IconFolderX, IconHash, IconInfoCircle, IconPhoto, @@ -154,7 +154,7 @@ export default function FileModal({ title: 'Failed to remove from folder', message: res.error, color: 'red', - icon: , + icon: , }); } }; @@ -178,7 +178,7 @@ export default function FileModal({ title: 'Failed to add to folder', message: res.error, color: 'red', - icon: , + icon: , }); } }; @@ -202,7 +202,7 @@ export default function FileModal({ title: 'Failed to create folder', message: res.error, color: 'red', - icon: , + icon: , }); } }); diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index ea2059af..66859f62 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -26,6 +26,9 @@ import { useModals } from '@mantine/modals'; import { showNotification } from '@mantine/notifications'; import { IconBackspace, + IconBrandDiscordFilled, + IconBrandGithubFilled, + IconBrandGoogle, IconBrush, IconClipboardCopy, IconExternalLink, @@ -54,7 +57,6 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; import { useState } from 'react'; import { useRecoilState } from 'recoil'; -import { DiscordIcon, GitHubIcon, GoogleIcon } from './icons'; import { friendlyThemeName, themes } from './Theming'; export type NavbarItems = { @@ -134,9 +136,9 @@ export default function Layout({ children, props }) { const { title, oauth_providers: unparsed } = props; const oauth_providers = JSON.parse(unparsed); const icons = { - GitHub: GitHubIcon, - Discord: DiscordIcon, - Google: GoogleIcon, + GitHub: IconBrandGithubFilled, + Discord: IconBrandDiscordFilled, + Google: IconBrandGoogle, }; for (const provider of oauth_providers) { diff --git a/src/components/Theming.tsx b/src/components/Theming.tsx index 7b947152..c5752dfa 100644 --- a/src/components/Theming.tsx +++ b/src/components/Theming.tsx @@ -86,7 +86,6 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) { styles: (t) => ({ main: { backgroundColor: t.other.AppShell_backgroundColor, - // backgroundColor: '#fff', }, }), }, @@ -108,7 +107,6 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) { blur: 6, color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white', }, - // scrollAreaComponent: Modal.NativeScrollArea, }, }, Popover: { @@ -119,10 +117,8 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) { }, LoadingOverlay: { defaultProps: { - overlayprops: { - blur: 3, - color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white', - }, + overlayColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white', + overlayOpacity: 0.3, }, }, Loader: { diff --git a/src/components/icons/DiscordIcon.tsx b/src/components/icons/DiscordIcon.tsx deleted file mode 100644 index 2684d878..00000000 --- a/src/components/icons/DiscordIcon.tsx +++ /dev/null @@ -1,24 +0,0 @@ -// https://discord.com/branding - -export default function DiscordIcon({ ...props }) { - return ( - - - - - - - - - - - ); -} diff --git a/src/components/icons/GitHubIcon.tsx b/src/components/icons/GitHubIcon.tsx deleted file mode 100644 index 034fa998..00000000 --- a/src/components/icons/GitHubIcon.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg -export default function GitHubIcon({ colorScheme, ...props }) { - return ( - - - - ); -} diff --git a/src/components/icons/GoogleIcon.tsx b/src/components/icons/GoogleIcon.tsx deleted file mode 100644 index 3cccb036..00000000 --- a/src/components/icons/GoogleIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -// https://developers.google.com/identity/branding-guidelines - -import Image from 'next/image'; - -export default function GoogleIcon({ ...props }) { - return ( - google - ); -} diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 84381472..42d0c638 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -1,7 +1,4 @@ -import DiscordIcon from './DiscordIcon'; -import GitHubIcon from './GitHubIcon'; -import GoogleIcon from './GoogleIcon'; import ShareXIcon from './ShareXIcon'; import FlameshotIcon from './FlameshotIcon'; -export { DiscordIcon, GitHubIcon, GoogleIcon, ShareXIcon, FlameshotIcon }; +export { ShareXIcon, FlameshotIcon }; diff --git a/src/components/pages/Folders/index.tsx b/src/components/pages/Folders/index.tsx index 822ffcc3..396e4e5d 100644 --- a/src/components/pages/Folders/index.tsx +++ b/src/components/pages/Folders/index.tsx @@ -7,13 +7,15 @@ import { IconClipboardCopy, IconExternalLink, IconFiles, + IconFolderCancel, IconFolderMinus, IconFolderPlus, + IconFolderShare, IconFolderX, IconGridDots, IconList, IconLock, - IconLockAccessOff, + IconLockCancel, IconLockOpen, } from '@tabler/icons-react'; import AnchorNext from 'components/AnchorNext'; @@ -100,7 +102,7 @@ export default function Folders({ disableMediaPreview, exifEnabled, compress }) title: 'Failed to delete folder', message: res.error, color: 'red', - icon: , + icon: , }); folders.refetch(); } @@ -126,7 +128,7 @@ export default function Folders({ disableMediaPreview, exifEnabled, compress }) title: 'Failed to make folder public/private', message: res.error, color: 'red', - icon: , + icon: , }); folders.refetch(); } @@ -216,7 +218,7 @@ export default function Folders({ disableMediaPreview, exifEnabled, compress }) variant='subtle' color='primary' > - + @@ -386,7 +388,7 @@ export default function Folders({ disableMediaPreview, exifEnabled, compress }) aria-label='open in new tab' onClick={() => window.open(`/folder/${folder.id}`)} > - + diff --git a/src/components/pages/Manage/index.tsx b/src/components/pages/Manage/index.tsx index f0c754a0..117efece 100644 --- a/src/components/pages/Manage/index.tsx +++ b/src/components/pages/Manage/index.tsx @@ -20,6 +20,9 @@ import { randomId, useInterval, useMediaQuery } from '@mantine/hooks'; import { useModals } from '@mantine/modals'; import { showNotification, updateNotification } from '@mantine/notifications'; import { + IconBrandDiscordFilled, + IconBrandGithubFilled, + IconBrandGoogle, IconFileExport, IconFiles, IconFilesOff, @@ -36,7 +39,7 @@ import { IconUserX, } from '@tabler/icons-react'; import AnchorNext from 'components/AnchorNext'; -import { DiscordIcon, FlameshotIcon, GitHubIcon, GoogleIcon, ShareXIcon } from 'components/icons'; +import { FlameshotIcon, ShareXIcon } from 'components/icons'; import MutedText from 'components/MutedText'; import { SmallTable } from 'components/SmallTable'; import useFetch from 'hooks/useFetch'; @@ -66,9 +69,9 @@ function ExportDataTooltip({ children }) { export default function Manage({ oauth_registration, oauth_providers: raw_oauth_providers, totp_enabled }) { const oauth_providers = JSON.parse(raw_oauth_providers); const icons = { - Discord: DiscordIcon, - GitHub: GitHubIcon, - Google: GoogleIcon, + Discord: IconBrandDiscordFilled, + GitHub: IconBrandGithubFilled, + Google: IconBrandGoogle, }; for (const provider of oauth_providers) { @@ -464,14 +467,7 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_ !user.oauth?.map(({ provider }) => provider.toLowerCase()).includes(x.name.toLowerCase()) ) .map(({ link_url, name, Icon }, i) => ( - ))} diff --git a/src/components/pages/Upload/File.tsx b/src/components/pages/Upload/File.tsx index f55dc2b9..f718515d 100644 --- a/src/components/pages/Upload/File.tsx +++ b/src/components/pages/Upload/File.tsx @@ -2,7 +2,7 @@ import { Button, Collapse, Group, Progress, Stack, Title } from '@mantine/core'; import { randomId, useClipboard } from '@mantine/hooks'; import { useModals } from '@mantine/modals'; import { showNotification, updateNotification } from '@mantine/notifications'; -import { IconFileTime, IconFileUpload, IconFileX } from '@tabler/icons-react'; +import { IconFileImport, IconFileTime, IconFileUpload, IconFileX } from '@tabler/icons-react'; import Dropzone from 'components/dropzone/Dropzone'; import FileDropzone from 'components/dropzone/DropzoneFile'; import MutedText from 'components/MutedText'; @@ -36,6 +36,7 @@ export default function File({ chunks: chunks_config }) { showNotification({ title: 'Image imported from clipboard', message: '', + icon: , }); }; diff --git a/src/lib/mimes.ts b/src/lib/mimes.ts index 5ffee87b..af6093fd 100644 --- a/src/lib/mimes.ts +++ b/src/lib/mimes.ts @@ -2,7 +2,9 @@ import { readFile } from 'fs/promises'; export type Mimes = [string, string[]][]; -export async function guess(extension: string): Promise { +export async function guess(extension: string | null): Promise { + if (!extension) return 'application/octet-stream'; + const mimes: Mimes = JSON.parse(await readFile('./mimes.json', 'utf8')); const mime = mimes.find((x) => x[0] === extension); diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx index a697ab46..7106ab2c 100644 --- a/src/pages/auth/login.tsx +++ b/src/pages/auth/login.tsx @@ -14,7 +14,7 @@ import { Title, } from '@mantine/core'; import { useForm } from '@mantine/form'; -import { DiscordIcon, GitHubIcon, GoogleIcon } from 'components/icons'; +import { IconBrandDiscordFilled, IconBrandGithub, IconBrandGoogle } from '@tabler/icons-react'; import useFetch from 'hooks/useFetch'; import Head from 'next/head'; import Link from 'next/link'; @@ -35,9 +35,9 @@ export default function Login({ title, user_registration, oauth_registration, oa const oauth_providers = JSON.parse(unparsed); const icons = { - GitHub: GitHubIcon, - Discord: DiscordIcon, - Google: GoogleIcon, + GitHub: IconBrandGithub, + Discord: IconBrandDiscordFilled, + Google: IconBrandGoogle, }; for (const provider of oauth_providers) { @@ -165,7 +165,7 @@ export default function Login({ title, user_registration, oauth_registration, oa variant='outline' radius='md' fullWidth - leftIcon={} + leftIcon={} my='xs' component={Link} href={url} diff --git a/src/pages/view/[id].tsx b/src/pages/view/[id].tsx index 06eb2c83..132a6a45 100644 --- a/src/pages/view/[id].tsx +++ b/src/pages/view/[id].tsx @@ -155,7 +155,6 @@ export default function EmbeddedFile({ withCloseButton={true} closeOnEscape={false} closeOnClickOutside={false} - overlayProps={{ blur: 3 }} >