explicit sizes

duckduckgo · Oct 16, 2023 · 35aafa7 · 35aafa7
1 parent d60a0da
commit 35aafa7
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 9 deletions.
diff --git a/build/app/public/css/popup.css b/build/app/public/css/popup.css
@@ -195,7 +195,7 @@ body.environment--browser {
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
-  line-height: 18px;
+  line-height: 20px;
 }
 body.environment--ios, body.environment--android, body.environment--example {
   --width: 100%;
@@ -526,9 +526,17 @@ body.environment--windows {
   border-radius: 12px;
   position: relative;
   z-index: 0;
+  overflow: hidden;
+}
+.environment--windows .card-list--bordered {
+  border-radius: 4px;
 }
 
 .main-nav {
+  border: 1px solid var(--color-lines-light);
+  border-radius: 12px;
+  position: relative;
+  z-index: 0;
   overflow: hidden;
 }
 
@@ -2971,17 +2979,22 @@ body.environment--macos, body.environment--browser, body.environment--windows, b
   margin: 0;
   margin-bottom: var(--size-unit);
 }
+.environment--windows .form__select select {
+  min-height: 34px;
+}
 
 .form__textarea {
   resize: none;
   width: 100%;
-  height: 110px;
+  height: 88px;
   display: block;
   box-sizing: border-box;
   margin-bottom: var(--size-unit);
   padding: var(--size-unit-half);
   border: 1px solid var(--color-lines-light);
   border-radius: 4px;
+  font-size: 13px;
+  line-height: 16px;
 }
 .body--theme-dark .form__textarea {
   background-color: rgba(255, 255, 255, 0.12);
@@ -3340,6 +3353,35 @@ body.environment--macos, body.environment--browser, body.environment--windows, b
   }
 }
 
