From 161eed6465617ceb2eabc96f45447262269d6525 Mon Sep 17 00:00:00 2001 From: Jubal Mabaquiao Date: Tue, 19 Nov 2024 16:01:06 +0800 Subject: [PATCH 1/3] replaced V character with SVG icon --- app/css/interceptor.css | 14 ++++++++++++++ app/ts/components/pages/InterceptorAccess.tsx | 3 ++- app/ts/components/pages/PersonalSign.tsx | 6 +++--- .../simulationExplaining/SimulationSummary.tsx | 12 ++++++------ app/ts/components/subcomponents/icons.tsx | 2 ++ 5 files changed, 27 insertions(+), 10 deletions(-) diff --git a/app/css/interceptor.css b/app/css/interceptor.css index f8e4194c..e50f6ea2 100644 --- a/app/css/interceptor.css +++ b/app/css/interceptor.css @@ -413,6 +413,16 @@ a.dropdown-item.is-active, button.dropdown-item.is-active { .card-header-icon { background-color: transparent; color: var(--text-color); + + .icon:has(svg[aria-label=chevron-icon]) { + width: 1rem; + height: 1rem; + transition: transform 200ms; + + .card-header:has(+ .card-content) & { + transform: rotateX(180deg); + } + } } .card-header-icon:disabled { @@ -1028,6 +1038,10 @@ summary:where(details[open] > *) { --s-rule-color: currentColor; } +.css-icon { +˅ +} + .svg-icon { --s-rotate: var(--icon-rotate, 0deg); --s-size: var(--icon-size, 1em); diff --git a/app/ts/components/pages/InterceptorAccess.tsx b/app/ts/components/pages/InterceptorAccess.tsx index df085365..e2dc3761 100644 --- a/app/ts/components/pages/InterceptorAccess.tsx +++ b/app/ts/components/pages/InterceptorAccess.tsx @@ -14,6 +14,7 @@ import { AddressBookEntries, AddressBookEntry } from '../../types/addressBookTyp import { Website } from '../../types/websiteAccessTypes.js' import { PendingAccessRequest, PendingAccessRequests } from '../../types/accessRequest.js' import { Page } from '../../types/exportedSettingsTypes.js' +import { ChevronIcon } from '../subcomponents/icons.js' function Title({ icon, title} : {icon: string | undefined, title: string}) { return @@ -49,7 +50,7 @@ function AssociatedTogether({ associatedAddresses, renameAddressCallBack }: { as }

- V +
{ !showLogs diff --git a/app/ts/components/pages/PersonalSign.tsx b/app/ts/components/pages/PersonalSign.tsx index 0de71fc8..9f46cf07 100644 --- a/app/ts/components/pages/PersonalSign.tsx +++ b/app/ts/components/pages/PersonalSign.tsx @@ -19,7 +19,7 @@ import { QuarantineReasons } from '../simulationExplaining/Transactions.js' import { GnosisSafeVisualizer } from '../simulationExplaining/customExplainers/GnosisSafeVisualizer.js' import { EditEnsNamedHashCallBack } from '../subcomponents/ens.js' import { ViewSelector, ViewSelector as Viewer } from '../subcomponents/ViewSelector.js' -import { XMarkIcon } from '../subcomponents/icons.js' +import { ChevronIcon, XMarkIcon } from '../subcomponents/icons.js' import { TransactionInput } from '../subcomponents/ParsedInputData.js' import { ErrorComponent } from '../subcomponents/Error.js' import { PendingTransactionOrSignableMessage } from '../../types/accessRequest.js' @@ -358,7 +358,7 @@ function ExtraDetails({ visualizedPersonalSignRequest, renameAddressCallBack }: Extra details

- V +
{ !showSummary @@ -387,7 +387,7 @@ function RawMessage({ visualizedPersonalSignRequest }: ExtraDetailsCardParams) { Raw message

- V +
{ !showSummary diff --git a/app/ts/components/simulationExplaining/SimulationSummary.tsx b/app/ts/components/simulationExplaining/SimulationSummary.tsx index 4e1a92e8..e71bc768 100644 --- a/app/ts/components/simulationExplaining/SimulationSummary.tsx +++ b/app/ts/components/simulationExplaining/SimulationSummary.tsx @@ -18,7 +18,7 @@ import { Website } from '../../types/websiteAccessTypes.js' import { extractTokenEvents } from '../../background/metadataUtils.js' import { EditEnsNamedHashCallBack } from '../subcomponents/ens.js' import { EnrichedEthereumInputData } from '../../types/EnrichedEthereumData.js' -import { XMarkIcon } from '../subcomponents/icons.js' +import { ChevronIcon, XMarkIcon } from '../subcomponents/icons.js' import { TransactionInput } from '../subcomponents/ParsedInputData.js' import { sendPopupMessageToBackgroundPage } from '../../background/backgroundUtils.js' import { IntegerInput } from '../subcomponents/AutosizingInput.js' @@ -426,7 +426,7 @@ export function TokenLogAnalysisCard({ simTx, renameAddressCallBack }: TokenLogA { tokenResults.length === 0 ? `No ${ tokenEventsPlural }` : `${ tokenResults.length > 1 ? `${ upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(tokenResults.length)) } ${ tokenEventsPlural }` : tokenEventsSingular }` }

- V +
{ !showLogs @@ -461,7 +461,7 @@ export function NonTokenLogAnalysisCard({ simTx, addressMetaData, renameAddressC { nonTokenLogs.length === 0 ? 'No non-token events' : `${ upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(nonTokenLogs.length)) } non-token event${ nonTokenLogs.length > 1 ? 's' : '' }` }

- V +
{ !showLogs @@ -508,7 +508,7 @@ export function TransactionsAccountChangesCard({ simTx, renameAddressCallBack, a { numberOfChanges === 0 ? 'No changes in accounts' : `${ upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(numberOfChanges)) } account${ numberOfChanges > 1 ? 's' : '' } changing` }

- V +
{ !showSummary @@ -696,7 +696,7 @@ export function SimulationSummary(param: SimulationSummaryParams) { { notOwnAddresses.length === 0 ? 'No changes in other accounts' : `${ upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(notOwnAddresses.length)) } other account${ notOwnAddresses.length > 1 ? 's' : '' } changing` }

- V +
{ !showOtherAccountChanges @@ -753,7 +753,7 @@ export function RawTransactionDetailsCard({ transaction, renameAddressCallBack, Raw transaction information

- V +
{ !showSummary diff --git a/app/ts/components/subcomponents/icons.tsx b/app/ts/components/subcomponents/icons.tsx index 4799ae61..8a9d0fa4 100644 --- a/app/ts/components/subcomponents/icons.tsx +++ b/app/ts/components/subcomponents/icons.tsx @@ -54,3 +54,5 @@ export const CopyIcon = () => export const CheckIcon = () => + +export const ChevronIcon = () => From d4f0ce6b44b5baba7ac6a7888c4132fc63e3dc16 Mon Sep 17 00:00:00 2001 From: Jubal Mabaquiao Date: Mon, 25 Nov 2024 11:22:09 +0800 Subject: [PATCH 2/3] Update app/ts/components/subcomponents/icons.tsx Co-authored-by: KillariDev <13102010+KillariDev@users.noreply.github.com> --- app/ts/components/subcomponents/icons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ts/components/subcomponents/icons.tsx b/app/ts/components/subcomponents/icons.tsx index 8a9d0fa4..0313b1aa 100644 --- a/app/ts/components/subcomponents/icons.tsx +++ b/app/ts/components/subcomponents/icons.tsx @@ -55,4 +55,4 @@ export const EditIcon = () => +export const ChevronIcon = () => From 0e90ee790957c9ad690e1e829905c4955962efa9 Mon Sep 17 00:00:00 2001 From: Jubal Mabaquiao Date: Mon, 25 Nov 2024 11:56:06 +0800 Subject: [PATCH 3/3] remove unnecessary css declaration --- app/css/interceptor.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/css/interceptor.css b/app/css/interceptor.css index 234a2c1a..7f7bf6c9 100644 --- a/app/css/interceptor.css +++ b/app/css/interceptor.css @@ -1040,10 +1040,6 @@ summary:where(details[open] > *) { --s-rule-color: currentColor; } -.css-icon { -˅ -} - .svg-icon { --s-rotate: var(--icon-rotate, 0deg); --s-size: var(--icon-size, 1em);