storj/web/satellite/src/components/infoBars/BetaSatBar.vue
Vitalii Shpital 9773197c61 web/satellite: new nav account area and vertical layout fixes
Added account area and dropdown for new navigation sidebar.
Fixed vertical layout for new and old nav structures depending on top info bars amount.

Change-Id: I238ba1f899d27d7fd9b865b0c17b0bfd7cff47ad
2021-10-20 13:57:14 +00:00

75 lines
2.0 KiB
Vue

// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="beta-banner">
<p class="beta-banner__message">
Thanks for testing the {{ satelliteName }} Beta satellite | Data may be deleted during this beta | Submit testing feedback
<a class="beta-banner__message__link" :href="betaFeedbackURL" target="_blank" rel="noopener noreferrer">here</a>
| Request support
<a class="beta-banner__message__link" :href="betaSupportURL" target="_blank" rel="noopener noreferrer">here</a>
</p>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { MetaUtils } from "@/utils/meta";
// @vue/component
@Component
export default class BetaSatBar extends Vue {
/**
* Returns satellite name from store (config).
*/
public get satelliteName(): string {
return MetaUtils.getMetaContent('satellite-name');
}
/**
* Returns feedback URL from config for beta satellites.
*/
public get betaFeedbackURL(): string {
return MetaUtils.getMetaContent('beta-satellite-feedback-url');
}
/**
* Returns support URL from config for beta satellites.
*/
public get betaSupportURL(): string {
return MetaUtils.getMetaContent('beta-satellite-support-url');
}
}
</script>
<style scoped lang="scss">
.beta-banner {
width: calc(100% - 60px);
padding: 5px 30px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'font_regular', sans-serif;
background-color: red;
&__message {
font-weight: normal;
font-size: 14px;
line-height: 16px;
color: #fff;
&__link {
font-size: 14px;
line-height: 16px;
color: #fff;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
}
</style>