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