Replace colors with new ones

TrueFiEng · Apr 24, 2024 · 0c0d20f · 0c0d20f
1 parent 0a57786
commit 0c0d20f
Show file tree

Hide file tree

Showing 24 changed files with 43 additions and 70 deletions.
diff --git a/packages/frontend/src/components/bids/BidsColumns.tsx b/packages/frontend/src/components/bids/BidsColumns.tsx
@@ -15,10 +15,7 @@ export const PlaceColumn = styled.span`
 
 export const BidColumn = styled.div`
   grid-area: bid;
-
-  & > span {
-    color: ${Colors.GreyDark};
-  }
+  color: ${Colors.Black};
 `
 
 export const AddressColumn = styled.span`

diff --git a/packages/frontend/src/components/bids/BidsListEntry.tsx b/packages/frontend/src/components/bids/BidsListEntry.tsx
@@ -57,6 +57,6 @@ const BidsEntryRow = styled.div<{ isUser?: boolean }>`
 const AddressLink = styled.a`
   font-family: 'Space Mono', 'Roboto Mono', monospace;
   font-style: normal;
-  color: ${Colors.Blue};
+  color: ${Colors.Black};
   text-decoration: none;
 `
diff --git a/packages/frontend/src/components/bids/allBids/AllBids.tsx b/packages/frontend/src/components/bids/allBids/AllBids.tsx
@@ -9,6 +9,7 @@ import { SearchInput } from '@/components/form/SearchInput'
 import { useContractState } from '@/blockchain/hooks/useAuctionState'
 import { isAuctionSettled } from '@/utils/isAuctionSettled'
 import { SettledBidsList } from '@/components/bids/allBids/SettledBidsList'
+import { Colors } from '@/styles/colors'
 
 export const AllBids = () => {
   const [search, setSearch] = useState('')
@@ -57,4 +58,5 @@ const PageContainer = styled.div`
   width: 100%;
   max-width: 780px;
   padding: 28px 0 56px;
+  background-color: ${Colors.White};
 `
diff --git a/packages/frontend/src/components/bids/allBids/BidsSubList.tsx b/packages/frontend/src/components/bids/allBids/BidsSubList.tsx
@@ -33,7 +33,7 @@ const TitleBanner = styled.div`
   align-items: center;
   width: 100%;
   padding: 4px 0;
-  background-color: ${Colors.GreenLight};
+  background-color: ${Colors.GreyLight};
 `
 
 const SubListHeader = styled.h3`

diff --git a/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx b/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx
@@ -30,7 +30,7 @@ const Container = styled.div`
   align-items: center;
   width: 100%;
   height: 90px;
-  background-color: ${Colors.GreenLight};
+  background-color: ${Colors.Pink};
 `
 
 const Section = styled.div`
@@ -60,6 +60,6 @@ const HeaderText = styled.h3`
 const AddressLink = styled.a`
   font-family: 'Space Mono', 'Roboto Mono', monospace;
   font-style: normal;
-  color: ${Colors.Blue};
+  color: ${Colors.Black};
   text-decoration: none;
 `
diff --git a/packages/frontend/src/components/bids/allBids/Header.tsx b/packages/frontend/src/components/bids/allBids/Header.tsx
@@ -53,5 +53,5 @@ const Key = styled.div`
 `
 
 const Number = styled.h2`
-  color: ${Colors.BlueDark};
+  color: ${Colors.Black};
 `
diff --git a/packages/frontend/src/components/bids/bidsShortList/BidsShortListSection.tsx b/packages/frontend/src/components/bids/bidsShortList/BidsShortListSection.tsx
@@ -72,5 +72,5 @@ const EmptyList = styled.div`
 `
 const ColoredText = styled.h3`
   width: max-content;
-  color: ${Colors.Blue};
+  color: ${Colors.Black};
 `
