🥸 Update header

packages/frontend/src/components/bids/allBids/Header.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import { KeyIcon } from '@/components/icons'
 import { Colors } from '@/styles/colors'
 import { useBids } from '@/providers/BidsProvider'
 import { HeaderBar } from '@/components/common/Header'
@@ -17,9 +16,6 @@ export const Header = () => {
           <Title>{bidList.length}</Title>
         </TitleColumn>
       </Wrapper>
-      <Key>
-        <KeyIcon />
-      </Key>
     </StyledHeader>
   )
 }
@@ -45,13 +41,6 @@ const TitleColumn = styled.div`
   row-gap: 8px;
 `
 
-const Key = styled.div`
-  position: absolute;
-  bottom: -5px;
-  right: 68px;
-  height: 225px;
-`
-
 const Title = styled.h2`
   background-color: ${Colors.White};
   padding: 4px 20px;

packages/frontend/src/components/common/Header.tsx

@@ -1,9 +1,23 @@
-import styled from 'styled-components'
+import { Colors } from '@/styles/colors'
+import styled, { css } from 'styled-components'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { DotsIcon } from '../icons'
+
+export const headerBackgroundStyles = css`
+  ${() => {
+    const svg = encodeURIComponent(renderToStaticMarkup(<DotsIcon />))
+    return `
+          background: url("data:image/svg+xml,${svg}") no-repeat;
+          background-size: cover;
+        `
+  }};
+`
 
 export const HeaderBar = styled.header`
   display: flex;
   flex-shrink: 0;
   width: 100%;
-  background: linear-gradient(to left, #7ec188 0%, #65c4e8 45.31%, #7779b5 100%);
+  background: ${Colors.White};
   position: relative;
+  ${headerBackgroundStyles}
 `

packages/frontend/src/components/icons/index.ts

@@ -7,11 +7,11 @@ export * from './CopyIcon'
 export * from './CrossIcon'
 export * from './EtherIcon'
 export * from './IconBase'
-export * from './KeyIcon'
 export * from './LoadingIcon'
 export * from './Logo'
 export * from './RedirectIcon'
 export * from './SearchIcon'
 export * from './TruefiLogoIcon'
 export * from './ClockIcon'
 export * from './InfoIcon'
+export * from './DotsIcon'

packages/frontend/src/components/info/Header.tsx

@@ -1,9 +1,7 @@
 import styled from 'styled-components'
-
 import { TimeLeft } from './TimeLeft'
 import { VoucherTimeLeft } from './VoucherTimeLeft'
 import { Colors } from '@/styles/colors'
-import { KeyIcon } from '@/components/icons'
 import { HeaderBar } from '@/components/common/Header'
 import { AuctionState, useAuctionState } from '@/blockchain/hooks/useAuctionState'
 
@@ -16,14 +14,11 @@ export const Header = () => {
         <HeaderWrapper>
           <InfoWrapper>
             <TitleWrapper>
-              <Title>Devcon 6</Title>
-              <SubTitle>Auction & Raffle Ticket Sale</SubTitle>
+              <Title>Devcon 7</Title>
+              <SubTitle>Ticket Sale</SubTitle>
             </TitleWrapper>
             <TimeLeft />
           </InfoWrapper>
-          <Key>
-            <KeyIcon />
-          </Key>
         </HeaderWrapper>
       </StyledHeader>
       {isClaimingFlow(state) && <VoucherTimeLeft />}
@@ -42,7 +37,7 @@ const Wrapper = styled.div`
 
 const StyledHeader = styled(HeaderBar)`
   height: 225px;
-  padding: 16px 125px 24px 68px;
+  padding: 16px 68px;
 `
 
 const HeaderWrapper = styled.div`
@@ -60,54 +55,24 @@ const InfoWrapper = styled.div`
   justify-content: space-between;
   height: 100%;
   width: 100%;
-  color: ${Colors.White};
-
-  @media screen and (min-width: 1800px) {
-    justify-content: flex-start;
-    row-gap: 40px;
-  }
 `
 
 const TitleWrapper = styled.div`
   display: flex;
   flex-direction: column;
-
-  @media screen and (min-width: 1800px) {
-    flex-direction: row;
-    align-items: flex-end;
-    column-gap: 20px;
-    padding-top: 16px;
-  }
+  align-items: flex-start;
 `
 
 const Title = styled.h1`
   background-color: ${Colors.White};
-
-  @media screen and (min-width: 1800px) {
-    line-height: 1;
-  }
+  padding: 0 10px;
 
   @media screen and (max-width: 1260px) {
     font-size: 40px;
   }
 `
 
 const SubTitle = styled.h3`
-  color: ${Colors.Black};
   background-color: ${Colors.White};
-`
-const Key = styled.div`
-  position: absolute;
-  top: -16px;
-  right: 0;
-  height: 225px;
-  opacity: 0.5;
-
-  @media screen and (max-width: 1240px) {
-    opacity: 0.2;
-  }
-
-  @media screen and (min-width: 1400px) {
-    opacity: 1;
-  }
+  padding: 0 10px;
 `

packages/frontend/src/components/info/TimeLeft.tsx

@@ -34,20 +34,15 @@ export const TimeLeft = () => {
 const TimeBox = styled.div`
   display: flex;
   flex-direction: column;
-  row-gap: 4px;
+  align-items: flex-start;
   font-family: 'Space Mono', 'Roboto Mono', monospace;
-  color: ${Colors.Black};
-
-  @media screen and (min-width: 1800px) {
-    flex-direction: row;
-    align-items: center;
-    column-gap: 40px;
-  }
 `
+
 const TimeRow = styled.div`
   display: flex;
   align-items: center;
   column-gap: 8px;
+  padding: 5px 10px;
   background-color: ${Colors.White};
 `
 

packages/frontend/src/utils/formatters/formatTimeLeft.ts

@@ -14,5 +14,5 @@ export function formatTimeLeft(timestamp: bigint | undefined, now = Date.now())
   const hours = padZeroes(duration.hours())
   const minutes = padZeroes(duration.minutes())
 
-  return `${days}d:${hours}h:${minutes}m`
+  return `${days}d ${hours}h ${minutes}m`
 }