chore: styling fixes

src/styles/Themes.ts

@@ -105,6 +105,16 @@ export const headerTextColor = theme('mode', {
     dark: fontColors.white,
 });
 
+export const homeBackgroundColor = theme('mode', {
+    light: themeColors.grey,
+    dark: themeColors.blue4,
+});
+
+export const homeBackgroundSecondColor = theme('mode', {
+    light: themeColors.grey2,
+    dark: themeColors.blue6,
+});
+
 // ---------------------------------------
 // CARD COLORS
 // ---------------------------------------

src/views/entry/homepage/Sections/CallToAction.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Center } from 'views/other/OtherViews.styled';
 import { Section } from 'components/section/Section';
 import { Padding, StyledH2, StyledH1 } from './Sections.styled';
-import { themeColors } from 'styles/Themes';
+import { homeBackgroundColor, homeBackgroundSecondColor } from 'styles/Themes';
 import { Link } from 'react-router-dom';
 import { HomeButton } from '../HomePage.styled';
 import { Zap } from 'components/generic/Icons';
@@ -15,12 +15,12 @@ const CallToActionButton = styled(HomeButton)`
 export const CallToAction = () => {
     return (
         <>
-            <Section color={themeColors.grey} padding={'80px 0'}>
+            <Section color={homeBackgroundColor} padding={'80px 0'}>
                 <Center>
                     <StyledH1>And much more...</StyledH1>
                 </Center>
             </Section>
-            <Section color={themeColors.grey2} padding={'80px 0'}>
+            <Section color={homeBackgroundSecondColor} padding={'80px 0'}>
                 <Center>
                     <StyledH2>
                         Ready to take control of your Lightning Node?

src/views/entry/homepage/Sections/Compatible.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Center } from 'views/other/OtherViews.styled';
 import { Section } from 'components/section/Section';
 import { WrapSingleLine, StyledH2, StyledP } from './Sections.styled';
-import { themeColors } from 'styles/Themes';
+import { homeBackgroundColor } from 'styles/Themes';
 
 export const Compatible = () => {
     return (
-        <Section color={themeColors.grey2} padding={'40px 0'}>
+        <Section color={homeBackgroundColor} padding={'40px 0'}>
             <Center>
                 <StyledH2>
                     Compatible with the latest LND node versions.

src/views/entry/homepage/Sections/Sections.styled.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { SingleLine } from 'components/generic/Styled';
-import { headerColor, mediaWidths, inverseTextColor } from 'styles/Themes';
+import { headerColor, mediaWidths } from 'styles/Themes';
 
 export const Padding = styled.div`
     padding: 4px 4px 0 0;
@@ -84,14 +84,8 @@ export const WrapSingleLine = styled(SingleLine)`
     flex-grow: 1;
 `;
 
-export const StyledH1 = styled.h1`
+export const StyledH1 = styled.h1``;
-    color: ${inverseTextColor};
-`;
 
-export const StyledH2 = styled.h2`
+export const StyledH2 = styled.h2``;
-    color: ${inverseTextColor};
-`;
 
-export const StyledP = styled.p`
+export const StyledP = styled.p``;
-    color: ${inverseTextColor};
-`;

src/views/other/ContactSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Section } from 'components/section/Section';
-import { themeColors, fontColors } from 'styles/Themes';
+import { fontColors, homeBackgroundColor } from 'styles/Themes';
 import { Send, GithubIcon, MailIcon } from 'components/generic/Icons';
 import {
     Center,
@@ -14,7 +14,7 @@ import {
 } from './OtherViews.styled';
 
 export const ContactSection = () => (
-    <Section color={themeColors.grey3} padding={'24px 0 80px'}>
+    <Section color={homeBackgroundColor} padding={'24px 0 80px'}>
         <Center>
             <SectionTitle textColor={fontColors.blue3}>
                 Need to contact us?

src/views/other/OtherViews.styled.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Card, CardProps } from 'components/generic/Styled';
-import { themeColors, fontColors, mediaWidths } from 'styles/Themes';
+import { fontColors, mediaWidths, textColor } from 'styles/Themes';
 
 export const Center = styled.div`
     display: flex;
@@ -44,6 +44,7 @@ export const Text = styled.p`
 `;
 
 export const SmallText = styled(Text)`
+    color: ${textColor};
     text-align: start;
 `;
 
@@ -52,12 +53,10 @@ export const BulletPoint = styled(Text)`
 `;
 
 export const DetailCard = styled(Card)<CardProps>`
-    background-color: ${themeColors.white};
     margin-bottom: 0;
     margin: 8px 16px;
     z-index: 1;
     flex: 1 0 30%;
-    border: 1px solid ${themeColors.grey2};
 
     @media (${mediaWidths.mobile}) {
         flex: 1 0 100%;
@@ -77,6 +76,7 @@ export const DetailLine = styled.div`
 
 export const IconTitle = styled.div`
     display: flex;
+    color: ${textColor};
 `;
 
 export const IconMargin = styled.span`