diff --git a/src/css/_variables.scss b/src/css/_variables.scss index 5584b29..ecda9eb 100644 --- a/src/css/_variables.scss +++ b/src/css/_variables.scss @@ -7,3 +7,4 @@ $green: #7dc332; $green-dark: #639a28; $blue: #38b5eb; $red: #fb3a2f; +$gray-base: #a3a3a3; diff --git a/src/css/popup.scss b/src/css/popup.scss index 9bab894..0b653be 100644 --- a/src/css/popup.scss +++ b/src/css/popup.scss @@ -94,10 +94,37 @@ html { .moco-bx-timer-view { text-align: center; - margin-top: 4rem; + margin-top: 3rem; + + h1 { + font-weight: normal; + line-height: 1.2; + margin: 0; + } + + p { + margin-top: 0.6rem; + } + + .text-secondary { + color: $gray-base; + } + + .timer { + margin-top: 2.5rem; + } .btn-stop-timer { margin-top: 3rem; + background-color: $red; + border: none; + border-radius: 50%; + width: 80px; + height: 80px; + + &:focus { + outline: none; + } } } } diff --git a/src/js/components/App/TimerView.js b/src/js/components/App/TimerView.js index 810a083..d22a4e2 100644 --- a/src/js/components/App/TimerView.js +++ b/src/js/components/App/TimerView.js @@ -10,20 +10,20 @@ export default function TimerView({ timedActivity, onStopTimer }) { return (
{timedActivity.customer_name}