css fixes and layout changes

Author: abhishekrathore

db.json

@@ -7,13 +7,6 @@
       "createdAt": "2022-09-17T16:15:54.984Z",
       "updatedAt": "2022-09-17T16:21:15.119Z"
     },
-    {
-      "text": "note 2 (updated now)",
-      "priority": "low",
-      "id": "7f77e872-f7f8-4617-ab9d-8f32a46780fb",
-      "createdAt": "2022-09-17T16:15:59.545Z",
-      "updatedAt": "2022-09-17T18:08:23.343Z"
-    },
     {
       "text": "note 3 (updated)",
       "priority": "high",
@@ -22,25 +15,18 @@
       "updatedAt": "2022-09-17T16:18:04.640Z"
     },
     {
-      "text": "asdasdsad\nAsadasds\nasdasdasdad",
-      "priority": "low",
-      "id": "52ceb228-fc3b-440e-b849-31351a188498",
-      "createdAt": "2022-09-17T19:00:58.267Z",
-      "updatedAt": "2022-09-17T19:00:58.267Z"
-    },
-    {
-      "text": "line 1\nline 2\nline 3\nline 4\n",
-      "priority": "low",
-      "id": "a1ad66bb-7f36-48f2-b6b0-e21dfadd5d63",
-      "createdAt": "2022-09-17T19:01:13.245Z",
-      "updatedAt": "2022-09-17T19:01:13.245Z"
+      "text": "medium note",
+      "priority": "medium",
+      "id": "882bbdfa-0beb-4fde-8c7b-72b52327a5fb",
+      "createdAt": "2022-09-18T16:31:15.376Z",
+      "updatedAt": "2022-09-18T16:31:15.376Z"
     },
     {
-      "text": "sdasdadasd asdasd sad asda. asd as das d asd as das d das d sa dd asd das dd\n a sd sa d asdsad \n  sad sadas d asd sad\n a sd sa das d asdsa\n\n\nasdsdasdasd",
+      "text": "a note with \nlong \nlong\nlong\ndata\nasdasd\nasd\nasd\nsad\nasd\nsad\nsa\nd\nas\nd\nas\ndas\nd\ndas\na\nda\ndas\ndsa\ndasda\nd\nasd",
       "priority": "low",
-      "id": "32a0c88d-45cc-4997-bc03-9c5dd31093aa",
-      "createdAt": "2022-09-17T19:02:48.509Z",
-      "updatedAt": "2022-09-17T19:02:48.509Z"
+      "id": "2503cd96-fb40-4750-8b4f-8791b4d329c6",
+      "createdAt": "2022-09-18T16:32:22.138Z",
+      "updatedAt": "2022-09-18T16:32:22.138Z"
     }
   ]
 }

src/App.css

@@ -1,4 +1,15 @@
 .react-switch{
   position: absolute !important;
   right:0;
-}
+}
+
+.App.light{
+  background-color: white;
+  color: black;
+}
+
+.App.dark{
+  background-color: #333;
+  color: white;
+}
+

src/App.tsx

