Shields UI follow ups

brave · Apr 4, 2022 · f9bba9e · f9bba9e
1 parent 7be7229
commit f9bba9e
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 38 deletions.
diff --git a/components/brave_shields/common/brave_shield_constants.h b/components/brave_shields/common/brave_shield_constants.h
@@ -70,7 +70,7 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_SHIELDS_TRACKERS_AND_ADS_ALLOW_ALL},
     {"braveShieldsCrossCookiesBlocked",
      IDS_BRAVE_SHIELDS_CROSS_COOKIES_BLOCKED},
-    {"braveShieldsCookiesBlocked", IDS_BRAVE_SHIELDS_COOKIES_BLOCKED},
+    {"braveShieldsCookiesBlockAll", IDS_BRAVE_SHIELDS_COOKIES_BLOCKED},
     {"braveShieldsCookiesAllowedAll", IDS_BRAVE_SHIELDS_COOKIES_ALLOWED_ALL},
     {"braveShieldsFingerprintingBlocked",
      IDS_BRAVE_SHIELDS_FINGERPRINTING_BLOCKED},

diff --git a/components/brave_shields/resources/panel/components/advanced-controls-content/index.tsx b/components/brave_shields/resources/panel/components/advanced-controls-content/index.tsx
@@ -15,14 +15,14 @@ const adBlockModeOptions = [
 ]
 
 const cookieBlockModeOptions = [
+  { value: CookieBlockMode.BLOCKED, text: getLocale('braveShieldsCookiesBlockAll') },
   { value: CookieBlockMode.CROSS_SITE_BLOCKED, text: getLocale('braveShieldsCrossCookiesBlocked') },
-  { value: CookieBlockMode.BLOCKED, text: getLocale('braveShieldsCookiesBlocked') },
   { value: CookieBlockMode.ALLOW, text: getLocale('braveShieldsCookiesAllowedAll') }
 ]
 
 const fingerprintModeOptions = [
-  { value: FingerprintMode.STANDARD, text: getLocale('braveShieldsFingerprintingBlockedStd') },
   { value: FingerprintMode.STRICT, text: getLocale('braveShieldsFingerprintingBlockedAgg') },
+  { value: FingerprintMode.STANDARD, text: getLocale('braveShieldsFingerprintingBlockedStd') },
   { value: FingerprintMode.ALLOW, text: getLocale('braveShieldsFingerprintingAllowAll') }
 ]
 
