From bb58d6413f31e1f00ffd6e34d2bbcbf9e745321d Mon Sep 17 00:00:00 2001
From: ilia <il.vsl0110@gmail.com>
Date: Sat, 20 May 2023 13:29:32 +0300
Subject: [PATCH] fix layout problems

---
 src/elements/FavoriteCard/index.tsx | 11 +++++++----
 src/elements/FavoriteCard/style.css | 17 +++++++++--------
 src/elements/Header/index.tsx       | 27 +++++++++++++++------------
 src/elements/Header/style.css       |  7 +++++--
 src/pages/Main/index.tsx            |  2 +-
 src/pages/Main/style.css            | 14 +++++++++++++-
 6 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/elements/FavoriteCard/index.tsx b/src/elements/FavoriteCard/index.tsx
index 8639c04..0e90bd1 100644
--- a/src/elements/FavoriteCard/index.tsx
+++ b/src/elements/FavoriteCard/index.tsx
@@ -12,12 +12,15 @@ export const FavoriteCard:React.FC<FavoriteCardIE> = (props) =>{
 
     return (
         <div className="favoriteCard">
-            <div>
+            <div className="img-cnt">
                 <img className="imageFavoriteCard" src={props.imageURL}></img>
-                <img onClick={()=>setLiked(!liked)} className="likeButton" src={liked? 'likeButtonActive.svg':'likeButton.svg'}></img>
+                <img width={40} onClick={()=>setLiked(!liked)} className="likeButton" src={liked? 'likeButtonActive.svg':'likeButton.svg'}></img>
+            </div>
+            <div className="tr-cnt">
+                <span className="titleFavoriteCard">{props.title}</span>
+                <br />
+                <span className="locationFavoriteCard">{props.location}</span>
             </div>
-            <div className="titleFavoriteCard">{props.title}</div>
-            <div className="locationFavoriteCard">{props.location}</div>
         </div>
     );
 }
\ No newline at end of file
diff --git a/src/elements/FavoriteCard/style.css b/src/elements/FavoriteCard/style.css
index 61cb504..3ebc72c 100644
--- a/src/elements/FavoriteCard/style.css
+++ b/src/elements/FavoriteCard/style.css
@@ -1,20 +1,14 @@
 .favoriteCard{
-    display: flex;
-    flex-direction: column;
-    gap:5px;
-    margin-left: -35px;
+    display: block;
 }
 
 .imageFavoriteCard{
     border-radius: 30px;
-    
 }
 .likeButton{
-    position: relative;
-    right: 50px;
-    bottom: 10px;
     cursor: pointer;
     transition: 0.3s;
+    transform: translateY(-60px) translateX(10px);
 }
 .likeButton:hover{
     transform: scale(1.1);
@@ -27,3 +21,10 @@
 .locationFavoriteCard{
     font-size: 16px;
 }
+.img-cnt{
+    display: flex;
+    flex-direction: column;
+}
+.tr-cnt{
+    transform: translateY(-40px);
+}
\ No newline at end of file
diff --git a/src/elements/Header/index.tsx b/src/elements/Header/index.tsx
index 32a77d3..ffdec2e 100644
--- a/src/elements/Header/index.tsx
+++ b/src/elements/Header/index.tsx
@@ -3,20 +3,23 @@ import './style.css'
 
 export const RusPassHeader:React.FC = () =>{
     return(
-        <div className="headerWrapper">
-            <div className="iconWrapper">
-                <img className="headerIcon" src='logo.svg'></img>
-                <img className="headerIcon" src='menu.svg'></img>
-                <img className="headerIcon" src='bonus.svg'></img>
-                <img className="headerIcon" src='search.svg'></img>
+        <div className="padding">
+            <div className="headerWrapper">
+                <div className="iconWrapper">
+                    <img className="headerIcon" src='logo.svg'></img>
+                    <img className="headerIcon" src='menu.svg'></img>
+                    <img className="headerIcon" src='bonus.svg'></img>
+                    <img className="headerIcon" src='search.svg'></img>
 
-            </div>
-            <div className="iconWrapper">
-                <img className="headerIcon" src='language.svg'></img>
-                <img className="headerIcon" src='support.svg'></img>
-                <img className="headerIcon" src='favorites.svg'></img>
-                <img className="headerIcon" src='profile.svg'></img>
+                </div>
+                <div className="iconWrapper">
+                    <img className="headerIcon" src='language.svg'></img>
+                    <img className="headerIcon" src='support.svg'></img>
+                    <img className="headerIcon" src='favorites.svg'></img>
+                    <img className="headerIcon" src='profile.svg'></img>
+                </div>
             </div>
         </div>
+        
     );
 }
\ No newline at end of file
diff --git a/src/elements/Header/style.css b/src/elements/Header/style.css
index 150ebac..c05c560 100644
--- a/src/elements/Header/style.css
+++ b/src/elements/Header/style.css
@@ -1,10 +1,13 @@
 .headerWrapper{
     height: 100px;
-    padding: 10px 50px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: calc(100%-100px); 
+}
+.padding{
+    padding-left: 50px;
+    padding-right: 50px;
+    width: calc(100% - 100px);
 }
 
 .iconWrapper{
diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
index c922023..abb22c5 100644
--- a/src/pages/Main/index.tsx
+++ b/src/pages/Main/index.tsx
@@ -52,7 +52,7 @@ export const Main: react.FC = () => {
          </div>
          <div className='mainCard'>
             <h2>Добавьте в избранное</h2>
-            <div className='cardWrapper' style={{gap:'10px'}}>
+            <div className='fav-wrapper'>
                <FavoriteCard {...favoriteCardProps}></FavoriteCard>
                <FavoriteCard {...favoriteCardProps}></FavoriteCard>
                <FavoriteCard {...favoriteCardProps}></FavoriteCard>
diff --git a/src/pages/Main/style.css b/src/pages/Main/style.css
index 5718afe..8f0e175 100644
--- a/src/pages/Main/style.css
+++ b/src/pages/Main/style.css
@@ -7,16 +7,28 @@
     gap:25px;
     border-radius: 48px;
     padding: 50px;
+    width: calc(100% - 200px);
+}
+.mainCard>h2{
+    display: inline-block;
+    width: 400px;
 }
 
 .cardWrapper{
-    display: flex;
+    display: inline-flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap:25px;
     justify-content: center;
 }
 
+.fav-wrapper{
+    display: flex;
+    justify-content: space-between;
+    gap: 25px;
+    flex-wrap: wrap;
+}
+
 .grey{
     font-size: 12px;
     color:#1D1D1D