diff --git a/packages/govern-console/src/components/Header/Header.tsx b/packages/govern-console/src/components/Header/Header.tsx index 6383a0560..36cdf528c 100644 --- a/packages/govern-console/src/components/Header/Header.tsx +++ b/packages/govern-console/src/components/Header/Header.tsx @@ -1,7 +1,8 @@ import governIcon from 'images/svgs/aragon-icon.svg'; import Wallet from 'components/Wallet/Wallet'; +import { BetaLabel } from 'components/Labels/BetaLabel'; import { useHistory } from 'react-router-dom'; -import { Button, StyledText, IconEdit, useLayout } from '@aragon/ui'; +import { Button, StyledText, IconEdit, useLayout, GU } from '@aragon/ui'; import styled from 'styled-components'; import { networkEnvironment } from 'environment'; @@ -16,6 +17,8 @@ const Title = styled.div` display: flex; width: fit-content; cursor: pointer; + align-items: center; + column-gap: ${GU}px; `; const RigtSideContainer = styled.div` @@ -45,6 +48,7 @@ const Header = () => { <img src={governIcon} width={layoutName !== 'small' ? '182px' : '162px'} /> + <BetaLabel>Beta</BetaLabel> {layoutName !== 'small' && ( diff --git a/packages/govern-console/src/components/Labels/BetaLabel.tsx b/packages/govern-console/src/components/Labels/BetaLabel.tsx new file mode 100644 index 000000000..c7ee6be8b --- /dev/null +++ b/packages/govern-console/src/components/Labels/BetaLabel.tsx @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +export const BetaLabel = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + width: 43px; + height: 19px; + left: calc(50% - 43px / 2 - 549.5px); + top: calc(50% - 19px / 2 - 750px); + + font-family: Manrope; + font-size: 12px; + font-weight: 600; + + border-radius: 40px; + color: white; + margin-top: 5px; + background: linear-gradient(107.79deg, #00c2ff, #01e8f7); +`;