@@ -102,6 +102,7 @@ function App() {
   return (
     <StateContext.Provider value={{ state, dispatch }}>
       <ThemeContext.Provider value={theme}>
+        <div className={`App ${theme}`}>
         <Switch
           onChange={changeHandler}
           checked={checked}
@@ -126,6 +127,7 @@ function App() {
         ></Switch>
         {/* here we want router */}
         <RouterProvider router={router} />
+        </div>
       </ThemeContext.Provider>
     </StateContext.Provider>
   );

src/components/note/note-type.ts

@@ -9,13 +9,13 @@ export type NoteType = {
 }
 
 export enum ColorLight{
-     high='rgb(246, 100, 92)',
-     medium='rgb(244, 158, 127)',
-     low='rgb(248, 249, 175)'
+    high='#FFAEAE',
+    medium='#FFEC94',
+    low='#B0E57C'
 }
 
 export enum ColorDark{
-    high='rgb(143, 66, 61)',
-    medium='rgb(190, 131, 79)',
-    low='rgb(151, 151, 98)'
+    high='#D70000',
+    medium='#CC9933',
+    low='#77A600'
 }

src/components/note/note.tsx

@@ -8,7 +8,7 @@ import { ThemeContext } from '../../context/theme/theme';
 import { StateContext } from '../../context/state/state';
 import { DELETE_NOTE, SET_EDIT_MODE, SET_NOTE_FOR_EDIT } from '../../actions';
 import { deleteNote } from '../../services/notes-service';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 
 type NoteProps = {
   id: string;
@@ -18,7 +18,7 @@ type NoteProps = {
   updatedAt: Date;
   note: NoteType;
   isDetailed?: boolean;
-  height?:string;
+  height?: string;
 };
 
 function Note(props: NoteProps) {
@@ -34,8 +34,8 @@ function Note(props: NoteProps) {
     console.log(await deleteNote(props.id));
     dispatch({ type: DELETE_NOTE, payload: props.id });
   };
-  
-  const optionalProps  = props.height ? {height:props.height}:{}
+
+  const optionalProps = props.height ? { height: props.height } : {};
   return (
     <Card
       bgColor={
@@ -46,17 +46,35 @@ function Note(props: NoteProps) {
       padding="1"
       {...optionalProps}
     >
-      <> 
-      <Link to={props.id} style={{textDecoration:'none',
-     color:`${theme === 'dark'? 'white':'black'}`}}>
-           <div className={props.isDetailed?'text':'text text-hide'}>{props.text}</div>
-      </Link>
+      <>
+        {props.isDetailed ? (
+          <div className={props.isDetailed ? 'text' : 'text text-hide'}>
+            {props.text}
+          </div>
+        ) : (
+          <Link
+            to={props.id}
+            style={{
+              textDecoration: 'none',
+              color: `${theme === 'dark' ? 'white' : 'black'}`,
+            }}
+          >
+            <div className={props.isDetailed ? 'text' : 'text text-hide'}>
+              {props.text}
+            </div>
+          </Link>
+        )}
 
-        <div className='left-corner date'>{props.updatedAt.toLocaleString()}</div>
-        <div className="right-corner">
+        <div className="left-corner date">
+          {props.updatedAt.toLocaleString()}
+        </div>
+        {
+          props.isDetailed ? null: <div className="right-corner">
           <FaEdit onClick={() => editNote(props.note)}></FaEdit>
           <FaTrash onClick={handleDelete}></FaTrash>
         </div>
+        }
+       
       </>
     </Card>
   );

src/pages/detailed-note/detailed-note.css

@@ -1,7 +1,9 @@
 .detailed-note{
-  margin: 0;
+  margin: auto;
+  max-width: 20rem;
   text-align: center;
   padding-top:1rem;
+  min-height: 100vh;
 }
 
 .detailed-note.light{

src/pages/detailed-note/detailed-note.tsx

@@ -3,7 +3,8 @@ import Note from '../../components/note/note';
 import { useContext } from 'react';
 import { ThemeContext } from '../../context/theme/theme';
 import { StateContext } from '../../context/state/state';
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
+import { FaHome } from 'react-icons/fa';
 
 function DetailedNote() {
   const theme = useContext(ThemeContext);
@@ -12,6 +13,15 @@ function DetailedNote() {
   const note = state.notes.find(n=>n.id===id);
   return (
     <div className={`detailed-note ${theme}`}>
+      <Link to="/" style={{
+              textDecoration: 'none',
+              color: `${theme === 'dark' ? 'white' : 'black'}`,
+              float:'left',
+              marginTop:'-0.5rem',
+              marginLeft:'0.5rem'
+            }}>
+           <FaHome ></FaHome>
+      </Link>
       <div>
           {note && <Note
             key={note.id}

src/pages/home/home.css

@@ -1,7 +1,10 @@
 .home{
-  margin: 0;
+  margin: auto;
+  max-width: 20rem;
   text-align: center;
   padding-top:1rem;
+  min-height: 100vh;
+
 }
 .home h2{
   margin: 0;