Smattering of UI tweaks

src/components/serverlist.js

@@ -7,7 +7,7 @@ import {
   createRef,
   ref,
 } from "../vendor/lit-all.min.js";
-import { resetSizing } from "./styles.js";
+import { ghostButtonStyles, resetSizing } from "./styles.js";
 
 import { tr } from "../shared/i18n.js";
 
@@ -131,7 +131,7 @@ export class ServerList extends LitElement {
   }
 
   static styles = css`
-    ${resetSizing}
+    ${resetSizing} ${ghostButtonStyles}
 
     :host {
       display: flex;
@@ -141,12 +141,10 @@ export class ServerList extends LitElement {
 
     #moz-vpn-server-list-panel {
       width: 100%;
-      block-size: var(--panelSize);
-      max-block-size: var(--panelSize);
-      min-block-size: var(--panelSize);
       overflow-x: hidden;
       overflow-y: hidden;
     }
+
     .server-list-item {
       display: flex;
       flex-direction: column;
@@ -182,32 +180,13 @@ export class ServerList extends LitElement {
       margin-inline-start: 8px;
       margin-inline-end: 8px;
       inline-size: calc(100% - 16px);
-    }
-    .server-city-list-visibility-btn {
-      align-items: center;
+      position: relative;
     }
 
     /* We need to temporarily use !important for this button to make sure the right color applies */
     .server-city-list-visibility-btn {
       display: flex;
-      background-color: var(--panel-bg-color) !important;
-      border-radius: 4px;
-      border: none;
-      transition: background-color 0.3s ease;
-    }
-
-    .server-city-list-visibility-btn:hover {
-      background-color: var(--button-bg-hover-color-secondary) !important;
-    }
-
-    .server-city-list-visibility-btn:focus {
-      outline: 2px solid var(--button-bg-focus-color-primary);
-      outline-offset: 2px;
-    }
-
-    .server-city-list-visibility-btn:active {
-      background-color: var(--button-bg-active-color-secondary) !important;
-      outline: none;
+      align-items: center;
     }
 
     .toggle {
@@ -271,16 +250,15 @@ export class ServerList extends LitElement {
     }
 
     input.search {
-      margin-bottom: 16px;
-      padding: 10px 20px;
-      padding-left: 30px;
+      margin-block: 16px;
+      padding: 10px 20px 10px 30px;
       color: var(--text-color-invert);
-      width: calc(max(50%, 300px));
+      width: calc(max(50%, 312px));
       background-image: url("../../assets/img/search-icon.svg");
       background-position: 2.5px 6px;
       background-repeat: no-repeat;
       border: 2px solid var(--border-color);
-      border-radius: 5px;
+      border-radius: var(--button-border-radius);
       color: black;
     }
   `;
@@ -357,7 +335,7 @@ export const countryListItem = (
       data-country-code="${serverCountry.code}"
       @click=${onclick}
     >
-      <button class="server-city-list-visibility-btn ">
+      <button class="server-city-list-visibility-btn ghost-btn">
         <div class="toggle"></div>
         <img
           class="server-country-flag"

src/components/styles.js

@@ -111,3 +111,35 @@ export const fontSizing = css`
     font-weight: 600;
   }
 `;
+
+export const ghostButtonStyles = css`
+  button.ghost-btn {
+    background-color: transparent;
+    border: none;
+    border-radius: var(--button-border-radius);
+    outline: none !important;
+  }
+
+  .ghost-btn::before {
+    content: " ";
+    pointer-events: none;
+    background: lch(from var(--button-ghost-bg-color) l c h / 0);
+    transition: var(--button-transition);
+    border-radius: var(--button-border-radius);
+    position: absolute;
+    inset: 0px;
+  }
+
+  .ghost-btn:hover::before {
+    background: lch(from var(--button-ghost-bg-color) l c h / 0.1);
+  }
+
+  .ghost-btn:focus::before {
+    border: 2px solid lch(from var(--button-ghost-bg-color) l c h / 0.5);
+  }
+
+  .ghost-btn:active::before {
+    background: lch(from var(--button-ghost-bg-color) l c h / 0.15);
+    border: none;
+  }
+`;

src/components/titlebar.js

@@ -65,7 +65,6 @@ export class TitleBar extends LitElement {
       height: 48px;
       padding: 0px 16px;
       border-bottom: 1px solid var(--border-color);
-      margin-bottom: 5px;
     }
     /**
         * We expect inside the slots to be gray, 

src/ui/browserAction/popup.css

@@ -3,8 +3,17 @@
    file, You can obtain one at http://mozilla.org/MPL/2.0/. 
 */
 
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  overscroll-behavior: none;
+}
+
 body {
   width: var(--window-width);
+  max-block-size: var(--window-max-height);
   background-color: var(--panel-bg-color);
   padding: 0;
   margin: 0;

src/ui/browserAction/popupPage.js

@@ -15,7 +15,11 @@ import { vpnController, proxyHandler } from "./backend.js";
 
 import { Utils } from "../../shared/utils.js";
 import { tr } from "../../shared/i18n.js";
-import { fontSizing, resetSizing } from "../../components/styles.js";
+import {
+  fontSizing,
+  ghostButtonStyles,
+  resetSizing,
+} from "../../components/styles.js";
 
 // Other components used
 import "./../../components/stackview.js";
@@ -220,8 +224,12 @@ export class BrowserActionPopup extends LitElement {
         return null;
       }
       return html`
-        <h2>${tr("titleServerList")}</h2>
-        <div class="row" id="selectPageLocation" @click=${openServerList}>
+        <h2 class="select-location-title">${tr("titleServerList")}</h2>
+        <button
+          class="row ghost-btn"
+          id="selectPageLocation"
+          @click=${openServerList}
+        >
           <img
             src="../../assets//flags/${siteContext.countryCode}.png"
             height="24"
@@ -234,7 +242,7 @@ export class BrowserActionPopup extends LitElement {
             width="12"
             class="arrow"
           />
-        </div>
+        </button>
       `;
     })();
 
