diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index d64292757cea475b7d17ea8208000e5d374f67cd..3ba5a986c5beb3de1295577f9cd8d4a74099025b 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 e0bfcdd0fbc516f19c5ca904583171697f60aae4..881ea0dd3492c3abca81b2710bdda12e43295fd6 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 d7129674906ee5e17da8926b87383bb1382582bd..c455ef87a694b98a007bec9734f365f2f56d52fa 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 b713eddc70ab6c543fbba882341a6dc8f6410100..444afadf963aa8d708d96cfd5382c55ed0a67a88 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 && (