Skip to content

Commit

Permalink
Merge pull request #1192 from DarkFlorist/better-dropdown-icons
Browse files Browse the repository at this point in the history 
Replace dropdown icon (letter V) with chevron svg
  • Loading branch information
@KillariDev
KillariDev authored Nov 25, 2024
2 parents e5820bd + 70305f7 commit 47f8066
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 10 deletions.
10 changes: 10 additions & 0 deletions app/css/interceptor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,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 {
Expand Down
3 changes: 2 additions & 1 deletion app/ts/components/pages/InterceptorAccess.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { Page } from '../../types/exportedSettingsTypes.js'
import { ReadonlySignal, useComputed, useSignal } from '@preact/signals'
import { RpcEntries } from '../../types/rpc.js'
import { ModifyAddressWindowState } from '../../types/visualizer-types.js'
import { ChevronIcon } from '../subcomponents/icons.js'

function Title({ icon, title} : {icon: string | undefined, title: string}) {
return <span style = 'font-weight: 900; line-height: 48px'>
Expand Down Expand Up @@ -52,7 +53,7 @@ function AssociatedTogether({ associatedAddresses, renameAddressCallBack }: { as
}
</p>
<div class = 'card-header-icon'>
<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
<span class = 'icon'><ChevronIcon /></span>
</div>
</header>
{ !showLogs
Expand Down
6 changes: 3 additions & 3 deletions app/ts/components/pages/PersonalSign.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -358,7 +358,7 @@ function ExtraDetails({ visualizedPersonalSignRequest, renameAddressCallBack }:
Extra details
</p>
<div class = 'card-header-icon'>
<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
<span class = 'icon'><ChevronIcon /></span>
</div>
</header>
{ !showSummary
Expand Down Expand Up @@ -387,7 +387,7 @@ function RawMessage({ visualizedPersonalSignRequest }: ExtraDetailsCardParams) {
Raw message
</p>
<div class = 'card-header-icon'>
<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
<span class = 'icon'><ChevronIcon /></span>
</div>
</header>
{ !showSummary
Expand Down
12 changes: 6 additions & 6 deletions app/ts/components/simulationExplaining/SimulationSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -428,7 +428,7 @@ export function TokenLogAnalysisCard({ simTx, renameAddressCallBack }: TokenLogA
{ tokenResults.length === 0 ? `No ${ tokenEventsPlural }` : `${ tokenResults.length > 1 ? `${ upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(tokenResults.length)) } ${ tokenEventsPlural }` : tokenEventsSingular }` }
</p>
<div class = 'card-header-icon'>
<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
<span class = 'icon'><ChevronIcon /></span>
</div>
</header>
{ !showLogs
Expand Down Expand Up @@ -463,7 +463,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' : '' }` }
</p>
<div class = 'card-header-icon'>
<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
<span class = 'icon'><ChevronIcon /></span>
</div>
</header>
{ !showLogs
Expand Down Expand Up @@ -510,7 +510,7 @@ export function TransactionsAccountChangesCard({ simTx, renameAddressCallBack, a
{ numberOfChanges === 0 ? 'No changes in accounts' : `${ upperCaseFirstCharacter(convertNumberToCharacterRepresentationIfSmallEnough(numberOfChanges)) } account${ numberOfChanges > 1 ? 's' : '' } changing` }
</p>
<div class = 'card-header-icon'>
<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
<span class = 'icon'><ChevronIcon /></span>
</div>
</header>
{ !showSummary
Expand Down Expand Up @@ -698,7 +698,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` }
</p>
<div class = 'card-header-icon'>
<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
<span class = 'icon'><ChevronIcon /></span>
</div>
</header>
{ !showOtherAccountChanges
Expand Down Expand Up @@ -755,7 +755,7 @@ export function RawTransactionDetailsCard({ transaction, renameAddressCallBack,
Raw transaction information
</p>
<div class = 'card-header-icon'>
<span class = 'icon' style = 'color: var(--text-color); font-weight: unset; font-size: 0.8em;'> V </span>
<span class = 'icon'><ChevronIcon /></span>
</div>
</header>
{ !showSummary
Expand Down
2 changes: 2 additions & 0 deletions app/ts/components/subcomponents/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,5 @@ export const CopyIcon = () => <svg width = '1em' height = '1em' viewBox = '0 0 2
export const EditIcon = () => <svg width = '1em' height = '1em' viewBox = '0 0 24 24' fill = 'none' xmlns = 'http://www.w3.org/2000/svg'><path fill-rule = 'evenodd' clip-rule = 'evenodd' d = 'M10 3H7v2H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h3v2h3zM7 8v8H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z' fill = 'currentColor' /><path d = 'M19 16h-7v3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3h-8v3h7a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1' fill = 'currentColor' /></svg>

export const CheckIcon = () => <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.08 6.04 8.478 20.163l-6.558-6.81 2.16-2.081 4.398 4.566L19.92 3.959z" fill="currentColor"/></svg>

export const ChevronIcon = () => <svg role = 'img' aria-label = 'chevron-icon' width = '1em' height = '1em' viewBox = '0 0 16 16' fill = 'none' xmlns = 'http://www.w3.org/2000/svg'><path d = 'm2 5.333 6 6 6-6' stroke = 'currentColor' strokeWidth = { 1.5 } /></svg>

0 comments on commit 47f8066

Please sign in to comment.