Landing page redesign

src/components/augmint-ui/button/styles.js

@@ -50,7 +50,7 @@ export const BaseButton = styledComponent => styledComponent`
       background-color: ${theme.colors.secondary};
 
       &.fullwidth {
-        width: 100%; 
+        width: 100%;
         height: 50px;
       }
 
@@ -66,7 +66,7 @@ export const BaseButton = styledComponent => styledComponent`
       text-transform: none;
       background-color: ${theme.colors.primary};
       color: ${theme.colors.white};
-      
+
       ${media.tabletMin`
         padding: 20px 30px;
         font-size: ${remCalc(16)};
@@ -105,13 +105,25 @@ export const BaseButton = styledComponent => styledComponent`
       border: 1px solid ${theme.colors.primary};
       color: ${theme.colors.primary};
 
+      &.orange {
+        color: ${theme.colors.secondary};
+        background: none;
+        border: 1px solid ${theme.colors.secondary};
+      }
+
       &:hover,
       &:focus {
         background: transparent;
         background-color: ${theme.colors.primary};
         color: ${theme.colors.white};
         box-shadow: none;
       }
+
+      &.orange:hover, &.orange:focus {
+        border: 1px solid ${theme.colors.secondaryDark};
+        background-color: transparent;
+        color: ${theme.colors.secondaryDark};
+      }
     }
 
     &.naked {

src/components/navigation/index.js

@@ -5,19 +5,13 @@ import {
     StyleNavLink,
     StyleNavItem,
     StyleNavList,
-    StyledLogoContainer,
     StyledNavContainer,
     StyledNavLeftSide,
     StyledNavRightSide,
-    StyledLogo,
     HamburgerMenu
 } from "./styles";
 
 import { AugmintIcon } from "components/Icons";
-
-import augmintLogo from "assets/images/logo/logo.png";
-import augmintLogo2x from "assets/images/logo/logo@2x.png";
-import augmintLogo3x from "assets/images/logo/logo@3x.png";
 import hamburgerMenu from "assets/images/menu.svg";
 import close from "assets/images/close.svg";
 import { toggleScroll } from "utils/bodyHelper";
@@ -120,15 +114,6 @@ export default class SiteMenu extends React.Component {
 
                     {showConnection && !isConnected && <div>Not connected</div>}
                 </StyledNavContainer>
-                <StyledLogoContainer>
-                    {!showConnection && (
-                        <StyledLogo
-                            src={augmintLogo}
-                            srcSet={`${augmintLogo2x} 2x, ${augmintLogo3x} 3x,`}
-                            alt="Augmint logo"
-                        />
-                    )}
-                </StyledLogoContainer>
             </div>
         );
     }

src/components/navigation/styles.js

