diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 11e4ad6b0..2c615ccd5 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1817,8 +1817,17 @@ "subscribe_pitch_sign_in": { "message": "Already subscribed? Sign in" }, - "subscription_midnight_theme": { - "message": "Midnight Theme" + "subscription_default_theme": { + "message": "Default" + }, + "subscription_dark_blue_theme": { + "message": "Dark Blue Theme" + }, + "subscription_palm_theme": { + "message": "Palm Theme" + }, + "subscription_leaf_theme": { + "message": "Leaf Theme" }, "subscription_status": { "message": "Status" diff --git a/app/images/panel/allow.svg b/app/images/panel/allow.svg new file mode 100644 index 000000000..e4998171f --- /dev/null +++ b/app/images/panel/allow.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/panel/icon-information-tooltip-blue.svg b/app/images/panel/icon-information-tooltip-blue.svg new file mode 100644 index 000000000..2b277cf22 --- /dev/null +++ b/app/images/panel/icon-information-tooltip-blue.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/panel/leaf-theme.png b/app/images/panel/leaf-theme.png new file mode 100644 index 000000000..1b4511875 Binary files /dev/null and b/app/images/panel/leaf-theme.png differ diff --git a/app/images/panel/palm-theme.png b/app/images/panel/palm-theme.png new file mode 100644 index 000000000..e752be3c1 Binary files /dev/null and b/app/images/panel/palm-theme.png differ diff --git a/app/images/panel/protected.svg b/app/images/panel/protected.svg new file mode 100644 index 000000000..73d901f4d --- /dev/null +++ b/app/images/panel/protected.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/panel/restrict.svg b/app/images/panel/restrict.svg new file mode 100644 index 000000000..4769286af --- /dev/null +++ b/app/images/panel/restrict.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/images/panel/tracker-detail-cliqz-ads-icon.svg b/app/images/panel/tracker-detail-cliqz-ads-icon.svg deleted file mode 100644 index 2674f8621..000000000 --- a/app/images/panel/tracker-detail-cliqz-ads-icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/app/images/panel/tracker-detail-cliqz-cookies-and-fingerprints-icon.svg b/app/images/panel/tracker-detail-cliqz-cookies-and-fingerprints-icon.svg deleted file mode 100644 index 8a5c467ad..000000000 --- a/app/images/panel/tracker-detail-cliqz-cookies-and-fingerprints-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/app/panel/components/Blocking.jsx b/app/panel/components/Blocking.jsx index 0b6106099..cd430a761 100644 --- a/app/panel/components/Blocking.jsx +++ b/app/panel/components/Blocking.jsx @@ -294,7 +294,7 @@ class Blocking extends React.Component { show_tracker_urls, sitePolicy, smartBlock, - smartBlockActive + smartBlockActive, } = this.props; const { diff --git a/app/panel/components/Blocking/Category.jsx b/app/panel/components/Blocking/Category.jsx index 10766cc8f..fe9be3483 100644 --- a/app/panel/components/Blocking/Category.jsx +++ b/app/panel/components/Blocking/Category.jsx @@ -12,6 +12,8 @@ */ import React from 'react'; +import ClassNames from 'classnames'; +import { ThemeContext } from '../../contexts/ThemeContext'; import Trackers from './Trackers'; /** @@ -21,6 +23,8 @@ import Trackers from './Trackers'; * @memberOf BlockingComponents */ class Category extends React.Component { + static contextType = ThemeContext; + constructor(props) { super(props); this.state = { @@ -153,6 +157,21 @@ class Category extends React.Component { } } + _renderCaret() { + const { isExpanded } = this.state; + const { isUnknown } = this.props; + const caretClasses = ClassNames(this.context, { + 'caret-down': isExpanded, + 'caret-up': !isExpanded, + Category__antiTrackingCaret: isUnknown + }); + return ( + + + + ); + } + /** * Render a list of categories. Pass globalBlocking flag to all trackers * in the category so that they would know which view they are part of. @@ -169,7 +188,6 @@ class Category extends React.Component { const globalBlocking = !!this.props.globalBlocking; const checkBoxStyle = `${(this.state.totalShownBlocked && this.state.allShownBlocked) ? 'all-blocked ' : (this.state.totalShownBlocked ? 'some-blocked ' : '')} checkbox-container`; - const caretClasses = (this.state.isExpanded ? 'caret-up' : 'caret-down') + (isUnknown ? ' Category__antiTrackingCaret' : ''); const filteredText = { color: 'red' }; let trackersBlockedCount; @@ -224,7 +242,7 @@ class Category extends React.Component {
-
+ { this._renderCaret() } {!isUnknown && (
diff --git a/app/panel/components/Blocking/Tracker.jsx b/app/panel/components/Blocking/Tracker.jsx index a3f973f7c..b1eaef0a2 100644 --- a/app/panel/components/Blocking/Tracker.jsx +++ b/app/panel/components/Blocking/Tracker.jsx @@ -14,9 +14,9 @@ /* eslint react/no-array-index-key: 0 */ import React from 'react'; -import { ReactSVG } from 'react-svg'; import ClassNames from 'classnames'; +import { ThemeContext } from '../../contexts/ThemeContext'; import globals from '../../../../src/classes/Globals'; import { log } from '../../../../src/utils/common'; import { sendMessageInPromise } from '../../utils/msg'; @@ -27,6 +27,8 @@ import { renderKnownTrackerButtons, renderUnknownTrackerButtons } from './tracke * @memberOf BlockingComponents */ class Tracker extends React.Component { + static contextType = ThemeContext; + constructor(props) { super(props); this.state = { @@ -254,15 +256,22 @@ class Tracker extends React.Component { ); } - _renderCliqzCookiesAndFingerprintsIcon() { return this._renderCliqzStatsIcon('cookies-and-fingerprints'); } - - _renderCliqzAdsIcon() { return this._renderCliqzStatsIcon('ads'); } - - _renderCliqzStatsIcon(type) { - const path = `/app/images/panel/tracker-detail-cliqz-${type}-icon.svg`; + _renderCliqzCookiesAndFingerprintsIcon() { + return ( + + + + ); + } + _renderCliqzAdsIcon() { return ( - + + + + + + ); } @@ -347,6 +356,7 @@ class Tracker extends React.Component { tracker.whitelisted, tracker.siteRestricted, tracker.type, + this.context )}
diff --git a/app/panel/components/Blocking/trackerButtonRenderHelpers.jsx b/app/panel/components/Blocking/trackerButtonRenderHelpers.jsx index 932d62004..3bfbb1ae5 100644 --- a/app/panel/components/Blocking/trackerButtonRenderHelpers.jsx +++ b/app/panel/components/Blocking/trackerButtonRenderHelpers.jsx @@ -54,21 +54,33 @@ export const renderKnownTrackerButtons = ( ); export const renderUnknownTrackerButtons = ( - handleCliqzTrackerWhitelist, whitelisted, siteRestricted, type + handleCliqzTrackerWhitelist, whitelisted, siteRestricted, type, contextType ) => { const svgContainerClasses = ClassNames('unknown-svg-container', { whitelisted: whitelisted && !siteRestricted, siteRestricted, }); + const borderClassNames = ClassNames('border', { + protected: type === 'antiTracking', + restricted: type !== 'antiTracking', + contextType + }); + + const backgroundClassNames = ClassNames('background', { + protected: type === 'antiTracking', + restricted: type !== 'antiTracking', + contextType + }); + return (
{/* USE INLINE SVG FOR TRUST CIRCLE TO CHANGE COLORS WITH CSS */} - - + + @@ -80,8 +92,8 @@ export const renderUnknownTrackerButtons = ( - - + + {type === 'antiTracking' ? ( diff --git a/app/panel/components/BuildingBlocks/RadioButton.jsx b/app/panel/components/BuildingBlocks/RadioButton.jsx new file mode 100644 index 000000000..12924cfb3 --- /dev/null +++ b/app/panel/components/BuildingBlocks/RadioButton.jsx @@ -0,0 +1,46 @@ +/** + * Radio Button Component + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import ClassNames from 'classnames'; + +/** + * @class Implements a single radio button to be used inside the RadioButtonGroup component + * @memberof PanelBuildingBlocks + */ + +const RadioButton = (props) => { + const { checked, handleClick } = props; + const OuterCircleClassNames = ClassNames('RadioButton__outerCircle', { + checked, + }); + const InnerCircleClassNames = ClassNames('RadioButton__innerCircle', { + checked, + }); + return ( + + + + + + ); +}; + +// PropTypes ensure we pass required props of the correct type +RadioButton.propTypes = { + checked: PropTypes.bool.isRequired, + handleClick: PropTypes.func.isRequired, +}; + +export default RadioButton; diff --git a/app/panel/components/BuildingBlocks/RadioButtonGroup.jsx b/app/panel/components/BuildingBlocks/RadioButtonGroup.jsx new file mode 100644 index 000000000..e79cfe6d2 --- /dev/null +++ b/app/panel/components/BuildingBlocks/RadioButtonGroup.jsx @@ -0,0 +1,51 @@ +/** + * Radio Button Group Component + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +/* eslint jsx-a11y/label-has-associated-control: 0 */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import RadioButton from './RadioButton'; + +/** + * @class Implements a radio button group + * @memberof PanelBuildingBlocks + */ +const RadioButtonGroup = (props) => { + const { indexClicked, handleItemClick } = props; + return ( + props.labels.map((label, index) => ( +
+ + {t(label)} + +
+ handleItemClick(index)} + /> +
+
+ )) + ); +}; + +// PropTypes ensure we pass required props of the correct type +RadioButtonGroup.propTypes = { + labels: PropTypes.arrayOf(PropTypes.string).isRequired, + handleItemClick: PropTypes.func.isRequired, + indexClicked: PropTypes.number.isRequired +}; + + +export default RadioButtonGroup; diff --git a/app/panel/components/BuildingBlocks/StatsGraph.jsx b/app/panel/components/BuildingBlocks/StatsGraph.jsx index 0ae8ab68c..80e89ec4d 100644 --- a/app/panel/components/BuildingBlocks/StatsGraph.jsx +++ b/app/panel/components/BuildingBlocks/StatsGraph.jsx @@ -14,12 +14,14 @@ import { isEqual } from 'underscore'; import React from 'react'; import * as D3 from 'd3'; - +import { ThemeContext } from '../../contexts/ThemeContext'; /** * Generates an animated graph displaying locally stored stats * @memberof PanelBuildingBlocks */ class StatsGraph extends React.Component { + static contextType = ThemeContext; + /** * Lifecycle event */ @@ -170,7 +172,7 @@ class StatsGraph extends React.Component { pathGroup.append('path') .attr('d', line) .attr('fill', 'none') - .attr('stroke', '#124559') + .attr('class', `line ${this.context}`) .attr('stroke-width', 1.5) .call(animator); // ---------------------------------------------------------------------- // @@ -187,7 +189,6 @@ class StatsGraph extends React.Component { .style('opacity', opacity); }, 1); } - // Add data points with event listeners for opening their respective tooltips canvas.append('g') .attr('class', 'point-group') @@ -196,7 +197,7 @@ class StatsGraph extends React.Component { .enter() .append('circle') .attr('class', (d, i) => `point point-${i}`) - .attr('fill', '#124559') + .attr('class', this.context) .attr('cx', d => x(d.index)) .attr('cy', d => y(d.amount)) .attr('r', 0) diff --git a/app/panel/components/BuildingBlocks/index.js b/app/panel/components/BuildingBlocks/index.js index edc925cbc..8f73d6052 100644 --- a/app/panel/components/BuildingBlocks/index.js +++ b/app/panel/components/BuildingBlocks/index.js @@ -21,6 +21,8 @@ import GhosteryFeature from './GhosteryFeature'; import NotScanned from './NotScanned'; import PauseButton from './PauseButton'; import ToggleSlider from './ToggleSlider'; +import RadioButtonGroup from './RadioButtonGroup'; +import RadioButton from './RadioButton'; import ModalExitButton from './ModalExitButton'; export { @@ -31,5 +33,7 @@ export { NotScanned, PauseButton, ToggleSlider, + RadioButtonGroup, + RadioButton, ModalExitButton }; diff --git a/app/panel/components/Panel.jsx b/app/panel/components/Panel.jsx index c13fbb5da..6ed5e9517 100644 --- a/app/panel/components/Panel.jsx +++ b/app/panel/components/Panel.jsx @@ -16,6 +16,7 @@ import { NavLink } from 'react-router-dom'; import Header from '../containers/HeaderContainer'; import { PremiumPromoModal } from '../../shared-components'; import InsightsPromoModal from './InsightsPromoModal'; +import { ThemeContext } from '../contexts/ThemeContext'; import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext'; import { sendMessage } from '../utils/msg'; import { setTheme } from '../utils/utils'; @@ -408,7 +409,7 @@ class Panel extends React.Component { } const notificationText = this.props.notificationShown && this.renderNotification(); - + const { current_theme } = this.props; return (
{this._renderPromoModal()} @@ -425,9 +426,11 @@ class Panel extends React.Component {
- - { this.props.children } - + + + { this.props.children } + +
); diff --git a/app/panel/components/Stats.jsx b/app/panel/components/Stats.jsx index 39aa829d2..8ec7ac7c7 100644 --- a/app/panel/components/Stats.jsx +++ b/app/panel/components/Stats.jsx @@ -524,13 +524,15 @@ class Stats extends React.Component { * @return {ReactComponent} StatsView instance */ render() { + const { user, loggedIn } = this.props; + const { showResetModal, selection } = this.state; return ( { - const newChecked = !this.state.isChecked; - this.setState({ isChecked: newChecked }); - const updated_theme = newChecked ? 'midnight-theme' : 'default'; + changeTheme = (updated_theme) => { + this.setState({ theme: updated_theme }); this.props.actions.getTheme(updated_theme).then(() => { sendMessage('ping', 'theme_change'); }); @@ -86,7 +86,7 @@ class Subscription extends React.Component { SubscriptionInfoComponent = () => (); - SubscriptionThemesComponent = () => (); + SubscriptionThemesComponent = () => (); PrioritySupportComponent = () => (); diff --git a/app/panel/components/Subscription/SubscriptionInfo.jsx b/app/panel/components/Subscription/SubscriptionInfo.jsx index 93c1161a4..8d115b17b 100644 --- a/app/panel/components/Subscription/SubscriptionInfo.jsx +++ b/app/panel/components/Subscription/SubscriptionInfo.jsx @@ -74,7 +74,7 @@ const SubscriptionInfo = (props) => {
    -
  • {t('subscription_midnight_theme')}
    • +
  • {t('subscription_dark_blue_theme')}
  • {t('historical_stats')}
  • {t('priority_support')}
diff --git a/app/panel/components/Subscription/SubscriptionThemes.jsx b/app/panel/components/Subscription/SubscriptionThemes.jsx index 3a00f0282..046d77445 100644 --- a/app/panel/components/Subscription/SubscriptionThemes.jsx +++ b/app/panel/components/Subscription/SubscriptionThemes.jsx @@ -12,36 +12,45 @@ */ import React from 'react'; -import { ToggleSlider } from '../BuildingBlocks'; +import PropTypes from 'prop-types'; +import { RadioButtonGroup } from '../BuildingBlocks'; /** * @class Implement Themes subview as a React component. * The view opens from the left-side menu of the main Subscription view. - * It allows to switch between available Ghostery themes. Right now it handles just one theme. Hence - slider. + * It allows to switch between available Ghostery themes. * @memberOf SettingsComponents - */ -const SubscriptionThemes = props => ( -
-
-
-

{ t('subscription_themes_title') }

-
- - - {t('subscription_midnight_theme')} - - -
- -
+*/ +const SubscriptionThemes = (props) => { + const themes = ['default', 'midnight-theme', 'palm-theme', 'leaf-theme']; + const themeLabels = ['subscription_default_theme', 'subscription_dark_blue_theme', 'subscription_palm_theme', 'subscription_leaf_theme']; + + const getIndexClicked = () => themes.indexOf(props.theme); + + const handleThemeClick = index => props.changeTheme(themes[index]); + + return ( +
+
+
+

{t('subscription_themes_title')}

+ + +
-
-); + ); +}; + +// PropTypes ensure we pass required props of the correct type +SubscriptionThemes.propTypes = { + changeTheme: PropTypes.func.isRequired, +}; + export default SubscriptionThemes; diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index cb5a679a5..4b9463999 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -623,6 +623,7 @@ class Summary extends React.Component { const { enable_anti_tracking, is_expert, + current_theme, } = this.props; const isCondensed = this._isCondensed(); @@ -638,6 +639,7 @@ class Summary extends React.Component { isTooltipHeader={is_expert} isTooltipBody={!isCondensed} tooltipPosition={isCondensed ? 'right' : is_expert ? 'top top-right' : 'top'} + current_theme={current_theme} />
); @@ -647,6 +649,7 @@ class Summary extends React.Component { const { enable_ad_block, is_expert, + current_theme, } = this.props; const isCondensed = this._isCondensed(); @@ -662,6 +665,7 @@ class Summary extends React.Component { isTooltipHeader={is_expert} isTooltipBody={!isCondensed} tooltipPosition={isCondensed ? 'right' : 'top'} + current_theme={current_theme} />
); @@ -671,6 +675,7 @@ class Summary extends React.Component { const { enable_smart_block, is_expert, + current_theme, } = this.props; const isCondensed = this._isCondensed(); @@ -686,6 +691,7 @@ class Summary extends React.Component { isTooltipHeader={is_expert} isTooltipBody={!isCondensed} tooltipPosition={isCondensed ? 'right' : is_expert ? 'top top-left' : 'top'} + current_theme={current_theme} />
); @@ -740,7 +746,7 @@ class Summary extends React.Component { * @return {JSX} JSX for rendering the plus upgrade banner or subscriber icon */ _renderPlusUpgradeBannerOrSubscriberIcon() { - const { is_expert } = this.props; + const { is_expert, current_theme } = this.props; const isPlusSubscriber = this._isPlusSubscriber(); const upgradeBannerClassNames = ClassNames('UpgradeBanner', { @@ -752,7 +758,7 @@ class Summary extends React.Component {
{isPlusSubscriber && (
-
+
@@ -779,6 +785,7 @@ class Summary extends React.Component { enable_offers, is_expert, is_expanded, + current_theme } = this.props; const { disableBlocking } = this.state; const isCondensed = this._isCondensed(); @@ -787,39 +794,46 @@ class Summary extends React.Component { 'Summary--expert': is_expert && !is_expanded, 'Summary--condensed': isCondensed, }); + const foregroundClassNames = ClassNames('Summary__foreground', { + active: current_theme === 'palm-theme' + || current_theme === 'leaf-theme', + }); return (
- {!isCondensed && disableBlocking && ()} - {!isCondensed && !disableBlocking && this._renderDonut()} - {!isCondensed && !disableBlocking && this._renderPageHostReadout()} - - {isCondensed && !disableBlocking && this._renderTotalTrackersFound()} +
+
+ {!isCondensed && disableBlocking && ()} + {!isCondensed && !disableBlocking && this._renderDonut()} + {!isCondensed && !disableBlocking && this._renderPageHostReadout()} + + {isCondensed && !disableBlocking && this._renderTotalTrackersFound()} + +
+ {!disableBlocking && this._renderTotalTrackersBlocked()} + {!disableBlocking && this._renderTotalRequestsModified()} + {!disableBlocking && this._renderPageLoadTime()} +
-
- {!disableBlocking && this._renderTotalTrackersBlocked()} - {!disableBlocking && this._renderTotalRequestsModified()} - {!disableBlocking && this._renderPageLoadTime()} -
+ {isCondensed && disableBlocking && ( +
+ )} - {isCondensed && disableBlocking && ( -
- )} +
+ {this._renderGhosteryFeature('trust')} + {this._renderGhosteryFeature('restrict', 'Summary__ghosteryFeatureContainer--middle')} + {this._renderPauseButton()} +
+
+ {this._renderCliqzAntiTracking()} + {this._renderCliqzAdBlock()} + {this._renderCliqzSmartBlock()} +
+ {this._renderStatsNavicon()} + {enable_offers && this._renderRewardsNavicon()} -
- {this._renderGhosteryFeature('trust')} - {this._renderGhosteryFeature('restrict', 'Summary__ghosteryFeatureContainer--middle')} - {this._renderPauseButton()} + {!isCondensed && this._renderPlusUpgradeBannerOrSubscriberIcon()}
-
- {this._renderCliqzAntiTracking()} - {this._renderCliqzAdBlock()} - {this._renderCliqzSmartBlock()} -
- {this._renderStatsNavicon()} - {enable_offers && this._renderRewardsNavicon()} - - {!isCondensed && this._renderPlusUpgradeBannerOrSubscriberIcon()}
); } diff --git a/app/panel/containers/SummaryContainer.js b/app/panel/containers/SummaryContainer.js index 826400617..fac24f3ba 100644 --- a/app/panel/containers/SummaryContainer.js +++ b/app/panel/containers/SummaryContainer.js @@ -29,7 +29,8 @@ const mapStateToProps = state => Object.assign({}, state.summary, state.panel, { is_expanded: state.panel.is_expanded, is_expert: state.panel.is_expert, tab_id: state.panel.tab_id, - user: state.account.user + user: state.account.user, + current_theme: state.panel.current_theme, }); /** * Bind Summary view component action creators using Redux's bindActionCreators diff --git a/app/panel/contexts/ThemeContext.js b/app/panel/contexts/ThemeContext.js new file mode 100644 index 000000000..f47652914 --- /dev/null +++ b/app/panel/contexts/ThemeContext.js @@ -0,0 +1,16 @@ +/** + * Theme Context + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +import React from 'react'; + +export const ThemeContext = React.createContext(null); diff --git a/app/panel/utils/utils.js b/app/panel/utils/utils.js index a92dde970..18b459f5f 100644 --- a/app/panel/utils/utils.js +++ b/app/panel/utils/utils.js @@ -212,16 +212,17 @@ export function doXHR(method, url, query) { * @param {string} themeName unique name of the theme * @param {string} theme css of the theme */ -export function setTheme(doc, name, account) { +export function setTheme(doc, name, account, reload = false) { // if themeName is 'default' all we have to do is to remove style element const styleTitlePrefix = 'Ghostery Theme'; // First remove all other style elements which may be there - const styleList = doc.head.getElementsByTagName('style'); + const styleList = doc.head.getElementsByTagName('link'); // Other kinds of loops are not supported equally across browsers + let themeStyle = null; for (let i = 0; i < styleList.length; i++) { const style = styleList[i]; if (style.title.startsWith(styleTitlePrefix)) { - doc.head.removeChild(style); + themeStyle = style; } } @@ -232,12 +233,23 @@ export function setTheme(doc, name, account) { const { css } = themeData[name]; // Create element for the theme being set, if it is not there - const themeStyle = doc.createElement('style'); - themeStyle.id = name; - themeStyle.title = `${styleTitlePrefix} ${name}`; - - // Set content of style element to the theme text. - themeStyle.textContent = css; - document.head.appendChild(themeStyle); + if (!themeStyle) { + themeStyle = doc.createElement('link'); + themeStyle.rel = 'stylesheet'; + themeStyle.media = 'screen'; + themeStyle.type = 'text/css'; + themeStyle.title = `${styleTitlePrefix}`; + themeStyle.href = css; + doc.head.appendChild(themeStyle); + } else { + themeStyle.href = css; + } + } else { + for (let i = 0; i < styleList.length; i++) { + const style = styleList[i]; + if (style.title.startsWith(styleTitlePrefix)) { + doc.head.removeChild(style); + } + } } } diff --git a/app/scss/leaf-theme.scss b/app/scss/leaf-theme.scss new file mode 100644 index 000000000..a101acdd0 --- /dev/null +++ b/app/scss/leaf-theme.scss @@ -0,0 +1,76 @@ +// Colors +$green_lightest: #667b57; +$green_light: #326C45; +$green: #305402; +$green_dark: #173700; + +$white: #FFF; +$white_alabaster: #F7F7F7; + +$grey_cyan: #CBD4D7; +$grey_dull: #C8C7C2; +$grey_light_cyan: #A9B8BC; +$grey_dark_cyan: #819D9C; +$grey_dark_blue: #70888F; +$grey_cyan_desaturated: #5A7479; +$grey_lightest: #979797; +$grey_lighter: #65605c; +$grey_light: #636262; +$grey: #4A4A4A; +$grey_dark: #333333; + +$blue_dark: #2e3b80; +$blue_light: #2092bf; + +$red: #963939; + +// Theme variables +$background: url('/app/images/panel/leaf-theme.png'); + +$top_bar: $green_dark; + +$opacityOverlay: rgba(231, 236, 238, 0.81); + +$summary_text: $grey; +$caption: $white_alabaster; +$title_text: $grey_cyan; + +$button_border: 1px solid $grey_lightest; + +$enabled_feature: $blue_dark; +$bright_enabled_feature: $blue_light; +$paled_enabled_feature: $grey_dark_cyan; + +$disabled_feature: $grey_dark_blue; +$bright_disabled_feature: $blue_light; +$paled_disabled_feature: $grey_light_cyan; + +$disabled_cliqz_feature: $grey_lighter; +$inactive_cliqz_feature: $grey_dull; + +$tab_inactive: rgba(207, 210, 218, 0.61); + $tab_inactive_text: $white; +$tab_active: $white; +$tab_active_text: $grey_light; + +$hist_stats_tab_active: $green; +$hist_stats_tab_inactive: $green_lightest; +$hist_stats_hover_border: $green_dark; +$hist_stats_background: $green; + +$tracker_list: $white; +$tracker_list_blocked_text: $red; +$tracker_list_text: $grey_dark; +$tracker_list_pale_text: $grey; +$tracker_list_cliqz_icon_stroke: $blue_dark; +$tracker_list_protected_color: $blue_dark; +$tracker_list_allowed_color: $green_light; +$tracker_list_restricted_color: $red; +$divider: $grey_cyan_desaturated; + +$trackers_blocked: $red; +$elements_adjusted: $blue_dark; +$page_load: $green_light; + + +@import './theme/theme.scss'; diff --git a/app/scss/midnight-theme.scss b/app/scss/midnight-theme.scss new file mode 100644 index 000000000..8ce10ebb7 --- /dev/null +++ b/app/scss/midnight-theme.scss @@ -0,0 +1,357 @@ +/** + * Ghostery Sass Importer + * + * Select the SASS partials to be compiled for this project. SASS files + * are compiled and included in the order they are listed. + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2018 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +// This stylesheet contains multiple sets of styles for the same components +// This is necessary because +// * the extension CSS for those components was refactored after this stylesheet was first created +// * multiple extension versions may be in production at the same time depending on browser-specific issues / approval processes + +$background: #124559; +$summary_text: #FFFFFF; +$enabled_feature: #EFF6E0; +$bright_enabled_feature: #F7FAEF; +$paled_enabled_feature: #819D9C; +$disabled_feature: #70888F; +$paled_disabled_feature: #A9B8BC; +$bright_disabled_feature: #BDC8CB; +$caption: #F7F7F7; +$tab_inactive: #B6C4CA; + +// Function helper with color variables +@function url-friendly-colour($color) { + @return '%23' + str-slice('#{$color}', 2, -1) +} + +// Used in Cliqz Features +@function buildIconAdBlocking($stroke-color) { + @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20fill-rule%3D%22nonzero%22%20transform%3D%22translate%2814%2C14%29%22%20d%3D%22M14.873%201.312l-7.973.07-5.588%205.686.07%207.973%205.686%205.589%207.973-.07%205.589-5.687-.07-7.973-5.687-5.588z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20d%3D%22M31.5%2C18.5%20L18.5%2C31.5%22/%3E%3C/g%3E%3C/svg%3E'); +} + +// Used in Cliqz Features +@function buildIconSmartBlocking($stroke-color) { + @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20fill%3D%22#{url-friendly-colour($stroke-color)}%22%20d%3D%22M31.977%2020.24c-.097%201.677-.697%203.156-1.654%204.514-.43.61-.867%201.217-1.285%201.84-.597.887-1.074%201.832-1.258%202.898-.03.175-.141.162-.263.162l-2.525-.001c-.832%200-1.663-.005-2.497.003-.181.002-.246-.05-.283-.238-.197-1.031-.657-1.954-1.241-2.818-.497-.733-1.015-1.454-1.514-2.187A8.257%208.257%200%200%201%2018.011%2020c-.112-2.82%201.486-5.279%204.185-6.42%203.458-1.462%207.547.004%209.166%203.293.521%201.062.682%202.19.615%203.365zM22.352%2032.3v-.63h5.305v.63h-5.305zm4.76%202.681h-4.216c-.508%200-.602-.108-.536-.653h5.28c.075.537-.022.653-.529.653zm6.238-18.576c-1.449-3.169-3.966-4.928-7.385-5.335-2.913-.348-5.446.61-7.511%202.673-2.305%202.306-2.858%205.124-2.19%208.241.351%201.63%201.149%203.046%202.104%204.39.438.617.869%201.243%201.271%201.883.372.593.635%201.241.661%201.946.03.814.008%201.627.008%202.441h.032c0%20.676-.001%201.351.002%202.027.006%201.204.952%202.22%202.15%202.3.158.01.21.056.25.214a2.322%202.322%200%200%200%204.524-.007c.034-.14.072-.194.225-.206a2.329%202.329%200%200%200%202.174-2.337c0-1.257.01-2.515-.003-3.774-.011-.941.208-1.816.706-2.61.402-.64.832-1.268%201.274-1.88%201.263-1.757%202.155-3.653%202.323-5.844.109-1.423-.018-2.816-.615-4.122z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20d%3D%22M25.096%2018.214a.324.324%200%200%200-.192%200l-4.117%201.092a.37.37%200%200%200-.287.364c.02%202.932%201.59%205.652%204.29%207.472a.387.387%200%200%200%20.21.058c.077%200%20.153-.02.21-.058%202.7-1.82%204.27-4.54%204.29-7.472a.37.37%200%200%200-.287-.364l-4.117-1.092z%22/%3E%3C/svg%3E'); +} + +// Used in Cliqz Features +@function buildIconDash($stroke-color) { + @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%223%22%20d%3D%22M1%205h8%22/%3E%3C/svg%3E'); +} + +// Left caret SVG +@function buildLeftCaret($color) { + @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%226%22%20height%3D%2210%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1.845%205l4.052-3.938A.313.313%200%200%200%206%20.832a.312.312%200%200%200-.103-.23L5.381.1a.33.33%200%200%200-.474%200L.103%204.77A.313.313%200%200%200%200%205c0%20.087.034.164.103.23L4.907%209.9a.33.33%200%200%200%20.474%200l.516-.501A.313.313%200%200%200%206%209.169a.313.313%200%200%200-.103-.231L1.845%205z%22%20fill%3D%22#{_url-friendly-color($color)}%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E'); +} + +// Right caret SVG +@function buildRightCaret($color) { + @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%226%22%20height%3D%2210%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.155%205L.103%201.062A.313.313%200%200%201%200%20.832C0%20.745.034.668.103.602L.619.1a.33.33%200%200%201%20.474%200l4.804%204.67A.313.313%200%200%201%206%205a.313.313%200%200%201-.103.23L1.093%209.9a.33.33%200%200%201-.474%200l-.516-.501A.313.313%200%200%201%200%209.169c0-.087.034-.164.103-.231L4.155%205z%22%20fill%3D%22#{_url-friendly-color($color)}%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E'); +} + +// This BEM-style CSS is compatible with extension versions 8.4.0 and higher +.Summary { + background-color: $background; + + .sub-component.not-scanned { + .not-scanned-header { + color: $summary_text; + } + .not-scanned-text { + color: $summary_text; + } + } +} + +.Summary--condensed { + background-color: $background; + + .Summary__totalTrackerCountContainer { + color: $summary_text; + } +} + +.Summary__statsButton.Summary__statsButton--absolutely-positioned, +.Summary__rewardsIcon.Summary__rewardsIcon--absolutely-positioned { + background-color: initial; + + path { + fill: #FFF; + stroke: #FFF; + } +} + +.SummaryPageHost { + color: $summary_text; +} + +.SummaryPageStat { + color: $summary_text; +} + +.DonutGraph__textCountContainer { + color: $summary_text; +} + +.CliqzFeature--inactive.clickable { + .CliqzFeature__status { color: $disabled_feature }; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($disabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($disabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($disabled_feature) }; + .CliqzFeature__feature-name { color: $disabled_feature }; + + &:hover { + .CliqzFeature__status { color: $bright_disabled_feature; } + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($bright_disabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($bright_disabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($bright_disabled_feature) }; + .CliqzFeature__feature-name { color: $bright_disabled_feature; } + } +} + +.CliqzFeature--active.clickable { + .CliqzFeature__status { color: $enabled_feature }; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($enabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($enabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($enabled_feature) }; + .CliqzFeature__feature-name { color: $enabled_feature }; + + &:hover { + .CliqzFeature__status { color: $bright_enabled_feature; } + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($bright_enabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($bright_enabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($bright_enabled_feature) }; + .CliqzFeature__feature-name { color: $bright_enabled_feature; } + } +} + +.CliqzFeature--inactive.not-clickable { + .CliqzFeature__status { color: $paled_disabled_feature }; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($paled_disabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($paled_disabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($paled_disabled_feature) }; + .CliqzFeature__feature-name { color: $paled_disabled_feature }; +} + +.CliqzFeature--active.not-clickable { + .CliqzFeature__status { color: $paled_enabled_feature }; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($paled_enabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($paled_enabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($paled_enabled_feature) }; + .CliqzFeature__feature-name { color: $paled_enabled_feature }; +} + +// This CSS is compatible with extension versions 8.3.4 and lower +#content-summary { + background-color: $background; + &.expert.condensed { + background-color: $background; + .total-tracker-count { + color: $summary_text; + } + } + + .page-host { + color: $summary_text; + } + .page-stats { + color: $summary_text; + } + + .sub-component.donut-graph .graph-text { + color: $summary_text; + } + + .sub-component.cliqz-features { + .count { + color: rgba($disabled_feature, 0); + background-image: buildIconDash($disabled_feature); + } + .active .count { + color: $enabled_feature; + background: none !important; + } + &.inactive .count { + color: rgba($paled_disabled_feature, 0); + background-image: buildIconDash($paled_disabled_feature); + } + &.inactive .active .count { + color: $paled_enabled_feature; + background: none !important; + } + + .anti-tracking .icon { background-image: buildIconAntiTracking($disabled_feature); } + .active.anti-tracking .icon { background-image: buildIconAntiTracking($enabled_feature); } + &.inactive .anti-tracking .icon { background-image: buildIconAntiTracking($paled_disabled_feature); } + &.inactive .active.anti-tracking .icon { background-image: buildIconAntiTracking($paled_enabled_feature); } + + .ad-blocking .icon { background-image: buildIconAdBlocking($disabled_feature); } + .active.ad-blocking .icon { background-image: buildIconAdBlocking($enabled_feature); } + &.inactive .ad-blocking .icon { background-image: buildIconAdBlocking($paled_disabled_feature); } + &.inactive .active.ad-blocking .icon { background-image: buildIconAdBlocking($paled_enabled_feature); } + + .smart-blocking .icon { background-image: buildIconSmartBlocking($disabled_feature); } + .active.smart-blocking .icon { background-image: buildIconSmartBlocking($enabled_feature); } + &.inactive .smart-blocking .icon { background-image: buildIconSmartBlocking($paled_disabled_feature); } + &.inactive .active.smart-blocking .icon { background-image: buildIconSmartBlocking($paled_enabled_feature); } + + .feature-name { + color: $disabled_feature; + } + .active .feature-name { color: $enabled_feature; } + &.inactive .feature-name { color: $paled_disabled_feature; } + &.inactive .active .feature-name { color: $paled_enabled_feature; } + + .cliqz-feature.clickable:hover { + &.anti-tracking .icon { background-image: buildIconAntiTracking($bright_disabled_feature); } + &.ad-blocking .icon { background-image: buildIconAdBlocking($bright_disabled_feature); } + &.smart-blocking .icon { background-image: buildIconSmartBlocking($bright_disabled_feature); } + .feature-name { color: $bright_disabled_feature; } + } + .cliqz-feature.active.clickable:hover { + .count { + color: $bright_enabled_feature; + } + &.anti-tracking .icon { background-image: buildIconAntiTracking($bright_enabled_feature); } + &.ad-blocking .icon { background-image: buildIconAdBlocking($bright_enabled_feature); } + &.smart-blocking .icon { background-image: buildIconSmartBlocking($bright_enabled_feature); } + .feature-name { color: $bright_enabled_feature; } + } + } + .sub-component.not-scanned { + .not-scanned-header { + color: $summary_text; + } + .not-scanned-text { + color: $summary_text; + } + } + .stats-button path { + fill: #FFF; + stroke: #FFF; + } +} + +// This CSS is compatible with all extension versions as of 8.4.1 +#ghostery-header { + .header-tab { + color: $summary_text; + background-color: $tab_inactive; + &.active { + color: $summary_text; + background-color: $background; + } + &:last-of-type.active { + background-color: $summary_text; + color: $background; + } + } + .top-bar { + background-color: $caption; + color: $background; + .subscriber-badge { + path {fill: $background;} + path.text {fill: $caption;} + } + .header-logo { + .back-arrow { + path { + fill: $background; + } + } + .logo-icon { + path { + fill: $background; + } + svg > g > path:nth-child(3) { + fill: $caption; + } + } + } + .header-kebab { + path { + fill: $background; + } + } + .profile-svg { + g > g { + fill: #124559; + stroke: #124559; + } + } + } +} + +#content-stats { + .stats-top-header { + .stats-top-header-icon.trackersSeen g { + fill: #124559; + } + .stats-top-header-icon.trackersBlocked path { + &:first-of-type { + fill: #FFF; + stroke: #FFF; + } + &:nth-of-type(2) { + stroke: #124559; + } + &:last-of-type { + fill: #124559; + } + } + .stats-top-header-icon.trackersAnonymized path { + stroke: #124559; + } + .stats-top-header-icon.adsBlocked path { + fill: #124559; + stroke: #124559; + } + } + .stats-top-header-reset { + color: #124559; + } + .tab-header { + background-color: #124559; + .tab-container > .tab { + background-color: #7f98a2; + } + } + .tile-container > .tile > .tile-value { + .tile-value-content { + color: #124559; + } + &.active > .active-underline { + background-color: #124559; + } + } + .modal-container { + .modal-hollow-button { + border: #124559 1px solid; + color: #124559; + } + .modal-filled-button { + border: #124559 1px solid; + background-color:#124559;; + } + } +} + +.line-graph-container { + #stats-back { + background-image: buildLeftCaret(#124559); + } + #stats-forward { + background-image: buildRightCaret(#124559); + } +} diff --git a/app/scss/palm-theme.scss b/app/scss/palm-theme.scss new file mode 100644 index 000000000..d1ccd610f --- /dev/null +++ b/app/scss/palm-theme.scss @@ -0,0 +1,70 @@ +// Colors +$green_lighest: #b8e986; +$green_light: #456431; +$green: #2C5114; +$green_dark: #172A0B; +$green_darkest: #313930; + +$cyan_very_light: #BDC8CB; +$cyan_light: #A9B8BC; +$cyan_grey: #CBD4D7; +$cyan_dark_grey: #819D9C; +$cyan_dark_desaturated: #5A7479; +$cyan_dark: #124559; + +$grey_dull: #C8C7C2; + +$white: #FFF; +$white_egg: #F7FAEF; +$white_alabaster: #F7F7F7; + +$blue_light: #87F0FB; +$blue_dark_grayish: #70888F; + +$red: #ff7e74; + +// Theme variables +$background: url('/app/images/panel/palm-theme.png'); + +$top_bar: $green; + +$opacityOverlay: rgba(74, 74, 74, .5);; + +$summary_text: $white; +$caption: $white_alabaster; +$title_text: $cyan_grey; + +$enabled_feature: $blue_light; +$bright_enabled_feature: $white_egg; +$paled_enabled_feature: $cyan_dark_grey; + +$disabled_feature: $blue_dark_grayish; +$bright_disabled_feature: $cyan_very_light; +$paled_disabled_feature: $cyan_light; + +$disabled_cliqz_feature: $white; +$inactive_cliqz_feature: $grey_dull; + +$tab_inactive: $green_light; +$tab_active: $green_darkest; +$tab_active_text: $white; + +$hist_stats_tab_active: $green_dark; +$hist_stats_tab_inactive: $green_light; +$hist_stats_hover_border: $green_dark; +$hist_stats_background: $green_dark; + +$tracker_list: $green_dark; +$tracker_list_blocked_text: $red; +$tracker_list_cliqz_icon_stroke: $blue_light; +$tracker_list_cliqz_icon-fill: $green_dark; +$tracker_list_protected_color: $blue_light; +$tracker_list_allowed_color: $green_lighest; +$tracker_list_restricted_color: $red; +$divider: $cyan_dark_desaturated; + +$trackers_blocked: $red; +$elements_adjusted: $blue_light; + + +@import './theme/theme.scss'; diff --git a/app/scss/panel.scss b/app/scss/panel.scss index eaef66ef7..21ab2f760 100644 --- a/app/scss/panel.scss +++ b/app/scss/panel.scss @@ -65,6 +65,7 @@ html body { @import './partials/_account'; @import './partials/_drawer'; @import './partials/_toggle_slider'; +@import './partials/_radio_button'; @import './partials/_pause_button'; @import './partials/_donut_graph'; @import './partials/_ghostery_feature'; @@ -76,6 +77,7 @@ html body { @import './partials/_stats_graph'; @import './partials/_modal_exit_button'; @import './partials/insights_promo_modal.scss'; +// @import './themes/theme.scss'; // Imports from ../shared-components directory @import '../shared-components/Modal/Modal.scss'; diff --git a/app/scss/partials/_blocking_category.scss b/app/scss/partials/_blocking_category.scss index 75fdf1930..518a8b212 100644 --- a/app/scss/partials/_blocking_category.scss +++ b/app/scss/partials/_blocking_category.scss @@ -62,20 +62,21 @@ border-top: 0; padding-top: 0; } - .caret-down { @extend %pointer; display: inline-block; - width: 40px; - height: 20px; - background: url("../../app/images/panel/caret-down.svg") no-repeat center; + margin: 0 15px 4px 0; + path { + fill: $tundora; + } } .caret-up { @extend %pointer; display: inline-block; - width: 40px; - height: 20px; - background: url("../../app/images/panel/caret-up.svg") no-repeat center; + margin: 0 15px 4px 0; + path { + fill: $tundora; + } } .checkbox-container { display: inline-block; diff --git a/app/scss/partials/_blocking_tracker.scss b/app/scss/partials/_blocking_tracker.scss index a238516aa..9f4e9c58e 100644 --- a/app/scss/partials/_blocking_tracker.scss +++ b/app/scss/partials/_blocking_tracker.scss @@ -45,9 +45,20 @@ // vertical alignment with text label position: relative; top: -2px; - display: inline-block; padding-right: 6px; + &.ads-icon.default > g { + .inner-background { + fill: #FFF; + } + path:nth-child(2) { + stroke: #1DAFED; + } + } + &.cookies-and-fingerprints-icon.default > path { + stroke: #1DAFED; + fill: #FFF; + } } .trk-cliqz-stat { color: #1dafed; @@ -143,6 +154,7 @@ align-items: center; justify-content: space-between; + &:not(.whitelisted) { .cliqz-tracker-trust { visibility: hidden; @@ -152,8 +164,29 @@ .trust-circle { stroke: #9B9B9B; } } + .cliqz-tracker-trust > g > path:nth-child(1) { + stroke: #00AEF0; + } + .cliqz-tracker-trust > g > path:nth-child(2) { + fill: #00AEF0; + } + .cliqz-tracker-scrub > g > .border { + fill: #FFF; + stroke: #00AEF0; + } + .cliqz-tracker-scrub > g > .background { + fill: #00AEF0; + stroke: #FFF; + } + .cliqz-tracker-scrub { pointer-events: none; + .background.protected { + fill: #00AEF0; + } + .background.restricted { + fill: #00AEF0; + } } } diff --git a/app/scss/partials/_radio_button.scss b/app/scss/partials/_radio_button.scss new file mode 100644 index 000000000..51ddeb4bb --- /dev/null +++ b/app/scss/partials/_radio_button.scss @@ -0,0 +1,42 @@ +/** + * Radio Button Sass + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +.RadioButtonGroup__label { + margin-right: 10px; + font-weight: bolder; +} +.RadioButtonGroup__container { + margin: 16px 0; + width: 138px; +} +.RadioButton__outerCircle { + border: 1px solid #4a4a4a; + height: 16px; + width: 16px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + &.checked { + border: 2px solid #2092bf; + } +} +.RadioButton__innerCircle { + &.checked { + height: 8px; + width: 8px; + background-color: #2092bf; + border-radius: 50%; + } +} diff --git a/app/scss/partials/_settings.scss b/app/scss/partials/_settings.scss index dccf04282..96981e5aa 100644 --- a/app/scss/partials/_settings.scss +++ b/app/scss/partials/_settings.scss @@ -5,7 +5,7 @@ * https://www.ghostery.com/ * * Copyright 2019 Ghostery, Inc. All rights reserved. - * + * * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0 @@ -58,7 +58,6 @@ text-align: left; } } - .s-tab-title { font-weight: 400; font-size: 18px; @@ -195,12 +194,11 @@ line-height: 1.4; } img.s-question { - top: -5px; - width: 14px; + width: 16px; height: auto; cursor: default; - vertical-align: top; opacity: 1.0; + margin: -6px 0 0 10px; } .s-option-group { margin-bottom: 12px; @@ -279,7 +277,7 @@ border-color: #CCCCCC; background-size: 8px 5px; -moz-appearance: none; - -webkit-appearance:none; + -webkit-appearance: none; } } #select-file { @@ -458,4 +456,4 @@ .blocking-trackers { margin-left: 25px; } -} \ No newline at end of file +} diff --git a/app/scss/partials/_stats_graph.scss b/app/scss/partials/_stats_graph.scss index a6d087809..5a19435e2 100644 --- a/app/scss/partials/_stats_graph.scss +++ b/app/scss/partials/_stats_graph.scss @@ -119,4 +119,13 @@ so that you can support switching between midnight theme and regular theme */ background-image: buildRightCaret(#00AEF0); background-repeat: no-repeat; } + .point-group { + .default, .midnight-theme { + fill: #124559; + } + } + .line.default, + .line.midnight-theme { + fill: #124559; + } } diff --git a/app/scss/partials/_subscribe.scss b/app/scss/partials/_subscribe.scss index 11e7375e4..c771b102d 100644 --- a/app/scss/partials/_subscribe.scss +++ b/app/scss/partials/_subscribe.scss @@ -83,17 +83,16 @@ -webkit-font-smoothing: antialiased; text-align: left; } - .themes-slider-label { - @extend .field-label; - padding-right: 20px !important; - } - .themes-slider-container { - padding-top: 10px !important; - } .column-subscription { padding-left: 30px !important; padding-right: 30px !important; } + .subscription-title { + display: inline; + } + .tooltip-icon { + margin-left: 5px !important; + } .status-label { @extend .field-label; padding-right: 7px !important; diff --git a/app/scss/theme/theme.scss b/app/scss/theme/theme.scss new file mode 100644 index 000000000..221469fcc --- /dev/null +++ b/app/scss/theme/theme.scss @@ -0,0 +1,714 @@ +/** + * Theme Framework Base Class + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2018 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +// Theme framework variables to overwrite +$background: #FFF !default; + +$top_bar: #FFF !default; + +$summary_text: #FFF !default; +$caption: #FFF !default; +$title_text: #FFF !default; + +$button_border: #FFF !default; + +$enabled_feature: #FFF !default; +$bright_enabled_feature: #FFF !default; +$paled_enabled_feature: #FFF !default; + +$disabled_feature: #FFF !default; +$bright_disabled_feature: #FFF !default; +$paled_disabled_feature: #FFF !default; + +$disabled_cliqz_feature: #FFF !default; +$inactive_cliqz_feature: #FFF !default; + +$tab_inactive: #FFF !default; +$tab_inactive_text: #FFF !default; +$tab_active: #FFF !default; +$tab_active_text: #FFF !default; + +$tracker_list: #FFF !default; +$tracker_list_text: #FFF !default; +$tracker_list_pale_text: #FFF !default; +$tracker_list_blocked_text: #FFF !default; +$tracker_list_cliqz_icon_stroke:#FFF !default; +$tracker_list_cliqz_icon_fill: #FFF !default; +$tracker_list_protected_color: #FFF !default; +$tracker_list_allowed_color: #FFF !default; +$tracker_list_restricted_color: #FFF !default; + + +$divider: #FFF !default; +$opacityOverlay: transparent !default; + +$trackers_blocked: #FFF !default; +$elements_adjusted: #FFF !default; +$page_load: #FFF !default; + +$hist_stats_background: #FFF !default; +$hist_stats_hover_border: #FFF !default; +$hist_stats_tab_inactive: #FFF !default; +$hist_stats_tab_active: #FFF !default; + +// Function helper with color variables +@function url-friendly-colour($color) { + @return '%23' + str-slice('#{$color}', 2, -1); +} + +// Used in Cliqz Features +@function buildIconAntiTracking($stroke-color) { + @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20d%3D%22M25.213%2015.032a.721.721%200%200%200-.426%200l-9.149%202.427a.82.82%200%200%200-.638.809c.043%206.514%203.532%2012.56%209.532%2016.604A.859.859%200%200%200%2025%2035c.17%200%20.34-.043.468-.128%206-4.045%209.49-10.09%209.532-16.604a.82.82%200%200%200-.638-.81l-9.15-2.426z%22/%3E%3C/g%3E%3C/svg%3E'); +} + +@function buildIconSmartBlockingNoCircle($stroke-color) { + @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22#{url-friendly-colour($stroke-color)}%22%20d%3D%22M31.977%2020.24c-.097%201.677-.697%203.156-1.654%204.514-.43.61-.867%201.217-1.285%201.84-.597.887-1.074%201.832-1.258%202.898-.03.175-.141.162-.263.162l-2.525-.001c-.832%200-1.663-.005-2.497.003-.181.002-.246-.05-.283-.238-.197-1.031-.657-1.954-1.241-2.818-.497-.733-1.015-1.454-1.514-2.187A8.257%208.257%200%200%201%2018.011%2020c-.112-2.82%201.486-5.279%204.185-6.42%203.458-1.462%207.547.004%209.166%203.293.521%201.062.682%202.19.615%203.365zM22.352%2032.3v-.63h5.305v.63h-5.305zm4.76%202.681h-4.216c-.508%200-.602-.108-.536-.653h5.28c.075.537-.022.653-.529.653zm6.238-18.576c-1.449-3.169-3.966-4.928-7.385-5.335-2.913-.348-5.446.61-7.511%202.673-2.305%202.306-2.858%205.124-2.19%208.241.351%201.63%201.149%203.046%202.104%204.39.438.617.869%201.243%201.271%201.883.372.593.635%201.241.661%201.946.03.814.008%201.627.008%202.441h.032c0%20.676-.001%201.351.002%202.027.006%201.204.952%202.22%202.15%202.3.158.01.21.056.25.214a2.322%202.322%200%200%200%204.524-.007c.034-.14.072-.194.225-.206a2.329%202.329%200%200%200%202.174-2.337c0-1.257.01-2.515-.003-3.774-.011-.941.208-1.816.706-2.61.402-.64.832-1.268%201.274-1.88%201.263-1.757%202.155-3.653%202.323-5.844.109-1.423-.018-2.816-.615-4.122z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20d%3D%22M25.096%2018.214a.324.324%200%200%200-.192%200l-4.117%201.092a.37.37%200%200%200-.287.364c.02%202.932%201.59%205.652%204.29%207.472a.387.387%200%200%200%20.21.058c.077%200%20.153-.02.21-.058%202.7-1.82%204.27-4.54%204.29-7.472a.37.37%200%200%200-.287-.364l-4.117-1.092z%22/%3E%3C/svg%3E'); +} + +// Used in Cliqz Features +@function buildIconAdBlocking($stroke-color) { + @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20fill-rule%3D%22nonzero%22%20transform%3D%22translate%2814%2C14%29%22%20d%3D%22M14.873%201.312l-7.973.07-5.588%205.686.07%207.973%205.686%205.589%207.973-.07%205.589-5.687-.07-7.973-5.687-5.588z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20d%3D%22M31.5%2C18.5%20L18.5%2C31.5%22/%3E%3C/g%3E%3C/svg%3E'); +} + +// Used in Cliqz Features +@function buildIconSmartBlocking($stroke-color) { + @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2250%22%20height%3D%2250%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22/%3E%3Cpath%20fill%3D%22#{url-friendly-colour($stroke-color)}%22%20d%3D%22M31.977%2020.24c-.097%201.677-.697%203.156-1.654%204.514-.43.61-.867%201.217-1.285%201.84-.597.887-1.074%201.832-1.258%202.898-.03.175-.141.162-.263.162l-2.525-.001c-.832%200-1.663-.005-2.497.003-.181.002-.246-.05-.283-.238-.197-1.031-.657-1.954-1.241-2.818-.497-.733-1.015-1.454-1.514-2.187A8.257%208.257%200%200%201%2018.011%2020c-.112-2.82%201.486-5.279%204.185-6.42%203.458-1.462%207.547.004%209.166%203.293.521%201.062.682%202.19.615%203.365zM22.352%2032.3v-.63h5.305v.63h-5.305zm4.76%202.681h-4.216c-.508%200-.602-.108-.536-.653h5.28c.075.537-.022.653-.529.653zm6.238-18.576c-1.449-3.169-3.966-4.928-7.385-5.335-2.913-.348-5.446.61-7.511%202.673-2.305%202.306-2.858%205.124-2.19%208.241.351%201.63%201.149%203.046%202.104%204.39.438.617.869%201.243%201.271%201.883.372.593.635%201.241.661%201.946.03.814.008%201.627.008%202.441h.032c0%20.676-.001%201.351.002%202.027.006%201.204.952%202.22%202.15%202.3.158.01.21.056.25.214a2.322%202.322%200%200%200%204.524-.007c.034-.14.072-.194.225-.206a2.329%202.329%200%200%200%202.174-2.337c0-1.257.01-2.515-.003-3.774-.011-.941.208-1.816.706-2.61.402-.64.832-1.268%201.274-1.88%201.263-1.757%202.155-3.653%202.323-5.844.109-1.423-.018-2.816-.615-4.122z%22/%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20d%3D%22M25.096%2018.214a.324.324%200%200%200-.192%200l-4.117%201.092a.37.37%200%200%200-.287.364c.02%202.932%201.59%205.652%204.29%207.472a.387.387%200%200%200%20.21.058c.077%200%20.153-.02.21-.058%202.7-1.82%204.27-4.54%204.29-7.472a.37.37%200%200%200-.287-.364l-4.117-1.092z%22/%3E%3C/svg%3E'); +} + +// Used in Cliqz Features +@function buildIconDash($stroke-color) { + @return url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20stroke%3D%22#{url-friendly-colour($stroke-color)}%22%20stroke-width%3D%223%22%20d%3D%22M1%205h8%22/%3E%3C/svg%3E'); +} + +// Left caret SVG +@function buildLeftCaret($color) { + @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%226%22%20height%3D%2210%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1.845%205l4.052-3.938A.313.313%200%200%200%206%20.832a.312.312%200%200%200-.103-.23L5.381.1a.33.33%200%200%200-.474%200L.103%204.77A.313.313%200%200%200%200%205c0%20.087.034.164.103.23L4.907%209.9a.33.33%200%200%200%20.474%200l.516-.501A.313.313%200%200%200%206%209.169a.313.313%200%200%200-.103-.231L1.845%205z%22%20fill%3D%22#{_url-friendly-color($color)}%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E'); +} + +// Right caret SVG +@function buildRightCaret($color) { + @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%226%22%20height%3D%2210%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M4.155%205L.103%201.062A.313.313%200%200%201%200%20.832C0%20.745.034.668.103.602L.619.1a.33.33%200%200%201%20.474%200l4.804%204.67A.313.313%200%200%201%206%205a.313.313%200%200%201-.103.23L1.093%209.9a.33.33%200%200%201-.474%200l-.516-.501A.313.313%200%200%201%200%209.169c0-.087.034-.164.103-.231L4.155%205z%22%20fill%3D%22#{_url-friendly-color($color)}%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E'); +} + +// This BEM-style CSS is compatible with extension versions 8.4.0 and higher +.Summary { + background: $background; + background-size: cover; + + .Summary__opacityOverlay { + position: absolute; + background-color: $opacityOverlay; + } + &.Summary--simple > .Summary__opacityOverlay { + top: 0; + left: 10px; + bottom: 15px; + right: 10px; + } + &.Summary--expert > .Summary__opacityOverlay { + top: 0; + left: 9px; + bottom: 0; + right: 9px; + } + &.Summary--condensed > .Summary__opacityOverlay { + top: 0; + right: 4px; + bottom: 0; + left: 4px; + } + .Summary__foreground { + position: absolute; + z-index: 1000; + opacity: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + .sub-component.not-scanned { + .not-scanned-header { + color: $summary_text; + } + .not-scanned-text { + color: $summary_text; + } + } + .Summary__subscriberBadgeContainer { + left: 15px; + .SubscriberBadge.palm-theme { + svg > g > g > path:nth-child(1) { + stroke: #7C8066; + }; + } + .SubscriberBadge.leaf-theme { + svg > g > g > path:nth-child(1) { + stroke: #8B8B65; + }; + } + } + .GhosteryFeatureButton { + border: $button_border; + } + .pause-button { + .button-left { + border-top: $button_border; + border-bottom: $button_border; + border-left: $button_border; + } + .button-right { + border-top: $button_border; + border-right: $button_border; + border-bottom: $button_border; + } + } +} + +.Summary--condensed { + background-color: $top_bar; + + .Summary__totalTrackerCountContainer { + color: $summary_text; + } +} + +.Summary__statsNavicon.Summary__statsNavicon--absolutely-positioned, +.Summary__rewardsNavicon.Summary__rewardsNavicon--absolutely-positioned { + background-color: #F7F8FB; + + path { + fill: $top_bar; + stroke: $top_bar; + } +} + +.SummaryPageStat.total-trackers-blocked { + .SummaryPageStat__value { + color: $trackers_blocked; + } +} + +.SummaryPageStat.total-requests-modified { + .SummaryPageStat__value { + color: $elements_adjusted; + } +} + +.SummaryPageStat.page-load-time-fast { + .SummaryPageStat__value { + color: $page_load; + } +} + +.SummaryPageHost { + color: $summary_text; +} + +.SummaryPageStat { + color: $summary_text; +} + +#content-detail { + border-left: 1px solid $tracker_list; +} + +.DonutGraph__textCountContainer { + color: $summary_text; +} + +.CliqzFeature--inactive.clickable { + .CliqzFeature__status { + color: $disabled_cliqz_feature; + transition: color 0.25s ease-out; + }; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($disabled_cliqz_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($disabled_cliqz_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($disabled_cliqz_feature) }; + .CliqzFeature__feature-name { color: $disabled_cliqz_feature }; + + &:hover { + .CliqzFeature__status { + color: $bright_disabled_feature; + transition: color 0.25s ease-out; + }; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($bright_disabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($bright_disabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($bright_disabled_feature) }; + .CliqzFeature__feature-name { color: $bright_disabled_feature; }; + } +} + +.CliqzFeature--active.clickable { + .CliqzFeature__status { + color: $enabled_feature; + transition: color 0.25s ease-out; + }; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($enabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($enabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($enabled_feature) }; + .CliqzFeature__feature-name { color: $enabled_feature }; + + &:hover { + .CliqzFeature__status { + color: $bright_enabled_feature; + transition: color 0.25s ease-out; + } + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($bright_enabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($bright_enabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($bright_enabled_feature) }; + .CliqzFeature__feature-name { color: $bright_enabled_feature; } + } +} + +.CliqzFeature--inactive.not-clickable { + .CliqzFeature__status { color: $paled_disabled_feature; }; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($paled_disabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($paled_disabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($paled_disabled_feature) }; + .CliqzFeature__feature-name { color: $paled_disabled_feature }; +} + +.CliqzFeature--active.not-clickable { + .CliqzFeature__status { color: $paled_enabled_feature; }; + .CliqzFeature__icon--anti-track { background-image: buildIconAntiTracking($paled_enabled_feature) }; + .CliqzFeature__icon--ad-block { background-image: buildIconAdBlocking($paled_enabled_feature) }; + .CliqzFeature__icon--smart-block { background-image: buildIconSmartBlocking($paled_enabled_feature) }; + .CliqzFeature__feature-name { color: $paled_enabled_feature }; +} + +#content-blocking .blocking-category { + .sticky-category { + background-color: $tracker_list; + border: 1px solid $tracker_list; + + .blocked-count > .count, + .blocked-count > .text { + color: $tracker_list_blocked_text; + } + .counts:after { + content: ""; + display: block; + margin-left: -45px; + width: 306px; + padding-top: 20px; + border-bottom: 1px solid $divider; + padding-top: 3px; + } + .caret-up.palm-theme > path, + .caret-down.palm-theme > path { + fill: #FFF; + } + } + .cat-name { + color: $tracker_list_text; + } + .counts { + .total-count { + color: $tracker_list_text; + } + } + .Category__antiTrackingDivider { + border: none; + } + .trackers-list { + background-color: $tracker_list; + } +} + +#content-detail .blocking-header > .row:first-of-type { + border-bottom: 2px solid $tracker_list; + + .title { + font-size: 14px; + color: #4A4A4A; + } + .block-text { + font-size: 12px; + color: #4A4A4A; + } +} + +// This CSS is compatible with extension versions 8.3.4 and lower +#content-summary { + background-color: $top_bar; + &.expert.condensed { + background-color: $top_bar; + .total-tracker-count { + color: $summary_text; + } + } + + .page-host { + color: $summary_text; + } + .page-stats { + color: $summary_text; + } + + .sub-component.donut-graph .graph-text { + color: $summary_text; + } + + .sub-component.cliqz-features { + .count { + color: rgba($disabled_feature, 0); + background-image: buildIconDash($disabled_feature); + } + .active .count { + color: $enabled_feature; + background: none !important; + } + &.inactive .count { + color: rgba($paled_disabled_feature, 0); + background-image: buildIconDash($paled_disabled_feature); + } + &.inactive .active .count { + color: $paled_enabled_feature; + background: none !important; + } + + .anti-tracking .icon { background-image: buildIconAntiTracking($disabled_feature); } + .active.anti-tracking .icon { background-image: buildIconAntiTracking($enabled_feature); } + &.inactive .anti-tracking .icon { background-image: buildIconAntiTracking($paled_disabled_feature); } + &.inactive .active.anti-tracking .icon { background-image: buildIconAntiTracking($paled_enabled_feature); } + + .ad-blocking .icon { background-image: buildIconAdBlocking($disabled_feature); } + .active.ad-blocking .icon { background-image: buildIconAdBlocking($enabled_feature); } + &.inactive .ad-blocking .icon { background-image: buildIconAdBlocking($paled_disabled_feature); } + &.inactive .active.ad-blocking .icon { background-image: buildIconAdBlocking($paled_enabled_feature); } + + .smart-blocking .icon { background-image: buildIconSmartBlocking($disabled_feature); } + .active.smart-blocking .icon { background-image: buildIconSmartBlocking($enabled_feature); } + &.inactive .smart-blocking .icon { background-image: buildIconSmartBlocking($paled_disabled_feature); } + &.inactive .active.smart-blocking .icon { background-image: buildIconSmartBlocking($paled_enabled_feature); } + + .feature-name { + color: $disabled_feature; + } + .active .feature-name { color: $enabled_feature; } + &.inactive .feature-name { color: $paled_disabled_feature; } + &.inactive .active .feature-name { color: $paled_enabled_feature; } + + .cliqz-feature.clickable:hover { + &.anti-tracking .icon { background-image: buildIconAntiTracking($bright_disabled_feature); } + &.ad-blocking .icon { background-image: buildIconAdBlocking($bright_disabled_feature); } + &.smart-blocking .icon { background-image: buildIconSmartBlocking($bright_disabled_feature); } + .feature-name { color: $bright_disabled_feature; } + } + .cliqz-feature.active.clickable:hover { + .count { + color: $bright_enabled_feature; + } + &.anti-tracking .icon { background-image: buildIconAntiTracking($bright_enabled_feature); } + &.ad-blocking .icon { background-image: buildIconAdBlocking($bright_enabled_feature); } + &.smart-blocking .icon { background-image: buildIconSmartBlocking($bright_enabled_feature); } + .feature-name { color: $bright_enabled_feature; } + } + } + .sub-component.not-scanned { + .not-scanned-header { + color: $summary_text; + } + .not-scanned-text { + color: $summary_text; + } + } + .stats-button path { + fill: #FFF; + stroke: #FFF; + } +} + +// This CSS is compatible with all extension versions as of 8.4.1 +#ghostery-header { + position: relative; + z-index: 4000; + + .header-tab { + color: $tab_inactive_text; + background-color: $tab_inactive; + &.active { + color: $tab_active_text; + background-color: $tab_active; + } + &:last-of-type.active { + color: $tab_active_text; + background-color: $tab_active; + } + } + .top-bar { + background-color: $top_bar; + color: $top_bar; + .subscriber-badge { + path {fill: $top_bar;} + path.text {fill: $caption;} + } + .header-logo { + .back-arrow { + path { + fill: #FFF; + } + } + .logo-icon { + path { + fill: #FFF; + } + svg > g > path:nth-child(3) { + fill: $top_bar; + } + } + } + .header-kebab { + path { + fill: #FFF; + } + } + .profile-svg { + g > g { + fill: #FFF; + stroke: #FFF; + } + } + } +} + +.line-graph-container { + #stats-back { + background-image: buildLeftCaret($tracker_list); + } + #stats-forward { + background-image: buildRightCaret($tracker_list); + } + .tooltip { + border: 1px solid $hist_stats_hover_border; + } + .tooltip-text-top, .tooltip-text-bottom { + color: $tracker_list; + } + .point-group { + .palm-theme { + fill :#172a0b; + } + .leaf-theme { + fill: #173700; + } + } + .line.palm-theme { + fill :#172a0b; + } + .line.leaf-theme { + fill: #173700; + } +} + +.callout-container { + position: relative; + z-index: 2147483647; +} + +.blocking-trk { + border-top: none; + + .trk-header { + .trk-name { + color: $tracker_list_text; + } + .trk-cliqz-stats-icon { + &.ads-icon.palm-theme > g, + &.ads-icon.leaf-theme > g + { + .inner-background { + fill: $tracker_list_cliqz_icon_fill; + } + path:nth-child(2) { + stroke: $tracker_list_cliqz_icon_stroke; + } + } + &.cookies-and-fingerprints-icon.palm-theme > path, + &.cookies-and-fingerprints-icon.leaf-theme > path + { + fill: $tracker_list_cliqz_icon_fill; + stroke: $tracker_list_cliqz_icon_stroke; + } + } + .trk-cliqz-stat { + color: $enabled_feature; + } + .unknown-svg-container { + .cliqz-tracker-trust > g > path:nth-child(1) { + stroke: $tracker_list_allowed_color; + } + .cliqz-tracker-trust > g > path:nth-child(2) { + fill: $tracker_list_allowed_color; + } + .cliqz-tracker-scrub > g > .border { + &.protected.palm-theme { + stroke: #87f0fb; + } + &.restricted.palm-theme { + stroke: #ff7e74; + } + &.protected.leaf-theme { + stroke: #2e3b80; + } + &.restricted.leaf-theme { + stroke: #963939; + } + } + .cliqz-tracker-scrub > g > .background { + &.protected.palm-theme { + fill: #87f0fb; + } + &.restricted.palm-theme { + fill: #ff7e74; + } + &.protected.leaf-theme { + fill: #2e3b80; + } + &.restricted.leaf-theme { + fill: #963939; + } + } + } + } + .trk-moreinfo { + .trk-description { + color: $tracker_list_text; + } + .trk-srcs-title { + color: $tracker_list_text; + } + } + + &:after { + content: ""; + display: block; + margin-left: -6px; + width: 306px; + border-bottom: 1px solid #5a7479; + } +} + +#content-detail.expanded { + .blocking-category .sticky-category .counts:after { + content: ""; + display: block; + margin-left: -45px; + width: 470px; + padding-top: 20px; + border-bottom: 1px solid #FFF; + padding-top: 3px; + } + .blocking-trk { + &:after { + content: ""; + display: block; + margin-left: -6px; + width: 470px; + border-bottom: 1px solid #FFF; + } + } +} + +.blocking-trackers { + &:not(.trusted):not(.restricted) { + .blocking-trk.blocked:not(.smart-unblocked), + .blocking-trk.smart-blocked { + .trk-name { + color: $tracker_list_pale_text; + } + } + } + &.show-warnings { + .blocking-trk.warning { + &.smart-blocked .warning-image, + &.smart-unblocked .warning-image { + background-image: buildIconSmartBlockingNoCircle($enabled_feature); + } + } + } +} + +#content-stats { + .stats-top-header { + .stats-top-header-icon.trackersSeen g { + fill: $top_bar; + } + .stats-top-header-icon.trackersBlocked path { + &:first-of-type { + fill: #FFF; + stroke: #FFF; + } + &:nth-of-type(2) { + stroke: $top_bar; + } + &:last-of-type { + fill: $top_bar; + } + } + .stats-top-header-icon.trackersAnonymized path { + stroke: $top_bar; + } + .stats-top-header-icon.adsBlocked path { + fill: $top_bar; + stroke: $top_bar; + } + } + .stats-top-header-reset { + color: $top_bar; + } + .tile-container { + background-color: $hist_stats_background; + .tile { + background-color: $hist_stats_background; + .tile-title > .tile-title-text { + color: $title_text; + } + .tile-value { + .tile-value-content { + color: #FFF; + } + &.active { + .active-underline { + background-color: #FFF; + } + } + } + } + } + .tab-header { + background-color: $top_bar; + .tab-container { + .tab { + background-color: $hist_stats_tab_inactive; + &.active { + background-color: $hist_stats_tab_active; + border: none; + } + } + .header-tab-text { + color: #FFF; + } + } + } + .modal-container { + .modal-hollow-button { + border: $top_bar 1px solid; + color: $top_bar; + } + .modal-filled-button { + border: $top_bar; + background-color: $top_bar; + } + } +} diff --git a/app/shared-components/Modal/Modal.scss b/app/shared-components/Modal/Modal.scss index 518bcb9fe..eeb0e48b9 100644 --- a/app/shared-components/Modal/Modal.scss +++ b/app/shared-components/Modal/Modal.scss @@ -19,8 +19,9 @@ right: 0; bottom: 0; left: 0; + z-index: 2147483647; } .Modal__background { background-color: rgba(#000000, 0.25); - z-index: 9; } + diff --git a/manifest.json b/manifest.json index 356c6928b..c187c1e68 100644 --- a/manifest.json +++ b/manifest.json @@ -103,4 +103,4 @@ "cliqz/offers-reminder/index.html", "cliqz/popup-notification/images/*" ] -} \ No newline at end of file +} diff --git a/src/classes/Account.js b/src/classes/Account.js index 61a427d7d..126cb2d4f 100644 --- a/src/classes/Account.js +++ b/src/classes/Account.js @@ -193,27 +193,57 @@ class Account { )) ) - getTheme = name => ( - this._getUserID() - .then(() => { - const now = Date.now(); - const { themeData } = conf.account; - if (!themeData || !themeData[name]) { return true; } - const { timestamp } = themeData[name]; - return now - timestamp > 86400000; // true if 24hrs have passed - }) - .then((shouldGet) => { - if (!shouldGet) { - return conf.account.themeData[name].css; - } - return api.get('themes', `${name}.css`) - .then((res) => { - const { css } = build(normalize(res), 'themes', res.data.id); - this._setThemeData({ name, css }); - return css; - }); - }) - ) + + getTheme = (name) => { + const now = Date.now(); + const { themeData } = conf.account; + let shouldGet = false; + if (!themeData || !themeData[name]) { + shouldGet = true; + } else { + const { timestamp } = themeData[name]; + shouldGet = (now - timestamp > 86400000); // true if 24hrs have passed + } + let css = ''; + if (shouldGet) { + if (name === 'midnight-theme') { + css = '../../dist/css/midnight_theme.css'; + } else if (name === 'palm-theme') { + console.log('PALM'); + css = '../../dist/css/palm_theme.css'; + } else if (name === 'leaf-theme') { + css = '../../dist/css/leaf_theme.css'; + } + this._setThemeData({ name, css }); + } else { + css = conf.account.themeData[name].css; + } + + return Promise.resolve(css); + } + + + // getTheme = name => ( + // this._getUserID() + // .then(() => { + // const now = Date.now(); + // const { themeData } = conf.account; + // if (!themeData || !themeData[name]) { return true; } + // const { timestamp } = themeData[name]; + // return now - timestamp > 86400000; // true if 24hrs have passed + // }) + // .then((shouldGet) => { + // if (!shouldGet) { + // return conf.account.themeData[name].css; + // } + // return api.get('themes', `${name}.css`) + // .then((res) => { + // const { css } = build(normalize(res), 'themes', res.data.id); + // this._setThemeData({ name, css }); + // return css; + // }); + // }) + // ) sendValidateAccountEmail = () => ( this._getUserID() diff --git a/webpack.config.js b/webpack.config.js index 17d53f522..915a805c7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -67,6 +67,9 @@ module.exports = { panel: [`${SASS_DIR}/panel.scss`], panel_android: [`${SASS_DIR}/panel_android.scss`], purplebox_styles: [`${SASS_DIR}/purplebox.scss`], + palm_theme: [`${SASS_DIR}/palm-theme.scss`], + leaf_theme: [`${SASS_DIR}/leaf-theme.scss`], + midnight_theme: [`${SASS_DIR}/midnight-theme.scss`], }, output: { filename: '[name].js',