FBosler

import React from "react";
import Milestones from "../Milestones";

const Landing = () => {
    return <Milestones referrals={12} />;
};

export default Landing;

FBosler

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Landing from "./components/layout/Landing";
import About from "./components/layout/About";

import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
    return (

FBosler

// constants
export const ACHIEVED_COLOR = "#049e51";
export const OPEN_COLOR = "grey";

// this is a trick based on https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css to force an aspect ratio of 16:9.
export const aspectRatio = {
    display: "block",
    width: "100%",
    position: "relative",
    height: 0,

FBosler

import React from "react";

const About = () => {
    return <div>This is our about page</div>;
};

export default About;

FBosler

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Milestones from "./components/layout/Milestones";
import About from "./components/layout/About";

import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
    return (
        <Router>

FBosler

import React from "react";
import Milestones from "./components/layout/Milestones";
import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
    return <Milestones referrals={12} />;
};

export default App;

FBosler

import React from "react";
import { Container, Row, Col } from "react-bootstrap"; // Layout
import { CircularProgressbarWithChildren, buildStyles } from "react-circular-progressbar"; // Progress bar
import "react-circular-progressbar/dist/styles.css"; // Styles for progress bar
import { MdCheck } from "react-icons/md"; // Checkmark
import { ACHIEVED_COLOR, OPEN_COLOR, aspectRatio, colStyle, topRightCorner } from "./styles";

// list of our milestones, can dynamically be extended or shortened, depending on preferences.
// imageLocation   := location of the image file
// lowerThreshold  := min threshold to start working towards the milestones

FBosler

.z-depth-0 {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* 2dp elevation modified*/
.z-depth-1 {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
        0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);

FBosler

import React from "react";
import Milestones from "./components/layout/Milestones";

const App = () => {
    return <Milestones />;
};

export default App;

FBosler

import React from "react"

const Milestones = () => {
    return (
        <div>
            Milestones component
        </div>
    );
}