fix: color updates (#5617)

Fixed colors for cards and text

src/components/Button/index.tsx

@@ -151,7 +151,7 @@ export const ButtonSecondary = styled(BaseButton)`
 `
 
 export const ButtonOutlined = styled(BaseButton)`
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
   background-color: transparent;
   color: ${({ theme }) => theme.deprecated_text1};
   &:focus {

src/pages/About/Card.tsx

@@ -14,11 +14,14 @@ const StyledCard = styled.div<{ isDarkMode: boolean }>`
   padding: 40px;
   height: 200px;
   border-radius: 24px;
-  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease}  background-color`};
+  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease}  background`};
   border: 1px solid ${({ theme, isDarkMode }) => (isDarkMode ? 'transparent' : theme.backgroundOutline)};
 
   &:hover {
-    background-color: ${({ theme }) => theme.backgroundModule};
+    background: ${({ theme, isDarkMode }) =>
+      isDarkMode
+        ? theme.backgroundModule
+        : 'linear-gradient(180deg,rgba(93, 103, 133, 0.08) 0%, rgba(0, 0, 0, 0) 100%)'};
   }
 `
 

src/pages/About/Step.tsx

@@ -8,6 +8,7 @@ const StyledStep = styled.div<{ selected: boolean }>`
   font-size: 28px;
   font-weight: 500;
   line-height: 36px;
+  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease}  color`};
 
   &:not(:last-of-type) {
     border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};

src/pages/About/Title.ts

@@ -9,7 +9,7 @@ export const Title = styled.h1<{ isDarkMode: boolean }>`
   background: ${({ isDarkMode }) =>
     isDarkMode
       ? 'conic-gradient(from 180deg at 50% 50%, #FFF4CF 0deg, #EBFFBF 95.62deg, #E3CDFF 175.81deg, #FFCDF4 269.07deg, #FFFBEF 360deg);'
-      : 'linear-gradient(10deg, rgb(255,79,184) 0%, rgb(255,159,251) 100%)'};
+      : 'linear-gradient(230.12deg, #8A80FF 37.26%, #FF7DE2 52.98%, #FF3998 68.06%)'};
 
   background-clip: text;
   -webkit-background-clip: text;
@@ -31,7 +31,7 @@ export const SubTitle = styled.h2<{ isDarkMode?: boolean }>`
   background: ${({ isDarkMode }) =>
     isDarkMode
       ? 'conic-gradient(from 180deg at 50% 50%, #FFF4CF 0deg, #EBFFBF 95.62deg, #E3CDFF 175.81deg, #FFCDF4 269.07deg, #FFFBEF 360deg);'
-      : 'linear-gradient(10deg, rgb(255,79,184) 0%, rgb(255,159,251) 100%)'};
+      : 'linear-gradient(230.12deg, #8A80FF 37.26%, #FF7DE2 52.98%, #FF3998 68.06%)'};
 
   background-clip: text;
   -webkit-background-clip: text;

src/pages/Landing/index.tsx

@@ -87,22 +87,27 @@ const SubTextContainer = styled.div`
 const CTAButton = styled(BaseButton)`
   padding: 16px;
   border-radius: 24px;
-
-  &:hover {
-    opacity: 50%;
-  }
 `
 
 const ButtonCTA = styled(CTAButton)`
   background: linear-gradient(10deg, rgba(255, 0, 199, 1) 0%, rgba(255, 159, 251, 1) 100%);
   border: none;
   color: ${({ theme }) => theme.white};
+  transition: ${({ theme }) => `all ${theme.transition.duration.medium} ${theme.transition.timing.ease}`};
+
+  &:hover {
+    box-shadow: 0px 0px 16px 0px #ff00c7;
+  }
 `
 
 const ButtonCTASecondary = styled(CTAButton)`
   background: none;
   border: ${({ theme }) => `1px solid ${theme.textPrimary}`};
   color: ${({ theme }) => theme.textPrimary};
+
+  &:hover {
+    border: 1px solid rgba(255, 0, 199, 1);
+  }
 `
 
 const ButtonCTAText = styled.p`