style: channel list button

This commit is contained in:
apotdevin 2022-02-01 23:51:52 +01:00
parent 194dafb940
commit 12f9d6388d
No known key found for this signature in database
GPG key ID: 4403F1DFBE779457

View file

@ -1,8 +1,8 @@
import { useCallback, useMemo } from 'react'; import { useCallback, useMemo } from 'react';
import { ArrowDown, ArrowUp, Check, Circle } from 'react-feather'; import { ArrowDown, ArrowUp, Check, ChevronRight, Circle } from 'react-feather';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import styled from 'styled-components';
import { BalanceBars } from '../../../components/balance'; import { BalanceBars } from '../../../components/balance';
import { ColorButton } from '../../../components/buttons/colorButton/ColorButton';
import { import {
getChannelLink, getChannelLink,
getNodeLink, getNodeLink,
@ -18,6 +18,14 @@ import { chartColors } from '../../../styles/Themes';
import { getErrorContent } from '../../../utils/error'; import { getErrorContent } from '../../../utils/error';
import { blockToTime, formatSeconds, getPercent } from '../../../utils/helpers'; import { blockToTime, formatSeconds, getPercent } from '../../../utils/helpers';
const S = {
link: styled.span`
display: flex;
align-items: center;
justify-content: center;
`,
};
const getBar = (top: number, bottom: number) => { const getBar = (top: number, bottom: number) => {
const percent = (top / bottom) * 100; const percent = (top / bottom) * 100;
return Math.min(percent, 100); return Math.min(percent, 100);
@ -193,9 +201,12 @@ export const ChannelTable = () => {
</div> </div>
), ),
viewAction: ( viewAction: (
<ColorButton> <Link to={`/channels/${c.id}`}>
<Link to={`/channels/${c.id}`}> View</Link> <S.link>
</ColorButton> View
<ChevronRight size={12} />
</S.link>
</Link>
), ),
}; };
}); });