Round corners on active timer view

index.html

@@ -12,7 +12,7 @@
   <meta name="viewport"
     content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
   <meta name="description" content="An interval timer" />
-  <meta name="theme-color" content="#181818" />
+  <meta name="theme-color" content="#000000" />
 
   <!-- These meta tags are Apple-specific, and set the web application to run in full-screen mode with a black status bar. Learn more at https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
   <meta name="apple-mobile-web-app-capable" content="yes" />

public/manifest.json

@@ -5,10 +5,10 @@
   "display": "standalone",
   "start_url": "/",
   "short_name": "Trainterval",
-  "theme_color": "#181818",
+  "theme_color": "#000000",
   "description": "An interval timer",
   "orientation": "any",
-  "background_color": "#181818",
+  "background_color": "#000000",
   "related_applications": [],
   "prefer_related_applications": false,
   "screenshots": [

src/script/components/active-timer.ts

@@ -14,6 +14,12 @@ export class ActiveTimer extends LitElement {
         user-select: none;
       }
 
+      .timer-wrapper {
+        padding: 10px;
+        box-sizing: border-box;
+        height: 100%;
+      }
+
       .timer {
         display: flex;
         flex-direction: column;
@@ -21,7 +27,9 @@ export class ActiveTimer extends LitElement {
         justify-content: space-between;
         transition: all 0.25s ease;
         padding: 1em;
-        box-sizing: border-box
+        box-sizing: border-box;
+        border-radius: 1em;
+        background-color: var(--timer-background-default);
       }
 
       .main {
@@ -114,6 +122,7 @@ export class ActiveTimer extends LitElement {
   render() {
     if (!this.timerState) return;
     return html`
+    <div class="timer-wrapper">
       <div class="timer ${className(this.timerState.phase)}">
         <div class="main">
           <p class="phase">${this.timerState.phase}</p>
@@ -135,6 +144,6 @@ export class ActiveTimer extends LitElement {
           <labeled-counter label="Round" .value=${this.timerState.round.toString()}></labeled-counter>
         </footer>
       </div>
-    `;
+    </div>`;
   }
 }

src/styles/global.css

@@ -30,7 +30,7 @@ app-index {
 
   html,
   body {
-    background: #181818;
+    background: #000000;
   }
 
   fluent-design-system-provider {
@@ -68,6 +68,7 @@ app-index {
     --neutral-fill-stealth-active: rgba(255, 255, 255, 0.4);
     --neutral-stroke-divider-rest: rgba(255, 255, 255, 0.2);
 
+    --timer-background-default: #181818;
     --timer-background-red: #860101;
     --timer-background-green: #0C5E0C;
     --timer-background-yellow: #D2AD0F;
@@ -79,7 +80,7 @@ app-index {
 
   html,
   body {
-    background: white;
+    background: #000000;
     color: black;
   }
 
@@ -111,6 +112,7 @@ app-index {
     --neutral-fill-stealth-active: rgba(0, 0, 0, 0.4);
     --neutral-fill-rest: #5d5d5d;
     --neutral-fill-input-active: #e5e5e5;
+    --timer-background-default: #FFFFFF;
     --timer-background-red: #FF0909;
     --timer-background-green: #1cb91c;
     --timer-background-yellow: #F2C812;