Port and re-write icon code.

src/pages/App.tsx

@@ -0,0 +1,18 @@
+import { OverlappingPanels } from "react-overlapping-panels";
+import { Switch, Route } from "react-router-dom";
+
+import Home from './home/Home';
+
+export default function App() {
+    return (
+        <OverlappingPanels
+            width="100vw"
+            height="100%">
+            <Switch>
+                <Route path="/">
+                    <Home />
+                </Route>
+            </Switch>
+        </OverlappingPanels>
+    );
+};

src/pages/home/Home.tsx

@@ -0,0 +1,59 @@
+import { useChannels, useForceUpdate, useServers, useUser } from "../../context/revoltjs/hooks";
+import ChannelIcon from "../../components/common/ChannelIcon";
+import ServerIcon from "../../components/common/ServerIcon";
+import UserIcon from "../../components/common/UserIcon";
+import PaintCounter from "../../lib/PaintCounter";
+
+export function Nested() {
+    const ctx = useForceUpdate();
+
+    let user = useUser('01EX2NCWQ0CHS3QJF0FEQS1GR4', ctx)!;
+    let user2 = useUser('01EX40TVKYNV114H8Q8VWEGBWQ', ctx)!;
+    let user3 = useUser('01F5GV44HTXP3MTCD2VPV42DPE', ctx)!;
+
+    let channels = useChannels(undefined, ctx);
+    let servers = useServers(undefined, ctx);
+
+    return (
+        <>
+            <h3>Nested component</h3>
+            <PaintCounter />
+            @{ user.username } is { user.online ? 'online' : 'offline' }<br/><br/>
+
+            <h3>UserIcon Tests</h3>
+            <UserIcon size={64} target={user} />
+            <UserIcon size={64} target={user} status />
+            <UserIcon size={64} target={user} voice='muted' />
+            <UserIcon size={64} attachment={user2.avatar} />
+            <UserIcon size={64} attachment={user3.avatar} />
+            <UserIcon size={64} attachment={user3.avatar} animate />
+
+            <h3>Channels</h3>
+            { channels.map(channel =>
+                channel &&
+                channel.channel_type !== 'SavedMessages' &&
+                channel.channel_type !== 'DirectMessage' &&
+                <ChannelIcon size={48} target={channel} />
+            ) }
+
+            <h3>Servers</h3>
+            { servers.map(server =>
+                server &&
+                <ServerIcon size={48} target={server} />
+            ) }
+
+            <br/><br/>
+            <p>{ 'test long paragraph'.repeat(2000) }</p>
+        </>
+    )
+}
+
+export default function Home() {
+    return (
+        <div style={{ overflowY: 'scroll', height: '100vh' }}>
+            <h1>HOME</h1>
+            <PaintCounter />
+            <Nested />
+        </div>
+    );
+}

src/pages/login/Login.module.scss

@@ -1,4 +1,7 @@
 .login {
+    width: 100%;
+    height: 100%;
+
     display: flex;
     flex-direction: row;
 

src/pages/login/Login.tsx

@@ -15,7 +15,7 @@ import { FormCreate } from "./forms/FormCreate";
 import { FormResend } from "./forms/FormResend";
 import { FormReset, FormSendReset } from "./forms/FormReset";
 
-export const Login = () => {
+export default function Login() {
     const theme = useContext(ThemeContext);
     const { client } = useContext(AppContext);