+.protection-header__toggle {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.environment--browser .protection-header__toggle {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.protection-header__note {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.environment--browser .protection-header__note {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.protection-header__note--alt {
+  background: #ccdaff;
+}
+.body--theme-dark .protection-header__note--alt {
+  background: rgba(85, 127, 243, 0.18);
+}
+
 /* Generic menu list styling */
 .default-list {
   list-style-type: none;

diff --git a/build/app/public/js/base.js b/build/app/public/js/base.js
@@ -23243,7 +23243,7 @@
   }
   function HeaderDefault(props) {
     const text = ns.site("websiteNotWorkingAdvice.title");
-    return /* @__PURE__ */ y(k, null, /* @__PURE__ */ y("div", { className: "padding-x padding-y--reduced" }, /* @__PURE__ */ y(ProtectionToggle, { model: props.model })), props.state === "site-not-working" && /* @__PURE__ */ y("div", { className: "note note--nested note--nested--alt" }, text));
+    return /* @__PURE__ */ y(k, null, /* @__PURE__ */ y("div", { className: "protection-header__toggle" }, /* @__PURE__ */ y(ProtectionToggle, { model: props.model })), props.state === "site-not-working" && /* @__PURE__ */ y("div", { className: "protection-header__note protection-header__note--alt" }, text));
   }
   function HeaderDisabled(props) {
     let text = i18n.t("site:protectionsDisabledRemote.title");
@@ -23921,7 +23921,7 @@
     const consentCb = model.tab.cookiePromptManagementStatus?.cosmetic ? this.nav.cookieHidden : this.nav.consentManaged;
     const consentRow = import_nanohtml14.default`<li class="main-nav__row">${renderCookieConsentManaged(model, consentCb)}</li>`;
     return import_nanohtml14.default`
-        <ul class="default-list card-list--bordered main-nav token-body-em js-site-main-nav">
+        <ul class="default-list main-nav token-body-em js-site-main-nav">
             <li class="main-nav__row">${renderConnection(model, this.nav.connection)}</li>
             <li class="main-nav__row">${renderTrackerNetworksNew(model, this.nav.trackers)}</li>
             <li class="main-nav__row">${renderThirdPartyNew(model, this.nav.nonTrackers)}</li>

diff --git a/shared/js/ui/templates/protection-header.js b/shared/js/ui/templates/protection-header.js
@@ -147,10 +147,12 @@ function HeaderDefault(props) {
     const text = ns.site('websiteNotWorkingAdvice.title')
     return (
         <>
-            <div className="padding-x padding-y--reduced">
+            <div className="protection-header__toggle">
                 <ProtectionToggle model={props.model} />
             </div>
-            {props.state === 'site-not-working' && <div className="note note--nested note--nested--alt">{text}</div>}
+            {props.state === 'site-not-working' &&
+                <div className="protection-header__note protection-header__note--alt">{text}</div>
+            }
         </>
     )
 }

diff --git a/shared/js/ui/views/main-nav.js b/shared/js/ui/views/main-nav.js
@@ -114,7 +114,7 @@ function template() {
     const consentCb = model.tab.cookiePromptManagementStatus?.cosmetic ? this.nav.cookieHidden : this.nav.consentManaged
     const consentRow = html`<li class="main-nav__row">${renderCookieConsentManaged(model, consentCb)}</li>`
     return html`
-        <ul class="default-list card-list--bordered main-nav token-body-em js-site-main-nav">
+        <ul class="default-list main-nav token-body-em js-site-main-nav">
             <li class="main-nav__row">${renderConnection(model, this.nav.connection)}</li>
             <li class="main-nav__row">${renderTrackerNetworksNew(model, this.nav.trackers)}</li>
             <li class="main-nav__row">${renderThirdPartyNew(model, this.nav.nonTrackers)}</li>

diff --git a/shared/scss/base/_tokens.scss b/shared/scss/base/_tokens.scss
@@ -35,7 +35,7 @@
         font-style: normal;
         font-weight: 400;
         font-size: 14px;
-        line-height: 18px;
+        line-height: 20px;
     }
 }
 

diff --git a/shared/scss/popup.scss b/shared/scss/popup.scss
@@ -148,6 +148,7 @@ body {
 @import 'views/cta-screens';
 @import 'views/note';
 @import 'views/fire-button';
+@import 'views/protection-header';
 
 /* Generic menu list styling */
 @include default_list();

diff --git a/shared/scss/views/_breakage-form.scss b/shared/scss/views/_breakage-form.scss
@@ -93,18 +93,24 @@
     border-radius: 4px;
     margin: 0;
     margin-bottom: var(--size-unit);
+
+    .environment--windows & {
+        min-height: 34px;
+    }
 }
 
 .form__textarea {
     resize: none;
     width: 100%;
-    height: 110px;
+    height: 88px;
     display: block;
     box-sizing: border-box;
     margin-bottom: var(--size-unit);
     padding: var(--size-unit-half);
     border: 1px solid var(--color-lines-light);
     border-radius: 4px;
+    font-size: 13px;
+    line-height: 16px;
 
     .body--theme-dark & {
         background-color: $dark-mode-white;

diff --git a/shared/scss/views/_card-list.scss b/shared/scss/views/_card-list.scss
@@ -12,6 +12,11 @@
     border-radius: 12px;
     position: relative;
     z-index: 0;
+    overflow: hidden;
+
+    .environment--windows & {
+        border-radius: 4px;
+    }
 }
 
 .card-list--last {

diff --git a/shared/scss/views/_main-nav.scss b/shared/scss/views/_main-nav.scss
@@ -1,4 +1,8 @@
 .main-nav {
+    border: 1px solid var(--color-lines-light);
+    border-radius: 12px;
+    position: relative;
+    z-index: 0;
     overflow: hidden;
 }
 

diff --git a/shared/scss/views/_protection-header.scss b/shared/scss/views/_protection-header.scss
@@ -0,0 +1,29 @@
+.protection-header__toggle {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+
+  .environment--browser & {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+.protection-header__note {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+
+  .environment--browser & {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+.protection-header__note--alt {
+  background: $color-note-blue;
+  .body--theme-dark & {
+    background: rgba($color-note-blue--dark, 18%);
+  }
+}