From b6724c66808c94ddc917d471b0dac94164d028fb Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Sat, 3 Jul 2021 10:46:35 +0200
Subject: [PATCH] Update: Added solid icons where needed

---
 .../navigation/left/ServerListSidebar.tsx     |  7 +++
 src/pages/channels/actions/HeaderActions.tsx  | 11 +++--
 src/pages/friends/Friend.module.scss          |  6 +++
 src/pages/friends/Friends.tsx                 | 48 +++++++++++--------
 4 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index d6429275..3ba5a986 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -100,8 +100,15 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
         border-start-start-radius: 50%;
         border-end-start-radius: 50%;
 
+        &:active {
+            transform: translateY(1px);
+        }
+
         ${ props => props.active && css`
             background: var(--sidebar-active);
+            &:active {
+                transform: none;
+            }
         ` }
     }
 
diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx
index e0bfcdd0..881ea0dd 100644
--- a/src/pages/channels/actions/HeaderActions.tsx
+++ b/src/pages/channels/actions/HeaderActions.tsx
@@ -7,7 +7,8 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import UpdateIndicator from "../../../components/common/UpdateIndicator";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { VoiceContext, VoiceOperationsContext, VoiceStatus } from "../../../context/Voice";
-import { UserPlus, Cog, Sidebar as SidebarIcon, PhoneCall, PhoneOutgoing } from "@styled-icons/boxicons-regular";
+import { UserPlus, Cog, PhoneCall, PhoneOutgoing } from "@styled-icons/boxicons-solid";
+import { Sidebar as SidebarIcon } from "@styled-icons/boxicons-regular";
 
 export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderProps) {
     const { openScreen } = useIntermediate();
@@ -29,10 +30,10 @@ export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderP
                                 }
                             }
                         })}>
-                        <UserPlus size={22} />
+                        <UserPlus size={27} />
                     </IconButton>
                     <IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
-                        <Cog size={22} />
+                        <Cog size={24} />
                     </IconButton>
                 </>
             ) }
@@ -66,14 +67,14 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, 'channel'>) {
                     disconnect();
                     connect(channel._id);
                 }}>
-                    <PhoneCall size={22} />
+                    <PhoneCall size={24} />
                 </IconButton>
             )
         }
     } else {
         return (
             <IconButton>
-                <PhoneCall size={22} /** ! FIXME: TEMP */ color="red" />
+                <PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
             </IconButton>
         )
     }
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index d7129674..c455ef87 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -1,3 +1,9 @@
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
 .list {
     padding: 0 10px 10px 10px;
     user-select: none;
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index b713eddc..444afadf 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -10,8 +10,8 @@ import { User, Users } from "revolt.js/dist/api/objects";
 import UserIcon from "../../components/common/user/UserIcon";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { ChevronDown, ChevronRight } from "@styled-icons/boxicons-regular";
-import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
+import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regular";
+import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
 import { TextReact } from "../../lib/i18n";
 import { Children } from "../../types/Preact";
 
@@ -53,24 +53,32 @@ export default function Friends() {
                 <div className={styles.title}>
                     <Text id="app.navigation.tabs.friends" />
                 </div>
-                <Tooltip content={"Create Group"} placement="bottom">
-                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
-                        <Conversation size={24} />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip content={"Add Friend"} placement="bottom">
-                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
-                        <UserPlus size={24} />
-                    </IconButton>
-                </Tooltip>
-                {/* 
-                <div className={styles.divider} />
-                <Tooltip content={"Friend Activity"} placement="bottom">
-                    <IconButton>
-                        <TennisBall size={24} />
-                    </IconButton>            
-                </Tooltip>
-                */}
+                <div className={styles.actions}>
+                    {/*<Tooltip content={"Create Category"} placement="bottom">
+                        <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
+                            <ListPlus size={24} />
+                        </IconButton>
+                    </Tooltip>
+                    <div className={styles.divider} />*/}
+                    <Tooltip content={"Create Group"} placement="bottom">
+                        <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
+                            <MessageAdd size={24} />
+                        </IconButton>
+                    </Tooltip>
+                    <Tooltip content={"Add Friend"} placement="bottom">
+                        <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
+                            <UserPlus size={27} />
+                        </IconButton>
+                    </Tooltip>
+                    {/* 
+                    <div className={styles.divider} />
+                    <Tooltip content={"Friend Activity"} placement="bottom">
+                        <IconButton>
+                            <TennisBall size={24} />
+                        </IconButton>            
+                    </Tooltip>
+                    */}
+                </div>
             </Header>
             <div className={styles.list} data-empty={isEmpty}>
                 {isEmpty && (