web/satellite: small styling updates for access grant flow
Fixed Copy and Download buttons. Fixed wording styling. Also fixed VButton's hover state if there is an icon. Issue: https://github.com/storj/storj/issues/5774 Change-Id: I9fbac12fe433817f4b5fc1d885f50e6f27e7f6a0
This commit is contained in:
Vitalii
Storj Robot
parent
73898e0d86
commit
a8ba7aa263
@ -9,7 +9,7 @@
|
||||
rel="noopener noreferrer"
|
||||
@click="trackPageVisit"
|
||||
>
|
||||
<LearnIcon v-if="withIcon" />
|
||||
<LearnIcon v-if="withIcon" class="link-button__icon" />
|
||||
<p class="link-button__label">{{ label }}</p>
|
||||
</a>
|
||||
</template>
|
||||
@ -48,13 +48,16 @@ function trackPageVisit(): void {
|
||||
border: 1px solid #d8dee3;
|
||||
border-radius: 8px;
|
||||
|
||||
&__icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.02em;
|
||||
color: #56606d;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
height="40px"
|
||||
font-size="14px"
|
||||
:on-press="onCopy"
|
||||
:icon="isCopied ? 'none' : 'copy'"
|
||||
:icon="isCopied ? 'check' : 'copy'"
|
||||
:is-white="!isCopied"
|
||||
:is-white-green="isCopied"
|
||||
/>
|
||||
@ -26,9 +26,9 @@
|
||||
height="40px"
|
||||
font-size="14px"
|
||||
:on-press="onDownload"
|
||||
:icon="isDownloaded ? 'none' : 'download'"
|
||||
:icon="isDownloaded ? 'check' : 'download'"
|
||||
:is-white="!isDownloaded"
|
||||
:is-green-white="isDownloaded"
|
||||
:is-white-green="isDownloaded"
|
||||
/>
|
||||
</template>
|
||||
</ButtonsContainer>
|
||||
|
||||
@ -211,11 +211,10 @@ function isSelectedOption(option: PassphraseOption): boolean {
|
||||
}
|
||||
|
||||
&__disclaimer {
|
||||
font-weight: bold;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: var(--c-black);
|
||||
font-style: italic;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
height="40px"
|
||||
font-size="14px"
|
||||
:on-press="onCopy"
|
||||
:icon="isCopied ? 'none' : 'copy'"
|
||||
:icon="isCopied ? 'check' : 'copy'"
|
||||
:is-white="!isCopied"
|
||||
:is-white-green="isCopied"
|
||||
/>
|
||||
@ -26,9 +26,9 @@
|
||||
height="40px"
|
||||
font-size="14px"
|
||||
:on-press="onDownload"
|
||||
:icon="isDownloaded ? 'none' : 'download'"
|
||||
:icon="isDownloaded ? 'check' : 'download'"
|
||||
:is-white="!isDownloaded"
|
||||
:is-green-white="isDownloaded"
|
||||
:is-white-green="isDownloaded"
|
||||
/>
|
||||
</template>
|
||||
</ButtonsContainer>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
height="40px"
|
||||
font-size="14px"
|
||||
:on-press="onCopy"
|
||||
:icon="isPassphraseCopied ? 'none' : 'copy'"
|
||||
:icon="isPassphraseCopied ? 'check' : 'copy'"
|
||||
:is-white="!isPassphraseCopied"
|
||||
:is-white-green="isPassphraseCopied"
|
||||
/>
|
||||
@ -31,9 +31,9 @@
|
||||
height="40px"
|
||||
font-size="14px"
|
||||
:on-press="onDownload"
|
||||
:icon="isPassphraseDownloaded ? 'none' : 'download'"
|
||||
:icon="isPassphraseDownloaded ? 'check' : 'download'"
|
||||
:is-white="!isPassphraseDownloaded"
|
||||
:is-green-white="isPassphraseDownloaded"
|
||||
:is-white-green="isPassphraseDownloaded"
|
||||
/>
|
||||
</template>
|
||||
</ButtonsContainer>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
height="40px"
|
||||
font-size="14px"
|
||||
:on-press="onCopy"
|
||||
:icon="isCopied ? 'none' : 'copy'"
|
||||
:icon="isCopied ? 'check' : 'copy'"
|
||||
:is-white="!isCopied"
|
||||
:is-white-green="isCopied"
|
||||
/>
|
||||
@ -26,9 +26,9 @@
|
||||
height="40px"
|
||||
font-size="14px"
|
||||
:on-press="onDownload"
|
||||
:icon="isDownloaded ? 'none' : 'download'"
|
||||
:icon="isDownloaded ? 'check' : 'download'"
|
||||
:is-white="!isDownloaded"
|
||||
:is-green-white="isDownloaded"
|
||||
:is-white-green="isDownloaded"
|
||||
/>
|
||||
</template>
|
||||
</ButtonsContainer>
|
||||
|
||||
@ -55,6 +55,7 @@ import { computed, VueConstructor } from 'vue';
|
||||
import WhitePlusIcon from '@/../static/images/common/plusWhite.svg';
|
||||
import AddCircleIcon from '@/../static/images/common/addCircle.svg';
|
||||
import CopyIcon from '@/../static/images/common/copyButtonIcon.svg';
|
||||
import CheckIcon from '@/../static/images/common/check.svg';
|
||||
import TrashIcon from '@/../static/images/accessGrants/trashIcon.svg';
|
||||
import LockIcon from '@/../static/images/common/lockIcon.svg';
|
||||
import CreditCardIcon from '@/../static/images/common/creditCardIcon-white.svg';
|
||||
@ -107,6 +108,7 @@ const props = withDefaults(defineProps<{
|
||||
|
||||
const icons = new Map<string, VueConstructor>([
|
||||
['copy', CopyIcon],
|
||||
['check', CheckIcon],
|
||||
['download', DownloadIcon],
|
||||
['lock', LockIcon],
|
||||
['credit-card', CreditCardIcon],
|
||||
@ -222,6 +224,11 @@ function handleClick(): void {
|
||||
.label {
|
||||
color: var(--c-green-5) !important;
|
||||
}
|
||||
|
||||
:deep(path),
|
||||
:deep(rect) {
|
||||
fill: var(--c-green-5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
@ -296,7 +303,6 @@ function handleClick(): void {
|
||||
|
||||
.label {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
@ -314,8 +320,7 @@ function handleClick(): void {
|
||||
|
||||
:deep(path),
|
||||
:deep(rect) {
|
||||
stroke: white;
|
||||
fill: white;
|
||||
fill: white !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.0566 3.47049C14.4085 3.82234 14.417 4.38746 14.0824 4.74971L14.0566 4.77649L7.13828 11.6948C7.00267 11.8304 6.83611 11.9169 6.66103 11.9539C6.35999 12.0545 6.01479 11.991 5.76674 11.7589L5.75597 11.7487L1.87049 7.86338C1.50985 7.50274 1.50985 6.91803 1.87049 6.55739C2.22233 6.20555 2.78745 6.19696 3.1497 6.53165L3.17648 6.55739L6.42022 9.80089L12.7506 3.47049C13.1113 3.10985 13.696 3.10985 14.0566 3.47049Z" fill="white"/>
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.5566 3.47068C14.9085 3.82252 14.917 4.38764 14.5824 4.74989L14.5566 4.77667L7.63828 11.695C7.50267 11.8306 7.33611 11.9171 7.16103 11.9541C6.85999 12.0546 6.51479 11.9912 6.26674 11.7591L6.25597 11.7489L2.37049 7.86357C2.00985 7.50293 2.00985 6.91821 2.37049 6.55757C2.72233 6.20573 3.28745 6.19715 3.6497 6.53183L3.67648 6.55757L6.92022 9.80107L13.2506 3.47068C13.6113 3.11004 14.196 3.11004 14.5566 3.47068Z" fill="#ffffff"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 542 B After Width: | Height: | Size: 544 B |
Loading…
Reference in New Issue
Block a user