[Claim] Profile: vCOW balance (#2051)

# Summary Fixes #2007 Dropdown will be implemented in an other PR when we have all the data ready. ![image](https://user-images.githubusercontent.com/622217/148570769-6a25ce5a-89f4-4465-990f-b5d4328be421.png) ![image](https://user-images.githubusercontent.com/622217/148570838-09cbe75d-7370-4c12-abac-e8ff7ceadaaa.png) Before (dark backround on both themes): ![image](https://user-images.githubusercontent.com/622217/148277022-0b3ff8e3-1bf0-4330-add0-bbb2e90e8526.png) # To Test 1. Open the page [`Profile`](https://pr2051--gpswapui.review.gnosisdev.com/#/profile)
gnosis · Jan 7, 2022 · 6272c54 · 6272c54
1 parent 0bd3858
commit 6272c54
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 16 deletions.
diff --git a/src/custom/components/Page/index.tsx b/src/custom/components/Page/index.tsx
@@ -14,6 +14,9 @@ export const Title = styled.h1`
   font-size: 32px;
   margin: 24px 0 16px;
   color: ${({ theme }) => theme.text1};
+  ${({ theme }) => theme.mediaWidth.upToVerySmall`
+    font-size: 24px;
+  `}
 `
 
 export const Content = styled.div`

diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx
@@ -6,13 +6,16 @@ import {
   Container,
   GridWrap,
   CardHead,
-  StyledTitle,
   StyledContainer,
   StyledTime,
   ItemTitle,
   ChildWrapper,
   Loader,
   ExtLink,
+  VCOWBalance,
+  ProfileWrapper,
+  ProfileGridWrap,
+  ProfileFlexCol,
 } from 'pages/Profile/styled'
 import { useActiveWeb3React } from 'hooks/web3'
 import Copy from 'components/Copy/CopyMod'
@@ -28,6 +31,8 @@ import NotificationBanner from 'components/NotificationBanner'
 import { SupportedChainId as ChainId } from 'constants/chains'
 import AffiliateStatusCheck from 'components/AffiliateStatusCheck'
 import { useHasOrders } from 'api/gnosisProtocol/hooks'
+import CowProtocolLogo from 'components/CowProtocolLogo'
+import { Title } from 'components/Page'
 
 export default function Profile() {
   const referralLink = useReferralLink()
@@ -54,11 +59,27 @@ export default function Profile() {
 
   return (
     <Container>
+      <ProfileWrapper>
+        <ProfileGridWrap horizontal>
+          <CardHead>
+            <Title>Profile</Title>
+          </CardHead>
+          <VCOWBalance>
+            <CowProtocolLogo size={46} />
+            <ProfileFlexCol>
+              <Txt fs={14}>Balance</Txt>
+              <Txt fs={18}>
+                <strong>102,02 vCOW</strong>
+              </Txt>
+            </ProfileFlexCol>
+          </VCOWBalance>
+        </ProfileGridWrap>
+      </ProfileWrapper>
       {chainId && chainId === ChainId.MAINNET && <AffiliateStatusCheck />}
       <Wrapper>
         <GridWrap>
           <CardHead>
-            <StyledTitle>Profile overview</StyledTitle>
+            <Title>Affiliate Program</Title>
             {account && (
               <Loader isLoading={isLoading}>
                 <StyledContainer>

diff --git a/src/custom/pages/Profile/styled.tsx b/src/custom/pages/Profile/styled.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components/macro'
-import Page, { GdocsListStyle, Title } from 'components/Page'
+import Page, { GdocsListStyle } from 'components/Page'
 import * as CSS from 'csstype'
 import { transparentize } from 'polished'
 import { ExternalLink } from 'theme'
@@ -85,18 +85,6 @@ export const CardHead = styled.div`
   flex-direction: column;
 `
 
-export const StyledTitle = styled(Title)`
-  display: flex;
-  justify-content: flex-start;
-  margin: 0;
-  line-height: 1.21;
-  font-size: 26px;
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    justify-content: center;
-    font-size: 24px;
-  `}
-`
-
 export const StyledTime = styled.p`
   margin: 0;
 `
@@ -165,12 +153,13 @@ export const FlexCol = styled.div`
   span:not([role='img']) {
     font-size: 14px;
     color: ${({ theme }) => theme.text6};
-    min-height: 32px;
     text-align: center;
     display: flex;
     align-items: center;
+    padding: 8px 0 0 0;
   }
 `
+
 export const Loader = styled.div<{ isLoading: boolean }>`
   display: flex;
   flex: 1;
@@ -206,3 +195,52 @@ export const Loader = styled.div<{ isLoading: boolean }>`
       }
     `}
 `
+
+export const ProfileWrapper = styled(Wrapper)`
+  margin: 0 0 16px 0;
+  padding: 16px 24px;
+`
+
+export const ProfileFlexCol = styled.div`
+  display: flex;
+  flex-grow: 1;
+  align-items: flex-start;
+  flex-direction: column;
+
+  span {
+    padding: 0 8px;
+  }
+`
+export const ProfileGridWrap = styled(GridWrap)`
+  grid-template-columns: 1fr auto;
+  justify-content: space-between;
+  align-items: center;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    > :first-child,
+    > :nth-child(2) {
+      grid-column-start: auto;
+      grid-column-end: auto;
+    }
+  `};
+  ${({ theme }) => theme.mediaWidth.upToVerySmall`
+    > :first-child,
+    > :nth-child(2) {
+      grid-column-start: 1;
+      grid-column-end: 1;
+    }
+  `};
+`
+
+export const VCOWBalance = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-grow: 1;
+  min-width: 215px;
+  height: 56px;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 8px;
+  ${({ theme }) => theme.neumorphism.boxShadow};
+  background-color: ${({ theme }) => theme.bg7};
+`