Merge branch 'main' into add/BasePage_297_1_2

CONTRIBUTION.md

@@ -13,13 +13,39 @@ Some of them marked with `help wanted` or `good first issue` - can be good for a
 
 Also! you can look at the project and if you find some point that can be improved (it can be unclear documentation as well as UI or backend problem) - you wellcome to add issue to the project issues (which considers a contribution too)
 
-# Starting your environment
+# Running the Project Locally
+
+Follow these steps to run the project on your local machine:
+
+1. **Fork the Repository:**
+   Before you clone the repository to your local machine, you need to create a fork of it on GitHub. This allows you to make changes without affecting the original project. To fork the repository, click the "Fork" button at the top right of this page.
+
+2. **Clone the Repository:**
+   After forking, you need to clone the repository to your local machine. You can do this by running the following command in your terminal:
+
+   ```bash
+   git clone https://github.com/<Your GitHub Username>/open-bus-map-search.git
+   ```
+   Make sure to replace <Your GitHub Username> with your actual GitHub username.
+
+3. **Navigate to the Project Directory:**
+    Once the repository is cloned, navigate to the project directory by running:
+
+    ```bash
+    cd open-bus-map-search
+    ```
+4. **Install Dependencies:**
+   The project uses Yarn to manage dependencies. If you don't have Yarn installed, you can install it by following the instructions on the [Yarn website](https://classic.yarnpkg.com/en/docs/install). Once Yarn is installed, you can install the project dependencies by running:
+    ```bash
+    yarn
+    ```
+5. **Run the Project:**
+    After all dependencies are installed, you can start the project by running:
+    ```bash
+    yarn start
+    ```
+    The project should now be running on your local machine. Open your web browser and navigate to http://localhost:3000 to view the project.
 
-- Fork the Repository on GitHub (by pressing `fork` button)
-- Clone the Repository on your machine (`git clone https://github.com/<YOUR NAME>/open-bus-map-search`)
-- Define your fork as remote - `git remote set-url origin https://github.com/<YOUR NAME>/open-bus-map-search`
-- Install dependencies `yarn`
-- Run dev server `yarn start`
 
 # How to open the PR
 

README.md

@@ -7,7 +7,11 @@ This is the official repository of the open bus (תחב"צ פתוחה / דאטא
 Please feel free to submit pull requests and contribute to the project.
 For more details about contributing, see the [CONTRIBUTION.md](CONTRIBUTION.md) file.
 
+# Running the project locally
+An explanation how to run the project locally you can [read here](CONTRIBUTION.md#running-the-project-locally).
+
 ## View video (Hebrew language):
+### The video will explain you how to contribute to the project:   
 [![video (hebrew) about the project](https://img.youtube.com/vi/6H6jkJCVhgk/0.jpg)](https://www.youtube.com/watch?v=6H6jkJCVhgk)
 
 # Easter eggs

src/layout/ThemeContext.tsx

@@ -0,0 +1,52 @@
+// ThemeContext.js
+import React, { FC, PropsWithChildren, createContext, useContext, useState } from 'react'
+import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'
+import { ConfigProvider, theme } from 'antd'
+import heIL from 'antd/es/locale/he_IL'
+export interface ThemeContextInterface {
+  toggleTheme: () => void
+  isDarkTheme: boolean
+}
+const ThemeContext = createContext({} as ThemeContextInterface)
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+  },
+})
+
+const lightTheme = createTheme({
+  palette: {
+    mode: 'light',
+  },
+})
+
+const { defaultAlgorithm, darkAlgorithm } = theme
+export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [isDarkTheme, setIsDarkTheme] = useState(false)
+
+  const toggleTheme = () => {
+    setIsDarkTheme((prevTheme) => !prevTheme)
+  }
+
+  const contextValue = {
+    isDarkTheme,
+    toggleTheme,
+  }
+
+  return (
+    <ConfigProvider
+      direction="rtl"
+      locale={heIL}
+      theme={{
+        algorithm: isDarkTheme ? darkAlgorithm : defaultAlgorithm,
+      }}>
+      <MuiThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
+        <ThemeContext.Provider value={contextValue}> {children} </ThemeContext.Provider>
+      </MuiThemeProvider>
+    </ConfigProvider>
+  )
+}
+
+export const useTheme = () => {
+  return useContext(ThemeContext)
+}

src/layout/header/Header.css

@@ -0,0 +1,9 @@
+.main-header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background: #fff;
+}
+.main-header.dark {
+  background: #141414;
+}

src/layout/header/Header.tsx