diff --git a/packages/frontend/src/components/buttons/BackButton.tsx b/packages/frontend/src/components/buttons/BackButton.tsx
@@ -45,7 +45,7 @@ const BackBtn = styled.button<{ $withBack?: boolean }>`
   font-size: 16px;
   line-height: 24px;
   background-color: ${Colors.Transparent};
-  color: ${Colors.GreenLight};
+  color: ${Colors.Black};
   border: 1px solid ${Colors.Black};
   padding: 0;
 

diff --git a/packages/frontend/src/components/buttons/Button.tsx b/packages/frontend/src/components/buttons/Button.tsx
@@ -55,33 +55,24 @@ const commonButtonStyles = css<ButtonProps>`
 const PrimaryButtonStyles = css<ButtonProps>`
   ${commonButtonStyles};
 
-  background-color: ${Colors.GreenLight};
-  color: ${Colors.Black};
-
-  &:hover,
-  &:focus-visible {
-    background-color: ${Colors.Green};
-  }
-
-  &:active {
-    background-color: ${Colors.GreenDark};
-  }
+  background-color: ${Colors.Black};
+  color: ${Colors.White};
 `
 
 const SecondaryButtonStyles = css<ButtonProps>`
   ${commonButtonStyles};
 
   background-color: ${Colors.White};
-  color: ${Colors.Blue};
-  border: 1px solid ${Colors.Blue};
+  color: ${Colors.Black};
+  border: 1px solid ${Colors.Black};
 
-  &:hover,
+  &:hover:enabled,
   &:focus-visible {
-    background-color: ${Colors.BlueLight};
+    background-color: ${Colors.Pink};
   }
 
   &:active {
-    background-color: ${Colors.BlueLight};
+    background-color: ${Colors.Pink};
   }
 `
 

diff --git a/packages/frontend/src/components/common/Separator.tsx b/packages/frontend/src/components/common/Separator.tsx
@@ -12,7 +12,7 @@ export const Separator = ({ orientation = 'horizontal', color }: SeparatorElemen
 }
 
 const SeparatorElement = styled(SeparatorPrimitive.Root)<SeparatorElementProps>`
-  background-color: ${({ color }) => (color ? color : Colors.GreenLight)};
+  background-color: ${({ color }) => (color ? color : Colors.Grey)};
 
   &[data-orientation='horizontal'] {
     height: 1px;

diff --git a/packages/frontend/src/components/form/Input.tsx b/packages/frontend/src/components/form/Input.tsx
@@ -129,7 +129,7 @@ const StyledInputWrapper = styled.div<{ isBadAmount?: boolean; disabled?: boolea
   &:hover,
   &:focus-visible,
   &:focus-within {
-    border-color: ${({ isBadAmount }) => (isBadAmount ? Colors.Red : Colors.GreenLight)};
+    border-color: ${({ isBadAmount }) => (isBadAmount ? Colors.Red : Colors.White)};
   }
 `
 

diff --git a/packages/frontend/src/components/form/SearchInput.tsx b/packages/frontend/src/components/form/SearchInput.tsx
@@ -34,15 +34,9 @@ const SearchInputWrapper = styled.div`
   margin-bottom: 8px;
   border-width: 2px;
   border-style: solid;
-  border-color: ${Colors.GreenLight};
+  border-color: ${Colors.GreyLight};
   background-color: ${Colors.White};
   transition: all 0.25s ease;
-
-  &:hover,
-  &:focus-visible,
-  &:focus-within {
-    border-color: ${Colors.Green};
-  }
 `
 
 const StyledInput = styled.input`
@@ -67,6 +61,6 @@ const StyledInput = styled.input`
   }
 
   &::placeholder {
-    color: ${Colors.Grey};
+    color: ${Colors.Black};
   }
 `
diff --git a/packages/frontend/src/components/info/Accordion.tsx b/packages/frontend/src/components/info/Accordion.tsx
@@ -222,7 +222,7 @@ const StyledTrigger = styled(Accordion.AccordionTrigger)`
   font-family: 'Space Mono', 'Roboto Mono', monospace;
   font-style: normal;
   border: none;
-  background-color: ${Colors.GreenLight};
+  background-color: ${Colors.GreyLight};
   text-align: left;
   font-size: 20px;
   line-height: 1.5;
