cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-25 00:20:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix: bottom nav button alignment

Browse source 
fixes #679
This commit is contained in:
Paul Makles 2022-06-14 17:16:18 +01:00
parent b44779c89a
commit 220a28a151
1 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/navigation/BottomNavigation.tsx
View file

@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
import { useHistory, useLocation } from "react-router"; import { useHistory, useLocation } from "react-router";
import styled, { css } from "styled-components/macro"; import styled, { css } from "styled-components/macro";
import { IconButton } from "@revoltchat/ui"; import { Centred, IconButton } from "@revoltchat/ui";
import ConditionalLink from "../../lib/ConditionalLink"; import ConditionalLink from "../../lib/ConditionalLink";
@ -27,6 +27,11 @@ const Navbar = styled.div`
const Button = styled.a<{ active: boolean }>` const Button = styled.a<{ active: boolean }>`
flex: 1; flex: 1;
color: var(--foreground);
a {
color: inherit !important;
}
> a, > a,
> div, > div,
@ -64,7 +69,7 @@ export default observer(() => {
<Base> <Base>
<Navbar> <Navbar>
<Button active={homeActive}> <Button active={homeActive}>
<IconButton <Centred
onClick={() => { onClick={() => {
if (settingsActive) { if (settingsActive) {
if (history.length > 0) { if (history.length > 0) {
@ -81,13 +86,13 @@ export default observer(() => {
} }
}}> }}>
<Message size={24} /> <Message size={24} />
</IconButton> </Centred>
</Button> </Button>
<Button active={friendsActive}> <Button active={friendsActive}>
<ConditionalLink active={friendsActive} to="/friends"> <ConditionalLink active={friendsActive} to="/friends">
<IconButton> <Centred>
<Group size={25} /> <Group size={25} />
</IconButton> </Centred>
</ConditionalLink> </ConditionalLink>
</Button> </Button>
{/*<Button active={searchActive}> {/*<Button active={searchActive}>
@ -108,16 +113,16 @@ export default observer(() => {
<ConditionalLink <ConditionalLink
active={discoverActive} active={discoverActive}
to="/discover/servers"> to="/discover/servers">
<IconButton> <Centred>
<Compass size={24} /> <Compass size={24} />
</IconButton> </Centred>
</ConditionalLink> </ConditionalLink>
</Button> </Button>
<Button active={settingsActive}> <Button active={settingsActive}>
<ConditionalLink active={settingsActive} to="/settings"> <ConditionalLink active={settingsActive} to="/settings">
<IconButton> <Centred>
<UserIcon target={user} size={26} status={true} /> <UserIcon target={user} size={26} status={true} />
</IconButton> </Centred>
</ConditionalLink> </ConditionalLink>
</Button> </Button>
</Navbar> </Navbar>