switch to class approach

Jigsaw-Code · Oct 13, 2023 · 429550c · 429550c
1 parent 13cc497
commit 429550c
Showing 1 changed file with 7 additions and 21 deletions.
diff --git a/x/examples/outline-connectivity-app/shared_frontend/pages/connectivity_test/index.ts b/x/examples/outline-connectivity-app/shared_frontend/pages/connectivity_test/index.ts
@@ -191,7 +191,8 @@ export class ConnectivityTestPage extends LitElement {
       width: 100vw;
     }
 
-    .header {
+    .header,
+    .header--ios {
       background: var(--color-background-brand);
       display: flex;
       justify-content: center;
@@ -201,6 +202,10 @@ export class ConnectivityTestPage extends LitElement {
       width: 100%;
     }
 
+    .header--ios {
+      padding-top: 3.7rem;
+    }
+
     .header-text {
       color: var(--color-text-brand);
       font-family: var(--font-sans-serif);
@@ -593,7 +598,7 @@ export class ConnectivityTestPage extends LitElement {
     // TODO: move language definitions to a centralized place
     return html`<main dir="${this.locale === "fa-IR" ? "rtl" : "ltr"}">
       ${this.renderPlatformStyles()}
-      <header class="header">
+      <header class=${this.platform?.operatingSystem === OperatingSystem.IOS ? "header--ios" : "header"}>
         <h1 class="header-text">${msg("Outline Connectivity Test")}</h1>
       </header>
       ${this.renderResults()}
@@ -752,25 +757,6 @@ export class ConnectivityTestPage extends LitElement {
     </main>`;
   }
 
-  renderPlatformStyles() {
-    if (!this.platform) {
-      return nothing;
-    }
-
-    // TODO: changes how switches look on android
-    switch (this.platform.operatingSystem) {
-      case OperatingSystem.IOS:
-        return html`
-        <style>
-          .header {
-            padding-top: 3.7rem;
-          }
-        </style>`;
-      default:
-        return nothing;
-    }
-  }
-
   renderResults() {
     if (!this.response) {
       return nothing;