diff --git a/src/views/channels/channels/Channel.style.ts b/src/views/channels/channels/Channel.style.ts index 6dc4e438..b0dc7433 100644 --- a/src/views/channels/channels/Channel.style.ts +++ b/src/views/channels/channels/Channel.style.ts @@ -129,7 +129,7 @@ export const WumboTag = styled.div` export const LineGrid = styled.div<{ template?: string }>` display: grid; grid-gap: 16px; - grid-template-columns: ${({ template }) => template || '1fr 3fr'}; + grid-template-columns: ${({ template }) => template || '2fr 3fr'}; @media (${mediaWidths.mobile}) { grid-template-columns: 1fr; diff --git a/src/views/channels/channels/ChannelCard.tsx b/src/views/channels/channels/ChannelCard.tsx index 7b3ecc66..e208028a 100644 --- a/src/views/channels/channels/ChannelCard.tsx +++ b/src/views/channels/channels/ChannelCard.tsx @@ -168,7 +168,7 @@ export const ChannelCard: React.FC = ({ isBosNode )} > - {addEllipsis(alias || partner_public_key)} + {addEllipsis(alias || partner_public_key, 30)} {!( channelBarStyle === 'ultracompact' || diff --git a/src/views/channels/channels/Channels.tsx b/src/views/channels/channels/Channels.tsx index 0990c1c1..de49c977 100644 --- a/src/views/channels/channels/Channels.tsx +++ b/src/views/channels/channels/Channels.tsx @@ -51,7 +51,7 @@ export const Channels: React.FC = () => { }); if (loading || !data?.getChannels) { - return ; + return ; } let biggest = 0; diff --git a/src/views/channels/channels/helpers.ts b/src/views/channels/channels/helpers.ts index 1663534c..bb454e03 100644 --- a/src/views/channels/channels/helpers.ts +++ b/src/views/channels/channels/helpers.ts @@ -23,11 +23,11 @@ export const getTitleColor = ( export const getColumnTemplate = (extraColumns: extraColumnsType) => { switch (extraColumns) { case 'incoming': - return '1fr 2fr 80px'; + return '2fr 2fr 80px'; case 'outgoing': - return '1fr 80px 2fr'; + return '2fr 80px 2fr'; case 'both': - return '1fr 80px 2fr 80px'; + return '2fr 80px 2fr 80px'; default: return undefined; } diff --git a/src/views/home/reports/flow/index.tsx b/src/views/home/reports/flow/index.tsx index 34f5b214..4268994a 100644 --- a/src/views/home/reports/flow/index.tsx +++ b/src/views/home/reports/flow/index.tsx @@ -4,6 +4,7 @@ import { SmallSelectWithValue } from 'src/components/select'; import { useGetResumeQuery } from 'src/graphql/queries/__generated__/getResume.generated'; import { renderLine } from 'src/components/generic/helpers'; import { Price } from 'src/components/price/Price'; +import { mediaWidths } from 'src/styles/Themes'; import { CardWithTitle, SubTitle, @@ -26,7 +27,7 @@ const S = { grid-gap: 8px; grid-template-columns: 1fr 1fr; - @media (max-width: 770px) { + @media (${mediaWidths.mobile}) { grid-template-columns: 1fr; } `, @@ -62,7 +63,7 @@ export const FlowBox = () => { const transactions = data?.getResume.resume || []; if (!data || loading) { - return ; + return ; } const reduced = transactions.reduce( @@ -106,7 +107,7 @@ export const FlowBox = () => { return ( - Invoices and Payments Report + Transactions setDays((e[0] || options[1]) as any)} options={options} diff --git a/src/views/transactions/InvoiceCard.tsx b/src/views/transactions/InvoiceCard.tsx index 461136db..7d78b533 100644 --- a/src/views/transactions/InvoiceCard.tsx +++ b/src/views/transactions/InvoiceCard.tsx @@ -2,7 +2,7 @@ import React, { FC, Fragment } from 'react'; import { InvoiceType } from 'src/graphql/types'; import { MessageCircle } from 'react-feather'; import styled from 'styled-components'; -import { themeColors } from 'src/styles/Themes'; +import { mediaWidths, themeColors } from 'src/styles/Themes'; import { useGetChannelQuery } from 'src/graphql/queries/__generated__/getChannel.generated'; import { useNodeInfo } from 'src/hooks/UseNodeInfo'; import { LoadingCard } from 'src/components/loading/LoadingCard'; @@ -32,6 +32,10 @@ const S = { width: 100%; display: grid; grid-template-columns: 3fr 2fr 1fr; + + @media (${mediaWidths.mobile}) { + grid-template-columns: 1fr; + } `, }; diff --git a/src/views/transactions/PaymentsCards.tsx b/src/views/transactions/PaymentsCards.tsx index 75e2c560..8554d714 100644 --- a/src/views/transactions/PaymentsCards.tsx +++ b/src/views/transactions/PaymentsCards.tsx @@ -1,6 +1,7 @@ import React, { Fragment } from 'react'; import styled from 'styled-components'; import { PaymentType } from 'src/graphql/types'; +import { mediaWidths } from 'src/styles/Themes'; import { Separation, SubCard, @@ -36,6 +37,10 @@ const S = { width: 100%; display: grid; grid-template-columns: 3fr 2fr 1fr; + + @media (${mediaWidths.mobile}) { + grid-template-columns: 1fr; + } `, };