Merge pull request #478 from lidofinance/feature/we-1128-fix-underlin…

…ed-privacy-notice-link-cookies-banner feat: update cookie banner styles + text
lidofinance · Feb 27, 2024 · 1f6fc29 · 1f6fc29
2 parents ec08553 + 7e20c70
commit 1f6fc29
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 41 deletions.
diff --git a/packages/cookies-tooltip/cookies-tooltip.tsx b/packages/cookies-tooltip/cookies-tooltip.tsx
@@ -1,16 +1,13 @@
 import { FC, useEffect, useState, useCallback } from 'react'
-import { Cookie, CookieInverse } from '../icons/index.js'
-import { ContentTheme } from '../content-theme/index.js'
 import { getCrossDomainCookieClientSide } from '../utils/index.js'
 import {
   Wrap,
   Box,
-  CookieIconWrap,
   Text,
   ButtonsWrap,
   AllowButton,
   DeclineButton,
-  Link,
+  ExternalLink,
 } from './styles.js'
 import { allowCookies, declineCookies } from './utils.js'
 import { COOKIE_ALLOWED_KEY } from './constants.js'
@@ -44,17 +41,12 @@ export const CookiesTooltip: FC = () => {
   return (
     <Wrap>
       <Box>
-        <CookieIconWrap>
-          <ContentTheme
-            darkContent={<CookieInverse />}
-            lightContent={<Cookie />}
-          />
-        </CookieIconWrap>
         <Text>
-          We use cookies to collect anonymous site visitation data
-          to&nbsp;improve performance of&nbsp;our&nbsp;website. For&nbsp;more
-          info, read our&nbsp;
-          <Link href='https://lido.fi/privacy-notice'>Privacy Notice</Link>
+          Cookies are used to collect anonymous site visitation data
+          to&nbsp;improve website performance. For&nbsp;more info, read&nbsp;
+          <ExternalLink href='https://lido.fi/privacy-notice'>
+            Privacy Notice
+          </ExternalLink>
         </Text>
         <ButtonsWrap>
           <AllowButton

diff --git a/packages/cookies-tooltip/styles.tsx b/packages/cookies-tooltip/styles.tsx
@@ -1,10 +1,16 @@
 import styled from '../utils/styled-components-wrapper.js'
 
-const ExternalLink = styled.a.attrs({
+export const ExternalLink = styled.a.attrs({
   target: '_blank',
   rel: 'nofollow noopener',
 })`
   cursor: pointer;
+  color: var(--lido-color-primary);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--lido-color-primaryHover);
+  }
 `
 
 export const Wrap = styled.div`
@@ -39,27 +45,13 @@ export const Box = styled.div`
   }
 `
 
-export const CookieIconWrap = styled.div`
-  margin-right: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    display: none;
-  }
-`
-
 export const Text = styled.div`
   margin-right: 8px;
   font-weight: 500;
   font-size: 14px;
   line-height: 22px;
   color: var(--lido-color-textSecondary);
-  width: 340px;
+  max-width: 500px;
 
   ${({ theme }) => theme.mediaQueries.lg} {
     margin-right: 0;
@@ -106,11 +98,11 @@ const ButtonBasic = styled.button.attrs({ type: 'button' })`
 `
 
 export const AllowButton = styled(ButtonBasic)`
-  background-color: var(--lido-color-text);
-  color: var(--lido-color-foreground);
+  background-color: var(--lido-color-secondary);
+  color: var(--lido-color-secondaryContrast);
 
   &:hover {
-    background-color: var(--lido-color-textSecondary);
+    background-color: var(--lido-color-secondaryHover);
   }
 `
 
@@ -120,11 +112,7 @@ export const DeclineButton = styled(ButtonBasic)`
   border: 1px solid var(--lido-color-text);
 
   &:hover {
-    background-color: var(--lido-color-background);
+    background-color: var(--lido-color-secondary);
+    color: var(--lido-color-secondaryContrast);
   }
 `
-
-export const Link = styled(ExternalLink)`
-  color: inherit;
-  text-decoration: underline !important;
-`
diff --git a/packages/theme/themes.ts b/packages/theme/themes.ts
@@ -62,8 +62,8 @@ export const themeDark = {
     lightDisplay: 'none',
     darkDisplay: 'initial',
 
-    secondary: 'rgba(255, 255, 255, .8)',
-    secondaryHover: '#fff',
+    secondary: '#fff',
+    secondaryHover: '#F5F5F7',
     secondaryContrast: '#273852',
 
     background: '#1c1c21',