style: remove extra space at top-pages

src/App.scss

@@ -6,4 +6,8 @@
 .main {
     flex-direction: row;
     font-family: Heebo;
+}
+
+.page-title{
+    margin-top: 0;
 }

src/layout/index.tsx

@@ -19,7 +19,7 @@ const StyledContent = styled(Content)`
   overflow: auto;
 `
 const StyledBody = styled.div`
-  padding: 24px;
+  padding: 0 24px;
   min-height: 360px;
 `
 

src/pages/about/index.tsx

@@ -10,7 +10,9 @@ const About = () => {
   return (
     <AboutStyle>
       <Space direction="vertical" size="middle">
-        <Title level={3}>קצת עלינו</Title>
+        <Title className="page-title" level={3}>
+          קצת עלינו
+        </Title>
         <WhatIsWebsite />
         <DiscoveredMistake />
         <Privacy />
@@ -139,7 +141,7 @@ const Funding = () => {
 const AboutStyle = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 1rem;
+  padding: 0 1rem;
   & .about-center-container {
     width: 100%;
     max-width: 770px;

src/pages/dashboard/DashboardPage.scss

@@ -1,4 +1,4 @@
-@import '../../resources/variables';
+@import "../../resources/variables";
 
 .title {
   font-weight: 500;
@@ -8,9 +8,8 @@
 }
 
 .widget {
-
   .chart {
     height: 400px;
     overflow-y: scroll;
   }
-}
+}

src/pages/dashboard/DashboardPage.tsx

@@ -7,6 +7,7 @@ import moment from 'moment'
 
 // Styling
 import './DashboardPage.scss'
+import 'src/App.scss'
 import { PageContainer } from '../components/PageContainer'
 import { useTranslation } from 'react-i18next'
 import { Alert, Typography } from 'antd'
@@ -30,7 +31,9 @@ const DashboardPage = () => {
 
   return (
     <PageContainer>
-      <Title level={3}>ביצועי תחבורה ציבורית</Title>
+      <Title className="page-title" level={3}>
+        ביצועי תחבורה ציבורית
+      </Title>
       <Alert message="תפקוד תחבורה ציבורית לפי פרמטרים שונים" type="info" />
       <Grid
         container

src/pages/historicTimeline/index.tsx

@@ -4,6 +4,8 @@ import OperatorSelector from 'src/pages/components/OperatorSelector'
 import { Row } from 'src/pages/components/Row'
 import { INPUT_SIZE, MARGIN_MEDIUM } from 'src/resources/sizes'
 import styled from 'styled-components'
+import 'src/App.scss'
+
 import {
   getGtfsStopHitTimesAsync,
   getRoutesAsync,
@@ -137,7 +139,9 @@ const TimelinePage = () => {
 
   return (
     <PageContainer>
-      <Title level={3}>הסטורית נסיעות</Title>
+      <Title className="page-title" level={3}>
+        הסטורית נסיעות
+      </Title>
       <Alert message="רשימת זמני עצירה בתחנה שנבחרה" type="info" />
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         {/* choose date */}

src/pages/realtimeMap/index.tsx

@@ -96,7 +96,9 @@ export default function RealtimeMapPage() {
 
   return (
     <PageContainer className="map-container">
-      <Title level={3}>{t('realtime_map_explanation').slice(0, 25)}</Title>
+      <Title className="page-title" level={3}>
+        {t('realtime_map_explanation').slice(0, 25)}
+      </Title>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         <Grid xs={12} className="hideOnMobile">
           <Label text={t('realtime_map_explanation')} />