diff --git a/src/components/common/ServerIcon.tsx b/src/components/common/ServerIcon.tsx index e8f4f0e6..a2082298 100644 --- a/src/components/common/ServerIcon.tsx +++ b/src/components/common/ServerIcon.tsx @@ -13,12 +13,13 @@ interface Props extends IconBaseProps { } 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); diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index 9e25a944..6b531ef9 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/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(() => { ); })} - - openScreen({ - id: "special_input", - type: "create_server", - }) - }> - - - + {/**/} + + +
+ + openScreen({ + id: "special_input", + type: "create_server", + }) + }> + + +
+
+
+ + +
Discover Public Servers
+ + + } + placement="right"> +
+ + + + + +
+
+
+ {!isTouchscreenDevice && ( diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index ea7ff982..1e2863f3 100644 --- a/src/pages/settings/Settings.module.scss +++ b/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;