Merge v2.0 into main

luisaramicar11 · Nov 2, 2024 · 317f5c8 · 317f5c8
1 parent 4c71ecf
commit 317f5c8
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 31 deletions.
diff --git a/src/components/cards/CardDetailUserMatch.tsx b/src/components/cards/CardDetailUserMatch.tsx
@@ -46,23 +46,29 @@ const Header = styled.div`
   position: relative;
   border-radius: 10px;
   width: 100%;
-
-  @media (max-width: 600px) {
-      padding-top: 1rem;
-    }
+  padding-top: 1rem;
 `;
 
 const UserInfo = styled.div`
   display: flex;
   flex-direction: column;
 `;
 
+const MainInfo = styled.div`
+  display: flex;
+  align-items: start;
+  gap: 1rem;
+
+  @media (max-width: 900px) {
+      flex-wrap: wrap;
+    }
+`;
+
 const UserName = styled.h1`
   font-size: 2.5rem;
   font-weight: bold;
   color: ${({ theme }) => theme.colors.textDark};
-  margin-bottom: 0rem;
-  margin-top: 1rem;
+  margin: 0;
 `;
 
 const UserTitle = styled.h2`
@@ -74,6 +80,11 @@ const UserTitle = styled.h2`
   font-style: italic;
   font-weight: 400;
   margin-top: 0;
+  
+  @media (max-width: 400px) {
+      flex-direction: column;
+      align-items: start;
+    }
 `;
 
 const ProfileImage = styled.div<{ urlImage: string }>`
@@ -88,11 +99,11 @@ const ProfileImage = styled.div<{ urlImage: string }>`
 
 const ConnectionsRating = styled.div`
   display: flex;
-  gap: 5rem;
+  gap: 6rem;
   margin: 0;
   padding-bottom: 0;
 
-  @media (max-width: 600px) {
+  @media (max-width: 400px) {
       flex-wrap: wrap;
       gap: 1rem;
     }
@@ -175,7 +186,8 @@ const P = styled.p`
 `;
 
 const RatingSection = styled.div`
-  padding: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
   margin-bottom: 0.5rem;
   font-size: 0.8rem;
   color: ${({ theme }) => theme.colors.textSecondary};
@@ -287,17 +299,6 @@ const SocialButton = styled.div`
   }
 `;
 
-const MainInfo = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-
-  @media (max-width: 600px) {
-      flex-wrap: wrap;
-      gap: 0;
-    }
-`;
-
 const UserProfileDetail: React.FC<IRequestOnDetailUserCardProps> = ({ userData }) => {
   const [userDetail, setUserDetail] = useState<IUser | null>(null);
   const [loading, setLoading] = useState(true);

diff --git a/src/components/cards/CardDetailUserNoMatch.tsx b/src/components/cards/CardDetailUserNoMatch.tsx
@@ -42,10 +42,7 @@ const Header = styled.div`
   position: relative;
   border-radius: 10px;
   width: 100%;
-
-  @media (max-width: 900px) {
-      padding-top: 1rem;
-    }
+  padding-top: 1rem;
 `;
 
 const UserInfo = styled.div`
@@ -55,21 +52,19 @@ const UserInfo = styled.div`
 
 const MainInfo = styled.div`
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: 1rem;
 
   @media (max-width: 900px) {
       flex-wrap: wrap;
-      gap: 0;
     }
 `;
 
 const UserName = styled.h1`
   font-size: 2.5rem;
   font-weight: bold;
   color: ${({ theme }) => theme.colors.textDark};
-  margin-bottom: 0rem;
-  margin-top: 1rem;
+  margin: 0;
 `;
 
 const UserTitle = styled.h2`
@@ -81,6 +76,11 @@ const UserTitle = styled.h2`
   font-style: italic;
   font-weight: 400;
   margin-top: 0;
+
+  @media (max-width: 400px) {
+      flex-direction: column;
+      align-items: start;
+    }
 `;
 
 const Unknown = styled.span`
@@ -105,11 +105,11 @@ const ProfileImage = styled.div<{ urlImage: string }>`
 
 const ConnectionsRating = styled.div`
   display: flex;
-  gap: 5rem;
+  gap: 6rem;
   margin: 0;
   padding-bottom: 0;
 
-  @media (max-width: 900px) {
+  @media (max-width: 400px) {
       flex-wrap: wrap;
       gap: 1rem;
     }
@@ -187,7 +187,8 @@ const P = styled.p`
 `;
 
 const RatingSection = styled.div`
-  padding: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
   margin-bottom: 0.5rem;
   font-size: 0.8rem;
   color: ${({ theme }) => theme.colors.textSecondary};