feat(servers): added new icons to server sidebar

src/components/common/ServerIcon.tsx

@@ -13,12 +13,13 @@ interface Props extends IconBaseProps<Server> {
 }
 
 const ServerText = styled.div`
-    display: grid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     padding: 0.2em;
     font-size: 0.75rem;
     font-weight: 600;
     overflow: hidden;
-    place-items: center;
     color: var(--foreground);
     background: var(--primary-background);
     border-radius: var(--border-radius-half);

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,5 +1,5 @@
-import { Plus } from "@styled-icons/boxicons-regular";
-import { Cog } from "@styled-icons/boxicons-solid";
+import { Plus, LinkExternal } from "@styled-icons/boxicons-regular";
+import { Cog, Compass } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link, useHistory, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
@@ -162,6 +162,33 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
         `}
 `;
 
+const ServerCircle = styled.div`
+    width: 54px;
+    height: 58px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .circle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--primary-background);
+        border-radius: 50%;
+        height: 42px;
+        width: 42px;
+        transition: background-color 0.1s ease-in;
+
+        > div svg {
+            color: var(--accent);
+        }
+
+        &:active {
+            transform: translateY(1px);
+        }
+    }
+`;
+
 const SettingsButton = styled.div`
     width: 50px;
     height: 56px;
@@ -341,17 +368,50 @@ export default observer(() => {
                         </ConditionalLink>
                     );
                 })}
-                <IconButton
-                    onClick={() =>
-                        openScreen({
-                            id: "special_input",
-                            type: "create_server",
-                        })
-                    }>
-                    <Plus size={36} />
-                </IconButton>
-                <PaintCounter small />
+                {/*<LineDivider />*/}
+                <ServerCircle>
+                    <Tooltip content="Add a Server" placement="right">
+                        <div className="circle">
+                            <IconButton
+                                onClick={() =>
+                                    openScreen({
+                                        id: "special_input",
+                                        type: "create_server",
+                                    })
+                                }>
+                                <Plus size={32} />
+                            </IconButton>
+                        </div>
+                    </Tooltip>
+                </ServerCircle>
+                <ServerCircle>
+                    <Tooltip
+                        content={
+                            <div
+                                style={{
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "4px",
+                                }}>
+                                <div>Discover Public Servers</div>
+                                <LinkExternal size={12} />
+                            </div>
+                        }
+                        placement="right">
+                        <div className="circle">
+                            <IconButton>
+                                <a
+                                    href="https://revolt.social"
+                                    target="_blank"
+                                    rel="noreferrer">
+                                    <Compass size={32} />
+                                </a>
+                            </IconButton>
+                        </div>
+                    </Tooltip>
+                </ServerCircle>
             </ServerList>
+            <PaintCounter small />
             {!isTouchscreenDevice && (
                 <SettingsButton>
                     <Link to="/settings">

src/pages/settings/Settings.module.scss

@@ -227,6 +227,7 @@
             font-size: 0.8125rem;
             text-transform: uppercase;
             color: var(--secondary-foreground);
+            /*margin-bottom: 10px;*/
 
             &:first-child {
                 margin-top: 0;