support windows

integration-tests/browser.spec-int.js

@@ -35,7 +35,7 @@ test.describe('breakage form', () => {
     test('should submit with category', async ({ page }) => {
         const dash = await DashboardPage.browser(page)
         await dash.addState([testDataStates.protectionsOn])
-        const optionToSelect = "Video didn’t play or load"
+        const optionToSelect = 'Video didn’t play or load'
         await dash.clickReportBreakage()
         await dash.selectBreakageCategory(optionToSelect)
         await dash.submitBreakageForm()

shared/js/ui/templates/breakage-form.js

@@ -37,14 +37,14 @@ export default function () {
             ${topNav({ view: 'secondary' })}
             <div class="breakage-form__inner padding-x-double js-breakage-form-element" data-state="idle">
                 <div class="padding-y">${wrap(this.mainModel, this)}</div>
-                <div class="key-insight">
+                <div class="key-insight key-insight--breakage">
                     ${icon}
                     <div class="breakage-form__advise">
                         <p class="token-title-3">${i18n.t('report:selectTheOptionDesc.title')}</p>
                     </div>
-                    <div class="breakage-form__message">
-                        <p class="token-title-3-em">${i18n.t('report:thankYou.title')}</p>
-                        <p class="token-title-3">${i18n.t('report:yourReportWillHelpDesc.title')}</p>
+                    <div class="thanks">
+                        <p class="thanks__primary">${i18n.t('report:thankYou.title')}</p>
+                        <p class="thanks__secondary">${i18n.t('report:yourReportWillHelpDesc.title')}</p>
                     </div>
                 </div>
                 <div class="breakage-form__content">

shared/scss/base/_tokens.scss

@@ -132,6 +132,12 @@
         font-weight: 400;
         line-height: 18px;
     }
+
+    .environment--windows & {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+    }
 }
 
 .token-label-em {

shared/scss/views/_breakage-form.scss

@@ -49,29 +49,6 @@
         display: block;
     }
 }
-.breakage-form__message {
-    text-align: center;
-    padding-bottom: 20px;
-    transition: all 0.2s ease-in-out;
-    opacity: 1;
-    display: none;
-
-    .token-title-3-em {
-        margin-bottom: 8px;
-    }
-
-    [data-state='sent'] & {
-        display: block;
-    }
-}
-
-.breakage-form__success--title {
-    padding-top: 15px;
-}
-
-.breakage-form__success--message {
-    padding: 15px;
-}
 
 .form__label__select {
     display: block;
@@ -81,6 +58,9 @@
 
 .form__group {
     margin-bottom: 14px;
+    .environment--windows & {
+        margin-bottom: 16px;
+    }
 }
 
 .form__select {
@@ -100,6 +80,7 @@
 
     .environment--windows & {
         min-height: 34px;
+        margin-bottom: 10px;
     }
 }
 
@@ -124,6 +105,11 @@
     .environment--macos & {
         height: 102px;
     }
+
+    .environment--windows & {
+        height: 102px;
+        line-height: 20px;
+    }
 }
 
 .form__submit {
@@ -179,10 +165,55 @@
     .environment--browser & {
         margin-top: auto;
     }
+
+    [data-state='sent'] & {
+        display: none;
+    }
 }
 
 .breakage-form__inner {
     height: calc(100% - var(--nav-height));
     display: flex;
     flex-direction: column;
 }
+
+.thanks {
+    text-align: center;
+    padding-bottom: 20px;
+    transition: all 0.2s ease-in-out;
+    opacity: 1;
+    display: none;
+
+    [data-state='sent'] & {
+        display: block;
+    }
+}
+
+.thanks__primary {
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 20px; /* 133.333% */
+    margin-bottom: 8px;
+
+    .environment--macos &,
+    .environment--macos & {
+        font-size: 17px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 22px; /* 129.412% */
+    }
+}
+.thanks__secondary {
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+
+    .environment--macos & {
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+    }
+}

shared/scss/views/_hero.scss

@@ -4,15 +4,16 @@
     //background-color: cyan;
     background-position: center center;
     background-repeat: no-repeat;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
     background-size: contain;
-    .environment--browser & {
-        margin-bottom: 16px;
-    }
 }
 
 .hero-icon--breakage-form {
     @include cross_platform_bg_image('refresh-assets/Breakage-128.svg');
+    margin-bottom: 20px;
+    .environment--browser & {
+        margin-bottom: 16px;
+    }
 }
 .hero-icon--tracker-network {
     @include cross_platform_bg_image('refresh-assets/Network-128.svg');

shared/scss/views/_key-insight.scss

@@ -1,6 +1,6 @@
 .key-insight {
     position: relative;
-    padding-bottom: 20px;
+    padding-bottom: 24px;
     text-align: center;
 
     &[data-suffix='about-link'] {
@@ -31,3 +31,10 @@
         padding-top: 6px;
     }
 }
+
+.key-insight--breakage {
+    padding-bottom: 20px;
+    .environment--windows & {
+        padding-bottom: 12px;
+    }
+}

shared/scss/views/_protection-header.scss

@@ -12,9 +12,13 @@
         padding-top: 8px;
         padding-bottom: 8px;
     }
-    .environment--macos & {
-        //padding-top: 11px;
-        //padding-bottom: 11px;
+    .environment--windows & {
+        padding-top: 7px;
+        padding-bottom: 7px;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px;
     }
 }