Change overall layout and style

package.json

@@ -48,7 +48,9 @@
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-fontawesome": "^1.6.1",
     "react-helmet": "^5.1.3",
-    "react-router": "^4.1.2"
+    "react-router": "^4.1.2",
+    "webfontloader": "^1.6.28"
   }
 }

src/App.jsx

@@ -5,9 +5,19 @@ import Countdown from './Countdown';
 import Header from './Header';
 import ProgressCircle from './ProgressCircle';
 import getUpcomingDate from './getUpcomingDate';
+import FontAwesome from 'react-fontawesome';
+import WebFont from 'webfontloader';
+
 
 import style from './App.sass';
 
+
+WebFont.load({
+  google: {
+    families: ['Titillium Web:300,400,700', 'sans-serif']
+  }
+});
+
 class App extends React.Component {
   static propTypes = {
     getNow: PropTypes.func,
@@ -60,10 +70,13 @@ class App extends React.Component {
         <div className={style.content}>
           <div className={style.contentContainer}>
             <p>
-              The next VIzon draw is on {nextUpcomingDate.format('dddd')}, {nextUpcomingDate.format('L LT')}.
+              The next VIzon draw is on {nextUpcomingDate.format('dddd')}, {nextUpcomingDate.format('L LT z')}.
             </p>
             <Countdown date={nextUpcomingDate} />
           </div>
+          <div className={style.footer}>
+              Made by Icedream & MAGIC
+          </div>
         </div>
       </div>
     );

src/App.sass

@@ -1,15 +1,16 @@
 .app
-  background-color: #f8f8f8
+  background: radial-gradient(ellipse at bottom, #1c2837 0%, #050608 100%)
+  background: -webkit-radial-gradient(ellipse at bottom, #1c2837 0%, #050608 100%)
   min-height: 100vh
   font-size: 24px
-
+  font-family: 'Titillium Web', sans-serif
   display: flex
   flex-direction: column
   justify-content: stretch
   align-items: center
 
 .content
-  color: #222
+  color: #838383
   line-height: 1.5
   width: 100%
   max-width: 1024px
@@ -17,3 +18,16 @@
   box-sizing: content-box
   flex-grow: 1
   text-align: center
+
+.footer
+  color: #fff
+  position: absolute
+  right: 0
+  bottom: 0
+  left: 0
+  padding: 5px
+  border: 0
+  border-top: 1px solid white
+  opacity: .1
+  font-size: 20px
+  text-align: right

src/Countdown.jsx

@@ -8,7 +8,7 @@ import style from './Countdown.sass';
 
 export default class Countdown extends React.Component {
   static propTypes = {
-    date: PropTypes.object.isRequired,
+    date: PropTypes.instanceOf(moment).isRequired,
     locale: PropTypes.string,
     minimumIntegerDigits: PropTypes.number,
     useGrouping: PropTypes.bool,
@@ -59,7 +59,7 @@ export default class Countdown extends React.Component {
     const { locale, minimumIntegerDigits, useGrouping } = this.props;
     return (
       <div className={style.countdown}>
-        <ProgressCircle size={size} max={3} progress={days} stroke="rgb(60, 90, 128)">
+        <ProgressCircle size={size} max={3} progress={days} stroke="rgb(76,114,163)">
           <DigitBlock suffix="d">
             {days.toLocaleString(locale, {
               minimumIntegerDigits,
@@ -83,7 +83,7 @@ export default class Countdown extends React.Component {
             })}
           </DigitBlock>
         </ProgressCircle>
-        <ProgressCircle size={size} max={60} progress={seconds} stroke="rgb(155, 50, 70)">
+        <ProgressCircle size={size} max={60} progress={seconds} stroke="rgb(193,63,88)">
           <DigitBlock suffix="s">
             {durationMoment.seconds().toLocaleString(locale, {
               minimumIntegerDigits,

src/Header.sass

@@ -1,10 +1,9 @@
 .header
-  background-color: #222
   color: #f8f8f8
+  font-family: 'Titillium Web', sans-serif
   font-weight: bold
   font-size: 1.5em
   text-align: center
-  box-shadow: 0px 4px 4vh 4px rgba(34,34,34,0.9)
   z-index: 2
   padding: 12px 0
   width: 100%

src/ProgressCircle.jsx

@@ -70,7 +70,7 @@ ProgressCircle.propTypes = {
 
 ProgressCircle.defaultProps = {
   stroke: '#444',
-  backStroke: '#eee',
+  backStroke: 'rgba(102, 166, 229, 0.12)',
   strokeWidth: 10,
   progress: 0.5,
   min: 0,

src/index.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>my-app</title>
+    <title>VIzon Countdown</title>
     <meta name="description" content="">
   </head>
   <body>
-    <div id="app"></div>
+    <noscript>This website requires JavaScript, please enable it.</noscript>
   </body>
 </html>

src/index.jsx

@@ -4,4 +4,7 @@ import { render } from 'react-dom';
 import './index.sass';
 import App from './App';
 
-render(<App />, document.querySelector('#app'));
+// Create div node to render app in
+const rootContainer = document.createElement('div');
+document.body.appendChild(rootContainer);
+render(<App />, rootContainer);