Merge pull request #278 from sima-land/277-person-info-upd

#277 Обновить mobile/PersonInfo
sima-land · Jul 5, 2024 · 96d0064 · 96d0064
2 parents a8be646 + c09f656
commit 96d0064
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/src/mobile/components/person-info/person-info.m.scss b/src/mobile/components/person-info/person-info.m.scss
@@ -66,6 +66,7 @@
   display: flex;
   flex-wrap: wrap;
   margin: 32px auto 0;
+  box-shadow: inset 0 -1px 0 colors.$basic-gray12;
   @media (min-width: 601px) {
     max-width: calc((100% - #{7 * 16px}) / 8 * 6 + (#{5 * 16px}));
   }
@@ -83,11 +84,34 @@
   width: 100%;
   padding: 16px;
   text-decoration: none;
+  box-shadow: inset 0 1px 0 colors.$basic-gray12;
   @media (min-width: 721px) {
     padding: 16px 0;
   }
 }
 
+.item-main-col {
+  flex-grow: 1;
+}
+
+.item-title {
+  font-size: 16px;
+  line-height: 24px;
+  color: colors.$basic-gray87;
+  font-weight: 600;
+}
+
+.item-description {
+  margin-top: 4px;
+  font-size: 14px;
+  line-height: 20px;
+  color: colors.$basic-gray38;
+}
+
+.item-main-col + .icon-circle {
+  margin-left: 16px;
+}
+
 .icon-circle {
   background: colors.$basic-gray4;
   border-radius: 50%;

diff --git a/src/mobile/components/person-info/person-info.tsx b/src/mobile/components/person-info/person-info.tsx
@@ -1,13 +1,10 @@
 import { AnchorHTMLAttributes, ReactNode } from 'react';
-import classnames from 'classnames/bind';
 import { Avatar, getUserAvatarProps } from '@sima-land/ui-nucleons/avatar';
-import { Box } from '@sima-land/ui-nucleons/box';
-import { Text } from '@sima-land/ui-nucleons/text';
-import { InnerBorder } from '@sima-land/ui-nucleons/styling';
 import MailSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/Mail';
 import SkypeSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/LogoSkype';
 import PhoneSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/Phone';
 import MobileSVG from '@sima-land/ui-quarks/icons/24x24/Filled/Mobile';
+import classnames from 'classnames/bind';
 import styles from './person-info.m.scss';
 
 export interface PersonInfoProps {
@@ -82,7 +79,7 @@ export function PersonInfo({
         />
       )}
 
-      <div className={cx('items', InnerBorder.bottom)}>
+      <div className={cx('items')}>
         {Boolean(email) && (
           <CommunicateLink
             href={`mailto:${email}`}
@@ -141,17 +138,11 @@ export function CommunicateLink({
   icon?: ReactNode;
 }) {
   return (
-    <a href={href} className={cx('item', InnerBorder.top)}>
-      <Box flex='grow'>
-        <Text size={16} lineHeight={24} color='basic-gray87' weight={600}>
-          {primaryText}
-        </Text>
-        <Box marginTop={1}>
-          <Text size={14} lineHeight={20} color='basic-gray38'>
-            {secondaryText}
-          </Text>
-        </Box>
-      </Box>
+    <a href={href} className={cx('item')}>
+      <div className={cx('item-main-col')}>
+        <div className={cx('item-title')}>{primaryText}</div>
+        <div className={cx('item-description')}>{secondaryText}</div>
+      </div>
       <div className={cx('icon-circle')}>{icon}</div>
     </a>
   );