style: 🎨 homepage changes

pages/index.tsx

@@ -4,6 +4,7 @@ import { withApollo } from 'config/client';
 import { ServerAccounts } from 'src/components/accounts/ServerAccounts';
 import { useAccountState } from 'src/context/AccountContext';
 import getConfig from 'next/config';
+import { ThunderStorm } from 'src/views/homepage/HomePage.styled';
 import { SessionLogin } from '../src/views/login/SessionLogin';
 import { TopSection } from '../src/views/homepage/Top';
 import { LoginBox } from '../src/views/homepage/LoginBox';
@@ -19,9 +20,10 @@ const ContextApp = () => {
 
   return (
     <>
+      <ThunderStorm alt={''} src={'/static/thunderstorm.gif'} />
       <TopSection />
       {!finishedFetch && (
-        <Section withColor={false}>
+        <Section color={'transparent'}>
           <LoadingCard loadingHeight={'160px'} />
         </Section>
       )}

src/components/section/Section.tsx

@@ -22,8 +22,8 @@ const FullWidth = styled.div`
       css`
         color: ${textColor};
       `}
-    background-color: ${({ withColor, sectionColor }: FullWidthProps) =>
-      withColor && (sectionColor ? sectionColor : backgroundColor)};
+    background-color: ${({ sectionColor }: FullWidthProps) =>
+      sectionColor ? sectionColor : backgroundColor};
 
     @media (${mediaWidths.mobile}) {
         padding: 16px 0;
@@ -41,7 +41,6 @@ const FixedWidth = styled.div`
 
 type SectionProps = {
   fixedWidth?: boolean;
-  withColor?: boolean;
   color?: string | ThemeSet;
   textColor?: string | ThemeSet;
   padding?: string;
@@ -49,7 +48,6 @@ type SectionProps = {
 
 export const Section: React.FC<SectionProps> = ({
   fixedWidth = true,
-  withColor = true,
   children,
   color,
   textColor,
@@ -58,12 +56,7 @@ export const Section: React.FC<SectionProps> = ({
   const Fixed = fixedWidth ? FixedWidth : React.Fragment;
 
   return (
-    <FullWidth
-      padding={padding}
-      withColor={withColor}
-      sectionColor={color}
-      textColor={textColor}
-    >
+    <FullWidth padding={padding} sectionColor={color} textColor={textColor}>
       <Fixed>{children}</Fixed>
     </FullWidth>
   );

src/layouts/footer/Footer.tsx

@@ -23,7 +23,7 @@ const { npmVersion } = publicRuntimeConfig;
 export const Footer = () => {
   return (
     <FooterWrapper>
-      <Section withColor={true} color={headerColor}>
+      <Section color={headerColor}>
         <FooterStyle>
           <FooterRow>
             <SideFooter>

src/layouts/header/Header.styled.ts

@@ -10,6 +10,10 @@ import { SingleLine } from '../../components/generic/Styled';
 
 export const HeaderStyle = styled.div`
   padding: 16px 0;
+
+  @media (${mediaWidths.mobile}) {
+    padding: 16px 0 0;
+  }
 `;
 
 export const IconPadding = styled.div`

src/layouts/header/Header.tsx

@@ -89,7 +89,10 @@ export const Header = () => {
 
   return (
     <>
-      <Section withColor={true} color={headerColor} textColor={headerTextColor}>
+      <Section
+        color={connected ? headerColor : 'transparent'}
+        textColor={headerTextColor}
+      >
         <HeaderStyle>
           <HeaderLine loggedIn={connected}>
             <Link to={connected ? '/home' : '/'} underline={'transparent'}>

src/views/homepage/Accounts.tsx

@@ -36,7 +36,7 @@ const TypeText = styled.div`
 `;
 
 const renderIntro = () => (
-  <Section withColor={false}>
+  <Section color={'transparent'}>
     <ConnectTitle change={true}>Hi! Welcome to ThunderHub</ConnectTitle>
     <Card>
       {'To start you must create an account on your server. '}
@@ -178,7 +178,7 @@ export const Accounts = () => {
   };
 
   return (
-    <Section withColor={false}>
+    <Section color={'transparent'}>
       <ConnectTitle change={change}>
         {change ? 'Accounts' : 'Other Accounts'}
       </ConnectTitle>

src/views/homepage/HomePage.styled.ts

@@ -1,61 +1,12 @@
-import styled, { keyframes } from 'styled-components';
-import { fontColors, mediaWidths } from '../../styles/Themes';
-import ThunderHub from '../../assets/ThunderHub.svg';
+import styled from 'styled-components';
+import { fontColors, mediaWidths, headerColor } from '../../styles/Themes';
 
 export const Headline = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 32px 0 100px;
+  padding: 16px 0;
+  width: 100%;
 
   @media (${mediaWidths.mobile}) {
-    flex-direction: column;
-    padding: 0 0 60px;
-    width: 100%;
-  }
-`;
-
-export const LeftHeadline = styled.div`
-  width: 35%;
-  display: flex;
-  flex-direction: column;
-
-  @media (${mediaWidths.mobile}) {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 0;
-  }
-`;
-
-const flicker = keyframes`
-    0%    { opacity: 1;   }
-    3%    { opacity: 0.4; }
-    6%    { opacity: 1;   }
-    7%    { opacity: 0.4; }
-    8%    { opacity: 1;   }
-    9%    { opacity: 0.4; }
-    10%   { opacity: 0;   }
-    100%  { opacity: 0;   }
-`;
-
-export const StyledImage = styled(ThunderHub)`
-  width: 360px;
-
-  & .glowEffect {
-    animation: ${flicker} 3s infinite step-end;
-  }
-  & .glowEffectTwo {
-    animation: ${flicker} 5s infinite step-end;
-  }
-  & .glowEffectThree {
-    animation: ${flicker} 7s infinite step-end;
-  }
-  & .glowEffectFour {
-    animation: ${flicker} 3.5s infinite step-end;
-  }
-
-  @media (${mediaWidths.mobile}) {
-    width: 100%;
+    padding: 0;
   }
 `;
 
@@ -79,14 +30,11 @@ export const HomeText = styled.p`
   font-size: 20px;
 
   @media (${mediaWidths.mobile}) {
-    font-size: 15px;
+    font-size: 14px;
+    margin: 0 32px;
   }
 `;
 
-export const StyledSection = styled.div`
-  margin-bottom: -60px;
-`;
-
 export const FullWidth = styled.div`
   display: flex;
   justify-content: center;
@@ -105,3 +53,17 @@ export const ConnectTitle = styled.div`
 export const LockPadding = styled.span`
   margin-left: 4px;
 `;
+
+export const ThunderStorm = styled.img`
+  height: 320px;
+  width: 100%;
+  top: 0px;
+  object-fit: cover;
+  position: absolute;
+  z-index: -1;
+  background-color: ${headerColor};
+
+  @media (${mediaWidths.mobile}) {
+    font-size: 15px;
+  }
+`;

src/views/homepage/LoginBox.tsx

@@ -159,7 +159,7 @@ export const LoginBox = () => {
   );
 
   return (
-    <Section withColor={false}>
+    <Section color={'transparent'}>
       {change && (
         <ConnectTitle change={change}>Connect to your Node</ConnectTitle>
       )}

src/views/homepage/Top.tsx

@@ -1,56 +1,17 @@
-import React, { useState } from 'react';
-import { useTransition, animated, config } from 'react-spring';
-import { headerColor, inverseTextColor } from '../../styles/Themes';
+import React from 'react';
+import { inverseTextColor } from '../../styles/Themes';
 import { Section } from '../../components/section/Section';
-import {
-  Headline,
-  LeftHeadline,
-  StyledImage,
-  HomeTitle,
-  HomeText,
-  FullWidth,
-  StyledSection,
-} from './HomePage.styled';
+import { Headline, HomeTitle, HomeText, FullWidth } from './HomePage.styled';
 
-export const TopSection = () => {
-  const [state] = useState(true);
-
-  const transition = useTransition(state, null, {
-    config: config.slow,
-    from: { transform: 'translate3d(-80px,0,0)', opacity: 0 },
-    enter: { transform: 'translate3d(0,0,0)', opacity: 1 },
-  });
-
-  const transition2 = useTransition(state, null, {
-    config: config.slow,
-    from: { transform: 'translate3d(80px,0,0)', opacity: 0 },
-    enter: { transform: 'translate3d(0,0,0)', opacity: 1 },
-  });
-
-  return (
-    <StyledSection>
-      <Section color={headerColor} textColor={inverseTextColor}>
-        <Headline>
-          <LeftHeadline>
-            {transition.map(({ props, key }) => (
-              <animated.div style={props} key={key}>
-                <HomeTitle>Control the Lightning</HomeTitle>
-                <FullWidth>
-                  <HomeText>
-                    Monitor and manage your node from any browser and any
-                    device.
-                  </HomeText>
-                </FullWidth>
-              </animated.div>
-            ))}
-          </LeftHeadline>
-          {transition2.map(({ props, key }) => (
-            <animated.div style={props} key={key}>
-              <StyledImage />
-            </animated.div>
-          ))}
-        </Headline>
-      </Section>
-    </StyledSection>
-  );
-};
+export const TopSection = () => (
+  <Section color={'transparent'} textColor={inverseTextColor}>
+    <Headline>
+      <HomeTitle>Control the Lightning</HomeTitle>
+      <FullWidth>
+        <HomeText>
+          Monitor and manage your node from any browser and any device.
+        </HomeText>
+      </FullWidth>
+    </Headline>
+  </Section>
+);

src/views/login/SessionLogin.tsx

@@ -147,7 +147,7 @@ export const SessionLogin = () => {
   };
 
   return (
-    <Section withColor={false}>
+    <Section color={'transparent'}>
       <StyledTitle>{getTitle()}</StyledTitle>
       <Card cardPadding={'32px'} mobileCardPadding={'16px'}>
         <SingleLine>