@@ -285,73 +293,74 @@ export class BrowserActionPopup extends LitElement {
   }
 
   static styles = css`
-    ${fontSizing}${resetSizing}
+    ${fontSizing}${resetSizing}${ghostButtonStyles}
     section {
       background-color: var(--panel-bg-color);
     }
 
     main {
-      padding: var(--padding-default);
+      padding: var(--padding-default) var(--padding-default) 0
+        var(--padding-default);
     }
+
     * {
       color: var(--text-color-primary);
       font-family: var(--font-family);
     }
+
     .row {
       display: flex;
       justify-content: center;
       align-items: center;
     }
+
     .row p {
       flex: 1;
       flex-grow: 1;
     }
+
     .row img:first-child {
       margin-right: var(--padding-default);
     }
+
     .row img:last-of-type {
       margin-left: var(--padding-default);
     }
+
     #selectPageLocation {
-      transition: all 0.15s ease;
-      background: transparent;
-      border-radius: 10px;
       padding: calc(var(--padding-default) / 2) 0px;
       position: relative;
+      margin-block: 0px var(--padding-default);
     }
+
     #selectPageLocation:hover {
       cursor: default;
     }
-    #selectPageLocation:hover::before {
-      content: " ";
-      opacity: 0.9;
-    }
+
     #selectPageLocation::before {
-      content: " ";
-      z-index: -1;
-      opacity: 0;
-      background: lch(from var(--panel-bg-color) calc(l - 15) c h);
-      transform: all 0.5s ease;
-      background: white;
-      width: 105%;
-      height: 105%;
-      border-radius: 5px;
-      position: absolute;
-      top: -2.5%;
-      left: -2.5%;
+      inset: 0px -8px;
+    }
+
+    #selectPageLocation p {
+      text-align: left;
     }
 
     vpn-card {
       display: block;
       margin-bottom: calc(var(--padding-default) * 1);
     }
+
     h1,
-    h2,
     h3 {
       margin-top: calc(var(--padding-default) / 2);
       margin-bottom: calc(var(--padding-default) / 2);
     }
 
+    h2 {
+      margin-block-start: var(--padding-default);
+      margin-block-end: calc(var(--padding-default) / 4);
+    }
+
     input {
       width: 20px;
       height: 20px;
@@ -385,9 +394,6 @@ export class BrowserActionPopup extends LitElement {
       .arrow {
         filter: invert();
       }
-      #selectPageLocation::before {
-        background: lch(from var(--panel-bg-color) calc(l + 15) c h);
-      }
     }
   `;
 }

src/ui/variables.css

@@ -32,7 +32,7 @@
 
 :root {
   --window-width: 352px;
-  --window-height: 448px;
+  --window-max-height: 399px;
 
   --font-family: "Inter Regular";
   --font-family-semi-bold: "Inter Semi Bold";
@@ -47,6 +47,8 @@
   --action-button-color: #0060df;
 
   --padding-default: 16px;
+  --button-transition: background-color 0.2s ease;
+  --button-border-radius: 5px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -56,6 +58,7 @@
 
     --text-color-primary: white;
     --text-color-invert: #3d3d3d;
+    --button-ghost-bg-color: #ffffff;
   }
 }
 
@@ -69,5 +72,6 @@
     --text-color-primary: #3d3d3d;
     --text-color-invert: white;
     --border-color: lch(from var(--panel-bg-color) calc(l - 15) c h);
+    --button-ghost-bg-color: #3d3d3d;
   }
 }