refactor: css changing on selection

src/App.css

@@ -188,6 +188,25 @@ header p {
 	justify-content: space-between;
 }
 
+.selected {
+	background-image: linear-gradient(62deg, #d62424 0%, #ed810d 100%);
+	color: #ffffff;
+	font-weight: 700;
+  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.0625);
+}
+
+@media screen and (max-width: 480px) {
+	.item {
+		width: 94vw;
+		padding: 0.5em 0.3em;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		line-height: 1.3rem;
+		text-align: left;
+	}
+}
+
 .dark .item {
 	background: rgb(28,28,52);
 	background: linear-gradient(90deg, rgba(28,28,52,1) 43%, rgba(24,24,50,1) 100%); 
@@ -197,7 +216,7 @@ header p {
 box-shadow: 0px 5px 94px -13px rgba(0,0,0,0.75);
 }
 
-.itemLucas {
+/* .itemLucas {
   align-items: center;
 	background-image: linear-gradient(62deg, #f77c6a 0%, #f1ae9e 100%);
 	border-radius: 1em;
@@ -214,7 +233,7 @@ box-shadow: 0px 5px 94px -13px rgba(0,0,0,0.75);
 	-webkit-box-shadow: 0px 5px 94px -13px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 5px 94px -13px rgba(0,0,0,0.75);
 box-shadow: 0px 5px 94px -13px rgba(0,0,0,0.75);
-}
+} */
 
 .item-product input {
 	margin-right: 15px;
@@ -256,6 +275,12 @@ box-shadow: 0px 5px 94px -13px rgba(0,0,0,0.75);
 	padding: 2em;
 }
 
+@media screen and (max-width: 480px) {
+	.cronometro {
+		max-width: 95vw;
+	}
+}
+
 .dark .cronometro {
 	background: var(--weirdGradientColor);
 	-webkit-box-shadow: 0px 5px 67px -23px rgba(0,0,0,0.75);
@@ -498,4 +523,26 @@ blockquote:after {
 	color: inherit;
  }
 
- /*--------- END --------*/
+ .customInput {
+	max-width: 50px;
+	min-height: 30px;
+	text-align: center;
+	font-size: large;
+	letter-spacing: 0.1rem;
+	margin: 0 -20px 0 5px;
+ }
+
+ /* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+
+ /*--------- END --------*/

src/components/Acao.jsx

@@ -1,18 +1,29 @@
 import React, { Component } from 'react';
 
 export default class Acao extends Component {
+  state = {
+    selected: false,
+  }
+
+  selection = (e) => {
+    this.props.check(e);
+    this.setState(prev => ({ ...prev, selected: !prev.selected }))
+  }
+
   render() {
     const { content, value, name } = this.props.frase;
+
+
     return (
       <label htmlFor={ this.props.value }>
-        <div className='item'>
+        <div className={ `item ${this.state.selected && 'selected'}` }>
           <div className='item-product'>
             <input
               id={ this.props.idx }
               value={ value }
               type='checkbox'
               disabled={ this.props.started }
-              onChange={(e) => this.props.check(e)}
+              onChange={(e) => this.selection(e)}
             />
             { content }
           </div>

src/components/AcaoCustom.jsx

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+
+export default class AcaoCustom extends Component {
+  state = {
+    minutes: 30,
+    adding: false,
+  };
+
+  addMinutes = (e) => {
+    this.setState({
+      minutes: e.target.value,
+    });
+  };
+
+  changingCustom = (e) => {
+    this.setState((prev) => ({ ...prev, adding: !prev.adding }));
+    console.log(this.state);
+    this.props.check(e);
+  };
+
+  render() {
+    return (
+      <label htmlFor='custom'>
+        <div className={ `item ${this.state.adding && 'selected'}` }>
+          <div className='item-product'>
+            <input
+              id='custom'
+              type='checkbox'
+              value={this.state.minutes}
+              disabled={this.props.started}
+              // checked={ this.state.adding }
+              onChange={(e) => this.changingCustom(e)}
+            />
+            Preciso de mais
+            <input
+              className='customInput'
+              type='number'
+              placeholder='30'
+              max={1200}
+              value={this.state.minutes}
+              disabled={this.state.adding}
+              onChange={(e) => this.addMinutes(e)}
+            />
+            minutos
+          </div>
+        </div>
+      </label>
+    );
+  }
+}

src/components/Acoes.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Acao from './Acao';
+import AcaoCustom from './AcaoCustom';
 // Importação graças a ajuda do Washington
 const actions = require('../conteudo/acoes');
 
@@ -33,7 +34,8 @@ export default class Acoes extends Component {
             {frases &&
               frases?.map((frase, idx) => (
                 <Acao frase={ frase } key={ idx } started={ this.props.started } check={ check } />
-              ))}
+                ))}
+            <AcaoCustom started={ this.props.started } check={ check } />
           </div>
         </form>
       </div>

src/components/Timer.jsx

@@ -81,7 +81,7 @@ export default class Timer extends Component {
       }
       if (segundos === 0) {
         if (minutos === 0) {
-            clearInterval(this.myInterval)
+            clearInterval(this.myInterval);
         } else {
             this.setState(({ minutos }) => ({
                 minutos: minutos - 1,

src/conteudo/acoes.js

@@ -9,12 +9,12 @@ const actions = {
   umemeio: {
     value: 1.5,
     name: '1 min 30 seg',
-    actions: ['Descascar uma fruta', 'Pegar um chocolatinho', 'Passar um café de máquina', 'Olhar o WhatsApp', 'Limpar o monitor'],
+    actions: ['Descascar uma fruta', 'Pegar um chocolatinho', 'Passar um café', 'Olhar o WhatsApp', 'Limpar o monitor'],
   },
   dois: {
     value: 2,
     name: '2 minutos',
-    actions: ['Dar uma olhada no Slack', 'Ler o course de novo', 'Passar 1 fase do Candy Crush', 'Fazer um sanduíche', 'Treinar seu pitch'],
+    actions: ['Ver o Slack', 'Ler o course de novo', 'Jogar Candy Crush', 'Fazer um sanduíche', 'Treinar seu pitch'],
   },
   doisemeio: {
     value: 2.5,