Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 02:12:38 +01:00
Code Issues Releases Activity

switch icons to material design

Browse Source
This commit is contained in:
Puyodead1 2023-05-12 11:43:21 -04:00
parent ea581d78f1
commit 1be402dcb3
No known key found for this signature in database
GPG Key ID: BA5F91AAEF68E5CE
7 changed files with 47 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -18,8 +18,9 @@
"@fontsource/source-code-pro": "^4.5.14",
"@fontsource/source-sans-pro": "^4.5.11",
"@hcaptcha/react-hcaptcha": "^1.8.1",
"@loadable/component": "^5.15.3",
"@mattjennings/react-modal-stack": "^1.0.4",
"@mdi/js": "^7.2.96",
"@mdi/react": "^1.6.1",
"@mui/material": "^5.13.0",
"@spacebarchat/spacebar-api-types": "0.37.49",
"@testing-library/jest-dom": "^5.16.5",
@ -37,7 +38,6 @@
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-hook-form": "^7.43.9",
"react-icons": "^4.8.0",
"react-loading-skeleton": "^3.3.1",
"react-router-dom": "^6.11.1",
"react-scripts": "5.0.1",

42
pnpm-lock.yaml
View File

@ -19,12 +19,15 @@ dependencies:
'@hcaptcha/react-hcaptcha':
specifier: ^1.8.1
version: 1.8.1(react-dom@18.2.0)(react@18.2.0)
'@loadable/component':
specifier: ^5.15.3
version: 5.15.3(react@18.2.0)
'@mattjennings/react-modal-stack':
specifier: ^1.0.4
version: 1.0.4(react@18.2.0)
'@mdi/js':
specifier: ^7.2.96
version: 7.2.96
'@mdi/react':
specifier: ^1.6.1
version: 1.6.1
'@mui/material':
specifier: ^5.13.0
version: 5.13.0(@emotion/react@11.11.0)(@emotion/styled@11.11.0)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
@ -76,9 +79,6 @@ dependencies:
react-hook-form:
specifier: ^7.43.9
version: 7.43.9(react@18.2.0)
react-icons:
specifier: ^4.8.0
version: 4.8.0(react@18.2.0)
react-loading-skeleton:
specifier: ^3.3.1
version: 3.3.1(react@18.2.0)
@ -2475,18 +2475,6 @@ packages:
/@leichtgewicht/ip-codec@2.0.4:
resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
/@loadable/component@5.15.3(react@18.2.0):
resolution: {integrity: sha512-VOgYgCABn6+/7aGIpg7m0Ruj34tGetaJzt4bQ345FwEovDQZ+dua+NWLmuJKv8rWZyxOUSfoJkmGnzyDXH2BAQ==}
engines: {node: '>=8'}
peerDependencies:
react: ^16.3.0 || ^17.0.0 || ^18.0.0
dependencies:
'@babel/runtime': 7.21.5
hoist-non-react-statics: 3.3.2
react: 18.2.0
react-is: 16.13.1
dev: false
/@mattjennings/react-modal-stack@1.0.4(react@18.2.0):
resolution: {integrity: sha512-9QAanK1kHBxQMgW0wEozBC95CV65NIeNEX/G2fCeNWvOD1V4g9F0XsySFd325snvte+NIb5M0+QRwKjY9BxB0g==}
engines: {node: '>=10'}
@ -2496,6 +2484,16 @@ packages:
react: 18.2.0
dev: false
/@mdi/js@7.2.96:
resolution: {integrity: sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA==}
dev: false
/@mdi/react@1.6.1:
resolution: {integrity: sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==}
dependencies:
prop-types: 15.8.1
dev: false
/@mui/base@5.0.0-beta.0(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-ap+juKvt8R8n3cBqd/pGtZydQ4v2I/hgJKnvJRGjpSh3RvsvnDHO4rXov8MHQlH6VqpOekwgilFLGxMZjNTucA==}
engines: {node: '>=12.0.0'}
@ -9241,14 +9239,6 @@ packages:
react: 18.2.0
dev: false
/react-icons@4.8.0(react@18.2.0):
resolution: {integrity: sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==}
peerDependencies:
react: '*'
dependencies:
react: 18.2.0
dev: false
/react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}

4
src/components/ChannelList.tsx
View File

