From 56bbf2cbda053af49efd12f069bff562851d424a Mon Sep 17 00:00:00 2001
From: Vladislav Kutsevich <kutsevichvlad18@gmail.com>
Date: Sat, 16 Sep 2023 17:52:07 +0300
Subject: [PATCH 1/4] create branch

add component discriptionText with props
add styled for discriptionText
---
 .../DiscriptionText/DiscriptionText.jsx       | 12 +++++++++
 .../DiscriptionText.styled.jsx                | 26 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/components/DiscriptionText/DiscriptionText.jsx
 create mode 100644 src/components/DiscriptionText/DiscriptionText.styled.jsx

diff --git a/src/components/DiscriptionText/DiscriptionText.jsx b/src/components/DiscriptionText/DiscriptionText.jsx
new file mode 100644
index 00000000..0d0ee11f
--- /dev/null
+++ b/src/components/DiscriptionText/DiscriptionText.jsx
@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+import { Text } from './DiscriptionText.styled';
+
+const DiscriptionText = ({ text }) => {
+  return <Text>{text}</Text>;
+};
+
+DiscriptionText.propTypes = {
+  text: PropTypes.string,
+};
+
+export default DiscriptionText;
diff --git a/src/components/DiscriptionText/DiscriptionText.styled.jsx b/src/components/DiscriptionText/DiscriptionText.styled.jsx
new file mode 100644
index 00000000..330a2c06
--- /dev/null
+++ b/src/components/DiscriptionText/DiscriptionText.styled.jsx
@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import { colors, mq } from '../../utils';
+
+export const Text = styled.p`
+  color: ${colors.textWhite03};
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.3;
+
+  ${mq.mobile} {
+    width: 303px;
+  }
+
+  ${mq.tablet} {
+    width: 561px;
+    font-size: 16px;
+
+    line-height: 1.5;
+  }
+
+  ${mq.desktop} {
+    width: 358px;
+  }
+`;

From 1ff599b5e3c214b8a521210867e8a7e9594c0054 Mon Sep 17 00:00:00 2001
From: Vladislav Kutsevich <kutsevichvlad18@gmail.com>
Date: Sat, 16 Sep 2023 19:45:52 +0300
Subject: [PATCH 2/4] add icon

---
 src/assets/sprite.svg                         |  5 +++++
 .../DiscriptionText.styled.jsx                | 20 +++++++++----------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg
index 8ddb524c..c937ba49 100644
--- a/src/assets/sprite.svg
+++ b/src/assets/sprite.svg
@@ -125,5 +125,10 @@
 <path fill="#d80027" style="fill: var(--color1, #d80027)" d="M16 29.333c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333c7.364 0 13.333 5.969 13.333 13.333s-5.969 13.333-13.333 13.333zM14.459 21.98l9.427-9.428-1.885-1.885-7.541 7.543-3.772-3.772-1.885 1.885 5.657 5.657z"></path>
 </symbol>
 
+<symbol id="icon-exclamation-mark" viewBox="0 0 32 32">
+<path fill="#efa082" style="fill: var(--color1, #efa082)" d="M32 16c0 8.837-7.163 16-16 16s-16-7.163-16-16c0-8.837 7.163-16 16-16s16 7.163 16 16z"></path>
+<path fill="none" stroke="#efede8" style="stroke: var(--color2, #efede8)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.6667" d="M16 25.333v0.013M16 20v-13.333"></path>
+</symbol>
+
 </defs>
 </svg>
diff --git a/src/components/DiscriptionText/DiscriptionText.styled.jsx b/src/components/DiscriptionText/DiscriptionText.styled.jsx
index 330a2c06..2cf771c9 100644
--- a/src/components/DiscriptionText/DiscriptionText.styled.jsx
+++ b/src/components/DiscriptionText/DiscriptionText.styled.jsx
@@ -1,26 +1,26 @@
 import styled from '@emotion/styled';
 import { colors, mq } from '../../utils';
 
+export const Container = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+export const Icon = styled.svg`
+  width: 24px;
+  height: 24px;
+`;
+
 export const Text = styled.p`
   color: ${colors.textWhite03};
   font-family: Roboto;
   font-size: 14px;
   font-style: normal;
-  font-weight: 400;
   line-height: 1.3;
 
-  ${mq.mobile} {
-    width: 303px;
-  }
-
   ${mq.tablet} {
-    width: 561px;
     font-size: 16px;
 
     line-height: 1.5;
   }
-
-  ${mq.desktop} {
-    width: 358px;
-  }
 `;

From 267dac4312918049ef1aa7fce704b9054e2ebc80 Mon Sep 17 00:00:00 2001
From: Vladislav Kutsevich <kutsevichvlad18@gmail.com>
Date: Sat, 16 Sep 2023 19:47:08 +0300
Subject: [PATCH 3/4] update

update discriptionText
---
 src/components/DiscriptionText/DiscriptionText.jsx | 14 ++++++++++++--
 src/pages/Home/Home.jsx                            |  8 ++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/DiscriptionText/DiscriptionText.jsx b/src/components/DiscriptionText/DiscriptionText.jsx
index 0d0ee11f..ed0aba91 100644
--- a/src/components/DiscriptionText/DiscriptionText.jsx
+++ b/src/components/DiscriptionText/DiscriptionText.jsx
@@ -1,8 +1,18 @@
 import PropTypes from 'prop-types';
