demo style changes

Author: amrlabib

demo/App.js

@@ -1,25 +1,50 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import UseTimerDemo from './components/UseTimerDemo';
 import UseStopwatchDemo from './components/UseStopwatchDemo';
 import UseTimeDemo from './components/UseTimeDemo';
 
-const StylesApp = styled.div`
+const GlobalStyle = createGlobalStyle`
+  html, body {
+    padding: 0;
+    margin: 0;
+    background-color: #232323;
+    font-family: Arial;
+    color: white;
+  }
+`;
+
+const StyledApp = styled.div`
   flex: 1;
   width: 100%;
   height: 100%;
-  background-color: #232323;
+`;
+
+const StyledHeader = styled.h1`
+  text-align: center;
+  color: white;
+`;
+
+const StyledSeparator = styled.div`
+  height: 3px;
+  background-color: white;
+  margin-top: 30px;
 `;
 
 export default function App() {
   const time = new Date();
-  // time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
-  time.setMilliseconds(time.getMilliseconds() + 100); // 6.5 seconds timer
+  time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
+  // time.setMilliseconds(time.getMilliseconds() + 100); // 6.5 seconds timer
   return (
-    <StylesApp>
+    <StyledApp>
+      <GlobalStyle />
+      <StyledHeader>react-timer-hook</StyledHeader>
       <UseTimerDemo expiryTimestamp={time} />
+      <StyledSeparator />
       <UseStopwatchDemo />
+      <StyledSeparator />
       <UseTimeDemo />
-    </StylesApp>
+      <StyledSeparator />
+    </StyledApp>
   );
 }

demo/components/Button.js

@@ -2,13 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 
 const StyledButton = styled.button`
-  background-color: #73D1FE;
+  background-color: white;
   border-radius: 5;
   margin: 0 5px 0 5px;
   outline: none;
   border: none;
   padding: 5px 10px;
-  color: white;
+  color: #404549;
+  border-radius: 3px;
 `;
 
 export default function Button(props) {

demo/components/Digit.js

@@ -19,14 +19,27 @@ const StyledDigitContainer = styled.div`
 `;
 
 const StyledSingleDigit = styled.span`
+  position: relative;
   display: flex;
   flex: 0 1 25%;
-  font-size: 70px;
+  font-size: 50px;
   background-color: #404549;
   border-radius: 5px;
   padding: 5px 20px;
   color: white;
   margin: 0 5px;
+  &:after {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 50%;
+    bottom: 50%;
+    content: "";
+    width: '100%';
+    height: 2px;
+    background-color: #232323;
+    opacity: 0.5;
+  }
 `;
 
 export default function Digit({ value, title, addSeparator }: Object) {

demo/components/StyledTimer.js

@@ -14,15 +14,15 @@ const StyledSepartorContainer = styled.span`
   flex-direction: column;
   align-items: center;
   align-self: flex-end;
-  margin-bottom: 20px;
+  margin: 0 5px 10px 5px;
 `;
 
 const StyledSepartor = styled.span`
   display: inline-block;
-  width: 16px;
-  height: 16px;
+  width: 12px;
+  height: 12px;
   background-color: white;
-  border-radius: 8px;
+  border-radius: 6px;
   margin: 5px 0;
 `;
 

demo/components/UseStopwatchDemo.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useStopwatch } from '../../src/index';
 import Button from './Button';
-import Digit from './Digit';
 import StyledTimer from './StyledTimer';
 
 export default function UseStopwatchDemo() {
@@ -19,7 +18,7 @@ export default function UseStopwatchDemo() {
 
   return (
     <div style={{textAlign: 'center'}}>
-      <p>Stopwatch Demo</p>
+      <h2>UseStopwatch Demo</h2>
       <StyledTimer seconds={seconds} minutes={minutes} hours={hours} days={days} />
       <p>{isRunning ? 'Running' : 'Not running'}</p>
       <Button onClick={start}>Start</Button>

demo/components/UseTimeDemo.js

@@ -1,22 +1,37 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useTime } from '../../src/index';
 import StyledTimer from './StyledTimer';
 
+const StyledRow = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledText = styled.span`
+  font-size: 60px;
+  color: white;
+  margin-left: 20px;
+  margin-top: 12px;
+`;
+
 export default function UseTimeDemo() {
   const {
     seconds,
     minutes,
     hours,
     ampm,
-  } = useTime({ format: '12-hour'});
+  } = useTime({ });
 
   return (
     <div style={{textAlign: 'center'}}>
-      <p>Current Time Demo</p>
-      <div style={{fontSize: '100px'}}>
-        <StyledTimer seconds={seconds} minutes={minutes} hours={hours}/>
-        <span>{ampm}</span>
-      </div>
+      <h2>UseTime Demo</h2>
+      <StyledRow>
+        <StyledTimer seconds={seconds} minutes={minutes} hours={hours} />
+        <StyledText>{ampm}</StyledText>
+      </StyledRow>
     </div>
   );
 }

demo/components/UseTimerDemo.js

@@ -19,8 +19,7 @@ export default function UseTimerDemo({ expiryTimestamp }) {
 
   return (
     <div style={{ textAlign: 'center' }}>
-      <h1>react-timer-hook </h1>
-      <p>Timer Demo</p>
+      <h2>UseTimer Demo</h2>
       <StyledTimer seconds={seconds} minutes={minutes} hours={hours} days={days} />
       <p>{isRunning ? 'Running' : 'Not running'}</p>
       <Button type="button" onClick={start}>Start</Button>