feat: improve design of about page (#290)

hasadna · Dec 12, 2023 · 146b281 · 146b281
1 parent b5b8a0d
commit 146b281
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 30 deletions.
diff --git a/src/pages/about/About.scss b/src/pages/about/About.scss
@@ -0,0 +1,8 @@
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+li img {
+    width: 1.9em;
+}
diff --git a/src/pages/About.tsx → src/pages/about/index.tsx b/src/pages/About.tsx → src/pages/about/index.tsx
@@ -1,11 +1,16 @@
 import styled from 'styled-components'
-import SlackIcon from '../resources/slack-icon.svg'
+import SlackIcon from '../../resources/slack-icon.svg'
 import { useTranslation } from 'react-i18next'
+import Widget from 'src/shared/Widget'
+import { Typography } from 'antd'
 
+import './About.scss'
+const { Title } = Typography
 const About = () => {
   return (
     <AboutStyle>
       <div className="about-center-container">
+        <Title level={3}> קצת עלינו</Title>
         <WhatIsWebsite />
         <DiscoveredMistake />
         <Privacy />
@@ -21,33 +26,33 @@ const WhatIsWebsite = () => {
   const { t } = useTranslation()
 
   return (
-    <ParagraphStyle>
+    <Widget>
       <h2>{t('what_is_website')}</h2>
       <p>{t('what_is_website_paragraph')}</p>
       <ul style={{ listStyle: 'disc', paddingRight: '40px' }}>
         <li>{t('planning_information')}</li>
         <li>{t('performance_information')}</li>
       </ul>
-    </ParagraphStyle>
+    </Widget>
   )
 }
 
 const DiscoveredMistake = () => {
   const { t } = useTranslation()
 
   return (
-    <ParagraphStyle>
+    <Widget>
       <h2>{t('discovered_mistake')}</h2>
       <p>{t('discovered_mistake_paragraph')}</p>
-    </ParagraphStyle>
+    </Widget>
   )
 }
 
 const Privacy = () => {
   const { t } = useTranslation()
 
   return (
-    <ParagraphStyle>
+    <Widget>
       <h2>{t('privacy')}</h2>
       <p>
         באתר מוטמע שירות{' '}
@@ -57,31 +62,31 @@ const Privacy = () => {
         <a href="https://support.google.com/analytics/answer/6004245?hl=iw"> קראו כאן </a>
         על מדיניות הפרטיות של השירות.
       </p>
-    </ParagraphStyle>
+    </Widget>
   )
 }
 
 const License = () => {
   const { t } = useTranslation()
 
   return (
-    <ParagraphStyle>
+    <Widget>
       <h2>{t('license')}</h2>
       <p>
         כל המידע המוצג באתר מבוסס על נתונים המפורסמים במקורות המידע הממשלתיים. השימוש במידע כפוף ל
         <a href="https://creativecommons.org/licenses/by-sa/4.0/">רישיון CC BY-SA 4.0 </a>
         של
         <a href="https://creativecommons.org/"> Creative Commons</a>.
       </p>
-    </ParagraphStyle>
+    </Widget>
   )
 }
 
 const Questions = () => {
   const { t } = useTranslation()
 
   return (
-    <ParagraphStyle>
+    <Widget>
       <h2>{t('questions')}</h2>
       <ul>
         <li>
@@ -101,15 +106,15 @@ const Questions = () => {
           </a>
         </li>
       </ul>
-    </ParagraphStyle>
+    </Widget>
   )
 }
 
 const Funding = () => {
   const { t } = useTranslation()
 
   return (
-    <ParagraphStyle>
+    <Widget>
       <h2>{t('funding')}</h2>
       <div>
         <p>
@@ -127,7 +132,7 @@ const Funding = () => {
           </a>
         </li>
       </ul>
-    </ParagraphStyle>
+    </Widget>
   )
 }
 
@@ -144,20 +149,4 @@ const AboutStyle = styled.div`
   }
 `
 
-const ParagraphStyle = styled.div`
-  & h2 {
-    font-size: 1.5em;
-  }
-  & p {
-    font-size: 1.15em;
-  }
-  & ul {
-    list-style: none;
-    padding: 0;
-  }
-  & img {
-    width: 5%;
-  }
-`
-
 export default About
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -7,7 +7,7 @@ const GapsPage = lazy(() => import('../pages/gaps'))
 const GapsPatternsPage = lazy(() => import('../pages/gapsPatterns'))
 const RealtimeMapPage = lazy(() => import('../pages/realtimeMap'))
 const SingleLineMapPage = lazy(() => import('../pages/singleLineMap'))
-const About = lazy(() => import('../pages/About'))
+const About = lazy(() => import('../pages/about'))
 const Profile = lazy(() => import('../pages/Profile'))
 const BugReportForm = lazy(() => import('../pages/BugReportForm '))