@@ -125,7 +125,6 @@ function AdvancedControlsContent () {
           <label>
             <span>{getLocale('braveShieldsConnectionsUpgraded')}</span>
             <Toggle
-              brand="shields"
               onChange={handleHTTPSEverywhereEnabledChange}
               isOn={siteSettings?.isHttpsEverywhereEnabled}
               size='sm'
@@ -145,7 +144,6 @@ function AdvancedControlsContent () {
           <label>
             <span>{getLocale('braveShieldsScriptsBlocked')}</span>
             <Toggle
-              brand="shields"
               onChange={handleIsNoScriptEnabledChange}
               isOn={siteSettings?.isNoscriptEnabled}
               size='sm'
@@ -180,7 +178,7 @@ function AdvancedControlsContent () {
           <div className="col-2">
             <Select
               value={siteSettings?.cookieBlockMode}
-              ariaLabel={getLocale('braveShieldsCookiesBlocked')}
+              ariaLabel={getLocale('braveShieldsCookiesBlockAll')}
               onChange={handleCookieBlockModeChange}
             >
               {cookieBlockModeOptions.map(entry => {

diff --git a/components/brave_shields/resources/panel/components/tree-list/style.ts b/components/brave_shields/resources/panel/components/tree-list/style.ts
@@ -52,7 +52,7 @@ export const Footer = styled.section`
 
 export const SiteTitleBox = styled.div`
   display: grid;
-  grid-template-columns: 24px 1fr;
+  grid-template-columns: 26px 1fr;
   grid-gap: 10px;
   align-items: center;
   margin-bottom: 15px;
@@ -105,11 +105,16 @@ export const BackButton = styled.button`
 
 export const Grid = styled.div`
   display: grid;
-  grid-template-columns: 20px 2fr 0.5fr;
-  grid-gap: 5px;
+  grid-template-columns: 26px 2fr 0.5fr;
+  grid-gap: 10px;
   align-items: center;
   font-family: ${(p) => p.theme.fontFamily.heading};
   color: ${(p) => p.theme.color.text01};
   font-size: 14px;
   font-weight: 600;
+
+  span:first-child {
+    text-align: center;
+    overflow: hidden;
+  }
 `
diff --git a/components/brave_shields/resources/panel/stories/locale.ts b/components/brave_shields/resources/panel/stories/locale.ts
@@ -7,7 +7,7 @@ provideStrings({
   braveShieldsDown: 'Shields are DOWN $1for$2',
   braveShieldsBroken: 'If this site seems broken, try Shields down. $1Note: this may reduce Brave\'s privacy protections.$2',
   braveShieldsBlockedNote: 'Trackers, ads, and more blocked $1Learn more$2',
-  braveShieldsAdvancedCtrls: 'Advanced Controls',
+  braveShieldsAdvancedCtrls: 'Advanced controls',
   braveShieldSettingsDescription: 'Changing these settings might break sites.',
   braveShieldsGlobalSettingsTitle: 'Global Shield settings',
   braveShieldsChangeDefaults: 'Global defaults',
@@ -21,7 +21,7 @@ provideStrings({
   braveShieldsTrackersAndAdsBlockedAgg: 'Aggressively block trackers & ads',
   braveShieldsTrackersAndAdsAllowAll: 'Allow all trackers & ads',
   braveShieldsCrossCookiesBlocked: 'Block cross-site cookies',
-  braveShieldsCookiesBlocked: 'Block all cookies',
+  braveShieldsCookiesBlockAll: 'Block all cookies',
   braveShieldsCookiesAllowedAll: 'Allow all cookies',
   braveShieldsFingerprintingBlocked: 'Fingerprinting blocked',
   braveShieldsFingerprintingBlockedStd: 'Block fingerprinting',

diff --git a/components/resources/brave_shields_strings.grdp b/components/resources/brave_shields_strings.grdp
@@ -26,7 +26,7 @@
   </message>
 
   <message name="IDS_BRAVE_SHIELDS_ADVANCED_CTRLS" desc="A button label to expand/collapse more options.">
-    Advanced Controls
+    Advanced controls
   </message>
 
   <message name="IDS_BRAVE_SHIELD_SETTINGS_DESCRIPTION" desc="A description to explain the various options below will effect web compatibility.">

diff --git a/components/web-components/toggle/style.ts b/components/web-components/toggle/style.ts
@@ -48,14 +48,17 @@ export const ToggleBox = styled.button.attrs<ToggleProps>({
   border-radius: 50px;
   background: var(--bg-color);
   background-size: 400% 400%;
-  animation: var(--animation-name) 5s ease infinite;
 
   ${p => p.isOn && css`
     --knob-left: initial;
     --knob-right: 2px;
-    --animation-name: ${moveBg};
+    --knob-color: #4C54D2;
     --bg-color: #E1E2F6;
-    --knob-color: #4436E1;
+
+    @media (prefers-color-scheme: dark) {
+      --knob-color: #4436E1;
+      --bg-color: #7679B1;
+    }
   `}
 
   ${p => !p.isOn && css`
@@ -83,32 +86,17 @@ export const ToggleBox = styled.button.attrs<ToggleProps>({
   ${({ brand, isOn }) => {
     if (!isOn) return
 
-    if (brand === 'vpn') {
+    if (brand === 'shields' || brand === 'vpn') {
       return css`
+        animation: ${moveBg} 5s ease infinite;
         --knob-color: white;
-        --bg-color: linear-gradient(
-            135deg,
-            #381e85 0%,
-            #6845d1 30%,
-            #737ade 100%,
-            #4d56d0 75%,
-            #0e1bd1 100%
-          );
-      `
-    }
+        --bg-color: linear-gradient(305.95deg, #381e85 0%, #6845d1 98.59%, #737ade 100%, #4d56d0 75%, #0e1bd1 100%);
 
-    if (brand === 'shields') {
-      return css`
-        --knob-color: white;
-        --bg-color: linear-gradient(
-            305.95deg,
-            #BF14A2 0%,
-            #F73A1C 98.59%,
-            #737ade 100%,
-            #4d56d0 75%,
-            #0e1bd1 100%
-          );
-        `
+        @media (prefers-color-scheme: dark) {
+          --knob-color: white;
+          --bg-color: linear-gradient(305.95deg, #381e85 0%, #6845d1 98.59%, #737ade 100%, #4d56d0 75%, #0e1bd1 100%);
+        }
+      `
     }
 
     return css``