mirror of
https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git
synced 2025-10-12 23:52:30 +00:00
Main pomodoro, style selector and goDownArrow styles done
This commit is contained in:
@@ -1,12 +1,3 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-main-page {
|
||||
background-color: #62D2A2;
|
||||
display: flex;
|
||||
@@ -19,6 +10,7 @@ body {
|
||||
color: #ffffff;
|
||||
font-size: 7vh;
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
@@ -27,6 +19,7 @@ body {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
font-size: 2vh;
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
@@ -85,4 +78,138 @@ body {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.main-pomodoro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 68vh;
|
||||
}
|
||||
.main-pomodoro .timer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-family: "Rambla", sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 130pt;
|
||||
color: #1FAB89;
|
||||
}
|
||||
.main-pomodoro .style-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-family: "Rambla", sans-serif;
|
||||
}
|
||||
.main-pomodoro .style-display h4 {
|
||||
font-size: 24pt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #1FAB89;
|
||||
}
|
||||
.main-pomodoro .style-display h3 {
|
||||
font-size: 30pt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #1FAB89;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.main-pomodoro .start-pomodoro {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 8vw;
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-weight: 700;
|
||||
margin-top: 6vh;
|
||||
width: 30vw;
|
||||
height: 8vh;
|
||||
background: #1FAB89;
|
||||
border-radius: 24px;
|
||||
font-size: 5vh;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.style-selector {
|
||||
width: calc(20vw - 1px);
|
||||
padding-left: 3vw;
|
||||
padding-bottom: 12vh;
|
||||
position: absolute;
|
||||
top: 29vh;
|
||||
left: 77vw;
|
||||
box-shadow: 1px 6px 15px #00000020;
|
||||
z-index: 50;
|
||||
}
|
||||
.style-selector h2 {
|
||||
font-family: "Rambla", sans-serif;
|
||||
color: #1FAB89;
|
||||
font-size: 30pt;
|
||||
text-align: center;
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
.style-selector .style-container {
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
align-items: center;
|
||||
}
|
||||
.style-selector .style-container label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.style-selector .style-container label .title {
|
||||
font-family: "Rambla", sans-serif;
|
||||
font-size: 13pt;
|
||||
}
|
||||
.style-selector .style-container label .times {
|
||||
font-family: "Rambla", sans-serif;
|
||||
color: #1FAB89;
|
||||
font-size: 13pt;
|
||||
}
|
||||
.style-selector input {
|
||||
width: 65px;
|
||||
opacity: 0;
|
||||
}
|
||||
.style-selector .checkbox__input {
|
||||
display: grid;
|
||||
grid-template-areas: "checkbox";
|
||||
}
|
||||
.style-selector .checkbox__input > * {
|
||||
grid-area: checkbox;
|
||||
}
|
||||
.style-selector .checkbox_control {
|
||||
display: inline-grid;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border: 3px solid #62D2A2;
|
||||
border-radius: 0.25em;
|
||||
border-radius: 100%;
|
||||
transition: ease-in-out 0.2s;
|
||||
}
|
||||
.style-selector .checkbox__input input:checked + .checkbox_control {
|
||||
background-color: #9DF3C4;
|
||||
}
|
||||
|
||||
.go-down {
|
||||
height: 7vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.go-down svg {
|
||||
height: 6vh;
|
||||
}
|
||||
.go-down svg path {
|
||||
fill: #aaaaaa;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../sass_styles/styles.scss","../sass_styles/_header.scss","../sass_styles/_banner-login.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;;;ACLJ;EACI,kBDgCS;EC9BT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;EDJJ;EAQA;EACA;EACA;;ACDA;EACI;EAEA;EDZJ;EAQA;EACA;EACA;;ACMI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AC5CpB;EACI;EACA;EFYA;EERA;EACA;EACA;EAEA;EAEA;;AAGA;EFSA;EACA;;AENA;EAEI;EAEA;EACA;;AAEA;EFGJ;EACA;EACA;EEFQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA","file":"styles.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss"],"names":[],"mappings":"AACA;EACI,kBC4BS;ED1BT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFaO;;AEVX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFHG;;AEMP;EACI;EFpBR;EACA;EEuBQ,OFXG;EEaH;EACA;;AAIR;EF1BA;EACA;EACA;EAtBA;EACA;EEiDI;EACA;EACA;EAEA,YF1BO;EE2BP;EAEA;EACA;;;AC7DR;EAEI;EACA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;;AAGA;EHRA;EGUI,OHaO;EGZP;EACA;EAEA;EACA;;AAKJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EH9BR;EGgCY;;AAGJ;EHnCR;EGqCY,OHdD;EGeC;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBHlDM;;;AIhCd;EACI;EACA;EAEA;EACA;;AAEA;EACI;;AACA;EACI;;;AJ+BZ;EACI;EACA;;;AAGJ;EACI;EACA,kBApBe","file":"styles.css"}
|
||||
1
public/img/down-arrow.svg
Normal file
1
public/img/down-arrow.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
15
public/sass_styles/_goDownArrow.scss
Normal file
15
public/sass_styles/_goDownArrow.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.go-down {
|
||||
height: 7vh;
|
||||
width: 100vw;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
height: 6vh;
|
||||
path {
|
||||
fill: rgb(170, 170, 170);
|
||||
// CREDITS TO https://stackoverflow.com/a/49627345
|
||||
}
|
||||
}
|
||||
}
|
||||
64
public/sass_styles/_mainPomodoro.scss
Normal file
64
public/sass_styles/_mainPomodoro.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
.main-pomodoro {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 68vh;
|
||||
|
||||
.timer {
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@include bodyFont;
|
||||
font-weight: bold;
|
||||
font-size: 130pt;
|
||||
|
||||
color: $second-color;
|
||||
}
|
||||
|
||||
.style-display {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
@include bodyFont;
|
||||
|
||||
h4 {
|
||||
font-size: 24pt;
|
||||
|
||||
@include normalizeBody;
|
||||
|
||||
color: $second-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 30pt;
|
||||
|
||||
@include normalizeBody;
|
||||
|
||||
color: $second-color;
|
||||
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.start-pomodoro {
|
||||
@include normalizeButton;
|
||||
@include titleFont;
|
||||
|
||||
margin-top: 6vh;
|
||||
width: 30vw;
|
||||
height: 8vh;
|
||||
|
||||
background: $second-color;
|
||||
border-radius: 24px;
|
||||
|
||||
font-size: 5vh;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
87
public/sass_styles/_styleSelector.scss
Normal file
87
public/sass_styles/_styleSelector.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
.style-selector{
|
||||
|
||||
width: calc(20vw - 1px);
|
||||
padding-left: 3vw;
|
||||
padding-bottom: 12vh;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: 29vh;
|
||||
left: 77vw;
|
||||
|
||||
box-shadow: 1px 6px 15px #00000020;
|
||||
|
||||
z-index: 50;
|
||||
|
||||
|
||||
h2 {
|
||||
@include bodyFont;
|
||||
color: $second-color;
|
||||
font-size: 30pt;
|
||||
text-align: center;
|
||||
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.style-container{
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
@include bodyFont;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.times {
|
||||
@include bodyFont;
|
||||
color: $second-color;
|
||||
font-size: 13pt;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 65px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.checkbox__input {
|
||||
display: grid;
|
||||
grid-template-areas: "checkbox";
|
||||
|
||||
> * {
|
||||
grid-area: checkbox;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.checkbox_control {
|
||||
display: inline-grid;
|
||||
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
|
||||
border: 3px solid $main-color;
|
||||
border-radius: 0.25em;
|
||||
border-radius: 100%;
|
||||
|
||||
transition: ease-in-out 0.2s ;
|
||||
}
|
||||
|
||||
.checkbox__input input:checked + .checkbox_control {
|
||||
|
||||
background-color: $light-color;
|
||||
}
|
||||
|
||||
// CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/
|
||||
}
|
||||
@@ -1,14 +1,8 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin titleFont {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@mixin bodyFont {
|
||||
@@ -32,10 +26,25 @@ body {
|
||||
width: 8vw;
|
||||
}
|
||||
|
||||
$background-color: #ffffff;
|
||||
|
||||
$main-color: #62D2A2;
|
||||
$second-color: #1FAB89;
|
||||
$light-color: #9DF3C4;
|
||||
$lightest-color: #D7FBE8;
|
||||
|
||||
@import 'header';
|
||||
@import 'banner-login';
|
||||
@import 'banner-login';
|
||||
@import 'mainPomodoro';
|
||||
@import 'styleSelector';
|
||||
@import 'goDownArrow';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: $background-color;
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import BannerLogin from "./components/BannerLogin";
|
||||
import GoDownArrow from "./components/GoDownArrow";
|
||||
import Header from "./components/Header";
|
||||
import MainPomodoro from "./components/MainPomodoro";
|
||||
import StyleSelector from "./components/StyleSelector";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -8,6 +10,8 @@ function App() {
|
||||
<Header />
|
||||
<BannerLogin />
|
||||
<MainPomodoro />
|
||||
<StyleSelector />
|
||||
<GoDownArrow />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
11
src/components/GoDownArrow.jsx
Normal file
11
src/components/GoDownArrow.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const GoDownArrow = () => {
|
||||
return (
|
||||
<div className="go-down">
|
||||
<a href="#"><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GoDownArrow
|
||||
@@ -1,9 +1,30 @@
|
||||
import React from 'react'
|
||||
import React, {useState} from 'react'
|
||||
|
||||
const MainPomodoro = () => {
|
||||
|
||||
const [minutes, setMinutes] = useState('61')
|
||||
const [seconds, setSeconds] = useState('60')
|
||||
|
||||
const [style, setStyle] = useState('Regular')
|
||||
|
||||
return (
|
||||
<div className="main-pomodoro">
|
||||
|
||||
<div className="timer">
|
||||
<div className="minutes">{minutes}</div>
|
||||
<div className="separator">:</div>
|
||||
<div className="seconds">{seconds}</div>
|
||||
</div>
|
||||
|
||||
<div className="style-display">
|
||||
<h4>
|
||||
Style
|
||||
</h4>
|
||||
<h3>
|
||||
{style}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<button class="start-pomodoro">START</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
55
src/components/StyleSelector.jsx
Normal file
55
src/components/StyleSelector.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from 'react'
|
||||
|
||||
const StyleSelector = () => {
|
||||
return (
|
||||
<div className="style-selector">
|
||||
<h2>Select Style</h2>
|
||||
|
||||
<div className="style-container">
|
||||
<span class="checkbox__input">
|
||||
<input id="input-1" type="checkbox"></input>
|
||||
<span className="checkbox_control"></span>
|
||||
</span>
|
||||
<label for="input-1">
|
||||
<span className="title">Title</span>
|
||||
<span className="times">Times|Times</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="style-container">
|
||||
<span class="checkbox__input">
|
||||
<input id="input-2" type="checkbox"></input>
|
||||
<span className="checkbox_control"></span>
|
||||
</span>
|
||||
<label for="input-2">
|
||||
<span className="title">Title</span>
|
||||
<span className="times">Times|Times</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="style-container">
|
||||
<span class="checkbox__input">
|
||||
<input id="input-3" type="checkbox"></input>
|
||||
<span className="checkbox_control"></span>
|
||||
</span>
|
||||
<label for="input-3">
|
||||
<span className="title">Title</span>
|
||||
<span className="times">Times|Times</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="style-container">
|
||||
<span class="checkbox__input">
|
||||
<input id="input-4" type="checkbox"></input>
|
||||
<span className="checkbox_control"></span>
|
||||
</span>
|
||||
<label for="input-4">
|
||||
<span className="title">Title</span>
|
||||
<span className="times">Times|Times</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default StyleSelector
|
||||
Reference in New Issue
Block a user