Update style components

This commit is contained in:
Francesco Esposito 2019-04-03 23:09:38 +02:00
parent 622121b96e
commit 469fca432f
7 changed files with 54 additions and 70 deletions

26
src/components/Box.css Normal file
View File

@ -0,0 +1,26 @@
.button {
font-size: 16px;
font-weight: lighter;
height: 50px;
border-radius: 40px;
width: 100%;
margin: 5px 0px 5px 0px;
transition: all .2s ease-in-out;
box-shadow:0 0 1px #111110, 0 0 10px rgb(193, 194, 190);
}
.box {
padding: 10px;
background-color: white;
border-radius: 10px;
box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
}
.button:hover {
transform: scale(1.01);
}
.button:focus {
transform: scale(1.01);
box-shadow:0 0 5px #111010, 0 0 10px rgb(193, 194, 190);
}

View File

@ -1,18 +1,19 @@
import React, { Component } from 'react';
import { Button, Row, Col } from 'reactstrap';
import './ButtonBox.css';
import './Box.css';
class ButtonBox extends Component {
class Box extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div className="button-box">
<div className="box">
<Row>
<Col>
<Col xs="12">
<Button
className="button"
block
@ -25,13 +26,10 @@ class ButtonBox extends Component {
</Button>
</Col>
</Row>
<Row
className="top-margin"
>
<Col>
<Row>
<Col xs="6" md="6">
<Button
className="button"
block
color="danger"
size="lg"
onClick={this.props.stopTimer}
@ -40,11 +38,9 @@ class ButtonBox extends Component {
STOP
</Button>
</Col>
<Col>
<Col xs="6" md="6">
<Button
className="button"
block
color="secondary"
size="lg"
onClick={this.props.resetTimer}
@ -59,4 +55,4 @@ class ButtonBox extends Component {
}
}
export default ButtonBox;
export default Box;

View File

@ -1,19 +0,0 @@
.button {
font-size: 20px;
font-weight: bold;
height: 60px;
border-radius: 25px;
box-shadow: 0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
}
.button-box {
background-color: rgba(255, 255, 255, 1.0);
padding: 20px;
margin-top: 5px;
border-radius: 25px;
box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
}
.top-margin {
margin-top: 18px;
}

View File

@ -1,17 +1,18 @@
.App-logo {
height: 25vmin;
filter: drop-shadow(0 0 0.50rem #f8ff9c);
height: 130px;
filter: drop-shadow(0 0 0.30rem #f8ff9c);
align-items: center;
justify-content: center;
text-align: center;
transition: all .3s ease-in-out;
}
.App-logo:hover { transform: scale(1.2); }
.App-logo-rotation {
animation: App-logo-spin infinite 5s linear;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);

View File

@ -1,8 +1,8 @@
import React, { Component } from 'react';
import logo from '../logo.svg';
import './LogoSpin.css';
import logoSVG from '../logo.svg';
import './Logo.css';
class LogoSpin extends Component {
class Logo extends Component {
constructor(props) {
super(props);
this.defaultClassName = 'App-logo-rotation';
@ -12,7 +12,7 @@ class LogoSpin extends Component {
return (
<img
className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
src={logo}
src={logoSVG}
alt="Tomato"
title="Click on the tomato to change modes"
onClick={this.props.switchMode}
@ -22,4 +22,4 @@ class LogoSpin extends Component {
}
export default LogoSpin;
export default Logo;

View File

@ -1,24 +1,6 @@
.timer {
font-size: 120px;
font-weight: 600;
text-shadow: 0 0 1px #ce2e2e, 0 0 8px rgb(193, 194, 190);
font-size: 100px;
font-weight: normal;
text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
color: white;
}
.buttons {
font-size: 20px;
font-weight: bold;
height: 60px;
border-radius: 25px;
box-shadow: 0 0 1px #161616, 0 0 10px rgb(133, 133, 133);
}
.button-box {
background-color: rgba(255, 255, 255, 1.0);
padding: 20px;
margin-top: 5px;
border-radius: 25px;
box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
}

View File

@ -1,8 +1,8 @@
import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import Notification from './Notification';
import ButtonBox from './ButtonBox';
import LogoSpin from './LogoSpin';
import Box from './Box';
import Logo from './Logo';
import './Timer.css';
class Timer extends Component {
@ -119,13 +119,12 @@ class Timer extends Component {
<Container>
<Row>
<Col>
<LogoSpin
<Logo
isStarted={this.state.started}
switchMode={this.switchMode}
/>
</Col>
</Row>
<Row>
<Col>
<p
@ -135,10 +134,9 @@ class Timer extends Component {
</p>
</Col>
</Row>
<Row>
<Col>
<ButtonBox
<Col md={{ size: 6, offset: 3 }}>
<Box
startTimer={this.startTimer}
stopTimer={this.stopTimer}
isStarted={this.state.started}