Update: Added solid icons where needed

This commit is contained in:
nizune 2021-07-03 10:46:35 +02:00
parent b100d06cda
commit b6724c6680
4 changed files with 47 additions and 25 deletions

View file

@ -100,8 +100,15 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
border-start-start-radius: 50%; border-start-start-radius: 50%;
border-end-start-radius: 50%; border-end-start-radius: 50%;
&:active {
transform: translateY(1px);
}
${ props => props.active && css` ${ props => props.active && css`
background: var(--sidebar-active); background: var(--sidebar-active);
&:active {
transform: none;
}
` } ` }
} }

View file

@ -7,7 +7,8 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import UpdateIndicator from "../../../components/common/UpdateIndicator"; import UpdateIndicator from "../../../components/common/UpdateIndicator";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { VoiceContext, VoiceOperationsContext, VoiceStatus } from "../../../context/Voice"; 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) { export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderProps) {
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
@ -29,10 +30,10 @@ export default function HeaderActions({ channel, toggleSidebar }: ChannelHeaderP
} }
} }
})}> })}>
<UserPlus size={22} /> <UserPlus size={27} />
</IconButton> </IconButton>
<IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}> <IconButton onClick={() => history.push(`/channel/${channel._id}/settings`)}>
<Cog size={22} /> <Cog size={24} />
</IconButton> </IconButton>
</> </>
) } ) }
@ -66,14 +67,14 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, 'channel'>) {
disconnect(); disconnect();
connect(channel._id); connect(channel._id);
}}> }}>
<PhoneCall size={22} /> <PhoneCall size={24} />
</IconButton> </IconButton>
) )
} }
} else { } else {
return ( return (
<IconButton> <IconButton>
<PhoneCall size={22} /** ! FIXME: TEMP */ color="red" /> <PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
</IconButton> </IconButton>
) )
} }

View file

@ -1,3 +1,9 @@
.actions {
display: flex;
align-items: center;
gap: 20px;
}
.list { .list {
padding: 0 10px 10px 10px; padding: 0 10px 10px 10px;
user-select: none; user-select: none;

View file

@ -10,8 +10,8 @@ import { User, Users } from "revolt.js/dist/api/objects";
import UserIcon from "../../components/common/user/UserIcon"; import UserIcon from "../../components/common/user/UserIcon";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../context/intermediate/Intermediate"; import { useIntermediate } from "../../context/intermediate/Intermediate";
import { ChevronDown, ChevronRight } from "@styled-icons/boxicons-regular"; import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regular";
import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid"; import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { TextReact } from "../../lib/i18n"; import { TextReact } from "../../lib/i18n";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
@ -53,14 +53,21 @@ export default function Friends() {
<div className={styles.title}> <div className={styles.title}>
<Text id="app.navigation.tabs.friends" /> <Text id="app.navigation.tabs.friends" />
</div> </div>
<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"> <Tooltip content={"Create Group"} placement="bottom">
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}> <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
<Conversation size={24} /> <MessageAdd size={24} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip content={"Add Friend"} placement="bottom"> <Tooltip content={"Add Friend"} placement="bottom">
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}> <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
<UserPlus size={24} /> <UserPlus size={27} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
{/* {/*
@ -71,6 +78,7 @@ export default function Friends() {
</IconButton> </IconButton>
</Tooltip> </Tooltip>
*/} */}
</div>
</Header> </Header>
<div className={styles.list} data-empty={isEmpty}> <div className={styles.list} data-empty={isEmpty}>
{isEmpty && ( {isEmpty && (