@@ -68,6 +68,9 @@ export const StyledLogoContainer = styled.div`
     display: flex;
     justify-content: center;
     min-height: 80px;
+    ${breakpoint`
+      max-height: 200px;
+    `};
 `;
 
 export const StyledNavLeftSide = styled.div`
@@ -97,6 +100,7 @@ export const StyledNavRightSide = styled.div`
 
 export const StyledLogo = styled.img`
     margin-top: 80px;
+    object-fit: contain;
 `;
 
 export const HamburgerMenu = styled.img`

src/containers/app/AppFooter.js

@@ -35,7 +35,7 @@ export function AppFooter(props) {
                 <p className="description">{description}</p>
                 <Segment className="chat-container">
                     <a
-                        className="join-discord"
+                        className="join-discord join"
                         href="https://discord.gg/PwDmsnu"
                         rel="noopener noreferrer"
                         target="_blank"
@@ -45,7 +45,7 @@ export function AppFooter(props) {
                         Talk to us on Discord
                     </a>
                     <a
-                        className="join-telegram"
+                        className="join-telegram join"
                         href="https://t.me/augmint"
                         rel="noopener noreferrer"
                         target="_blank"
@@ -56,7 +56,7 @@ export function AppFooter(props) {
                     </a>
                 </Segment>
 
-                <List className="contact-list" style={{ marginTop: 40 }}>
+                <List className="contact-list">
                     <List.Item>
                         <Icon name="github" style={{ marginRight: 5 }} />
                         <a href="https://github.com/Augmint" target="_blank" rel="noopener noreferrer">

src/containers/app/EthereumState.js

@@ -5,12 +5,13 @@ import React from "react";
 import { connect } from "react-redux";
 import Container from "components/augmint-ui/container";
 import { StyledP } from "components/augmint-ui/paragraph/styles";
-import Header from "components/augmint-ui/header";
 import { Link } from "react-router-dom";
 import { ErrorDetails, ErrorPanel, WarningPanel, LoadingPanel } from "components/MsgPanels";
 import { Tsegment } from "components/TextContent";
 import { DiscordButton } from "components/LinkButtons";
 
+import { HowToConnect } from "containers/home/tryIt/HowToConnect.js";
+
 export class EthereumState extends React.Component {
     render() {
         let msg = null;
@@ -26,21 +27,7 @@ export class EthereumState extends React.Component {
         if (isConnecting) {
             msg = <LoadingPanel header="Connecting to Ethereum network..." />;
         } else if (!web3Connect.isConnected && !web3Connect.isLoading) {
-            msg = (
-                <WarningPanel header="Can't connect Ethereum network">
-                    <Header as="h4" className={_className}>
-                        See our{" "}
-                        <strong>
-                            <Link to="/tryit">Connection Guide</Link>
-                        </strong>{" "}
-                        on how to connect to Ethereum.
-                    </Header>
-
-                    {web3Connect.error && (
-                        <ErrorDetails header="Web3 connection error details:" details={web3Connect.error} />
-                    )}
-                </WarningPanel>
-            );
+            msg = <HowToConnect />;
         } else if (
             web3Connect.isConnected &&
             !contracts.isLoaded &&

src/containers/app/custom_footer_style.css

@@ -4,6 +4,8 @@
     padding: 0;
     position: absolute;
     width: 100%;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 .Site-footer .footer > div {
@@ -162,17 +164,45 @@
     font-weight: 400;
 }
 
+.Site-footer .footer .contact-list {
+    margin-top: 40px;
+}
+
 @media (max-width: 1200px) {
     .Site-footer .footer > div {
         margin-top: 200px;
     }
 }
 
 @media (max-width: 768px) {
+    .Site-footer .footer .contact-list {
+        flex-direction: column;
+    }
+    .Site-footer .footer .description {
+        padding: 0 20px;
+    }
+    .Site-footer .footer .contact-list {
+        margin-top: 30px;
+    }
     .Site-footer .footer .contact-list.list > .item {
         margin: 0;
     }
     .Site-footer .footer > div {
-        margin-top: 150px;
+        margin-top: 200px;
+    }
+    .Site-footer .footer .subscribe {
+        margin-top: 20px;
+    }
+    .Site-footer .footer .chat-container a.join {
+        margin: 5px;
+        justify-content: center;
+    }
+    .Site-footer .footer .chat-container .join img {
+        margin-right: 10px;
+        max-width: 30px;
+    }
+    .Site-footer .footer .chat-container {
+        justify-content: center;
+        padding: 0 20px;
     }
 }

src/containers/app/index.js

@@ -217,6 +217,7 @@ class App extends React.Component {
                 />
                 {!showConnection && (
                     <SiteMenu
+                        className="site-menu"
                         web3Connect={this.props.web3Connect}
                         location={this.props.location}
                         showMenu={this.state.showMobileMenu}

src/containers/app/subscribeStyles.js

@@ -6,9 +6,17 @@ import { remCalc } from "styles/theme";
 
 export const StyledField = styled(Field)`
     color: ${theme.colors.opacLightGrey};
-    font-size: ${remCalc(12)} !important;
+    font-size: ${remCalc(16)} !important;
     font-weight: 200 !important;
     letter-spacing: 2.4px;
     line-height: ${remCalc(21)};
     min-width: 246px;
+    height: 50px;
+    max-width: 400px;
+    margin: 0 auto;
+    ::placeholder {
+        color: gray !important;
+        font-size: ${remCalc(16)} !important;
+        font-weight: 200 !important;
+    }
 `;