From 30ce08dcefdeb20c8f1bc5feaf6df58885c27ffe Mon Sep 17 00:00:00 2001
From: Maria Rushkova <maria.rushkova@trusttoken.com>
Date: Wed, 24 Apr 2024 18:08:11 +0200
Subject: [PATCH] Update colors in components

---
 packages/frontend/src/components/form/Input.tsx    | 2 +-
 packages/frontend/src/components/info/Header.tsx   | 5 ++++-
 packages/frontend/src/components/info/TimeLeft.tsx | 3 +++
 packages/frontend/src/pages/bids.tsx               | 2 +-
 packages/frontend/src/styles/GobalStyles.tsx       | 5 +----
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/form/Input.tsx b/packages/frontend/src/components/form/Input.tsx
index 9c2429bf..52ec6c51 100644
--- a/packages/frontend/src/components/form/Input.tsx
+++ b/packages/frontend/src/components/form/Input.tsx
@@ -108,7 +108,7 @@ export const InputLabel = styled.div`
   width: 100%;
   max-width: 100%;
   margin-bottom: 4px;
-  color: ${Colors.White};
+  color: ${Colors.Black};
   font-size: 12px;
   line-height: 18px;
 `
diff --git a/packages/frontend/src/components/info/Header.tsx b/packages/frontend/src/components/info/Header.tsx
index 9a2a850f..5a8d8663 100644
--- a/packages/frontend/src/components/info/Header.tsx
+++ b/packages/frontend/src/components/info/Header.tsx
@@ -81,6 +81,8 @@ const TitleWrapper = styled.div`
 `
 
 const Title = styled.h1`
+  background-color: ${Colors.White};
+
   @media screen and (min-width: 1800px) {
     line-height: 1;
   }
@@ -91,7 +93,8 @@ const Title = styled.h1`
 `
 
 const SubTitle = styled.h3`
-  color: ${Colors.White};
+  color: ${Colors.Black};
+  background-color: ${Colors.White};
 `
 const Key = styled.div`
   position: absolute;
diff --git a/packages/frontend/src/components/info/TimeLeft.tsx b/packages/frontend/src/components/info/TimeLeft.tsx
index d411b130..657dcf2b 100644
--- a/packages/frontend/src/components/info/TimeLeft.tsx
+++ b/packages/frontend/src/components/info/TimeLeft.tsx
@@ -5,6 +5,7 @@ import { formatDate } from '@/utils/formatters/formatDate'
 import { setIntervalImmediately } from '@/utils/setIntervalImmediately'
 import { useAuctionState } from '@/blockchain/hooks/useAuctionState'
 import { useAuctionTime } from '@/blockchain/hooks/useAuctionTime'
+import { Colors } from '@/styles/colors'
 
 export const TimeLeft = () => {
   const timestamp = useAuctionTime()
@@ -35,6 +36,7 @@ const TimeBox = styled.div`
   flex-direction: column;
   row-gap: 4px;
   font-family: 'Space Mono', 'Roboto Mono', monospace;
+  color: ${Colors.Black};
 
   @media screen and (min-width: 1800px) {
     flex-direction: row;
@@ -46,6 +48,7 @@ const TimeRow = styled.div`
   display: flex;
   align-items: center;
   column-gap: 8px;
+  background-color: ${Colors.White};
 `
 
 export const RemainingTime = styled.span`
diff --git a/packages/frontend/src/pages/bids.tsx b/packages/frontend/src/pages/bids.tsx
index 51c4c8ba..258961ee 100644
--- a/packages/frontend/src/pages/bids.tsx
+++ b/packages/frontend/src/pages/bids.tsx
@@ -18,5 +18,5 @@ const Body = styled.div`
   align-items: center;
   flex: 1;
   width: 100%;
-  background: ${Colors.GreyLight};
+  background: ${Colors.White};
 `
diff --git a/packages/frontend/src/styles/GobalStyles.tsx b/packages/frontend/src/styles/GobalStyles.tsx
index 926eea27..a9384522 100644
--- a/packages/frontend/src/styles/GobalStyles.tsx
+++ b/packages/frontend/src/styles/GobalStyles.tsx
@@ -41,6 +41,7 @@ export const GlobalStyles = createGlobalStyle`
     font-family: 'Space Mono', 'Roboto Mono', monospace;
     font-style: normal;
     margin: 0;
+    color: ${Colors.Black};
   }
 
   h1 {
@@ -48,7 +49,6 @@ export const GlobalStyles = createGlobalStyle`
     font-weight: 700;
     font-size: 55px;
     line-height: 1.2;
-    color: ${Colors.White};
   }
 
   h2 {
@@ -56,7 +56,6 @@ export const GlobalStyles = createGlobalStyle`
     font-weight: 700;
     font-size: 40px;
     line-height: 1.2;
-    color: ${Colors.White};
   }
 
   h3 {
@@ -64,7 +63,6 @@ export const GlobalStyles = createGlobalStyle`
     font-size: 24px;
     font-weight: 700;
     line-height: 36px;
-    color: ${Colors.Black};
   }
 
   h4 {
@@ -72,7 +70,6 @@ export const GlobalStyles = createGlobalStyle`
     font-weight: 700;
     font-size: 20px;
     line-height: 30px;
-    color: ${Colors.Black};
   }
 
   p {