Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improve styles in account management #8153

Merged
merged 4 commits into from
Mar 7, 2024
Merged

feat: improve styles in account management #8153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
269840e
feat: selected account in the left pane has no UI hint that is selected
cpl121 Mar 7, 2024
b07c6f0
feat: show address and key in full screen in account details
cpl121 Mar 7, 2024
c71a05c
polish light theme
marc2332 Mar 7, 2024
b995c6c
Merge branch 'develop-iota2.0' into feat/add-UI-hint-to-the-selected-…
begonaalvarezd Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/desktop/components/AccountManagementDetails.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@
{/if}
</div>
{#if accountId}
<div class="flex flex-col space-y-2 w-1/2">
<div class="flex flex-col space-y-2">
<Text color="gray-600" fontWeight={FontWeight.medium} fontSize="12" type={TextType.p}
>{localize('views.accountManagement.details.address')}</Text
>
Expand All @@ -203,29 +203,29 @@
value={address}
classes="flex space-x-2 items-center"
>
<Text type={TextType.pre} fontSize="13" lineHeight="leading-120" classes="text-start w-[260px]"
<Text type={TextType.pre} fontSize="13" lineHeight="leading-120" classes="text-start"
>{address}</Text
>
<Icon icon={IconEnum.Copy} classes="text-blue-500" width={24} height={24} />
</CopyableBox>
</div>
{/if}
{#if isImplicitAccount}
<div class="flex flex-col space-y-2 w-1/2">
<div class="flex flex-col space-y-2">
<Text color="gray-600" fontWeight={FontWeight.medium} fontSize="12" type={TextType.p}
>{localize('views.accountManagement.details.mana')}</Text
>
<Text type={TextType.pre} fontSize="13" lineHeight="leading-120" classes="text-start w-[260px]"
<Text type={TextType.pre} fontSize="13" lineHeight="leading-120" classes="text-start"
>{selectedOutput.output?.mana}</Text
>
</div>
{/if}
{#if isAccountOutput && primaryKey}
<div class="flex flex-col space-y-2 w-1/2">
<div class="flex flex-col space-y-2">
<Text color="gray-600" fontWeight={FontWeight.medium} fontSize="12" type={TextType.p}
>{localize('views.accountManagement.details.key')}</Text
>
<Text type={TextType.pre} fontSize="13" lineHeight="leading-120" classes="text-start w-[260px]"
<Text type={TextType.pre} fontSize="13" lineHeight="leading-120" classes="text-start"
>{primaryKey}</Text
>
</div>
Expand Down
5 changes: 4 additions & 1 deletion packages/desktop/components/AccountManagementList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@

export let onAccountClick: (account: OutputData) => void
export let allOutputs: OutputData[] = []
export let selectedOutput: OutputData

$: isSelected = (output: OutputData) => output.outputId === selectedOutput.outputId

Check warning on line 13 in packages/desktop/components/AccountManagementList.svelte

View workflow job for this annotation

GitHub Actions / lint 

Missing return type on function

function getAccountId(output: OutputData): string | undefined {
return isAccountOutput(output) ? (output.output as AccountOutput)?.accountId : undefined
Expand All @@ -28,7 +31,7 @@
<Text type={TextType.h2}>{localize('views.accountManagement.list.title')}</Text>
<list-wrapper class="flex flex-col space-y-2">
{#each allOutputs as output, index}
<ClickableTile onClick={() => onAccountClick(output)}>
<ClickableTile onClick={() => onAccountClick(output)} selected={isSelected(output)}>

Check warning on line 34 in packages/desktop/components/AccountManagementList.svelte

View workflow job for this annotation

GitHub Actions / lint 

Missing return type on function
<div class="flex flex-col space-y-1">
<div class="flex space-x-2">
<Text
Expand Down
6 changes: 5 additions & 1 deletion packages/desktop/views/dashboard/account-management/AccountManagement.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,11 @@
<div class="flex space-x-4 max-w-7xl justify-center w-full">
{#key $selectedWallet?.id}
{#if features.accountManagement.accountList.enabled}
<AccountManagementList onAccountClick={handleAccountClick} allOutputs={allAccountOutputs} />
<AccountManagementList
onAccountClick={handleAccountClick}
allOutputs={allAccountOutputs}
{selectedOutput}
/>
{/if}
{#if features.accountManagement.accountDetails.enabled}
<AccountManagementDetails {selectedOutput} index={setAccountOutputIndex(selectedOutput)} />
Expand Down
2 changes: 2 additions & 0 deletions packages/shared/components/tiles/ClickableTile.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { Tile } from '@ui'

export let disabled = false
export let selected = false
export let classes = ''
export let onClick: () => void
</script>
Expand All @@ -13,6 +14,7 @@
{classes}
"
on:click={onClick}
{selected}
>
<slot />
</Tile>
18 changes: 18 additions & 0 deletions packages/shared/components/tiles/Tile.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<script lang="ts">
import { appSettings } from '@core/app'

export let isGhost = false
export let fullWidth = true
export let selected = false
export let classes = ''

$: darkmode = $appSettings.darkMode
</script>

<tile
Expand All @@ -13,8 +18,21 @@
: 'bg-gray-50 dark:bg-gray-900'}
{classes}
"
class:selected
class:darkmode
on:click
{...$$restProps}
>
<slot />
</tile>

<style lang="scss">
.selected {
@apply outline outline-1 outline-gray-400 bg-blue-50;

&.darkmode {
@apply outline-blue-500 bg-blue-100;
@apply bg-blue-300 bg-opacity-10;
}
}
</style>
Loading