@@ -1,15 +1,25 @@
 import { Layout } from 'antd'
 import { MenuOutlined } from '@ant-design/icons'
 import { useContext } from 'react'
-import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
-
+import { LayoutContextInterface, LayoutCtx } from '../LayoutContext'
+import { useTheme } from '../ThemeContext'
+import { BulbFilled, BulbOutlined } from '@ant-design/icons'
+import './Header.css'
+import cn from 'classnames'
 const { Header } = Layout
 
 const MainHeader = () => {
   const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
+  const { isDarkTheme, toggleTheme } = useTheme()
   return (
-    <Header style={{ background: 'white' }} className="hideOnDesktop">
-      <MenuOutlined onClick={() => setDrawerOpen(true)} />
+    <Header className={cn('main-header', { dark: isDarkTheme })}>
+      <MenuOutlined onClick={() => setDrawerOpen(true)} className="hideOnDesktop" />
+      <div style={{ flex: 1 }}>&nbsp;</div>
+      <button
+        onClick={toggleTheme}
+        style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
+        {isDarkTheme ? <BulbOutlined style={{ color: '#fff' }} /> : <BulbFilled />}
+      </button>
     </Header>
   )
 }

src/layout/sidebar/GitHubLink/GitHubLink.tsx

@@ -1,5 +1,6 @@
 import { GithubOutlined } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
+import { useCallback } from 'react'
 import './GitHubLink.scss'
 
 export default function GitHubLink() {
@@ -12,9 +13,9 @@ export default function GitHubLink() {
     element: null,
   }
 
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
     window.open(data.path, '_blank')
-  }
+  }, [])
 
   return (
     <div className="github-link" onClick={handleClick}>

src/pages/about/index.tsx

@@ -2,22 +2,22 @@ import styled from 'styled-components'
 import SlackIcon from '../../resources/slack-icon.svg'
 import { useTranslation } from 'react-i18next'
 import Widget from 'src/shared/Widget'
-import { Typography } from 'antd'
+import { Space, Typography } from 'antd'
 
 import './About.scss'
 const { Title } = Typography
 const About = () => {
   return (
     <AboutStyle>
-      <div className="about-center-container">
-        <Title level={3}> קצת עלינו</Title>
+      <Space direction="vertical" size="middle">
+        <Title level={3}>קצת עלינו</Title>
         <WhatIsWebsite />
         <DiscoveredMistake />
         <Privacy />
         <License />
         <Questions />
         <Funding />
-      </div>
+      </Space>
     </AboutStyle>
   )
 }

src/routes/MainRoute.tsx

@@ -1,7 +1,5 @@
 import { useCallback, useEffect } from 'react'
-import { ConfigProvider } from 'antd'
 import 'leaflet/dist/leaflet.css'
-import heIL from 'antd/es/locale/he_IL'
 import { useSearchParams } from 'react-router-dom'
 import { PageSearchState, SearchContext } from '../model/pageState'
 import moment from 'moment'
@@ -12,25 +10,12 @@ import { CacheProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 import rtlPlugin from 'stylis-plugin-rtl'
 import 'moment/locale/he'
-import { heIL as heILmui } from '@mui/x-date-pickers/locales'
-import { ThemeProvider, createTheme } from '@mui/material'
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { LocalizationProvider } from '@mui/x-date-pickers'
+import { ThemeProvider } from '../layout/ThemeContext'
 import { PAGES } from '../routes'
 import { MainLayout } from '../layout'
 
-const theme = createTheme(
-  {
-    direction: 'rtl',
-    palette: {
-      primary: {
-        main: '#5f5bff',
-      },
-    },
-  },
-  heILmui,
-)
-
 // Create rtl cache
 const cacheRtl = createCache({
   key: 'muirtl',
@@ -85,13 +70,11 @@ export const MainRoute = () => {
   return (
     <SearchContext.Provider value={{ search, setSearch: safeSetSearch }}>
       <CacheProvider value={cacheRtl}>
-        <ThemeProvider theme={theme}>
-          <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
-            <ConfigProvider direction="rtl" locale={heIL}>
-              <MainLayout />
-            </ConfigProvider>
-          </LocalizationProvider>
-        </ThemeProvider>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
+          <ThemeProvider>
+            <MainLayout />
+          </ThemeProvider>
+        </LocalizationProvider>
       </CacheProvider>
     </SearchContext.Provider>
   )

src/shared/Widget.tsx

@@ -1,5 +1,7 @@
+import { Card } from 'antd'
+
 const Widget = (props: { children: React.ReactNode }) => {
-  return <section className="widget">{props.children}</section>
+  return <Card>{props.children}</Card>
 }
 
 export default Widget