From fd73f9ffb0d7def19264c082eb3cde83e7f1a73f Mon Sep 17 00:00:00 2001
From: quanmuito <tranleminhquan1102@gmail.com>
Date: Tue, 23 Jan 2024 01:58:06 +0200
Subject: [PATCH] clean up and WIP

---
 package.json                  |  3 ++-
 src/App.tsx                   | 22 ++++++++++++++--
 src/components/DatePicker.tsx | 48 +++++++++++++++++------------------
 src/style/_datepicker.scss    | 23 ++++++++++++-----
 4 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/package.json b/package.json
index b7caad3..2430ac2 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "dependencies": {
         "node-sass": "^9.0.0",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.10.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5"
@@ -64,4 +65,4 @@
             "last 1 safari version"
         ]
     }
-}
\ No newline at end of file
+}
diff --git a/src/App.tsx b/src/App.tsx
index 62d79aa..3f53bbc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,10 @@
+import React, { useState } from 'react';
+import { Modal } from 'react-bootstrap';
 import { DatePicker } from 'components';
-import React from 'react';
 
 export default function App() {
+    const [modalShow, setModalShow] = useState(false);
+
     return (
         <div className="App">
             <div className="container">
@@ -90,11 +93,11 @@ export default function App() {
                     <button
                         className="input-group-text justify-content-center"
                         style={ { width: '15%' } }
+                        onClick={ () => setModalShow(true) }
                     >
                         <i className="bi bi-calendar3"></i>
                     </button>
                 </div>
-                <DatePicker />
                 <button className="btn btn-primary">Calculate delivery price</button>
                 <div className="input-group">
                     <span
@@ -119,6 +122,21 @@ export default function App() {
                         <i className="bi bi-currency-euro"></i>
                     </span>
                 </div>
+
+                <Modal
+                    show={ modalShow }
+                    onHide={ () => setModalShow(false) }
+                    size="lg"
+                    aria-labelledby="contained-modal-title-vcenter"
+                    centered
+                >
+                    <Modal.Header closeButton>
+                        <h5>Selected: 23/01/2024 08:30</h5>
+                    </Modal.Header>
+                    <Modal.Body className="d-flex justify-content-center">
+                        <DatePicker />
+                    </Modal.Body>
+                </Modal>
             </div>
         </div>
     );
diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
index c03e6dc..cdd0583 100644
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@@ -205,32 +205,30 @@ export const DatePicker = () => {
     };
 
     return (
-        <div className="DatePicker">
-            <div className="dp-container">
-                <div className="dp-head">
-                    <button onClick={ () => onChangeYear(true) }>
-                        <i className="bi bi-chevron-double-left"></i>
-                    </button>
-                    <button onClick={ () => onChangeMonth(true) }>
-                        <i className="bi bi-chevron-left"></i>
-                    </button>
-                    <div style={ { margin: '0 2rem' } }>
-                        <h4 className="text-center">{ state.display.year }</h4>
-                        <p className="text-center">{ MONTHS[state.display.month] }</p>
-                    </div>
-                    <button onClick={ () => onChangeMonth() }>
-                        <i className="bi bi-chevron-right"></i>
-                    </button>
-                    <button onClick={ () => onChangeYear() }>
-                        <i className="bi bi-chevron-double-right"></i>
-                    </button>
-                </div>
-                <div className="dp-body">
-                    { renderCalendar() }
-                </div>
-                <div className="dp-body">
-                    { renderClock() }
+        <div className="dp-container">
+            <div className="dp-head">
+                <button onClick={ () => onChangeYear(true) }>
+                    <i className="bi bi-chevron-double-left"></i>
+                </button>
+                <button onClick={ () => onChangeMonth(true) }>
+                    <i className="bi bi-chevron-left"></i>
+                </button>
+                <div style={ { margin: '0 2rem' } }>
+                    <h3 className="text-center">{ state.display.year }</h3>
+                    <h5 className="text-center">{ MONTHS[state.display.month] }</h5>
                 </div>
+                <button onClick={ () => onChangeMonth() }>
+                    <i className="bi bi-chevron-right"></i>
+                </button>
+                <button onClick={ () => onChangeYear() }>
+                    <i className="bi bi-chevron-double-right"></i>
+                </button>
+            </div>
+            <div className="dp-body">
+                { renderCalendar() }
+            </div>
+            <div className="dp-body">
+                { renderClock() }
             </div>
         </div>
     );
diff --git a/src/style/_datepicker.scss b/src/style/_datepicker.scss
index 91058a6..a067d37 100644
--- a/src/style/_datepicker.scss
+++ b/src/style/_datepicker.scss
@@ -13,23 +13,34 @@
     /* Non-prefixed version, currently */
 }
 
+.modal-header {
+    background-color: $background;
+    button {
+        background-color: $onBackground;
+    }
+}
+
+.modal-body {
+    background-color: $background;
+}
+
 .dp-container {
-    width: 25vw;
+    width: 70%;
     border-radius: 1.5rem;
     padding: 1.5rem;
-    background: $onBackground;
+    background: $surface;
     box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
-    color: $background;
+    color: $onSurface;
     .dp-head {
         width: 100%;
         @include flex-center-row;
         button {
-            width: 2rem;
-            height: 2rem;
+            width: 2.5rem;
+            height: 2.5rem;
             margin: 0.5rem;
             border: 1px solid black;
             border-radius: 50%;
-            background-color: $onBackground;
+            background-color: #f8f9fa;
         }
     }
     .dp-body {