diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js index 014cb93f492..1454ebc13f5 100644 --- a/app/renderer/components/navigation/urlBar.js +++ b/app/renderer/components/navigation/urlBar.js @@ -213,6 +213,10 @@ class UrlBar extends React.Component { } } + onUrlBarIconContainerClick () { + windowActions.setSiteInfoVisible(true) + } + onBlur (e) { windowActions.urlBarOnBlur(getCurrentWindowId(), e.target.value, this.props.urlbarLocation, eventElHasAncestorWithClasses(e, ['urlBarSuggestions', 'urlbarForm'])) } @@ -497,13 +501,13 @@ class UrlBar extends React.Component { render () { const urlbarIconContainer = this.props.evCert - ? (
+ ? (
{this.showEvCert}
) - : (
+ : (
@@ -513,13 +517,13 @@ class UrlBar extends React.Component { urlbarForm: true, [css(styles.urlbarForm_wide)]: this.props.isWideURLbarEnabled, noBorderRadius: this.props.publisherButtonVisible - })} + })} id='urlbar' > {urlbarIconContainer} { this.props.titleMode - ?
+ ?
{this.props.hostValue} {this.props.hostValue && this.titleValue ? ' | ' : ''} {this.titleValue} diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index b5a0d6ad309..d3d5a0260e6 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -391,7 +391,6 @@ globalStyles.color.chromeBorderColor = globalStyles.color.chromePrimary globalStyles.color.chromeControlsWarningBackground = globalStyles.color.chromePrimary globalStyles.color.audioColor = globalStyles.color.highlightBlue globalStyles.color.focusUrlbarOutline = globalStyles.color.highlightBlue -globalStyles.color.siteSecureColor = globalStyles.color.buttonColor globalStyles.color.loadTimeColor = globalStyles.color.highlightBlue globalStyles.color.activeTabDefaultColor = globalStyles.color.chromePrimary diff --git a/less/navigationBar.less b/less/navigationBar.less index 5645906bdcd..c909baf0949 100644 --- a/less/navigationBar.less +++ b/less/navigationBar.less @@ -574,8 +574,6 @@ } } -@urlbarFormHeight: 25px; - .urlbarForm { position: relative; // PR #6485 width: 0; // Fixes #4298 @@ -619,8 +617,7 @@ color: @chromeText; // #4922 - // TODO: replace this value with a CSS variable to add a dark UI. - background: #fff; + background: @chromeControlsBackground2; } @media (max-width: @breakpointNarrowViewport) { @@ -825,7 +822,7 @@ justify-content: center; height: @urlbarFormHeight; min-height: @urlbarFormHeight; - margin: 0 5px; + margin-right: 5px; max-width: 40%; .urlbarIcon { @@ -835,7 +832,7 @@ background-position: center; position: relative; bottom: -1px; - margin-left: 3px; + padding: 5px 7px 5px 7px; // about:newtab &.fa-search { @@ -863,8 +860,9 @@ .evCert { font-size: 12px; - color: forestgreen; - padding: 5px; + font-weight: 500; + color: @siteEVColor; + padding-right: 5px; border-right: 1px solid #ccc; overflow: hidden; text-overflow: ellipsis; diff --git a/less/variables.less b/less/variables.less index 9c3e1747aab..239dd806c4b 100644 --- a/less/variables.less +++ b/less/variables.less @@ -40,7 +40,7 @@ @settingItemSubtextFontSize: 0.95rem; @audioColor: @highlightBlue; @focusUrlbarOutline: rgba(55, 169, 253, 0.4); -@siteSecureColor: @buttonColor; +@siteSecureColor: green; @siteInsecureColor: #C63626; @siteEVColor: green; @loadTimeColor: @highlightBlue; @@ -52,6 +52,7 @@ @braveDarkOrange: #D44600; @dragSpacing: 50px; @urlBarOutline: #bbb; +@urlbarFormHeight: 25px; // added @navbarHeight: 36px; @downloadsBarHeight: 60px;