-import { Text } from './DiscriptionText.styled';
+import { Container, Text, Icon } from './DiscriptionText.styled';
+import sprite from '../../assets/sprite.svg';
 
 const DiscriptionText = ({ text }) => {
-  return <Text>{text}</Text>;
+  return (
+    <>
+      <Container>
+        <Icon>
+          <use href={sprite + `#icon-exclamation-mark`}></use>
+        </Icon>
+        <Text>{text}</Text>;
+      </Container>
+    </>
+  );
 };
 
 DiscriptionText.propTypes = {
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index cf9e2c64..7cb37f19 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -3,6 +3,8 @@ import MainTitle from '../../components/MainTitle/MainTitle';
 import Header from '../../components/headersComp/Header/Header';
 import { LinkList, Wrapper } from './Home.styled';
 
+import DiscriptionText from '../../components/DiscriptionText/DiscriptionText';
+
 const Home = () => {
   return (
     <>
@@ -18,6 +20,12 @@ const Home = () => {
           </li>
         </LinkList>
       </Wrapper>
+
+      <DiscriptionText
+        text={
+          'We understand that each individual is unique, so the entire approach to diet is relative and tailored to your unique body and goals.'
+        }
+      />
     </>
   );
 };

From f8fe101a803b6500434d0a1600a87dc16905d89c Mon Sep 17 00:00:00 2001
From: MargoMarm <margogerasimenko@gmail.com>
Date: Sun, 17 Sep 2023 09:32:10 +0200
Subject: [PATCH 4/4] add width to components

---
 .../{DiscriptionText.jsx => DescriptionText.jsx}       | 10 ++++------
 ...ptionText.styled.jsx => DescriptionText.styled.jsx} |  9 ++++++++-
 src/pages/Home/Home.jsx                                |  8 --------
 3 files changed, 12 insertions(+), 15 deletions(-)
 rename src/components/DiscriptionText/{DiscriptionText.jsx => DescriptionText.jsx} (61%)
 rename src/components/DiscriptionText/{DiscriptionText.styled.jsx => DescriptionText.styled.jsx} (80%)

diff --git a/src/components/DiscriptionText/DiscriptionText.jsx b/src/components/DiscriptionText/DescriptionText.jsx
similarity index 61%
rename from src/components/DiscriptionText/DiscriptionText.jsx
rename to src/components/DiscriptionText/DescriptionText.jsx
index ed0aba91..72a7c2c7 100644
--- a/src/components/DiscriptionText/DiscriptionText.jsx
+++ b/src/components/DiscriptionText/DescriptionText.jsx
@@ -1,22 +1,20 @@
 import PropTypes from 'prop-types';
-import { Container, Text, Icon } from './DiscriptionText.styled';
+import { Container, Text, Icon } from './DescriptionText.styled';
 import sprite from '../../assets/sprite.svg';
 
-const DiscriptionText = ({ text }) => {
+const DescriptionText = ({ text }) => {
   return (
-    <>
       <Container>
         <Icon>
           <use href={sprite + `#icon-exclamation-mark`}></use>
         </Icon>
         <Text>{text}</Text>;
       </Container>
-    </>
   );
 };
 
-DiscriptionText.propTypes = {
+DescriptionText.propTypes = {
   text: PropTypes.string,
 };
 
-export default DiscriptionText;
+export default DescriptionText;
diff --git a/src/components/DiscriptionText/DiscriptionText.styled.jsx b/src/components/DiscriptionText/DescriptionText.styled.jsx
similarity index 80%
rename from src/components/DiscriptionText/DiscriptionText.styled.jsx
rename to src/components/DiscriptionText/DescriptionText.styled.jsx
index 2cf771c9..eb316809 100644
--- a/src/components/DiscriptionText/DiscriptionText.styled.jsx
+++ b/src/components/DiscriptionText/DescriptionText.styled.jsx
@@ -4,6 +4,11 @@ import { colors, mq } from '../../utils';
 export const Container = styled.div`
   display: flex;
   gap: 8px;
+  width: 335px;
+
+  ${mq.tablet} {
+    width: 439px;
+  }
 `;
 
 export const Icon = styled.svg`
@@ -17,10 +22,12 @@ export const Text = styled.p`
   font-size: 14px;
   font-style: normal;
   line-height: 1.3;
+  margin: 0;
+  width: 303px;
 
   ${mq.tablet} {
     font-size: 16px;
-
     line-height: 1.5;
+    width: 407px;
   }
 `;
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 7cb37f19..cf9e2c64 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -3,8 +3,6 @@ import MainTitle from '../../components/MainTitle/MainTitle';
 import Header from '../../components/headersComp/Header/Header';
 import { LinkList, Wrapper } from './Home.styled';
 
-import DiscriptionText from '../../components/DiscriptionText/DiscriptionText';
-
 const Home = () => {
   return (
     <>
@@ -20,12 +18,6 @@ const Home = () => {
           </li>
         </LinkList>
       </Wrapper>
-
-      <DiscriptionText
-        text={
-          'We understand that each individual is unique, so the entire approach to diet is relative and tailored to your unique body and goals.'
-        }
-      />
     </>
   );
 };