Shields: Better accomodate long strings in non-English languages

Close brave/brave-browser#4575
brave · Mar 16, 2020 · fe3877f · fe3877f
1 parent 2d4b6d9
commit fe3877f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 29 deletions.
diff --git a/components/brave_extension/extension/brave_extension/components/display.ts b/components/brave_extension/extension/brave_extension/components/display.ts
@@ -93,7 +93,7 @@ export const BlockedInfoRowText = styled<{}, 'span'>('span')`
   box-sizing: border-box;
   font-size: 12px;
   font-weight: 500;
-  line-height: 1;
+  line-height: 1.2;
   color: ${p => p.theme.color.text};
 `
 
@@ -162,7 +162,7 @@ export const LinkAction = styled<LinkActionProps, any>(Link)`
   font-size: ${p => p.size === 'small' && '12px' || 'inherit'};
   line-height: ${p => p.size === 'small' && '1'};
   font-weight: 500;
-  z-index: 2;
+  z-index: ${p => p.size === 'small' ? '1' : '2'};
 
   &:focus {
     outline-offset: initial;

diff --git a/components/brave_extension/extension/brave_extension/components/structure/index.ts b/components/brave_extension/extension/brave_extension/components/structure/index.ts
@@ -97,15 +97,10 @@ export const SiteInfo = styled<{}, 'div'>('div')`
  * Interface/privacy Rows
  */
 
-interface BlockedInfoRowProps {
-  extraColumn?: boolean
-}
-
-export const BlockedInfoRow = styled<BlockedInfoRowProps, 'div'>('div')`
+export const BlockedInfoRow = styled<{}, 'div'>('div')`
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: ${p => p.extraColumn ? '1fr auto auto' : '1fr auto'};
-  grid-gap: ${p => p.extraColumn ? '4px' : '0'};
+  grid-template-columns: 1fr auto;
   align-items: center;
   color: ${p => p.theme.color.text};
   user-select: none;
@@ -126,7 +121,7 @@ export const BlockedInfoRow = styled<BlockedInfoRowProps, 'div'>('div')`
   }
 `
 
-export const BlockedInfoRowDetails = styled<BlockedInfoRowProps, 'details'>('details')`
+export const BlockedInfoRowDetails = styled<{}, 'details'>('details')`
   box-sizing: border-box;
 `
 

diff --git a/...e_extension/extension/brave_extension/containers/advancedView/controls/scriptsControl.tsx b/...e_extension/extension/brave_extension/containers/advancedView/controls/scriptsControl.tsx
@@ -124,7 +124,7 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
     const { scriptsBlockedOpen } = this.state
     return (
       <>
-        <BlockedInfoRow id='scriptsControl' extraColumn={true}>
+        <BlockedInfoRow id='scriptsControl'>
           <BlockedInfoRowData
             disabled={this.shouldDisableResourcesRow}
             tabIndex={this.tabIndex}
@@ -133,25 +133,22 @@ export default class ScriptsControls extends React.PureComponent<Props, State> {
           >
             <ArrowDownIcon />
             <BlockedInfoRowStats id='blockScriptsStat'>{this.javascriptBlockedDisplay}</BlockedInfoRowStats>
-            <BlockedInfoRowText>{getLocale('scriptsBlocked')}</BlockedInfoRowText>
+            <BlockedInfoRowText>
+              {getLocale('scriptsBlocked')}
+              &nbsp;
+              {
+                this.shouldDisableResourcesRow === false
+                  && (
+                    <LinkAction
+                      size='small'
+                      onClick={this.onClickAllowScriptsOnce}
+                    >
+                      {getLocale('allowScriptsOnce')}
+                    </LinkAction>
+                  )
+              }
+            </BlockedInfoRowText>
           </BlockedInfoRowData>
-          {
-            this.shouldDisableResourcesRow === false
-              && (
-                <LinkAction
-                  size='small'
-                  onClick={this.onClickAllowScriptsOnce}
-                  style={{
-                    // TODO: cezaraugusto re-visit shields components.
-                    // this should be defined in the component itself and not inlined,
-                    // and ideally in a logic that is not bounded to a reusable component such as this one.
-                    zIndex: 1
-                  }}
-                >
-                  {getLocale('allowScriptsOnce')}
-                </LinkAction>
-              )
-          }
           <Toggle
             id='blockScripts'
             size='small'