Fix/confirmation colors (#1366)

* fix(confirmation): fix text colors * fix(confirmation): fix text colors
core-ds · Sep 17, 2024 · 0ae8ae2 · 0ae8ae2
1 parent 02d8c4b
commit 0ae8ae2
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 13 deletions.
diff --git a/.changeset/nervous-buckets-wash.md b/.changeset/nervous-buckets-wash.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-confirmation': patch
+---
+
+Исправлены стили цветов
diff --git a/packages/confirmation/src/components/screens/fatal-error/component.tsx b/packages/confirmation/src/components/screens/fatal-error/component.tsx
@@ -27,7 +27,10 @@ export const FatalError: FC<FatalErrorProps> = ({ mobile }) => {
             <Typography.Text
                 view='primary-medium'
                 color='primary'
-                className={cn({ [styles.typographyTheme]: !mobile })}
+                className={cn({
+                    [styles.typographyTheme]: !mobile,
+                    [styles.typographyThemeMobile]: mobile,
+                })}
             >
                 {texts.fatalErrorDescription}
             </Typography.Text>

diff --git a/packages/confirmation/src/components/screens/fatal-error/index.module.css b/packages/confirmation/src/components/screens/fatal-error/index.module.css
@@ -9,6 +9,10 @@
     @mixin _confirmation-text;
 }
 
+.typographyThemeMobile.typographyThemeMobile {
+    color: var(--color-light-text-secondary);
+}
+
 .left {
     align-items: flex-start;
 }

diff --git a/packages/confirmation/src/components/screens/hint/component.tsx b/packages/confirmation/src/components/screens/hint/component.tsx
@@ -33,21 +33,35 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
             <Typography.Text
                 view='primary-medium'
                 color='primary'
-                className={cn(styles.text, { [styles.typographyTheme]: !mobile })}
+                className={cn(styles.text, {
+                    [styles.typographyTheme]: !mobile,
+                    [styles.typographyThemeMobile]: mobile,
+                })}
             >
                 Если у&nbsp;вас изменился номер телефона, позвоните нам или обратитесь в&nbsp;любое
                 отделение банка.
             </Typography.Text>
 
-            <div className={styles.phonesWrap}>
+            <div
+                className={cn(styles.phonesWrap, {
+                    [styles.phonesWrapMobile]: mobile,
+                })}
+            >
                 <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
-                    <Link href='tel:+78002000000' underline={false} className={styles.phoneLink}>
+                    <Link
+                        href='tel:+78002000000'
+                        underline={false}
+                        className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}
+                    >
                         8 800 200 00 00
                     </Link>
                     <Typography.Text
                         view='primary-medium'
                         color='primary'
-                        className={cn(styles.text, { [styles.typographyTheme]: !mobile })}
+                        className={cn(styles.text, {
+                            [styles.typographyTheme]: !mobile,
+                            [styles.typographyThemeMobile]: mobile,
+                        })}
                     >
                         {mobile
                             ? 'Для\u00A0звонков по\u00A0России'
@@ -56,13 +70,20 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                 </div>
 
                 <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
-                    <Link href='tel:+74957888878' underline={false} className={styles.phoneLink}>
+                    <Link
+                        href='tel:+74957888878'
+                        underline={false}
+                        className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}
+                    >
                         +7 495 78 888 78
                     </Link>
                     <Typography.Text
                         view='primary-medium'
                         color='primary'
-                        className={cn(styles.text, { [styles.typographyTheme]: !mobile })}
+                        className={cn(styles.text, {
+                            [styles.typographyTheme]: !mobile,
+                            [styles.typographyThemeMobile]: mobile,
+                        })}
                     >
                         {mobile
                             ? 'В\u00A0Москве и\u00A0за\u00A0границей'
@@ -74,7 +95,10 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
             <Typography.Text
                 view='primary-medium'
                 color='primary'
-                className={cn(styles.text, { [styles.typographyTheme]: !mobile })}
+                className={cn(styles.text, {
+                    [styles.typographyTheme]: !mobile,
+                    [styles.typographyThemeMobile]: mobile,
+                })}
             >
                 Если номер не&nbsp;менялся, возможно, перегружен сервис отправки сообщений.
                 Попробуйте повторить действие через несколько минут.

diff --git a/packages/confirmation/src/components/screens/hint/index.module.css b/packages/confirmation/src/components/screens/hint/index.module.css
@@ -22,6 +22,10 @@
     @mixin _confirmation-text;
 }
 
+.typographyThemeMobile.typographyThemeMobile {
+    color: var(--color-light-text-secondary);
+}
+
 .phonesWrap {
     display: flex;
     flex-direction: column;

diff --git a/packages/confirmation/src/components/screens/initial/component.tsx b/packages/confirmation/src/components/screens/initial/component.tsx
@@ -171,7 +171,10 @@ export const Initial: FC<InitialProps> = ({ mobile }) => {
                 <Typography.Text
                     view='primary-medium'
                     color='primary'
-                    className={cn(styles.phone, { [styles.typographyTheme]: !mobile })}
+                    className={cn(styles.phone, {
+                        [styles.typographyTheme]: !mobile,
+                        [styles.typographyThemeMobile]: mobile,
+                    })}
                 >
                     Код отправлен на {phone}
                 </Typography.Text>

diff --git a/packages/confirmation/src/components/screens/initial/index.module.css b/packages/confirmation/src/components/screens/initial/index.module.css
@@ -5,13 +5,17 @@
     flex-direction: column;
 }
 
+.phone.phone {
+    color: var(--color-light-text-primary);
+    margin-bottom: var(--gap-32);
+}
+
 .typographyTheme.typographyTheme {
     @mixin _confirmation-text;
 }
 
-.phone.phone {
-    color: var(--color-light-text-primary);
-    margin-bottom: var(--gap-32);
+.typographyThemeMobile.typographyThemeMobile {
+    color: var(--color-light-text-secondary);
 }
 
 .compact {

diff --git a/packages/confirmation/src/components/screens/temp-block/component.tsx b/packages/confirmation/src/components/screens/temp-block/component.tsx
@@ -40,7 +40,10 @@ export const TempBlock: FC<TempBlockProps> = ({ mobile }) => {
             <Typography.Text
                 view='primary-medium'
                 color='primary'
-                className={cn(styles.description, { [styles.typographyTheme]: !mobile })}
+                className={cn(styles.description, {
+                    [styles.typographyTheme]: !mobile,
+                    [styles.typographyThemeMobile]: mobile,
+                })}
             >
                 {texts.tempBlockDescription}
             </Typography.Text>

diff --git a/packages/confirmation/src/components/screens/temp-block/index.module.css b/packages/confirmation/src/components/screens/temp-block/index.module.css
@@ -14,6 +14,10 @@
     @mixin _confirmation-text;
 }
 
+.typographyThemeMobile.typographyThemeMobile {
+    color: var(--color-light-text-secondary);
+}
+
 .description.description {
     margin-bottom: var(--gap-8);
 }