initial commit

package.json

@@ -10,8 +10,12 @@
     "@types/react-dom": "^16.9.0",
     "axios": "^0.19.2",
     "cross-env": "^7.0.2",
+    "moment": "^2.29.3",
     "react": "^16.13.1",
+    "react-datepicker": "^4.7.0",
+    "react-datetime-picker": "^3.5.0",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.3.1",
     "react-scripts": "4.0.3",
     "shortid": "^2.2.15",
     "typescript": "4.5.3"
@@ -39,6 +43,8 @@
     ]
   },
   "devDependencies": {
+    "@types/react-datepicker": "^4.4.1",
+    "@types/react-datetime-picker": "^3.4.1",
     "@types/shortid": "^0.0.29"
   }
 }

src/App.css

@@ -1,125 +1,8 @@
 .App {
-  text-align: center;
-  display: flex;
-  justify-content: center;
-}
-
-button {
-  outline: none;
-  border: none;
-  box-shadow: 2px 0 2px currentColor;
-  border-radius: 4px;
-  min-height: 32px;
-  min-width: 80px;
-  padding: 4px 8px;
-}
-
-button:hover {
-  opacity: 0.85;
-}
-
-input[type="checkbox"] {
-  width: 24px;
-  height: 24px;
-  box-shadow: none;
-  border: none;
-  outline: none;
-}
-
-input[type="checkbox"]:focus {
-  box-shadow: none;
-  border: none;
-  outline: none;
-}
-
-input {
-  min-height: 36px;
-  border: none;
-  outline: none;
-  padding: 0 12px;
-  box-shadow: 2px 0 4px rgba(0,0,0, 0.2);
-  border-radius: 4px;
-}
-
-input:focus {
-  box-shadow: 1px 0 9px rgba(0,0,0, 0.25);
-}
-
-.ToDo__container {
-  border: 1px solid rgba(0,0,0, 0.13);
-  border-radius: 8px;
-  width: 500px;
-  margin-top: 5rem;
-  padding: 24px;
-  box-shadow: 2px 2px 1px rgba(0,0,0, 0.09),
-              3px 2px 3px rgba(0,0,0, 0.05);
-}
-
-.Todo__creation {
-  display: flex;
-}
-
-.Todo__input {
-  flex: 1 1;
-}
-
-.ToDo__list {
-  display: flex;
-  flex-direction: column;
-  margin-top: 1.5rem;
-}
-
-.ToDo__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.ToDo__item > span {
-  flex: 1 1;
-  text-align: left;
-  margin-left: 8px;
-}
-
-.Todo__content {
-  flex: 1 1;
-}
-
-.Todo__delete {
-  outline: none;
-  border: none;
-  width: 32px;
-  height: 32px;
-  min-width: auto;
-  min-height: auto;
-  box-shadow: none;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.Todo__action, .Todo__delete {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-}
-
-.Todo__toolbar {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 24px;
-}
-
-.Todo__tabs {
-  display: flex;
-  justify-content: center;
-}
-
-.Todo__tabs > *:not(:last-child) {
-  margin-right: 8px;
-}
-
-.Action__btn {
+  display         : flex;
+  justify-content : center;
+  align-items     : center;
+  height          : 100%;
+  width           : 100%;
+  padding         : 20px;
 }

src/App.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-
-import ToDoPage from './ToDoPage';
+import React    from 'react';
+import ToDoPage from './components/ToDoPage';
 
 import './App.css';
 
 function App() {
   return (
     <main className="App">
-      <ToDoPage />
+      <ToDoPage/>
     </main>
   );
 }