FBosler

import React from "react";
import { StyledNav } from "./styles";

const Nav = () => {
    return (
        <StyledNav>
            <StyledNav.Brand href="/">
                <img alt="" src="/logo192.png" width="30" height="30" className="d-inline-block align-top" /> Referral
                App
            </StyledNav.Brand>

FBosler

import styled from "styled-components";

import { AiOutlineLink } from "react-icons/ai";

import {
    FacebookShareButton,
    TwitterShareButton,
    WhatsappShareButton,
    LinkedinShareButton,
    PinterestShareButton,

FBosler

import React from "react";

import {
    FacebookButton,
    TwitterButton,
    LinkedinButton,
    WhatsappButton,
    PinterestButton,
    RedditButton,
    EmailButton,

FBosler

import React, { useState } from "react";
import { Container, Row, Col, Form } from "react-bootstrap";

import { ReferalSymbol, ResponsiveHeader4, MarginedRow } from "./styles";

import MileStones from "../Milestones";
import ShareButtons from "../ShareButtons";

import { DividerRow } from "../../styles";

FBosler

import providerData from "../../data/providerData";
import { Col } from "react-bootstrap";
import React from "react";

import { ImageDiv, ColoredDiv, MarginedRow } from "./styles.js";

const DelegatedAuthButton = ({ img, href, color }) => {
    return (
        <Col xs={2} onClick={() => (window.location = href)} style={{ padding: "5px" }}>
            <ColoredDiv color={color}>

FBosler

import AmazonIcon from "./icons/amazon.png";
import FacebookIcon from "./icons/facebook.png";
import GithubIcon from "./icons/github.png";
import GoogleIcon from "./icons/google.png";
import SpotifyIcon from "./icons/spotify.png";
import TwitchIcon from "./icons/twitch.png";
import TwitterIcon from "./icons/twitter.png";

const providerData = [
    {

FBosler

const URL = "https://cdn.pixabay.com/photo/2014/01/17/19/01/tree-247122_1280.jpg";

<LandingBackground className={"z-depth-5"} url={URL}>
    <FullRow>
        <PaddedCol xs={{ span: 10, offset: 1 }} sm={{ span: 5, offset: 1 }}>
            <ResponsiveHeader2>Grow the community by spreading the message</ResponsiveHeader2>
            <ResponsiveParagraph>and get kittens in the process</ResponsiveParagraph>
        </PaddedCol>
        <PaddedCol xs={{ span: 10, offset: 1 }} sm={{ span: 5, offset: 1 }}>
            <VerticalCenterWrapper>

FBosler

<LandingBackground className={"z-depth-5"} url={URL}>
    <FullRow>
        <PaddedCol xs={{ span: 10, offset: 1 }} sm={{ span: 5, offset: 1 }}>
            <ResponsiveHeader2>Grow the community by spreading the message</ResponsiveHeader2>
            <ResponsiveParagraph>and get kittens in the process</ResponsiveParagraph>
        </PaddedCol>
        <PaddedCol xs={{ span: 10, offset: 1 }} sm={{ span: 5, offset: 1 }}>
            <VerticalCenterWrapper>
                <LoginButton className={"z-depth-5"} size="lg">
                    Join the movement{" "}

FBosler

import styled from "styled-components";
import { device } from "../../styles/styles";
import { Col, Row, Button } from "react-bootstrap";

export const LandingBackground = styled("div")`
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("${props => props.url}");
    background-position: 10% 50%;
    background-size: cover;
    border-bottom: grey 1px solid;
    height: 200px;

FBosler

const Milestones = props => {
    const referrals = props.referrals || 0;

    return (
        <div style={{ padding: "25px" }}>
            <Row>
                {milestoneList.map(function(item) {
                    return (
                        <Col xs={12} sm={6} md={4}>
                            {Milestone(item.imageLocation, item.lowerThreshold, item.upperThreshold, referrals)}