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 index a08ba5283a9..538f7970450 100644 --- a/components/brave_shields/resources/panel/components/advanced-controls-content/index.tsx +++ b/components/brave_shields/resources/panel/components/advanced-controls-content/index.tsx @@ -7,7 +7,7 @@ import * as React from 'react' import Toggle from '@brave/leo/react/toggle' import { getLocale } from '$web-common/locale' import { loadTimeData } from '$web-common/loadTimeData' -import Select from '$web-components/select' +import Dropdown from '@brave/leo/react/dropdown' import * as S from './style' import getPanelBrowserAPI, { @@ -22,6 +22,13 @@ import { ViewType } from '../../state/component_types' import { ContentSetting } from 'gen/components/content_settings/core/common/content_settings.mojom.m' +import styled from 'styled-components' +import { color } from '@brave/leo/tokens/css/variables' + +const PanelDropdown = styled(Dropdown)` + color: ${color.text.primary}; + width: 100%; +` const adBlockModeOptions = [ { value: AdBlockMode.AGGRESSIVE, text: getLocale('braveShieldsTrackersAndAdsBlockedAgg') }, @@ -51,7 +58,7 @@ interface Props { showAdblockLists: boolean } -export function GlobalSettings (props: Props) { +export function GlobalSettings(props: Props) { const onAdBlockListsClick = () => { chrome.tabs.create({ url: 'chrome://settings/shields/filters', active: true }) } @@ -68,7 +75,7 @@ export function GlobalSettings (props: Props) { onClick={onAdBlockListsClick} > - + {getLocale('braveShieldsCustomizeAdblockLists')} @@ -76,7 +83,7 @@ export function GlobalSettings (props: Props) { @@ -85,15 +92,15 @@ export function GlobalSettings (props: Props) { ) } -function AdvancedControlsContent () { +function AdvancedControlsContent() { const { siteBlockInfo, siteSettings, getSiteSettings, setViewType } = React.useContext(DataContext) - const handleAdBlockModeChange = (value: string) => { + const handleAdBlockModeChange = ({ value }: { value: string }) => { getPanelBrowserAPI().dataHandler.setAdBlockMode(parseInt(value)) if (getSiteSettings) getSiteSettings() } - const handleFingerprintModeSelectionChange = (value: string) => { + const handleFingerprintModeSelectionChange = ({ value }: { value: string }) => { getPanelBrowserAPI().dataHandler.setFingerprintMode(parseInt(value)) if (getSiteSettings) getSiteSettings() } @@ -103,12 +110,12 @@ function AdvancedControlsContent () { if (getSiteSettings) getSiteSettings() } - const handleCookieBlockModeChange = (value: string) => { + const handleCookieBlockModeChange = ({ value }: { value: string }) => { getPanelBrowserAPI().dataHandler.setCookieBlockMode(parseInt(value)) if (getSiteSettings) getSiteSettings() } - const handleHttpsUpgradeModeChange = (value: string) => { + const handleHttpsUpgradeModeChange = ({ value }: { value: string }) => { getPanelBrowserAPI().dataHandler.setHttpsUpgradeMode(parseInt(value)) if (getSiteSettings) getSiteSettings() } @@ -159,11 +166,11 @@ function AdvancedControlsContent () { const isEnforced = siteSettings?.scriptsBlockedOverrideStatus?.overrideSource !== undefined && siteSettings?.scriptsBlockedOverrideStatus?.status - !== ContentSetting.DEFAULT + !== ContentSetting.DEFAULT && siteSettings?.scriptsBlockedOverrideStatus?.overrideSource - !== ContentSettingSource.kUser + !== ContentSettingSource.kUser && siteSettings?.scriptsBlockedOverrideStatus?.overrideSource - !== ContentSettingSource.kNone + !== ContentSettingSource.kNone return (
- +
{(isHttpsByDefaultEnabled && !isTorProfile) &&
- +
} @@ -242,54 +255,60 @@ function AdvancedControlsContent () {
- {showStrictFingerprintingMode ? : - } -
- + : + } + +
- -
+ + {isBraveForgetFirstPartyStorageFeatureEnabled &&
+ ) } diff --git a/components/web-components/select/index.tsx b/components/web-components/select/index.tsx deleted file mode 100644 index 3b396e6c0ca..00000000000 --- a/components/web-components/select/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -// Copyright (c) 2022 The Brave Authors. 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 https://mozilla.org/MPL/2.0/. -import * as React from 'react' - -import * as S from './style' - -type ValueType = string | number - -interface BaseSelectProps { - value?: ValueType - onChange?: (value: ValueType) => unknown - ariaLabel: string - disabled?: boolean -} - -type SelectProps = React.PropsWithChildren - -function Select (props: SelectProps) { - const handleChange = (e: React.FormEvent) => { - const target = e.target as HTMLSelectElement - props.onChange?.(target.value) - } - - return ( - - - {props.children} - - - - ) -} - -export default Select diff --git a/components/web-components/select/style.ts b/components/web-components/select/style.ts deleted file mode 100644 index 887dea85e25..00000000000 --- a/components/web-components/select/style.ts +++ /dev/null @@ -1,49 +0,0 @@ -// Copyright (c) 2022 The Brave Authors. 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 https://mozilla.org/MPL/2.0/. -import styled from 'styled-components' - -export const SelectBox = styled.div` - position: relative; - - svg { - position: absolute; - right: 10px; - top: 40%; - pointer-events: none; - - path { - fill: ${(p) => p.theme.color.text02}; - } - } -` - -export const Select = styled.select` - font-family: ${(p) => p.theme.fontFamily.heading}; - font-size: 12px; - line-height: 1.2; - padding: 9px calc(8px + 20px) 9px 8px; /* Offset left of svg icon */ - color: ${(p) => p.theme.color.text01}; - background-color: ${(p) => p.theme.color.background01}; - border-radius: 4px; - border: 2px solid transparent; - width: 100%; - appearance: none; - transition: box-shadow 0.1s ease-in-out; - - &:hover { - @media (prefers-color-scheme: dark) { - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.36); - } - - @media (prefers-color-scheme: light) { - box-shadow: 0px 1px 4px rgba(99, 105, 110, 0.2); - } - } - - &:focus-visible { - outline: 0; - border-color: ${(p) => p.theme.color.focusBorder}; - } -`