@ -72,8 +72,8 @@ function ChannelList() {
<FirstWrapper isCategory={isCategory} active={active}>
{channel.channelIcon && (
<Icon
iconName={channel.channelIcon}
size={16}
icon={channel.channelIcon}
size="16px"
style={{
marginRight: "8px",
}}

4
src/components/GuildSidebar.tsx
View File

@ -37,8 +37,8 @@ function GuildSidebar() {
key="home"
tooltip="Home"
icon={{
iconName: "MdHome",
size: 24,
icon: "mdiHome",
size: "24px",
}}
action={() => navigate("/channels/@me")}
margin={false}

29
src/components/Icon.tsx
View File

@ -1,28 +1,17 @@
import loadable from "@loadable/component";
import { IconBaseProps } from "react-icons";
import * as Icons from "@mdi/js";
import { Icon as MdiIcon } from "@mdi/react";
import { IconProps as IconBaseProps } from "@mdi/react/dist/IconProps";
export interface IconProps extends IconBaseProps {
iconName: string;
export interface IconProps extends Omit<IconBaseProps, "path"> {
icon: keyof typeof Icons;
}
function Icon(props: IconProps) {
const lib = props.iconName
.replace(/([a-z0-9])([A-Z])/g, "$1 $2")
.split(" ")[0]
.toLocaleLowerCase();
const path = Icons[props.icon];
if (!path) throw new Error(`Invalid icon name ${props.icon}`);
const ElementIcon = loadable(() => import(`react-icons/${lib}/index.js`), {
resolveComponent: (el: JSX.Element) => {
if (!el[props.iconName as keyof JSX.Element])
throw new Error(
`Invalid icon name ${props.iconName} for font lib ${lib}`,
);
return el[props.iconName as keyof JSX.Element];
},
});
const { iconName, ...propSpread } = props;
return <ElementIcon {...propSpread} />;
const { icon, ...propSpread } = props;
return <MdiIcon {...propSpread} path={path} />;
}
export default Icon;

4
src/components/UserPanel.tsx
View File

@ -1,7 +1,7 @@
import { MdSettings } from "react-icons/md";
import styled from "styled-components";
import { useAppStore } from "../stores/AppStore";
import Avatar from "./Avatar";
import Icon from "./Icon";
import IconButton from "./IconButton";
import Tooltip from "./Tooltip";
@ -81,7 +81,7 @@ function UserPanel() {
disabled
color="#fff"
>
<MdSettings size={20} />
<Icon icon="mdiCog" size="20px" />
</IconButton>
</span>
</Tooltip>

27
src/stores/objects/Channel.ts
View File

@ -1,3 +1,4 @@
import * as Icons from "@mdi/js";
import type {
APIChannel,
APIInvite,
@ -48,7 +49,7 @@ export default class Channel {
@observable webhooks?: APIWebhook[];
@observable flags: number;
@observable defaultThreadRateLimitPerUser: number;
@observable channelIcon?: string;
@observable channelIcon?: keyof typeof Icons;
private hasFetchedMessages = false;
constructor(app: AppStore, channel: APIChannel) {
@ -91,44 +92,44 @@ export default class Channel {
switch (this.type) {
case ChannelType.GuildText:
this.channelIcon = "FaHashtag";
this.channelIcon = "mdiPound";
break;
case ChannelType.GuildVoice:
this.channelIcon = "FaVolumeUp";
this.channelIcon = "mdiVolumeHigh";
break;
case ChannelType.GuildAnnouncement:
case ChannelType.AnnouncementThread:
this.channelIcon = "FaBullhorn";
this.channelIcon = "mdiBullhornVariant";
break;
case ChannelType.GuildStore:
case ChannelType.Transactional:
this.channelIcon = "FaTag";
this.channelIcon = "mdiStore";
break;
case ChannelType.Encrypted:
case ChannelType.EncryptedThread:
this.channelIcon = "FaLock";
this.channelIcon = "mdiLock";
break;
case ChannelType.PublicThread:
case ChannelType.PrivateThread:
this.channelIcon = "FaComments";
this.channelIcon = "mdiCommentMultipleOutline";
break;
case ChannelType.GuildStageVoice:
this.channelIcon = "FaBroadcastTower";
this.channelIcon = "mdiBroadcast";
break;
case ChannelType.GuildForum:
this.channelIcon = "FaRegComments";
this.channelIcon = "mdiForumOutline";
break;
case ChannelType.TicketTracker:
this.channelIcon = "FaQuestion";
this.channelIcon = "mdiTicketOutline";
break;
case ChannelType.KanBan:
this.channelIcon = "FaDev";
this.channelIcon = "mdiDeveloperBoard";
break;
case ChannelType.VoicelessWhiteboard:
this.channelIcon = "FaPen";
this.channelIcon = "mdiDraw";
break;
case ChannelType.GuildDirectory:
this.channelIcon = "FaFolder";
this.channelIcon = "mdiFolder";
break;
}