contacts-page refactored: div element-box removed, css fixed

src/pages/contacts/components/contact-input/index.tsx

@@ -1,7 +1,7 @@
 import { DetailedHTMLProps, InputHTMLAttributes, MouseEvent } from 'react';
 import cn from 'classnames';
 
-import { Icon, Typography } from 'shared/ui';
+import { GradientDivider, Icon, Typography } from 'shared/ui';
 
 import styles from './styles.module.css';
 
@@ -35,7 +35,7 @@ export const ContactInput = ({
     [styles.input_mode_edit]: isEditable,
     [styles.input_mode_link]: !isEditable,
   });
-  const errorTextStyles = cn({
+  const errorTextStyles = cn(styles.edit_box_error, {
     [styles.edit_box_hidden]: !isEditable,
   });
 
@@ -46,23 +46,23 @@ export const ContactInput = ({
 
   return (
     <div className={styles.container}>
-      <div className={styles.element_box}>
-        <Typography
-          tag={'h2'}
-          color={'primary-additional'}
-          variant={'title'}
-          content={label}
-        />
-        <input
-          type={type}
-          name={name}
-          className={inputStyles}
-          onChange={onChange}
-          value={value || ''}
-          readOnly={!isEditable}
-          onClick={!isEditable ? handleClick : undefined}
-        />
-      </div>
+      <Typography
+        tag={'h2'}
+        color={'primary-additional'}
+        variant={'title'}
+        content={label}
+        extraClass={styles.label}
+      />
+      <input
+        type={type}
+        name={name}
+        className={inputStyles}
+        onChange={onChange}
+        value={value || ''}
+        readOnly={!isEditable}
+        onClick={!isEditable ? handleClick : undefined}
+      />
+      <GradientDivider extClassName={styles.gradient} />
       {isEditAllowed && (
         <>
           <div

src/pages/contacts/components/contact-input/styles.module.css

@@ -1,72 +1,70 @@
 .container {
-  width: 100%;
-  padding: 13px 0 20px;
-  border-bottom: 1px solid;
-  border-image-source: var(--colors-interface-line);
-  border-image-slice: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
+  display: grid;
+  grid-template-areas:
+    'label .'
+    'input edit'
+    'error .'
+    'gradient gradient';
+  grid-template-columns: 1fr min-content;
+  grid-template-rows: min-content 40px 5px min-content;
+  align-items: end;
+  row-gap: 10px;
 }
 
-.element_box {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  row-gap: 20px;
+.label {
+  grid-area: label;
 }
 
 .input {
+  grid-area: input;
   font-size: var(--font-size-medium);
   border: none;
   background-color: transparent;
   outline: none;
 }
 
-.input_mode_link {
-  color: var(--colors-interface-primary);
+.gradient {
+  grid-area: gradient;
 }
 
-.input_mode_link:hover {
+.input_mode_link {
+  color: var(--colors-interface-primary);
   cursor: pointer;
 }
 
 .input_mode_edit {
   color: var(--colors-interface-black);
+  cursor: text;
 }
 
-.input_mode_edit:hover {
-  cursor: text;
+.edit_box_error {
+  grid-area: error;
 }
 
 .edit_box {
+  grid-area: edit;
   color: var(--colors-interface-primary);
   display: flex;
   align-items: center;
   gap: 10px;
-}
-
-.edit_box:hover {
   cursor: pointer;
 }
 
 .edit_box_hidden {
   display: none;
 }
 
-@media (max-width: 550px) {
+@media (max-width: 735px) {
   .container {
-    padding-bottom: 0;
-    border: none;
-    flex-direction: column;
-    align-items: flex-start;
+    grid-template-areas:
+      'label '
+      'input '
+      'gradient '
+      'edit ';
+    grid-template-rows: min-content 40px 15px 10px;
   }
 
-  .element_box {
-    width: 100%;
-    padding-bottom: 20px;
-    border-bottom: 1px solid;
-    border-image-source: var(--colors-interface-line);
-    border-image-slice: 1;
+  .edit_box_error {
+    grid-area: edit;
   }
 }

src/pages/contacts/components/contacts-form/styles.module.css

@@ -1,13 +1,12 @@
 .form {
-  padding: 0 30px;
+  padding: 20px 30px;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  row-gap: 20px;
+  row-gap: 40px;
 }
 
-@media (max-width: 550px) {
+@media all and (max-width: 920px) {
   .form {
-    padding: 0;
+    padding: 20px 10px;
   }
 }