From ad4dcaeda4bce3f41652ad12fa0c2ac434d31a46 Mon Sep 17 00:00:00 2001
From: Sergei Gavrilov <iamgavr@yandex.ru>
Date: Tue, 17 Dec 2024 23:51:05 +0300
Subject: [PATCH 1/2] contacts-page refactored: div element-box removed, css
 fixed

---
 .../components/contact-input/index.tsx        | 32 +++++++++----------
 .../contact-input/styles.module.css           | 29 ++---------------
 .../contacts-form/styles.module.css           |  5 ++-
 3 files changed, 19 insertions(+), 47 deletions(-)

diff --git a/src/pages/contacts/components/contact-input/index.tsx b/src/pages/contacts/components/contact-input/index.tsx
index e405d36f..e35019d0 100644
--- a/src/pages/contacts/components/contact-input/index.tsx
+++ b/src/pages/contacts/components/contact-input/index.tsx
@@ -46,23 +46,21 @@ 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}
+      />
+      <input
+        type={type}
+        name={name}
+        className={inputStyles}
+        onChange={onChange}
+        value={value || ''}
+        readOnly={!isEditable}
+        onClick={!isEditable ? handleClick : undefined}
+      />
       {isEditAllowed && (
         <>
           <div
diff --git a/src/pages/contacts/components/contact-input/styles.module.css b/src/pages/contacts/components/contact-input/styles.module.css
index 7e41530d..5b19e26d 100644
--- a/src/pages/contacts/components/contact-input/styles.module.css
+++ b/src/pages/contacts/components/contact-input/styles.module.css
@@ -1,18 +1,10 @@
 .container {
-  width: 100%;
-  padding: 13px 0 20px;
+  padding: 20px 0;
   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;
-}
-
-.element_box {
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
   row-gap: 20px;
 }
 
@@ -52,21 +44,4 @@
 
 .edit_box_hidden {
   display: none;
-}
-
-@media (max-width: 550px) {
-  .container {
-    padding-bottom: 0;
-    border: none;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .element_box {
-    width: 100%;
-    padding-bottom: 20px;
-    border-bottom: 1px solid;
-    border-image-source: var(--colors-interface-line);
-    border-image-slice: 1;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/pages/contacts/components/contacts-form/styles.module.css b/src/pages/contacts/components/contacts-form/styles.module.css
index 26c74fbd..65796aeb 100644
--- a/src/pages/contacts/components/contacts-form/styles.module.css
+++ b/src/pages/contacts/components/contacts-form/styles.module.css
@@ -2,12 +2,11 @@
   padding: 0 30px;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   row-gap: 20px;
 }
 
-@media (max-width: 550px) {
+@media all and (max-width: 920px) {
   .form {
-    padding: 0;
+    padding: 0 10px;
   }
 }

From 070cdfce4f8990fecc20a9b6db7cfde771376c15 Mon Sep 17 00:00:00 2001
From: Alexandra Sukhova <sukhova_alexandra@mail.ru>
Date: Wed, 25 Dec 2024 13:12:44 +0300
Subject: [PATCH 2/2] add grid, fix mobil view

---
 .../components/contact-input/index.tsx        |  6 +-
 .../contact-input/styles.module.css           | 55 +++++++++++++------
 .../contacts-form/styles.module.css           |  6 +-
 3 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/pages/contacts/components/contact-input/index.tsx b/src/pages/contacts/components/contact-input/index.tsx
index e35019d0..4398329b 100644
--- a/src/pages/contacts/components/contact-input/index.tsx
+++ b/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,
   });
 
@@ -51,6 +51,7 @@ export const ContactInput = ({
         color={'primary-additional'}
         variant={'title'}
         content={label}
+        extraClass={styles.label}
       />
       <input
         type={type}
@@ -61,6 +62,7 @@ export const ContactInput = ({
         readOnly={!isEditable}
         onClick={!isEditable ? handleClick : undefined}
       />
+      <GradientDivider extClassName={styles.gradient} />
       {isEditAllowed && (
         <>
           <div
diff --git a/src/pages/contacts/components/contact-input/styles.module.css b/src/pages/contacts/components/contact-input/styles.module.css
index 5b19e26d..dd4b7bf8 100644
--- a/src/pages/contacts/components/contact-input/styles.module.css
+++ b/src/pages/contacts/components/contact-input/styles.module.css
@@ -1,47 +1,70 @@
 .container {
-  padding: 20px 0;
-  border-bottom: 1px solid;
-  border-image-source: var(--colors-interface-line);
-  border-image-slice: 1;
-  display: flex;
-  flex-direction: column;
-  row-gap: 20px;
+  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;
+}
+
+.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;
-}
\ No newline at end of file
+}
+
+@media (max-width: 735px) {
+  .container {
+    grid-template-areas:
+      'label '
+      'input '
+      'gradient '
+      'edit ';
+    grid-template-rows: min-content 40px 15px 10px;
+  }
+
+  .edit_box_error {
+    grid-area: edit;
+  }
+}
diff --git a/src/pages/contacts/components/contacts-form/styles.module.css b/src/pages/contacts/components/contacts-form/styles.module.css
index 65796aeb..f277b4b7 100644
--- a/src/pages/contacts/components/contacts-form/styles.module.css
+++ b/src/pages/contacts/components/contacts-form/styles.module.css
@@ -1,12 +1,12 @@
 .form {
-  padding: 0 30px;
+  padding: 20px 30px;
   display: flex;
   flex-direction: column;
-  row-gap: 20px;
+  row-gap: 40px;
 }
 
 @media all and (max-width: 920px) {
   .form {
-    padding: 0 10px;
+    padding: 20px 10px;
   }
 }