Update feedback icon to be in line with new UI

This commit is contained in:
Andrew Kingston 2020-10-28 10:59:43 +00:00
parent cd1bfa2580
commit e61f3eb8cd
2 changed files with 19 additions and 24 deletions

View File

@ -1,5 +1,4 @@
<script>
import { FeedbackIcon } from "components/common/Icons/"
import { Popover } from "@budibase/bbui"
import { store } from "builderStore"
@ -16,41 +15,37 @@
}, FIVE_MINUTES)
</script>
<span
class="container"
bind:this={iconContainer}
on:click={popover.show}
class:highlight={$store.highlightFeedbackIcon}>
<FeedbackIcon />
</span>
<div class="container" bind:this={iconContainer} on:click={popover.show}>
<i class="ri-feedback-line" class:highlight={$store.highlightFeedbackIcon} />
</div>
<Popover bind:this={popover} anchor={iconContainer} align="right">
<FeedbackIframe on:finished={popover.hide} />
</Popover>
<style>
i {
font-size: 18px;
color: var(--grey-7);
}
i.highlight {
color: var(--blue);
filter: drop-shadow(0 0 20px var(--blue));
}
.container {
cursor: pointer;
color: var(--grey-7);
margin: 0 20px 0 0;
margin: 0 12px 0 0;
font-weight: 500;
font-size: 1rem;
height: 100%;
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
height: 24px;
width: 24px;
}
.container:hover {
.container:hover i {
color: var(--ink);
font-weight: 500;
}
.highlight {
color: var(--blue);
}
.highlight > :global(svg) {
filter: drop-shadow(0 0 20px var(--blue));
}
</style>

View File

@ -67,7 +67,6 @@
</div>
<div class="toprightnav">
<FeedbackNavLink />
<SettingsLink />
<div class="topnavitemright">
<a target="_blank" href="https://docs.budibase.com">
<i class="ri-question-line" />
@ -80,6 +79,7 @@
<i class="ri-discuss-line" />
</a>
</div>
<SettingsLink />
<Button
secondary
on:click={() => {