diff --git a/package.json b/package.json index 487766e..0aaf4ba 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,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" } } diff --git a/src/App.jsx b/src/App.jsx index 517b384..f404a2e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,9 +4,19 @@ import moment from 'moment-timezone'; import Countdown from './Countdown'; import Header from './Header'; 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, @@ -61,9 +71,12 @@ class App extends React.Component {

- 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')}.

+
+
+ Made by Icedream & MAGIC
); diff --git a/src/App.sass b/src/App.sass index edb09c9..634752b 100644 --- a/src/App.sass +++ b/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 \ No newline at end of file diff --git a/src/Countdown.jsx b/src/Countdown.jsx index 3c8b2fa..65b64db 100644 --- a/src/Countdown.jsx +++ b/src/Countdown.jsx @@ -59,7 +59,7 @@ export default class Countdown extends React.Component { const { locale, minimumIntegerDigits, useGrouping } = this.props; return (
- + {days.toLocaleString(locale, { minimumIntegerDigits, @@ -83,7 +83,7 @@ export default class Countdown extends React.Component { })} - + {durationMoment.seconds().toLocaleString(locale, { minimumIntegerDigits, diff --git a/src/Header.sass b/src/Header.sass index 8d37cf8..664f197 100644 --- a/src/Header.sass +++ b/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% diff --git a/src/ProgressCircle.jsx b/src/ProgressCircle.jsx index 002101e..71b18c8 100644 --- a/src/ProgressCircle.jsx +++ b/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, diff --git a/src/react.svg b/src/react.svg deleted file mode 100644 index 467e1dc..0000000 --- a/src/react.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - -