style: some grid styling

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;

src/views/channels/channels/ChannelCard.tsx

@@ -168,7 +168,7 @@ export const ChannelCard: React.FC<ChannelCardProps> = ({
                 isBosNode
               )}
             >
-              {addEllipsis(alias || partner_public_key)}
+              {addEllipsis(alias || partner_public_key, 30)}
             </ChannelAlias>
             {!(
               channelBarStyle === 'ultracompact' ||

src/views/channels/channels/Channels.tsx

@@ -51,7 +51,7 @@ export const Channels: React.FC = () => {
   });
 
   if (loading || !data?.getChannels) {
-    return <LoadingCard noTitle={true} />;
+    return <LoadingCard noCard={true} />;
   }
 
   let biggest = 0;

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;
   }

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 <LoadingCard title={'Invoices and Payments Report'} />;
+    return <LoadingCard title={'Transactions'} />;
   }
 
   const reduced = transactions.reduce(
@@ -106,7 +107,7 @@ export const FlowBox = () => {
     return (
       <CardTitle>
         <S.row>
-          <SubTitle>Invoices and Payments Report</SubTitle>
+          <SubTitle>Transactions</SubTitle>
           <SmallSelectWithValue
             callback={e => setDays((e[0] || options[1]) as any)}
             options={options}

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;
+    }
   `,
 };
 

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;
+    }
   `,
 };