Use core icon component for app rows

This commit is contained in:
Andrew Kingston 2022-08-05 10:37:35 +01:00
parent 2d4ae38a02
commit 0b04dc5172
2 changed files with 4 additions and 6 deletions

View File

@ -24,8 +24,8 @@
border-radius: 50%; border-radius: 50%;
} }
.icon :global(.spectrum-Icon) { .icon :global(.spectrum-Icon) {
width: 20px; width: 22px;
height: 20px; height: 22px;
} }
.icon.filled :global(.spectrum-Icon) { .icon.filled :global(.spectrum-Icon) {
width: 16px; width: 16px;

View File

@ -1,5 +1,5 @@
<script> <script>
import { Heading, Button, Icon } from "@budibase/bbui" import { Heading, Button, Icon, IconAvatar } from "@budibase/bbui"
import AppLockModal from "../common/AppLockModal.svelte" import AppLockModal from "../common/AppLockModal.svelte"
import { processStringSync } from "@budibase/string-templates" import { processStringSync } from "@budibase/string-templates"
@ -10,9 +10,7 @@
<div class="title" data-cy={`${app.devId}`}> <div class="title" data-cy={`${app.devId}`}>
<div style="display: flex;"> <div style="display: flex;">
<div class="app-icon" style="color: {app.icon?.color || ''}"> <IconAvatar icon={app.icon?.name || "Apps"} color={app.icon?.color} />
<Icon size="XL" name={app.icon?.name || "Apps"} />
</div>
<div class="name" data-cy="app-name-link" on:click={() => editApp(app)}> <div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
<Heading size="XS"> <Heading size="XS">
{app.name} {app.name}