refactor: switch some icons over to material

revoltchat · Jun 26, 2024 · ffd87c3 · ffd87c3
1 parent 35af353
commit ffd87c3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 61 deletions.
diff --git a/packages/client/components/app/interface/channels/text/Message.tsx b/packages/client/components/app/interface/channels/text/Message.tsx
@@ -1,10 +1,3 @@
-import {
-  BiRegularLink,
-  BiSolidBot,
-  BiSolidCloud,
-  BiSolidLeaf,
-  BiSolidShield,
-} from "solid-icons/bi";
 import { For, Match, Show, Switch, onMount } from "solid-js";
 
 import { Message as MessageInterface, WebsiteEmbed } from "revolt.js";
@@ -27,9 +20,16 @@ import {
   SystemMessageIcon,
   Tooltip,
   Username,
+  iconSize,
   styled,
 } from "@revolt/ui";
 
+import MdCloud from "@material-design-icons/svg/filled/cloud.svg?component-solid";
+import MdLink from "@material-design-icons/svg/filled/link.svg?component-solid";
+import MdShield from "@material-design-icons/svg/filled/shield.svg?component-solid";
+import MdSmartToy from "@material-design-icons/svg/filled/smart_toy.svg?component-solid";
+import MdSpa from "@material-design-icons/svg/filled/spa.svg?component-solid";
+
 import { MessageContextMenu } from "../../../menus/MessageContextMenu";
 import {
   floatingUserMenus,
@@ -148,22 +148,22 @@ export function Message(props: Props) {
             }
           >
             <Tooltip content={t("app.main.channel.bridged")} placement="top">
-              <BiRegularLink size={16} />
+              <MdLink {...iconSize(16)} />
             </Tooltip>
           </Match>
           <Match when={props.message.author?.privileged}>
             <Tooltip content={t("app.main.channel.team")} placement="top">
-              <BiSolidShield size={16} />
+              <MdShield {...iconSize(16)} />
             </Tooltip>
           </Match>
           <Match when={props.message.author?.bot}>
             <Tooltip content={t("app.main.channel.bot")} placement="top">
-              <BiSolidBot size={16} />
+              <MdSmartToy {...iconSize(16)} />
             </Tooltip>
           </Match>
           <Match when={props.message.webhook}>
             <Tooltip content={t("app.main.channel.webhook")} placement="top">
-              <BiSolidCloud size={16} />
+              <MdCloud {...iconSize(16)} />
             </Tooltip>
           </Match>
           <Match
@@ -174,7 +174,7 @@ export function Message(props: Props) {
           >
             <NewUser>
               <Tooltip content="New to Revolt" placement="top">
-                <BiSolidLeaf size={16} />
+                <MdSpa {...iconSize(16)} />
               </Tooltip>
             </NewUser>
           </Match>
@@ -186,7 +186,7 @@ export function Message(props: Props) {
           >
             <NewUser>
               <Tooltip content="New to the server" placement="top">
-                <BiSolidLeaf size={16} />
+                <MdSpa {...iconSize(16)} />
               </Tooltip>
             </NewUser>
           </Match>

diff --git a/packages/client/components/app/interface/settings/_layout/Content.tsx b/packages/client/components/app/interface/settings/_layout/Content.tsx
@@ -1,9 +1,10 @@
-import { BiRegularX } from "solid-icons/bi";
 import { Accessor, JSX, Show } from "solid-js";
 
 import { cva } from "styled-system/css";
 
-import { Breadcrumbs, Column, Typography, styled } from "@revolt/ui";
+import { Breadcrumbs, Column, Typography, iconSize, styled } from "@revolt/ui";
+
+import MdClose from "@material-design-icons/svg/outlined/close.svg?component-solid";
 
 import { useSettingsNavigation } from "../Settings";
 
@@ -43,7 +44,7 @@ export function SettingsContent(props: {
       <Show when={props.onClose}>
         <CloseAction>
           <CloseAnchor onClick={props.onClose}>
-            <BiRegularX size={28} color="unset" />
+            <MdClose {...iconSize(28)} />
           </CloseAnchor>
         </CloseAction>
       </Show>

diff --git a/packages/client/components/ui/components/navigation/servers/ServerList.tsx b/packages/client/components/ui/components/navigation/servers/ServerList.tsx
@@ -1,4 +1,3 @@
-import { BiRegularPlus, BiSolidCog, BiSolidMegaphone } from "solid-icons/bi";
 import { Accessor, For, Show, onCleanup, onMount } from "solid-js";
 import { JSX } from "solid-js";
 import { styled as styledLegacy } from "solid-styled-components";
@@ -10,9 +9,11 @@ import { styled } from "styled-system/jsx";
 import { KeybindAction } from "@revolt/keybinds";
 import { useNavigate } from "@revolt/routing";
 
-import MdHome from "@material-design-icons/svg/outlined/home.svg?component-solid";
+import MdAdd from "@material-design-icons/svg/filled/add.svg?component-solid";
+import MdExplore from "@material-design-icons/svg/filled/explore.svg?component-solid";
+import MdHome from "@material-design-icons/svg/filled/home.svg?component-solid";
+import MdSettings from "@material-design-icons/svg/filled/settings.svg?component-solid";
 
-import { iconSize } from "../../..";
 import { Draggable } from "../../common/Draggable";
 import { useKeybindActions } from "../../context/Keybinds";
 import { Column, Typography } from "../../design";
@@ -137,7 +138,7 @@ export const ServerList = (props: Props) => {
             </PositionSwoosh>
           </Show> */}
           <a href="/">
-            <Avatar size={42} fallback={<MdHome {...iconSize(16)} />} />
+            <Avatar size={42} fallback={<MdHome />} />
           </a>
         </EntryContainer>
         <Tooltip
@@ -245,39 +246,23 @@ export const ServerList = (props: Props) => {
         <Tooltip placement="right" content={"Create or join a server"}>
           <EntryContainer>
             <a onClick={() => props.onCreateOrJoinServer()}>
-              <Avatar
-                size={42}
-                fallback={
-                  /*<MdPlus {...iconSize("24px")} />*/ <BiRegularPlus
-                    size={20}
-                  />
-                }
-              />
+              <Avatar size={42} fallback={<MdAdd />} />
             </a>
           </EntryContainer>
         </Tooltip>
+        <Tooltip placement="right" content={"Find new servers to join"}>
+          <EntryContainer>
+            <Avatar size={42} fallback={<MdExplore />} />
+          </EntryContainer>
+        </Tooltip>
       </div>
       <Shadow>
         <div />
       </Shadow>
-      <Tooltip placement="right" content="Give Feedback">
-        <EntryContainer>
-          <a
-            href="https://github.com/revoltchat/frontend/issues"
-            target="_blank"
-          >
-            <Avatar
-              size={42}
-              fallback={<BiSolidMegaphone size={18} />}
-              interactive
-            />
-          </a>
-        </EntryContainer>
-      </Tooltip>
       <Tooltip placement="right" content="Settings">
         <EntryContainer>
           <a href="/settings">
-            <Avatar size={42} fallback={<BiSolidCog size={18} />} interactive />
+            <Avatar size={42} fallback={<MdSettings />} interactive />
           </a>
         </EntryContainer>
       </Tooltip>

diff --git a/packages/client/src/interface/Home.tsx b/packages/client/src/interface/Home.tsx
@@ -1,12 +1,3 @@
-import {
-  BiRegularMoney,
-  BiSolidCog,
-  BiSolidCompass,
-  BiSolidHome,
-  BiSolidMegaphone,
-  BiSolidPlusCircle,
-  BiSolidRightArrowCircle,
-} from "solid-icons/bi";
 import { Match, Show, Switch } from "solid-js";
 
 import { cva } from "styled-system/css";
@@ -21,9 +12,18 @@ import {
   Column,
   Header,
   Typography,
+  iconSize,
   styled,
 } from "@revolt/ui";
 
+import MdAddCircle from "@material-design-icons/svg/filled/add_circle.svg?component-solid";
+import MdExplore from "@material-design-icons/svg/filled/explore.svg?component-solid";
+import MdGroups3 from "@material-design-icons/svg/filled/groups_3.svg?component-solid";
+import MdHome from "@material-design-icons/svg/filled/home.svg?component-solid";
+import MdPayments from "@material-design-icons/svg/filled/payments.svg?component-solid";
+import MdRateReview from "@material-design-icons/svg/filled/rate_review.svg?component-solid";
+import MdSettings from "@material-design-icons/svg/filled/settings.svg?component-solid";
+
 import RevoltSvg from "../../public/assets/wordmark_wide_500px.svg?component-solid";
 
 import { HeaderIcon } from "./common/CommonHeader";
@@ -112,7 +112,7 @@ export function HomePage() {
     <Base>
       <Header placement="primary">
         <HeaderIcon>
-          <BiSolidHome size={24} />
+          <MdHome {...iconSize(22)} />
         </HeaderIcon>
         Home
       </Header>
@@ -133,7 +133,7 @@ export function HomePage() {
                 })
               }
               description={t("app.home.group_desc")}
-              icon={<BiSolidPlusCircle size={24} />}
+              icon={<MdAddCircle />}
             >
               {t("app.home.group")}
             </CategoryButton>
@@ -142,15 +142,15 @@ export function HomePage() {
                 <CategoryButton
                   onClick={() => navigate("/server/01F7ZSBSFHQ8TA81725KQCSDDP")}
                   description={t("app.home.goto-testers_desc")}
-                  icon={<BiSolidRightArrowCircle size={24} />}
+                  icon={<MdGroups3 />}
                 >
                   {t("app.home.goto-testers")}
                 </CategoryButton>
               </Match>
               <Match when={showLoungeButton && !isInLounge}>
                 <CategoryButton
                   description={t("app.home.join-testers_desc")}
-                  icon={<BiSolidRightArrowCircle size={24} />}
+                  icon={<MdGroups3 />}
                 >
                   {t("app.home.join-testers")}
                 </CategoryButton>
@@ -161,7 +161,7 @@ export function HomePage() {
                 window.open("https://insrt.uk/donate?utm_source=revoltapp")
               }
               description={t("app.home.donate_desc")}
-              icon={<BiRegularMoney size={24} />}
+              icon={<MdPayments />}
             >
               {t("app.home.donate")}
             </CategoryButton>
@@ -171,14 +171,14 @@ export function HomePage() {
               <CategoryButton
                 onClick={() => navigate("/discover")}
                 description={t("app.home.discover_desc")}
-                icon={<BiSolidCompass size={24} />}
+                icon={<MdExplore />}
               >
                 {t("app.home.discover")}
               </CategoryButton>
             </Show>
             <CategoryButton
               description={t("app.home.feedback_desc")}
-              icon={<BiSolidMegaphone size={24} />}
+              icon={<MdRateReview {...iconSize(22)} />}
             >
               {t("app.home.feedback")}
             </CategoryButton>
@@ -187,14 +187,14 @@ export function HomePage() {
                 modalController.push({ type: "settings", config: "user" })
               }
               description={t("app.home.settings-tooltip")}
-              icon={<BiSolidCog size={24} />}
+              icon={<MdSettings />}
             >
               {t("app.home.settings")}
             </CategoryButton>
           </SeparatedColumn>
         </Buttons>
         <Show when={IS_DEV}>
-          <Button onClick={() => navigate("/dev")}>
+          <Button onPress={() => navigate("/dev")}>
             Open Development Page
           </Button>
         </Show>