mirror of
https://github.com/revoltchat/revite.git
synced 2024-12-26 07:22:10 -05:00
Update: Added solid icons where needed
This commit is contained in:
parent
b100d06cda
commit
b6724c6680
4 changed files with 47 additions and 25 deletions
|
@ -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;
|
||||||
|
}
|
||||||
` }
|
` }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 && (
|
||||||
|
|
Loading…
Reference in a new issue