Use stop-watch icon in timer view
This commit is contained in:
@@ -15,6 +15,10 @@ button.moco-bx-btn {
|
|||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
&:hover:not(:disabled) {
|
||||||
background-color: $green-dark;
|
background-color: $green-dark;
|
||||||
border-color: $green-dark;
|
border-color: $green-dark;
|
||||||
|
|||||||
@@ -118,12 +118,8 @@ html {
|
|||||||
background-color: $red;
|
background-color: $red;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 70px;
|
width: 60px;
|
||||||
height: 70px;
|
height: 60px;
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import React from "react"
|
|||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types"
|
||||||
import Timer from "components/shared/Timer"
|
import Timer from "components/shared/Timer"
|
||||||
import { parseISO } from "date-fns"
|
import { parseISO } from "date-fns"
|
||||||
|
import StopWatch from "components/shared/StopWatch"
|
||||||
|
|
||||||
export default function TimerView({ timedActivity, onStopTimer }) {
|
export default function TimerView({ timedActivity, onStopTimer }) {
|
||||||
const handleStopTimer = () => {
|
const handleStopTimer = () => {
|
||||||
@@ -20,7 +21,7 @@ export default function TimerView({ timedActivity, onStopTimer }) {
|
|||||||
style={{ fontSize: "48px", display: "inline-block" }}
|
style={{ fontSize: "48px", display: "inline-block" }}
|
||||||
/>
|
/>
|
||||||
<button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
|
<button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
|
||||||
Stopp
|
<StopWatch />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -3,14 +3,7 @@ import PropTypes from "prop-types"
|
|||||||
import Select from "components/Select"
|
import Select from "components/Select"
|
||||||
import { formatDate } from "utils"
|
import { formatDate } from "utils"
|
||||||
import cn from "classnames"
|
import cn from "classnames"
|
||||||
import stopWatch from "images/icons/stopwatch-light.svg"
|
import StopWatch from "components/shared/StopWatch"
|
||||||
|
|
||||||
const StopWatch = () => (
|
|
||||||
<i
|
|
||||||
dangerouslySetInnerHTML={{ __html: stopWatch }}
|
|
||||||
style={{ width: "22px", color: "white", display: "inline-block" }}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
class Form extends Component {
|
class Form extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
|||||||
11
src/js/components/shared/StopWatch.js
Normal file
11
src/js/components/shared/StopWatch.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import React from "react"
|
||||||
|
import stopWatch from "images/icons/stopwatch-light.svg"
|
||||||
|
|
||||||
|
export default function StopWatch() {
|
||||||
|
return (
|
||||||
|
<i
|
||||||
|
dangerouslySetInnerHTML={{ __html: stopWatch }}
|
||||||
|
style={{ width: "22px", color: "white", display: "inline-block" }}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user