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 d642927..3ba5a98 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 e0bfcdd..881ea0d 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 d712967..c455ef8 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 b713edd..444afad 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 && (
--
GitLab