@@ -263,12 +263,12 @@ const AccordionArrow = styled(ArrowDownIcon)`
 `
 
 const Link = styled.a`
-  color: ${Colors.Blue};
+  color: ${Colors.Black};
   text-decoration: underline;
 `
 
 const BulletList = styled.ul`
-  color: ${Colors.Blue};
+  color: ${Colors.Black};
   margin: 0;
 `
 

diff --git a/packages/frontend/src/components/info/Rules.tsx b/packages/frontend/src/components/info/Rules.tsx
@@ -44,6 +44,6 @@ export const RuleText = styled.div`
 `
 
 const RuleExample = styled.p`
-  color: ${Colors.BlueDark};
+  color: ${Colors.Black};
   margin: 0;
 `
diff --git a/packages/frontend/src/components/info/VoucherTimeLeft.tsx b/packages/frontend/src/components/info/VoucherTimeLeft.tsx
@@ -29,7 +29,7 @@ interface TimeProps {
 const VoucherTimeBox = styled.div<TimeProps>`
   width: calc(100% - 54px);
   padding: 8px 24px 8px 68px;
-  background: ${({ isPeriodExpired }) => (isPeriodExpired ? Colors.RedLight : Colors.Blue)};
+  background: ${({ isPeriodExpired }) => (isPeriodExpired ? Colors.Red : Colors.Black)};
 `
 const TimeRow = styled.div<TimeProps>`
   display: flex;
@@ -39,5 +39,5 @@ const TimeRow = styled.div<TimeProps>`
   margin: 0 auto;
   max-width: 1112px;
   font-family: 'Space Mono', 'Roboto Mono', monospace;
-  color: ${({ isPeriodExpired }) => (isPeriodExpired ? Colors.RedDark : Colors.White)};
+  color: ${({ isPeriodExpired }) => (isPeriodExpired ? Colors.Red : Colors.White)};
 `
diff --git a/packages/frontend/src/components/stepper/Stepper.tsx b/packages/frontend/src/components/stepper/Stepper.tsx
@@ -49,7 +49,7 @@ interface ListItemProps {
 const StepperListItem = ({ step, status, type }: ListItemProps) => (
   <StepperListItemContainer type={type} status={status}>
     <StepperBullet type={type} status={status}>
-      {type === 'failure' && <CrossIcon size={16} color={Colors.RedDark} />}
+      {type === 'failure' && <CrossIcon size={16} color={Colors.Red} />}
     </StepperBullet>
     <StepperItemName next={status === 'next'}>{step.name}</StepperItemName>
     <StepperItemDescription current={status === 'current'}>{step.description}</StepperItemDescription>
@@ -75,7 +75,7 @@ function getItemColor(props: DisplayTypeProps) {
 const typeToItemColor: Record<StepType, string> = {
   neutral: Colors.Black,
   success: Colors.Black,
-  failure: Colors.RedDark,
+  failure: Colors.Red,
 }
 
 const StepperListItemContainer = styled.li<DisplayTypeProps>`
@@ -157,7 +157,7 @@ const typeToBulletBackground: Record<StepType, string> = {
 
 const typeToBulletColor: Record<StepType, string> = {
   neutral: Colors.Black,
-  failure: Colors.RedDark,
+  failure: Colors.Red,
   success: Colors.Black,
 }
 

diff --git a/packages/frontend/src/components/tooltip/TooltipButton.tsx b/packages/frontend/src/components/tooltip/TooltipButton.tsx
@@ -29,7 +29,7 @@ const TooltipButtonComponent = styled(Button)<Pick<TooltipButtonProps, 'color' |
 
   &:hover,
   &:focus-visible {
-    color: ${Colors.BlueDark};
-    background-color: ${Colors.GreenLight};
+    color: ${Colors.Black};
+    background-color: ${Colors.Pink};
   }
 `
diff --git a/packages/frontend/src/components/tooltip/TooltipLink.tsx b/packages/frontend/src/components/tooltip/TooltipLink.tsx
@@ -31,7 +31,7 @@ const TooltipLinkComponent = styled.a<Pick<TooltipLinkProps, 'color' | 'label'>>
 
   &:hover,
   &:focus-visible {
-    color: ${Colors.BlueDark};
-    background-color: ${Colors.GreenLight};
+    color: ${Colors.Black};
+    background-color: ${Colors.Pink};
   }
 `
diff --git a/packages/frontend/src/components/topBar/AccountDetailModal.tsx b/packages/frontend/src/components/topBar/AccountDetailModal.tsx
@@ -38,14 +38,14 @@ export const AccountDetailModal = ({ isShown, onRequestClose }: ModalProps) => {
               <RedirectButton
                 link={explorerLink ?? ''}
                 tooltip="View on Arbiscan"
-                color={Colors.Blue}
+                color={Colors.Black}
                 label=" View in block explorer"
                 side="top"
               />
               <CopyButton
                 value={address}
                 text="Copy account address"
-                color={Colors.Blue}
+                color={Colors.Black}
                 label="Copy address"
                 side="top"
               />

diff --git a/packages/frontend/src/components/topBar/Modal.tsx b/packages/frontend/src/components/topBar/Modal.tsx
@@ -32,7 +32,7 @@ export const Modal = ({ isShown, onRequestClose, title, children }: ModalProps)
 }
 
 const Overlay = styled(Dialog.Overlay)`
-  background-color: ${hexOpacity(Colors.Blue, 0.8)};
+  background-color: ${hexOpacity(Colors.Pink, 0.8)};
   position: fixed;
   top: 0;
   left: 0;

diff --git a/packages/frontend/src/components/userActious/gitcoin/InsufficientUserScore.tsx b/packages/frontend/src/components/userActious/gitcoin/InsufficientUserScore.tsx
@@ -14,7 +14,7 @@ export const InsufficientUserScore = ({ userScore }: UserScoreProps) => {
         Your Score:&nbsp;<Score>{userScore}</Score>
       </FormHeading>
       <ErrorContent>
-        <InfoIcon color={Colors.RedDark} size={24} />
+        <InfoIcon color={Colors.Red} size={24} />
         <p>Your score is too low!</p>
       </ErrorContent>
       <FormRow>
@@ -38,13 +38,13 @@ export const InsufficientUserScore = ({ userScore }: UserScoreProps) => {
 }
 
 const Score = styled.span`
-  color: ${Colors.RedDark};
+  color: ${Colors.Red};
 `
 
 const ErrorContent = styled.div`
   display: flex;
   gap: 8px;
-  color: ${Colors.RedDark};
+  color: ${Colors.Red};
 `
 
 const Link = styled.a`

diff --git a/packages/frontend/src/components/userActious/gitcoin/MissingGitcoinPassport.tsx b/packages/frontend/src/components/userActious/gitcoin/MissingGitcoinPassport.tsx
@@ -40,5 +40,5 @@ const Wrapper = styled(FormWrapper)`
 `
 
 const WarningHeader = styled.h2`
-  color: ${Colors.RedDark};
+  color: ${Colors.Red};
 `
diff --git a/packages/frontend/src/styles/GobalStyles.tsx b/packages/frontend/src/styles/GobalStyles.tsx
@@ -96,7 +96,7 @@ export const GlobalStyles = createGlobalStyle`
 
   body::-webkit-scrollbar-thumb {
     border-radius: 0;
-    background-color: ${Colors.GreenDark};
+    background-color: ${Colors.Grey};
   }
 
   body::-webkit-scrollbar-track {

diff --git a/packages/frontend/src/styles/colors.ts b/packages/frontend/src/styles/colors.ts
@@ -5,19 +5,8 @@ export const Colors = {
   Grey: '#787878',
   GreyLight: '#F8F8F8',
   Pink: '#FADAFA',
-  Red: '#F45757',
-
-  Blue: '#1144AA',
-  BlueDark: '#103D96',
-  BlueLight: '#F6FFFE',
-  GreenDark: '#93D7CF',
-  GreenLight: '#DDFAF7',
-  GreyDark: '#898989',
-  RedDark: '#FF6666',
-  RedLight: '#FF5151',
+  Red: '#FF5151',
   Transparent: 'transparent',
-  Porcelain: '#E7EAF3',
-  Mystic: '#D0D6E6',
 }
 
 export const hexOpacity = (color: string, opacity: number) => {