cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 06:32:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Update: Changed icon pack to Boxicons

Browse source
This commit is contained in:
nizune 2021-06-27 12:17:59 +02:00
parent a6ba6d5c5b
commit 4102b69ca4
40 changed files with 113 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/common/ChannelIcon.tsx
View file

@ -1,6 +1,6 @@
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { Channels } from "revolt.js/dist/api/objects"; import { Channels } from "revolt.js/dist/api/objects";
import { Hash, Volume2 } from "@styled-icons/feather"; import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
import { ImageIconBase, IconBaseProps } from "./IconBase"; import { ImageIconBase, IconBaseProps } from "./IconBase";
import { AppContext } from "../../context/revoltjs/RevoltClient"; import { AppContext } from "../../context/revoltjs/RevoltClient";
@ -21,7 +21,7 @@ export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLI
if (isServerChannel) { if (isServerChannel) {
if (target?.channel_type === 'VoiceChannel') { if (target?.channel_type === 'VoiceChannel') {
return ( return (
<Volume2 size={size} /> <VolumeFull size={size} />
) )
} else { } else {
return ( return (

4
src/components/common/ServerHeader.tsx
View file

@ -2,7 +2,7 @@ import Header from "../ui/Header";
import styled from "styled-components"; import styled from "styled-components";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import IconButton from "../ui/IconButton"; import IconButton from "../ui/IconButton";
import { Settings } from "@styled-icons/feather"; import { Cog } from "@styled-icons/boxicons-solid";
import { Server } from "revolt.js/dist/api/objects"; import { Server } from "revolt.js/dist/api/objects";
import { ServerPermission } from "revolt.js/dist/api/permissions"; import { ServerPermission } from "revolt.js/dist/api/permissions";
import { HookContext, useServerPermission } from "../../context/revoltjs/hooks"; import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
@ -30,7 +30,7 @@ export default function ServerHeader({ server, ctx }: Props) {
{ (permissions & ServerPermission.ManageServer) > 0 && <div className="actions"> { (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
<Link to={`/server/${server._id}/settings`}> <Link to={`/server/${server._id}/settings`}>
<IconButton> <IconButton>
<Settings size={24} /> <Cog size={24} />
</IconButton> </IconButton>
</Link> </Link>
</div> } </div> }

2
src/components/common/messaging/MessageBox.tsx
View file

@ -4,7 +4,7 @@ import { Channel } from "revolt.js";
import styled from "styled-components"; import styled from "styled-components";
import { defer } from "../../../lib/defer"; import { defer } from "../../../lib/defer";
import IconButton from "../../ui/IconButton"; import IconButton from "../../ui/IconButton";
import { Send, X } from '@styled-icons/feather'; import { Send, X } from '@styled-icons/boxicons-regular';
import { debounce } from "../../../lib/debounce"; import { debounce } from "../../../lib/debounce";
import Axios, { CancelTokenSource } from "axios"; import Axios, { CancelTokenSource } from "axios";
import { useTranslation } from "../../../lib/i18n"; import { useTranslation } from "../../../lib/i18n";

16
src/components/common/messaging/attachments/AttachmentActions.tsx
View file

@ -4,7 +4,7 @@ import IconButton from '../../../ui/IconButton';
import { Attachment } from "revolt.js/dist/api/objects"; import { Attachment } from "revolt.js/dist/api/objects";
import { determineFileSize } from '../../../../lib/fileSize'; import { determineFileSize } from '../../../../lib/fileSize';
import { AppContext } from '../../../../context/revoltjs/RevoltClient'; import { AppContext } from '../../../../context/revoltjs/RevoltClient';
import { Download, ExternalLink, File, Headphones, Video } from '@styled-icons/feather'; import { Download, LinkExternal, File, Headphone, Video } from '@styled-icons/boxicons-regular';
interface Props { interface Props {
attachment: Attachment; attachment: Attachment;
@ -30,7 +30,7 @@ export default function AttachmentActions({ attachment }: Props) {
</div> </div>
<a href={open_url} target="_blank"> <a href={open_url} target="_blank">
<IconButton> <IconButton>
<ExternalLink size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
</a> </a>
<a href={download_url} download target="_blank"> <a href={download_url} download target="_blank">
@ -43,14 +43,14 @@ export default function AttachmentActions({ attachment }: Props) {
case 'Audio': case 'Audio':
return ( return (
<div className={styles.actions}> <div className={styles.actions}>
<Headphones size={24} strokeWidth={1.5} /> <Headphone size={24} />
<div className={styles.info}> <div className={styles.info}>
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span> <span className={styles.filesize}>{filesize}</span>
</div> </div>
<a href={download_url} download target="_blank"> <a href={download_url} download target="_blank">
<IconButton> <IconButton>
<Download size={24} strokeWidth={1.5} /> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
@ -58,14 +58,14 @@ export default function AttachmentActions({ attachment }: Props) {
case 'Video': case 'Video':
return ( return (
<div className={styles.actions}> <div className={styles.actions}>
<Video size={24} strokeWidth={1.5} /> <Video size={24} />
<div className={styles.info}> <div className={styles.info}>
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span> <span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
</div> </div>
<a href={download_url} download target="_blank"> <a href={download_url} download target="_blank">
<IconButton> <IconButton>
<Download size={24} strokeWidth={1.5}/> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>
@ -73,14 +73,14 @@ export default function AttachmentActions({ attachment }: Props) {
default: default:
return ( return (
<div className={styles.actions}> <div className={styles.actions}>
<File size={24} strokeWidth={1.5} /> <File size={24} />
<div className={styles.info}> <div className={styles.info}>
<span className={styles.filename}>{filename}</span> <span className={styles.filename}>{filename}</span>
<span className={styles.filesize}>{filesize}</span> <span className={styles.filesize}>{filesize}</span>
</div> </div>
<a href={download_url} download target="_blank"> <a href={download_url} download target="_blank">
<IconButton> <IconButton>
<Download size={24} strokeWidth={1.5} /> <Download size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>

6
src/components/common/messaging/attachments/MessageReply.tsx
View file

@ -2,7 +2,7 @@ import { Text } from "preact-i18n";
import UserShort from "../../user/UserShort"; import UserShort from "../../user/UserShort";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import Markdown from "../../../markdown/Markdown"; import Markdown from "../../../markdown/Markdown";
import { CornerUpRight, File } from "@styled-icons/feather"; import { Reply, File } from "@styled-icons/boxicons-regular";
import { useUser } from "../../../../context/revoltjs/hooks"; import { useUser } from "../../../../context/revoltjs/hooks";
import { useRenderState } from "../../../../lib/renderer/Singleton"; import { useRenderState } from "../../../../lib/renderer/Singleton";
@ -52,7 +52,7 @@ export function MessageReply({ index, channel, id }: Props) {
if (!message) { if (!message) {
return ( return (
<ReplyBase head={index === 0} fail> <ReplyBase head={index === 0} fail>
<CornerUpRight size={16} /> <Reply size={16} />
<span><Text id="app.main.channel.misc.failed_load" /></span> <span><Text id="app.main.channel.misc.failed_load" /></span>
</ReplyBase> </ReplyBase>
) )
@ -62,7 +62,7 @@ export function MessageReply({ index, channel, id }: Props) {
return ( return (
<ReplyBase head={index === 0}> <ReplyBase head={index === 0}>
<CornerUpRight size={16} /> <Reply size={16} />
<UserShort user={user} size={16} /> <UserShort user={user} size={16} />
{ message.attachments && message.attachments.length > 0 && <File size={16} /> } { message.attachments && message.attachments.length > 0 && <File size={16} /> }
<Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} /> <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />

4
src/components/common/messaging/bars/FilePreview.tsx
View file

@ -3,7 +3,7 @@ import styled from "styled-components";
import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox"; import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
import { useEffect, useState } from 'preact/hooks'; import { useEffect, useState } from 'preact/hooks';
import { determineFileSize } from '../../../../lib/fileSize'; import { determineFileSize } from '../../../../lib/fileSize';
import { XCircle, Plus, Share, X, FileText } from "@styled-icons/feather"; import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
interface Props { interface Props {
state: UploadState, state: UploadState,
@ -133,7 +133,7 @@ function FileEntry({ file, remove, index }: { file: File, remove?: () => void, i
<Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}> <Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
<PreviewBox onClick={remove}> <PreviewBox onClick={remove}>
<EmptyEntry className="icon"> <EmptyEntry className="icon">
<FileText size={36} /> <File size={36} />
</EmptyEntry> </EmptyEntry>
<div class="overlay"><XCircle size={36} /></div> <div class="overlay"><XCircle size={36} /></div>
</PreviewBox> </PreviewBox>

4
src/components/common/messaging/bars/JumpToBottom.tsx
View file

@ -1,6 +1,6 @@
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import styled from "styled-components"; import styled from "styled-components";
import { ArrowDown } from "@styled-icons/feather"; import { DownArrow } from "@styled-icons/boxicons-regular";
import { SingletonMessageRenderer, useRenderState } from "../../../../lib/renderer/Singleton"; import { SingletonMessageRenderer, useRenderState } from "../../../../lib/renderer/Singleton";
const Bar = styled.div` const Bar = styled.div`
@ -46,7 +46,7 @@ export default function JumpToBottom({ id }: { id: string }) {
<Bar> <Bar>
<div onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}> <div onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
<div><Text id="app.main.channel.misc.viewing_old" /></div> <div><Text id="app.main.channel.misc.viewing_old" /></div>
<div><Text id="app.main.channel.misc.jump_present" /> <ArrowDown size={18} strokeWidth={2}/></div> <div><Text id="app.main.channel.misc.jump_present" /> <DownArrow size={18}/></div>
</div> </div>
</Bar> </Bar>
) )

6
src/components/common/messaging/bars/ReplyBar.tsx
View file

@ -9,7 +9,7 @@ import { Reply } from "../../../../redux/reducers/queue";
import { useUsers } from "../../../../context/revoltjs/hooks"; import { useUsers } from "../../../../context/revoltjs/hooks";
import { internalSubscribe } from "../../../../lib/eventEmitter"; import { internalSubscribe } from "../../../../lib/eventEmitter";
import { useRenderState } from "../../../../lib/renderer/Singleton"; import { useRenderState } from "../../../../lib/renderer/Singleton";
import { AtSign, CornerUpRight, File, XCircle } from "@styled-icons/feather"; import { At, Reply as ReplyIcon, File, XCircle } from "@styled-icons/boxicons-regular";
interface Props { interface Props {
channel: string, channel: string,
@ -71,7 +71,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
return ( return (
<Base key={reply.id}> <Base key={reply.id}>
<ReplyBase preview> <ReplyBase preview>
<CornerUpRight size={22} /> <ReplyIcon size={22} />
<UserShort user={user} size={16} /> <UserShort user={user} size={16} />
{ message.attachments && message.attachments.length > 0 && <File size={16} /> } { message.attachments && message.attachments.length > 0 && <File size={16} /> }
<Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} /> <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
@ -79,7 +79,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
<span class="actions"> <span class="actions">
<IconButton onClick={() => setReplies(replies.map((_, i) => i === index ? { ..._, mention: !_.mention } : _))}> <IconButton onClick={() => setReplies(replies.map((_, i) => i === index ? { ..._, mention: !_.mention } : _))}>
<span class="toggle"> <span class="toggle">
<AtSign size={16} /> { reply.mention ? 'ON' : 'OFF' } <At size={16} /> { reply.mention ? 'ON' : 'OFF' }
</span> </span>
</IconButton> </IconButton>
<IconButton onClick={() => setReplies(replies.filter((_, i) => i !== index))}> <IconButton onClick={() => setReplies(replies.filter((_, i) => i !== index))}>

4
src/components/common/messaging/embed/EmbedMediaActions.tsx
View file

@ -1,6 +1,6 @@
import styles from './Embed.module.scss'; import styles from './Embed.module.scss';
import IconButton from '../../../ui/IconButton'; import IconButton from '../../../ui/IconButton';
import { ExternalLink } from '@styled-icons/feather'; import { LinkExternal } from '@styled-icons/boxicons-regular';
import { EmbedImage } from "revolt.js/dist/api/objects"; import { EmbedImage } from "revolt.js/dist/api/objects";
interface Props { interface Props {
@ -18,7 +18,7 @@ export default function EmbedMediaActions({ embed }: Props) {
</div> </div>
<a href={embed.url} target="_blank"> <a href={embed.url} target="_blank">
<IconButton> <IconButton>
<ExternalLink size={24} /> <LinkExternal size={24} />
</IconButton> </IconButton>
</a> </a>
</div> </div>

4
src/components/common/user/UserHeader.tsx
View file

@ -8,7 +8,7 @@ import styled from "styled-components";
import { Localizer } from 'preact-i18n'; import { Localizer } from 'preact-i18n';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import IconButton from "../../ui/IconButton"; import IconButton from "../../ui/IconButton";
import { Settings } from "@styled-icons/feather"; import { Cog } from "@styled-icons/boxicons-solid";
import { openContextMenu } from "preact-context-menu"; import { openContextMenu } from "preact-context-menu";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
@ -76,7 +76,7 @@ export default function UserHeader({ user }: Props) {
{ !isTouchscreenDevice && <div className="actions"> { !isTouchscreenDevice && <div className="actions">
<Link to="/settings"> <Link to="/settings">
<IconButton> <IconButton>
<Settings size={24} /> <Cog size={24} />
</IconButton> </IconButton>
</Link> </Link>
</div> } </div> }

4
src/components/common/user/UserIcon.tsx
View file

@ -1,6 +1,6 @@
import { User } from "revolt.js"; import { User } from "revolt.js";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { MicOff } from "@styled-icons/feather"; import { MicrophoneOff } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Users } from "revolt.js/dist/api/objects"; import { Users } from "revolt.js/dist/api/objects";
import { ThemeContext } from "../../../context/Theme"; import { ThemeContext } from "../../../context/Theme";
@ -83,7 +83,7 @@ export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGEle
width="10" width="10"
height="10"> height="10">
<VoiceIndicator status={props.voice}> <VoiceIndicator status={props.voice}>
{props.voice === "muted" && <MicOff size={6} />} {props.voice === "muted" && <MicrophoneOff size={6} />}
</VoiceIndicator> </VoiceIndicator>
</foreignObject> </foreignObject>
)} )}

6
src/components/navigation/BottomNavigation.tsx
View file

@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
import { useSelf } from "../../context/revoltjs/hooks"; import { useSelf } from "../../context/revoltjs/hooks";
import { useHistory, useLocation } from "react-router"; import { useHistory, useLocation } from "react-router";
import ConditionalLink from "../../lib/ConditionalLink"; import ConditionalLink from "../../lib/ConditionalLink";
import { MessageCircle, Users } from "@styled-icons/feather"; import { MessageRounded, Group } from "@styled-icons/boxicons-regular";
const NavigationBase = styled.div` const NavigationBase = styled.div`
z-index: 10; z-index: 10;
@ -50,13 +50,13 @@ export default function BottomNavigation() {
} }
} }
}}> }}>
<MessageCircle size={26} /> <MessageRounded size={26} />
</IconButton> </IconButton>
</Button> </Button>
<Button active={friendsActive}> <Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends"> <ConditionalLink active={friendsActive} to="/friends">
<IconButton> <IconButton>
<Users size={26} /> <Group size={26} />
</IconButton> </IconButton>
</ConditionalLink> </ConditionalLink>
</Button> </Button>

4
src/components/navigation/items/ButtonItem.tsx
View file

@ -3,7 +3,7 @@ import styles from "./Item.module.scss";
import Tooltip from '../../common/Tooltip'; import Tooltip from '../../common/Tooltip';
import IconButton from '../../ui/IconButton'; import IconButton from '../../ui/IconButton';
import { Localizer, Text } from "preact-i18n"; import { Localizer, Text } from "preact-i18n";
import { X, Zap } from "@styled-icons/feather"; import { X, Crown } from "@styled-icons/boxicons-regular";
import { Children } from "../../../types/Preact"; import { Children } from "../../../types/Preact";
import UserIcon from '../../common/user/UserIcon'; import UserIcon from '../../common/user/UserIcon';
import ChannelIcon from '../../common/ChannelIcon'; import ChannelIcon from '../../common/ChannelIcon';
@ -65,7 +65,7 @@ export function UserButton({ active, alert, alertCount, user, context, channel }
<Text id="app.main.groups.owner" /> <Text id="app.main.groups.owner" />
} }
> >
<Zap size={20} /> <Crown size={20} />
</Tooltip> </Tooltip>
</Localizer> </Localizer>
)} )}

6
src/components/navigation/left/HomeSidebar.tsx
View file

@ -1,6 +1,6 @@
import { Localizer, Text } from "preact-i18n"; import { Localizer, Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks"; import { useContext, useEffect } from "preact/hooks";
import { Home, Users, Tool, Save } from "@styled-icons/feather"; import { Home, Group, Wrench, Save } from "@styled-icons/boxicons-regular";
import Category from '../../ui/Category'; import Category from '../../ui/Category';
import PaintCounter from "../../../lib/PaintCounter"; import PaintCounter from "../../../lib/PaintCounter";
@ -83,7 +83,7 @@ function HomeSidebar(props: Props) {
) !== "undefined" ? 'unread' : undefined ) !== "undefined" ? 'unread' : undefined
} }
> >
<Users size={20} /> <Group size={20} />
<span><Text id="app.navigation.tabs.friends" /></span> <span><Text id="app.navigation.tabs.friends" /></span>
</ButtonItem> </ButtonItem>
</ConditionalLink> </ConditionalLink>
@ -98,7 +98,7 @@ function HomeSidebar(props: Props) {
{import.meta.env.DEV && ( {import.meta.env.DEV && (
<Link to="/dev"> <Link to="/dev">
<ButtonItem active={pathname === "/dev"}> <ButtonItem active={pathname === "/dev"}>
<Tool size={20} /> <Wrench size={20} />
<span><Text id="app.navigation.tabs.dev" /></span> <span><Text id="app.navigation.tabs.dev" /></span>
</ButtonItem> </ButtonItem>
</Link> </Link>

6
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -4,7 +4,7 @@ import { mapChannelWithUnread } from "./common";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import ServerIcon from "../../common/ServerIcon"; import ServerIcon from "../../common/ServerIcon";
import { Children } from "../../../types/Preact"; import { Children } from "../../../types/Preact";
import { PlusCircle } from "@styled-icons/feather"; import { Plus } from "@styled-icons/boxicons-regular";
import PaintCounter from "../../../lib/PaintCounter"; import PaintCounter from "../../../lib/PaintCounter";
import { attachContextMenu } from 'preact-context-menu'; import { attachContextMenu } from 'preact-context-menu';
import { connectState } from "../../../redux/connector"; import { connectState } from "../../../redux/connector";
@ -51,7 +51,7 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
} }
const ServersBase = styled.div` const ServersBase = styled.div`
width: 52px; width: 72px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -183,7 +183,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
}) })
} }
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}> <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
<PlusCircle size={36} /> <Plus size={36} />
</IconButton> </IconButton>
<PaintCounter small /> <PaintCounter small />
</ServerList> </ServerList>

2
src/components/ui/Category.tsx
View file

@ -1,6 +1,6 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { Plus } from "@styled-icons/feather"; import { Plus } from "@styled-icons/boxicons-regular";
const CategoryBase = styled.div<Pick<Props, 'variant'>>` const CategoryBase = styled.div<Pick<Props, 'variant'>>`
font-size: 12px; font-size: 12px;

3
src/components/ui/Checkbox.tsx
View file

@ -1,4 +1,4 @@
import { Check } from "@styled-icons/feather"; import { Check } from "@styled-icons/boxicons-regular";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
@ -59,7 +59,6 @@ const Checkmark = styled.div<{ checked: boolean }>`
svg { svg {
color: var(--secondary-background); color: var(--secondary-background);
stroke-width: 2;
} }
${(props) => ${(props) =>

7
src/components/ui/ColourSwatches.tsx
View file

@ -1,7 +1,6 @@
import { useRef } from "preact/hooks"; import { useRef } from "preact/hooks";
import { Check } from "@styled-icons/feather"; import { Check, Pencil } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Pencil } from "@styled-icons/bootstrap";
interface Props { interface Props {
value: string; value: string;
@ -68,7 +67,7 @@ const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
height: 30px; height: 30px;
svg { svg {
stroke-width: 2; /*stroke-width: 2;*/
} }
` `
: css` : css`
@ -118,7 +117,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
onClick={() => onChange(swatch)} onClick={() => onChange(swatch)}
> >
{swatch === value && ( {swatch === value && (
<Check size={18} strokeWidth={2} /> <Check size={18} />
)} )}
</Swatch> </Swatch>
))} ))}

4
src/components/ui/IconButton.tsx
View file

@ -15,7 +15,7 @@ export default styled.div<Props>`
fill: ${normal}; fill: ${normal};
color: ${normal}; color: ${normal};
stroke: ${normal}; /*stroke: ${normal};*/
a { a {
color: ${normal}; color: ${normal};
@ -24,7 +24,7 @@ export default styled.div<Props>`
&:hover { &:hover {
fill: ${hover}; fill: ${hover};
color: ${hover}; color: ${hover};
stroke: ${hover}; /*stroke: ${hover};*/
a { a {
color: ${hover}; color: ${hover};

6
src/components/ui/Radio.tsx
View file

@ -1,6 +1,6 @@
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { CircleFill } from "@styled-icons/bootstrap"; import { Circle } from "@styled-icons/boxicons-regular";
interface Props { interface Props {
children: Children; children: Children;
@ -48,7 +48,7 @@ const RadioBase = styled.label<BaseProps>`
svg { svg {
color: var(--foreground); color: var(--foreground);
stroke-width: 2; /*stroke-width: 2;*/
} }
} }
@ -95,7 +95,7 @@ export default function Radio(props: Props) {
} }
> >
<div> <div>
<CircleFill size={12} /> <Circle size={12} />
</div> </div>
<input type="radio" checked={props.checked} /> <input type="radio" checked={props.checked} />
<span> <span>

4
src/components/ui/Tip.tsx
View file

@ -1,5 +1,5 @@
import styled from "styled-components"; import styled from "styled-components";
import { Info } from "@styled-icons/feather"; import { InfoCircle } from "@styled-icons/boxicons-regular";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
export const TipBase = styled.div` export const TipBase = styled.div`
@ -29,7 +29,7 @@ export const TipBase = styled.div`
export default function Tip(props: { children: Children }) { export default function Tip(props: { children: Children }) {
return ( return (
<TipBase> <TipBase>
<Info size={20} strokeWidth={2} /> <InfoCircle size={20} />
<span>{props.children}</span> <span>{props.children}</span>
</TipBase> </TipBase>
); );

2
src/context/intermediate/popovers/ChannelInfo.tsx
View file

@ -1,4 +1,4 @@
import { X } from "@styled-icons/feather"; import { X } from "@styled-icons/boxicons-regular";
import styles from "./ChannelInfo.module.scss"; import styles from "./ChannelInfo.module.scss";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
import { getChannelName } from "../../revoltjs/util"; import { getChannelName } from "../../revoltjs/util";

11
src/context/intermediate/popovers/UserProfile.tsx
View file

@ -6,7 +6,6 @@ import Modal from "../../../components/ui/Modal";
import { Route } from "revolt.js/dist/api/routes"; import { Route } from "revolt.js/dist/api/routes";
import { Users } from "revolt.js/dist/api/objects"; import { Users } from "revolt.js/dist/api/objects";
import { useIntermediate } from "../Intermediate"; import { useIntermediate } from "../Intermediate";
import { CashStack } from "@styled-icons/bootstrap";
import Preloader from "../../../components/ui/Preloader"; import Preloader from "../../../components/ui/Preloader";
import Tooltip from '../../../components/common/Tooltip'; import Tooltip from '../../../components/common/Tooltip';
import IconButton from "../../../components/ui/IconButton"; import IconButton from "../../../components/ui/IconButton";
@ -15,7 +14,7 @@ import { UserPermission } from "revolt.js/dist/api/permissions";
import UserIcon from '../../../components/common/user/UserIcon'; import UserIcon from '../../../components/common/user/UserIcon';
import ChannelIcon from '../../../components/common/ChannelIcon'; import ChannelIcon from '../../../components/common/ChannelIcon';
import UserStatus from '../../../components/common/user/UserStatus'; import UserStatus from '../../../components/common/user/UserStatus';
import { Mail, Edit, UserPlus, Shield } from "@styled-icons/feather"; import { Envelope, Edit, UserPlus, Shield, Money } from "@styled-icons/boxicons-regular";
import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks"; import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
import { AppContext, ClientStatus, StatusContext } from "../../revoltjs/RevoltClient"; import { AppContext, ClientStatus, StatusContext } from "../../revoltjs/RevoltClient";
import { useChannels, useForceUpdate, useUserPermission, useUsers } from "../../revoltjs/hooks"; import { useChannels, useForceUpdate, useUserPermission, useUsers } from "../../revoltjs/hooks";
@ -160,7 +159,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
onClose(); onClose();
history.push(`/open/${user_id}`); history.push(`/open/${user_id}`);
}}> }}>
<Mail size={30} strokeWidth={1.5} /> <Envelope size={30} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Localizer> </Localizer>
@ -172,13 +171,13 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
if (dummy) return; if (dummy) return;
history.push(`/settings/profile`); history.push(`/settings/profile`);
}}> }}>
<Edit size={28} strokeWidth={1.5} /> <Edit size={28} />
</IconButton> </IconButton>
)} )}
{(user.relationship === Users.Relationship.Incoming || {(user.relationship === Users.Relationship.Incoming ||
user.relationship === Users.Relationship.None) && ( user.relationship === Users.Relationship.None) && (
<IconButton onClick={() => client.users.addFriend(user.username)}> <IconButton onClick={() => client.users.addFriend(user.username)}>
<UserPlus size={28} strokeWidth={1.5} /> <UserPlus size={28} />
</IconButton> </IconButton>
)} )}
</div> </div>
@ -255,7 +254,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
<Text id="app.special.popovers.user_profile.badges.supporter" /> <Text id="app.special.popovers.user_profile.badges.supporter" />
} }
> >
<CashStack size={32} color="#efab44" /> <Money size={32} color="#efab44" />
</Tooltip> </Tooltip>
) : ( ) : (
<></> <></>

2
src/context/revoltjs/FileUploads.tsx
View file

@ -8,7 +8,7 @@ import { useContext, useEffect, useState } from "preact/hooks";
import Preloader from "../../components/ui/Preloader"; import Preloader from "../../components/ui/Preloader";
import { determineFileSize } from "../../lib/fileSize"; import { determineFileSize } from "../../lib/fileSize";
import IconButton from '../../components/ui/IconButton'; import IconButton from '../../components/ui/IconButton';
import { Edit, Plus, X, XCircle } from "@styled-icons/feather"; import { Edit, Plus, X, XCircle } from "@styled-icons/boxicons-regular";
import { useIntermediate } from "../intermediate/Intermediate"; import { useIntermediate } from "../intermediate/Intermediate";
type Props = { type Props = {

2
src/context/revoltjs/RequiresOnline.tsx
View file

@ -2,7 +2,7 @@ import { Text } from "preact-i18n";
import styled from "styled-components"; import styled from "styled-components";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { WifiOff } from "@styled-icons/feather"; import { WifiOff } from "@styled-icons/boxicons-regular";
import Preloader from "../../components/ui/Preloader"; import Preloader from "../../components/ui/Preloader";
import { ClientStatus, StatusContext } from "./RevoltClient"; import { ClientStatus, StatusContext } from "./RevoltClient";

9
src/lib/ContextMenus.tsx
View file

@ -19,9 +19,8 @@ import { Children } from "../types/Preact";
import LineDivider from "../components/ui/LineDivider"; import LineDivider from "../components/ui/LineDivider";
import { connectState } from "../redux/connector"; import { connectState } from "../redux/connector";
import { internalEmit } from "./eventEmitter"; import { internalEmit } from "./eventEmitter";
import { AtSign, Bell, BellOff, Check, CheckSquare, ChevronRight, Slash, Square } from "@styled-icons/feather"; import { At, Bell, BellOff, Check, CheckSquare, ChevronRight, Block, Square, LeftArrowAlt } from "@styled-icons/boxicons-regular";
import { getNotificationState, Notifications, NotificationState } from "../redux/reducers/notifications"; import { getNotificationState, Notifications, NotificationState } from "../redux/reducers/notifications";
import { ArrowLeft } from "@styled-icons/bootstrap";
interface ContextMenuData { interface ContextMenuData {
user?: string; user?: string;
@ -718,16 +717,16 @@ function ContextMenus(props: Props) {
<MenuItem data={{ action: "set_notification_state", key: channel._id, state: key }}> <MenuItem data={{ action: "set_notification_state", key: channel._id, state: key }}>
{ icon } { icon }
<Text id={`app.main.channel.notifications.${key}`} /> <Text id={`app.main.channel.notifications.${key}`} />
{ (state === undefined && actual === key) && <div className="tip"><ArrowLeft size={20} /></div> } { (state === undefined && actual === key) && <div className="tip"><LeftArrowAlt size={20} /></div> }
{ (state === key) && <div className="tip"><Check size={20} /></div> } { (state === key) && <div className="tip"><Check size={20} /></div> }
</MenuItem> </MenuItem>
); );
} }
generate('all', <Bell size={24} />); generate('all', <Bell size={24} />);
generate('mention', <AtSign size={24} />); generate('mention', <At size={24} />);
generate('muted', <BellOff size={24} />); generate('muted', <BellOff size={24} />);
generate('none', <Slash size={24} />); generate('none', <Block size={24} />);
return elements; return elements;
}} }}

10
src/pages/channels/ChannelHeader.tsx
View file

@ -7,7 +7,7 @@ import Markdown from "../../components/markdown/Markdown";
import { getChannelName } from "../../context/revoltjs/util"; import { getChannelName } from "../../context/revoltjs/util";
import UserStatus from "../../components/common/user/UserStatus"; import UserStatus from "../../components/common/user/UserStatus";
import { AppContext } from "../../context/revoltjs/RevoltClient"; import { AppContext } from "../../context/revoltjs/RevoltClient";
import { Save, AtSign, Users, Hash } from "@styled-icons/feather"; import { Save, At, Group, Hash } from "@styled-icons/boxicons-regular";
import { useStatusColour } from "../../components/common/user/UserIcon"; import { useStatusColour } from "../../components/common/user/UserIcon";
import { useIntermediate } from "../../context/intermediate/Intermediate"; import { useIntermediate } from "../../context/intermediate/Intermediate";
@ -57,18 +57,18 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
let icon, recipient; let icon, recipient;
switch (channel.channel_type) { switch (channel.channel_type) {
case "SavedMessages": case "SavedMessages":
icon = <Save size={20} strokeWidth={1.5} />; icon = <Save size={20} />;
break; break;
case "DirectMessage": case "DirectMessage":
icon = <AtSign size={20} strokeWidth={1.5} />; icon = <At size={20} />;
const uid = client.channels.getRecipient(channel._id); const uid = client.channels.getRecipient(channel._id);
recipient = client.users.get(uid); recipient = client.users.get(uid);
break; break;
case "Group": case "Group":
icon = <Users size={20} strokeWidth={1.5} />; icon = <Group size={20} />;
break; break;
case "TextChannel": case "TextChannel":
icon = <Hash size={20} strokeWidth={1.5} />; icon = <Hash size={20} />;
break; break;
} }

6
src/pages/channels/actions/HeaderActions.tsx
View file

@ -6,7 +6,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { VoiceContext, VoiceOperationsContext, VoiceStatus } from "../../../context/Voice"; import { VoiceContext, VoiceOperationsContext, VoiceStatus } from "../../../context/Voice";
import { UserPlus, Settings, Sidebar as SidebarIcon, PhoneCall, PhoneOff } from "@styled-icons/feather"; import { UserPlus, Cog, Sidebar as SidebarIcon, PhoneCall, PhoneOutgoing } from "@styled-icons/boxicons-regular";
export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderProps) { export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderProps) {
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
@ -30,7 +30,7 @@ export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderP
<UserPlus size={22} /> <UserPlus size={22} />
</IconButton> </IconButton>
<IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}> <IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
<Settings size={22} /> <Cog size={22} />
</IconButton> </IconButton>
</> </>
) } ) }
@ -55,7 +55,7 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, 'channel'>) {
if (voice.roomId === channel._id) { if (voice.roomId === channel._id) {
return ( return (
<IconButton onClick={disconnect}> <IconButton onClick={disconnect}>
<PhoneOff size={22} /> <PhoneOutgoing size={22} />
</IconButton> </IconButton>
) )
} else { } else {

6
src/pages/channels/voice/VoiceHeader.tsx
View file

@ -1,7 +1,7 @@
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import styled from "styled-components"; import styled from "styled-components";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { BarChart } from "@styled-icons/bootstrap"; import { BarChart } from "@styled-icons/boxicons-regular";
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import UserIcon from "../../../components/common/user/UserIcon"; import UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useSelf, useUsers } from "../../../context/revoltjs/hooks"; import { useForceUpdate, useSelf, useUsers } from "../../../context/revoltjs/hooks";
@ -93,7 +93,7 @@ export default function VoiceHeader({ id }: Props) {
)} )}
</div> </div>
<div className="status"> <div className="status">
<BarChart size={20} strokeWidth={2} /> <BarChart size={20} />
{ status === VoiceStatus.CONNECTED && <Text id="app.main.channel.voice.connected" /> } { status === VoiceStatus.CONNECTED && <Text id="app.main.channel.voice.connected" /> }
</div> </div>
<div className="actions"> <div className="actions">
@ -145,7 +145,7 @@ export default function VoiceHeader({ id }: Props) {
)} )}
</div> </div>
<div className={styles.status}> <div className={styles.status}>
<BarChart size={20} strokeWidth={2} /> <BarChart size={20} />
{ voice.status === VoiceStatus.CONNECTED && <Text id="app.main.channel.voice.connected" /> } { voice.status === VoiceStatus.CONNECTED && <Text id="app.main.channel.voice.connected" /> }
</div> </div>
<div className={styles.actions}> <div className={styles.actions}>

4
src/pages/friends/Friend.tsx
View file

@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
import styles from "./Friend.module.scss"; import styles from "./Friend.module.scss";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { X, Plus, Mail } from "@styled-icons/feather"; import { X, Plus, Envelope } from "@styled-icons/boxicons-regular";
import IconButton from "../../components/ui/IconButton"; import IconButton from "../../components/ui/IconButton";
import { attachContextMenu } from "preact-context-menu"; import { attachContextMenu } from "preact-context-menu";
import { User, Users } from "revolt.js/dist/api/objects"; import { User, Users } from "revolt.js/dist/api/objects";
@ -30,7 +30,7 @@ export function Friend({ user }: Props) {
<IconButton type="circle" <IconButton type="circle"
onClick={stopPropagation}> onClick={stopPropagation}>
<Link to={'/open/' + user._id}> <Link to={'/open/' + user._id}>
<Mail size={20} /> <Envelope size={20} />
</Link> </Link>
</IconButton> </IconButton>
); );

2
src/pages/friends/Friends.tsx
View file

@ -1,5 +1,5 @@
import styles from "./Friend.module.scss"; import styles from "./Friend.module.scss";
import { UserPlus } from "@styled-icons/feather"; import { UserPlus } from "@styled-icons/boxicons-regular";
import { Friend } from "./Friend"; import { Friend } from "./Friend";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";

4
src/pages/invite/Invite.tsx
View file

@ -1,6 +1,6 @@
import styles from './Invite.module.scss'; import styles from './Invite.module.scss';
import Button from '../../components/ui/Button'; import Button from '../../components/ui/Button';
import { ArrowLeft } from "@styled-icons/feather"; import { LeftArrowAlt } from "@styled-icons/boxicons-regular";
import Overline from '../../components/ui/Overline'; import Overline from '../../components/ui/Overline';
import { Invites } from "revolt.js/dist/api/objects"; import { Invites } from "revolt.js/dist/api/objects";
import Preloader from '../../components/ui/Preloader'; import Preloader from '../../components/ui/Preloader';
@ -44,7 +44,7 @@ export default function Invite() {
return ( return (
<div className={styles.invite} style={{ backgroundImage: invite.server_banner ? `url('${client.generateFileURL(invite.server_banner)}')` : undefined }}> <div className={styles.invite} style={{ backgroundImage: invite.server_banner ? `url('${client.generateFileURL(invite.server_banner)}')` : undefined }}>
<div className={styles.leave}> <div className={styles.leave}>
<ArrowLeft size={32} onClick={() => history.push('/')} /> <LeftArrowAlt size={32} onClick={() => history.push('/')} />
</div> </div>
{ !processing && { !processing &&

4
src/pages/login/forms/Form.tsx
View file

@ -5,7 +5,7 @@ import styles from "../Login.module.scss";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { MailProvider } from "./MailProvider"; import { MailProvider } from "./MailProvider";
import { useContext, useState } from "preact/hooks"; import { useContext, useState } from "preact/hooks";
import { CheckCircle, Mail } from "@styled-icons/feather"; import { CheckCircle, Envelope } from "@styled-icons/boxicons-regular";
import { takeError } from "../../../context/revoltjs/util"; import { takeError } from "../../../context/revoltjs/util";
import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock"; import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
@ -109,7 +109,7 @@ export function Form({ page, callback }: Props) {
<div className={styles.success}> <div className={styles.success}>
{client.configuration?.features.email ? ( {client.configuration?.features.email ? (
<> <>
<Mail size={72} /> <Envelope size={72} />
<h2> <h2>
<Text id="login.check_mail" /> <Text id="login.check_mail" />
</h2> </h2>

4
src/pages/settings/ChannelSettings.tsx
View file

@ -1,5 +1,5 @@
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { List } from "@styled-icons/feather"; import { ListUl } from "@styled-icons/boxicons-regular";
import Category from "../../components/ui/Category"; import Category from "../../components/ui/Category";
import { GenericSettings } from "./GenericSettings"; import { GenericSettings } from "./GenericSettings";
import { getChannelName } from "../../context/revoltjs/util"; import { getChannelName } from "../../context/revoltjs/util";
@ -30,7 +30,7 @@ export default function ChannelSettings() {
{ {
category: <Category variant="uniform" text={getChannelName(ctx.client, channel, true)} />, category: <Category variant="uniform" text={getChannelName(ctx.client, channel, true)} />,
id: 'overview', id: 'overview',
icon: <List size={20} strokeWidth={2} />, icon: <ListUl size={20} />,
title: <Text id="app.settings.channel_pages.overview.title" /> title: <Text id="app.settings.channel_pages.overview.title" />
} }
]} ]}

4
src/pages/settings/GenericSettings.tsx
View file

@ -6,7 +6,7 @@ import Header from '../../components/ui/Header';
import Category from '../../components/ui/Category'; import Category from '../../components/ui/Category';
import IconButton from "../../components/ui/IconButton"; import IconButton from "../../components/ui/IconButton";
import LineDivider from "../../components/ui/LineDivider"; import LineDivider from "../../components/ui/LineDivider";
import { ArrowLeft, X, XCircle } from "@styled-icons/feather"; import { LeftArrowAlt, X, XCircle } from "@styled-icons/boxicons-regular";
import { Switch, useHistory, useParams } from "react-router-dom"; import { Switch, useHistory, useParams } from "react-router-dom";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import ButtonItem from "../../components/navigation/items/ButtonItem"; import ButtonItem from "../../components/navigation/items/ButtonItem";
@ -65,7 +65,7 @@ export function GenericSettings({ pages, switchPage, category, custom, children,
) : ( ) : (
<> <>
<IconButton onClick={() => switchPage()}> <IconButton onClick={() => switchPage()}>
<ArrowLeft size={24} /> <LeftArrowAlt size={24} />
</IconButton> </IconButton>
<Text <Text
id={`app.settings.${category}.${page}.title`} id={`app.settings.${category}.${page}.title`}

11
src/pages/settings/ServerSettings.tsx
View file

@ -3,7 +3,8 @@ import Category from "../../components/ui/Category";
import { GenericSettings } from "./GenericSettings"; import { GenericSettings } from "./GenericSettings";
import { useServer } from "../../context/revoltjs/hooks"; import { useServer } from "../../context/revoltjs/hooks";
import { Route, useHistory, useParams } from "react-router-dom"; import { Route, useHistory, useParams } from "react-router-dom";
import { List, Share, Users, XSquare } from "@styled-icons/feather"; import { ListUl, Share, Group } from "@styled-icons/boxicons-regular";
import { XSquare } from "@styled-icons/boxicons-solid";
import RequiresOnline from "../../context/revoltjs/RequiresOnline"; import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import { Overview } from "./server/Overview"; import { Overview } from "./server/Overview";
@ -31,22 +32,22 @@ export default function ServerSettings() {
{ {
category: <Category variant="uniform" text={server.name} />, category: <Category variant="uniform" text={server.name} />,
id: 'overview', id: 'overview',
icon: <List size={20} strokeWidth={2} />, icon: <ListUl size={20} />,
title: <Text id="app.settings.channel_pages.overview.title" /> title: <Text id="app.settings.channel_pages.overview.title" />
}, },
{ {
id: 'members', id: 'members',
icon: <Users size={20} strokeWidth={2} />, icon: <Group size={20} />,
title: "Members" title: "Members"
}, },
{ {
id: 'invites', id: 'invites',
icon: <Share size={20} strokeWidth={2} />, icon: <Share size={20} />,
title: "Invites" title: "Invites"
}, },
{ {
id: 'bans', id: 'bans',
icon: <XSquare size={20} strokeWidth={2} />, icon: <XSquare size={20} />,
title: "Bans" title: "Bans"
} }
]} ]}

32
src/pages/settings/Settings.tsx
View file

@ -10,16 +10,16 @@ import {
Bell, Bell,
Box, Box,
Coffee, Coffee,
Gitlab,
Globe, Globe,
Image, Image,
LogOut, LogOut,
RefreshCw, Sync as SyncIcon,
Shield, Shield,
ToggleRight, ToggleRight,
User User
} from "@styled-icons/feather"; } from "@styled-icons/boxicons-regular";
import { Megaphone } from "@styled-icons/bootstrap"; import { Megaphone } from "@styled-icons/boxicons-solid";
import { Gitlab } from "@styled-icons/boxicons-logos";
import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision"; import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../revision";
import LineDivider from "../../components/ui/LineDivider"; import LineDivider from "../../components/ui/LineDivider";
import RequiresOnline from "../../context/revoltjs/RequiresOnline"; import RequiresOnline from "../../context/revoltjs/RequiresOnline";
@ -54,49 +54,49 @@ export default function Settings() {
{ {
category: <Text id="app.settings.categories.user_settings" />, category: <Text id="app.settings.categories.user_settings" />,
id: 'account', id: 'account',
icon: <User size={20} strokeWidth={2} />, icon: <User size={20} />,
title: <Text id="app.settings.pages.account.title" /> title: <Text id="app.settings.pages.account.title" />
}, },
{ {
id: 'profile', id: 'profile',
icon: <Image size={20} strokeWidth={2} />, icon: <Image size={20} />,
title: <Text id="app.settings.pages.profile.title" /> title: <Text id="app.settings.pages.profile.title" />
}, },
{ {
id: 'sessions', id: 'sessions',
icon: <Shield size={20} strokeWidth={2} />, icon: <Shield size={20} />,
title: <Text id="app.settings.pages.sessions.title" /> title: <Text id="app.settings.pages.sessions.title" />
}, },
{ {
category: <Text id="app.settings.categories.client_settings" />, category: <Text id="app.settings.categories.client_settings" />,
id: 'appearance', id: 'appearance',
icon: <Box size={20} strokeWidth={2} />, icon: <Box size={20} />,
title: <Text id="app.settings.pages.appearance.title" /> title: <Text id="app.settings.pages.appearance.title" />
}, },
{ {
id: 'notifications', id: 'notifications',
icon: <Bell size={20} strokeWidth={2} />, icon: <Bell size={20} />,
title: <Text id="app.settings.pages.notifications.title" /> title: <Text id="app.settings.pages.notifications.title" />
}, },
{ {
id: 'language', id: 'language',
icon: <Globe size={20} strokeWidth={2} />, icon: <Globe size={20} />,
title: <Text id="app.settings.pages.language.title" /> title: <Text id="app.settings.pages.language.title" />
}, },
{ {
id: 'sync', id: 'sync',
icon: <RefreshCw size={20} strokeWidth={2} />, icon: <SyncIcon size={20} />,
title: <Text id="app.settings.pages.sync.title" /> title: <Text id="app.settings.pages.sync.title" />
}, },
{ {
divider: true, divider: true,
id: 'experiments', id: 'experiments',
icon: <ToggleRight size={20} strokeWidth={2} />, icon: <ToggleRight size={20} />,
title: <Text id="app.settings.pages.experiments.title" /> title: <Text id="app.settings.pages.experiments.title" />
}, },
{ {
id: 'feedback', id: 'feedback',
icon: <Megaphone size={20} strokeWidth={0.3} />, icon: <Megaphone size={20} />,
title: <Text id="app.settings.pages.feedback.title" /> title: <Text id="app.settings.pages.feedback.title" />
} }
]} ]}
@ -122,13 +122,13 @@ export default function Settings() {
target="_blank" target="_blank"
> >
<ButtonItem compact> <ButtonItem compact>
<Gitlab size={20} strokeWidth={2} /> <Gitlab size={20} />
<Text id="app.settings.pages.source_code" /> <Text id="app.settings.pages.source_code" />
</ButtonItem> </ButtonItem>
</a>, </a>,
<a href="https://ko-fi.com/insertish" target="_blank"> <a href="https://ko-fi.com/insertish" target="_blank">
<ButtonItem className={styles.donate} compact> <ButtonItem className={styles.donate} compact>
<Coffee size={20} strokeWidth={2} /> <Coffee size={20} />
<Text id="app.settings.pages.donate.title" /> <Text id="app.settings.pages.donate.title" />
</ButtonItem> </ButtonItem>
</a>, </a>,
@ -138,7 +138,7 @@ export default function Settings() {
className={styles.logOut} className={styles.logOut}
compact compact
> >
<LogOut size={20} strokeWidth={2} /> <LogOut size={20} />
<Text id="app.settings.pages.logOut" /> <Text id="app.settings.pages.logOut" />
</ButtonItem>, </ButtonItem>,
<div className={styles.version}> <div className={styles.version}>

6
src/pages/settings/panes/Account.tsx
View file

@ -5,7 +5,7 @@ import Button from "../../../components/ui/Button";
import { Users } from "revolt.js/dist/api/objects"; import { Users } from "revolt.js/dist/api/objects";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import Overline from "../../../components/ui/Overline"; import Overline from "../../../components/ui/Overline";
import { AtSign, Key, Mail } from "@styled-icons/feather"; import { At, Key, Envelope } from "@styled-icons/boxicons-regular";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import UserIcon from "../../../components/common/user/UserIcon"; import UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks"; import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
@ -54,8 +54,8 @@ export function Account() {
</div> </div>
<div className={styles.details}> <div className={styles.details}>
{[ {[
["username", user.username, <AtSign size={24} />], ["username", user.username, <At size={24} />],
["email", email, <Mail size={24} />], ["email", email, <Envelope size={24} />],
["password", "*****", <Key size={24} />] ["password", "*****", <Key size={24} />]
].map(([field, value, icon]) => ( ].map(([field, value, icon]) => (
<div> <div>

2
src/pages/settings/panes/Sessions.tsx
View file

@ -9,7 +9,7 @@ import Preloader from "../../../components/ui/Preloader";
import { useContext, useEffect, useState } from "preact/hooks"; import { useContext, useEffect, useState } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { HelpCircle } from "@styled-icons/feather"; import { HelpCircle } from "@styled-icons/boxicons-regular";
import { import {
Android, Android,
Firefoxbrowser, Firefoxbrowser,

2
src/pages/settings/server/Invites.tsx
View file

@ -1,5 +1,5 @@
import styles from './Panes.module.scss'; import styles from './Panes.module.scss';
import { XCircle } from "@styled-icons/feather"; import { XCircle } from "@styled-icons/boxicons-regular";
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import Preloader from "../../../components/ui/Preloader"; import Preloader from "../../../components/ui/Preloader";
import IconButton from "../../../components/ui/IconButton"; import IconButton from "../../../components/ui/IconButton";