feat: styling according to figma

Author: kemuru

web/src/components/ExtraStatsDisplay.tsx

@@ -5,15 +5,15 @@ import { StyledSkeleton } from "components/StyledSkeleton";
 
 const Container = styled.div`
   display: flex;
-  max-width: 380px;
-  align-items: center;
   gap: 8px;
+  align-items: center;
+  margin-top: 24px;
 `;
 
 const SVGContainer = styled.div`
+  display: flex;
   height: 14px;
   width: 14px;
-  display: flex;
   align-items: center;
   justify-content: center;
   svg {
@@ -24,10 +24,14 @@ const SVGContainer = styled.div`
 const TextContainer = styled.div`
   display: flex;
   align-items: center;
-  gap: 4px;
-  p {
-    min-width: 60px;
-  }
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const StyledP = styled.p`
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
 `;
 
 export interface IExtraStatsDisplay {
@@ -42,7 +46,7 @@ const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, text, icon: Ic
       <SVGContainer>{<Icon />}</SVGContainer>
       <TextContainer>
         <label>{title}:</label>
-        <p>{text !== null ? text : <StyledSkeleton />}</p>
+        <StyledP>{text !== null ? text : <StyledSkeleton />}</StyledP>
       </TextContainer>
     </Container>
   );

web/src/pages/Home/CourtOverview/ExtraStats.tsx

@@ -1,29 +1,18 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
 import LawBalance from "svgs/icons/law-balance.svg";
 import LongArrowUp from "svgs/icons/long-arrow-up.svg";
 
 import { useHomePageExtraStats, HomePageExtraStatsType } from "hooks/queries/useHomePageExtraStats";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-
 import ExtraStatsDisplay from "components/ExtraStatsDisplay";
 
 const StyledCard = styled.div`
-  padding-left: ${responsiveSize(16, 64)};
-  padding-right: ${responsiveSize(16, 64)};
   display: flex;
-  justify-content: space-between;
   flex-wrap: wrap;
-
-  ${landscapeStyle(
-    () => css`
-      padding-bottom: 0px;
-      gap: 8px;
-    `
-  )}
+  gap: 0 32px;
+  justify-content: center;
 `;
 
 interface IStat {

web/src/pages/Home/CourtOverview/Header.tsx

@@ -11,6 +11,7 @@ import { responsiveSize } from "styles/responsiveSize";
 
 const StyledHeader = styled.div`
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
 `;