Skip to content

Commit 5dca44b

Browse files
amrlabibamrlabib
committed
demo style updates
1 parent 75dab27 commit 5dca44b

File tree

10 files changed

+94
-61
lines changed

10 files changed

+94
-61
lines changed

‎demo/App.js‎

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,48 @@ import UseTimeDemo from './components/UseTimeDemo';
66

77
const GlobalStyle = createGlobalStyle`
88
html, body {
9-
padding: 0;
109
margin: 0;
11-
background-color: #232323;
1210
font-family: Arial;
13-
color: white;
11+
text-align: left;
12+
color: #404549;
1413
}
14+
h2 {
15+
margin-top: 20px;
16+
}
17+
`;
18+
19+
const StyledContainer = styled.div`
20+
width: 1170px;
21+
margin-left: auto;
22+
margin-right: auto;
1523
`;
1624

1725
const StyledApp = styled.div`
1826
flex: 1;
19-
width: 100%;
20-
height: 100%;
2127
`;
2228

23-
const StyledHeader = styled.h1`
24-
text-align: center;
29+
const HeaderBG = styled.div`
30+
background-color: #404549;
31+
`;
32+
33+
const StyledHeader = styled.div`
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
38+
& h1 {
39+
margin: 20px 0;
40+
}
41+
`;
42+
43+
const StyledH1 = styled.h1`
2544
color: white;
2645
`;
2746

2847
const StyledSeparator = styled.div`
29-
height: 3px;
30-
background-color: white;
48+
height: 0px;
3149
margin-top: 30px;
50+
border: dashed 2px #404549;
3251
`;
3352

3453
export default function App() {
@@ -38,13 +57,28 @@ export default function App() {
3857
return (
3958
<StyledApp>
4059
<GlobalStyle />
41-
<StyledHeader>react-timer-hook</StyledHeader>
42-
<UseTimerDemo expiryTimestamp={time} />
43-
<StyledSeparator />
44-
<UseStopwatchDemo />
45-
<StyledSeparator />
46-
<UseTimeDemo />
47-
<StyledSeparator />
60+
<HeaderBG>
61+
<StyledContainer>
62+
<StyledHeader>
63+
<StyledH1>react-timer-hook</StyledH1>
64+
<div>
65+
<iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160" height="30" title="GitHub" />
66+
<iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="126" height="30" title="GitHub" />
67+
</div>
68+
</StyledHeader>
69+
</StyledContainer>
70+
</HeaderBG>
71+
<StyledContainer>
72+
<p>
73+
React timer hook is a custom <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank">react hook</a>,
74+
built to handle timer, stopwatch, and time logic/state in your react component.
75+
</p>
76+
<UseTimerDemo expiryTimestamp={time} />
77+
<StyledSeparator />
78+
<UseStopwatchDemo />
79+
<StyledSeparator />
80+
<UseTimeDemo />
81+
</StyledContainer>
4882
</StyledApp>
4983
);
5084
}

‎demo/components/Button.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,18 @@ import React from 'react';
22
import styled from 'styled-components';
33

44
const StyledButton = styled.button`
5-
background-color: white;
65
border-radius: 5;
7-
margin: 0 5px 0 5px;
6+
margin: 0 10px 0 0px;
87
outline: none;
98
border: none;
10-
padding: 5px 10px;
9+
padding: 7px 15px;
1110
color: #404549;
1211
border-radius: 3px;
12+
border: solid 1px #404549;
13+
&: hover {
14+
box-shadow: 0 0 11px rgba(33,33,33,.2);
15+
cursor: pointer;
16+
}
1317
`;
1418

1519
export default function Button(props) {

‎demo/components/Digit.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,35 @@ const StyledContainer = styled.div`
55
display: flex;
66
flex-direction: column;
77
align-items: center;
8+
margin: 0 7px;
9+
&: first-child {
10+
margin-left: 0;
11+
}
812
`;
913

1014
const StyledTitle = styled.span`
11-
font-size: 14px;
12-
color: white;
15+
font-size: 12px;
1316
margin-bottom: 5px;
1417
`;
1518

1619
const StyledDigitContainer = styled.div`
1720
display: flex;
1821
flex-direction: row;
22+
padding: 0;
1923
`;
2024

2125
const StyledSingleDigit = styled.span`
2226
position: relative;
2327
display: flex;
2428
flex: 0 1 25%;
25-
font-size: 50px;
29+
font-size: 30px;
2630
background-color: #404549;
2731
border-radius: 5px;
28-
padding: 5px 20px;
32+
padding: 10px 15px;
2933
color: white;
30-
margin: 0 5px;
34+
&:first-child {
35+
margin-right: 10px;
36+
}
3137
&:after {
3238
position: absolute;
3339
left: 0px;
@@ -38,11 +44,11 @@ const StyledSingleDigit = styled.span`
3844
width: '100%';
3945
height: 2px;
4046
background-color: #232323;
41-
opacity: 0.5;
47+
opacity: 0.4;
4248
}
4349
`;
4450

45-
export default function Digit({ value, title, addSeparator }: Object) {
51+
export default function Digit({ value, title }: Object) {
4652
const leftDigit = value >= 10 ? value.toString()[0] : '0';
4753
const rightDigit = value >= 10 ? value.toString()[1] : value.toString();
4854
return (

‎demo/components/StyledTimer.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,25 @@ import Digit from './Digit';
55
const StyledContainer = styled.div`
66
display: flex;
77
flex-direction: row;
8-
justify-content: center;
98
align-items: center;
9+
margin-bottom: 30px;
1010
`;
1111

1212
const StyledSepartorContainer = styled.span`
1313
display: flex;
1414
flex-direction: column;
1515
align-items: center;
1616
align-self: flex-end;
17-
margin: 0 5px 10px 5px;
17+
margin: 0 0 8px 0px;
1818
`;
1919

2020
const StyledSepartor = styled.span`
2121
display: inline-block;
22-
width: 12px;
23-
height: 12px;
24-
background-color: white;
22+
width: 8px;
23+
height: 8px;
24+
background-color: #404549;
2525
border-radius: 6px;
26-
margin: 5px 0;
26+
margin: 5px 0px;
2727
`;
2828

2929
export default function StyledTimer({ seconds, minutes, hours, days }: Object) {

‎demo/components/UseStopwatchDemo.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,9 @@ export default function UseStopwatchDemo() {
1717

1818

1919
return (
20-
<div style={{textAlign: 'center'}}>
20+
<div>
2121
<h2>UseStopwatch Demo</h2>
2222
<StyledTimer seconds={seconds} minutes={minutes} hours={hours} days={days} />
23-
<p>{isRunning ? 'Running' : 'Not running'}</p>
2423
<Button onClick={start}>Start</Button>
2524
<Button onClick={pause}>Pause</Button>
2625
<Button onClick={reset}>Reset</Button>

‎demo/components/UseTimeDemo.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import StyledTimer from './StyledTimer';
66
const StyledRow = styled.div`
77
flex: 1;
88
display: flex;
9-
justify-content: center;
9+
// justify-content: center;
1010
align-items: center;
1111
`;
1212

@@ -26,7 +26,7 @@ export default function UseTimeDemo() {
2626
} = useTime({ });
2727

2828
return (
29-
<div style={{textAlign: 'center'}}>
29+
<div>
3030
<h2>UseTime Demo</h2>
3131
<StyledRow>
3232
<StyledTimer seconds={seconds} minutes={minutes} hours={hours} />

‎demo/components/UseTimerDemo.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,9 @@ export default function UseTimerDemo({ expiryTimestamp }) {
1818

1919

2020
return (
21-
<div style={{ textAlign: 'center' }}>
21+
<div>
2222
<h2>UseTimer Demo</h2>
2323
<StyledTimer seconds={seconds} minutes={minutes} hours={hours} days={days} />
24-
<p>{isRunning ? 'Running' : 'Not running'}</p>
2524
<Button type="button" onClick={start}>Start</Button>
2625
<Button type="button" onClick={pause}>Pause</Button>
2726
<Button type="button" onClick={resume}>Resume</Button>
@@ -30,7 +29,7 @@ export default function UseTimerDemo({ expiryTimestamp }) {
3029
onClick={() => {
3130
// Restarts to 5 minutes timer
3231
const time = new Date();
33-
time.setSeconds(time.getSeconds() + 300);
32+
time.setSeconds(time.getSeconds() + 600);
3433
restart(time);
3534
}}
3635
>

0 commit comments

Comments
 (0)