Refactor : title attr, icon-size & minor changes

t007rushi · Jun 18, 2022 · 7a2387e · 7a2387e
1 parent 5f4d41f
commit 7a2387e
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 141 deletions.
diff --git a/src/components/CreateNote/CreateNote.jsx b/src/components/CreateNote/CreateNote.jsx
@@ -17,7 +17,6 @@ import { Priority } from "../Priority/Priority";
 
 export const CreateNote = () => {
   const [expand, setExpand] = useState(false);
-
 
   const [description, setDescription] = useState("");
   const closerEditor = () => {
@@ -33,108 +32,109 @@ export const CreateNote = () => {
   };
 
   return (
-      <div className="flex-row center-it">
-        <form
-          className={`create-note ${notesData.color}`}
-          onSubmit={(e) => {
-            e.preventDefault();
-            closerEditor();
-            addNotes({
-              ...notesData,
-              description: description,
-              inTrash: false,
-            });
-            noteDispatcher({ type: CLEAR_INPUTS, payload: initialState });
-            setDescription("");
-          }}
-        >
-          <div className="flex-row note-title-pin spc-btwn ">
-            <input
-              className="note-title-input"
-              value={notesData.title}
-              onClick={expandEditor}
-              placeholder={expand ? "Title" : "Take a Note..."}
-              onChange={(e) =>
-                noteDispatcher({ type: SET_TITLE, payload: e.target.value })
-              }
-            />
-            {expand && (
+    <div className="flex-row center-it">
+      <form
+        className={`create-note ${notesData.color}`}
+        onSubmit={(e) => {
+          e.preventDefault();
+          closerEditor();
+          addNotes({
+            ...notesData,
+            description: description,
+            inTrash: false,
+          });
+          noteDispatcher({ type: CLEAR_INPUTS, payload: initialState });
+          setDescription("");
+        }}
+      >
+        <div className="flex-row note-title-pin spc-btwn ">
+          <input
+            className="note-title-input"
+            value={notesData.title}
+            onClick={expandEditor}
+            placeholder={expand ? "Title" : "Take a Note..."}
+            onChange={(e) =>
+              noteDispatcher({ type: SET_TITLE, payload: e.target.value })
+            }
+          />
+          {expand && (
+            <button
+              className="note-pin"
+              type="button"
+              title="pin"
+              onClick={() => noteDispatcher({ type: PIN })}
+            >
+              {notesData.ispin ? <BsFillPinFill /> : <BsPin />}
+            </button>
+          )}
+        </div>
+        {expand && (
+          <div>
+            <Editor handleInput={handleInput} description={description} />
+            <div className="flex-row gap-btwn">
+              {notesData.labels.map((label) => {
+                return (
+                  <div key={label} className="flex-row label-wrap">
+                    <p>{label}</p>
+                    <span
+                      className="label-delete"
+                      onClick={() =>
+                        noteDispatcher({ type: ADD_LABEL, payload: label })
+                      }
+                    >
+                      x
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+            <nav className="flex-row note-options">
+              <p className={notesData.priority ? "priority-tag" : ""}>
+                {notesData.priority}
+              </p>
+              {/* LABEL */}
+              <Label
+                labels={notesData.labels}
+                addLabels={(label) => {
+                  noteDispatcher({ type: ADD_LABEL, payload: label });
+                }}
+              />
+              {/* PRIORITY */}
+              <Priority
+                priority={notesData.priority}
+                updatePriority={(priorityValue) => {
+                  noteDispatcher({
+                    type: SET_PRIORITY,
+                    payload: priorityValue,
+                  });
+                }}
+              />
+              {/* COLOR */}
+              <Colorpalette
+                updateColor={(color) =>
+                  noteDispatcher({ type: SET_COLOR, payload: color })
+                }
+              />
+              <button type="submit" className="btn add-btn">
+                Add
+              </button>
               <button
-                className="note-pin"
-                type="button"
-                onClick={() => noteDispatcher({ type: PIN })}
+                className="btn secondary-btn add-btn close-btn"
+                onClick={() => {
+                  closerEditor();
+                  noteDispatcher({
+                    type: CLEAR_INPUTS,
+                    payload: initialState,
+                  });
+                  setDescription("");
+                }}
               >
-                {notesData.ispin ? <BsFillPinFill /> : <BsPin />}
+                Close
               </button>
-            )}
+            </nav>
           </div>
-          {expand && (
-            <div>
-              <Editor handleInput={handleInput} description={description} />
-              <div className="flex-row gap-btwn">
-                {notesData.labels.map((label) => {
-                  return (
-                    <div key={label} className="flex-row label-wrap">
-                      <p>{label}</p>
-                      <span
-                        className="label-delete"
-                        onClick={() =>
-                          noteDispatcher({ type: ADD_LABEL, payload: label })
-                        }
-                      >
-                        x
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-              <nav className="flex-row note-options">
-                <p className={notesData.priority ? "priority-tag" : ""}>
-                  {notesData.priority}
-                </p>
-                {/* LABEL */}
-                <Label
-                  labels={notesData.labels}
-                  addLabels={(label) => {
-                    noteDispatcher({ type: ADD_LABEL, payload: label });
-                  }}
-                />
-                {/* PRIORITY */}
-                <Priority
-                  priority={notesData.priority}
-                  updatePriority={(priorityValue) => {
-                    noteDispatcher({
-                      type: SET_PRIORITY,
-                      payload: priorityValue,
-                    });
-                  }}
-                />
-                {/* COLOR */}
-                <Colorpalette
-                  updateColor={(color) =>
-                    noteDispatcher({ type: SET_COLOR, payload: color })
-                  }
-                />
-                <button type="submit" className="btn add-btn">
-                  Add
-                </button>
-                <button
-                  className="btn secondary-btn add-btn close-btn"
-                  onClick={() => {
-                    closerEditor();
-                    noteDispatcher({
-                      type: CLEAR_INPUTS,
-                      payload: initialState,
-                    });
-                    setDescription("");
-                  }}
-                >
-                  Close
-                </button>
-              </nav>
-            </div>
-          )}
-        </form>
-      </div>
+        )}
+      </form>
+    </div>
   );
 };
diff --git a/src/components/Label/Label.jsx b/src/components/Label/Label.jsx
@@ -11,6 +11,7 @@ export const Label = ({ labels, addLabels }) => {
   return (
     <div className="labels-container" onClick={(e) => e.preventDefault()}>
       <MdOutlineLabel
+        title="label"
         className="label-icon"
         onClick={() => showLabelField((prev) => !prev)}
       />

diff --git a/src/components/Label/label.css b/src/components/Label/label.css
@@ -1,43 +1,44 @@
-.labels-container{
-   padding: 5px;
+.labels-container {
+  padding: 5px;
 }
 
 .labels-wrapper {
-    background-color:var(--background-color);
-    border : 1px solid var(--foreground-color);
-    position: absolute;
-    padding:10px;
-    border-radius:5px;
-  }
-
-  .label-icon{
+  background-color: var(--background-color);
+  border: 1px solid var(--foreground-color);
+  position: absolute;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.label-icon {
+  color: var(--foreground-color);
+  font-size: 1.5rem;
+}
+
+.label-txt {
+  width: 5rem;
+  border-radius: 5px;
+  outline: none;
+  border: none;
+  padding: 5px;
+  background-color: var(--accent-one-color);
   color: var(--foreground-color);
-  }
-
-  .label-txt {
-    width: 5rem;
-    border-radius: 5px;
-    outline: none;
-    border: none;
-    padding: 5px;
-    background-color: var(--accent-one-color);
-    color: var(--foreground-color);
-    border: 1px solid var(--foreground-color);
-  }
+  border: 1px solid var(--foreground-color);
+}
 
-  .input-checkbox{
-    color:var(--foreground-color);
-    align-items:center;
-    gap:10px;
-  }
+.input-checkbox {
+  color: var(--foreground-color);
+  align-items: center;
+  gap: 10px;
+}
 
-  .label-check-input{
-    accent-color: var(--primary-color);
-  }
-  .label-txt-add{
-    border-radius: 50%;
-    padding:0 5px;
-    font-size: 1rem;
-    outline: none;
-    border: none;
-  }
+.label-check-input {
+  accent-color: var(--primary-color);
+}
+.label-txt-add {
+  border-radius: 50%;
+  padding: 0 5px;
+  font-size: 1rem;
+  outline: none;
+  border: none;
+}
diff --git a/src/components/Note/note.css b/src/components/Note/note.css
@@ -69,3 +69,7 @@
 .my-masonry-grid_column > div {
   margin-bottom: 30px;
 }
+
+.note-icons {
+  font-size: 1.5rem;
+}
diff --git a/src/components/NoteCard/NoteCard.jsx b/src/components/NoteCard/NoteCard.jsx
@@ -14,6 +14,7 @@ import { useArchive } from "../../context/archive-context";
 import { matchPath, useLocation } from "react-router-dom";
 import { Label } from "../Label/Label";
 import { EditorModal } from "../EditorModal/EditorModal";
+import "../Note/note.css";
 
 export const NoteCard = ({ Note, id }) => {
   const { togglePin, Change_color, inTrash, removeFromnote, tagUpdate } =
@@ -91,6 +92,8 @@ export const NoteCard = ({ Note, id }) => {
           pathname === "/search" ||
           matchPath("/labels/*", pathname)) && (
           <RiInboxArchiveLine
+            title="Archive"
+            className="note-icons"
             onClick={() => {
               addToArchive(Note, id);
             }}
@@ -101,33 +104,49 @@ export const NoteCard = ({ Note, id }) => {
           pathname === "/search" ||
           matchPath("/labels/*", pathname)) && (
           <FiTrash2
+            title="Trash"
+            className="note-icons"
             onClick={() => {
               inTrash(Note, id);
             }}
           />
         )}
         {pathname === "/archives" && (
           <RiInboxUnarchiveLine
+            title="Unarchive"
+            className="note-icons"
             onClick={() => {
               restoreToArchive(id);
             }}
           />
         )}
         {pathname === "/archives" && (
-          <MdDeleteForever onClick={() => deleteToArchive(id)} />
+          <MdDeleteForever
+            title="Delete"
+            className="note-icons"
+            onClick={() => deleteToArchive(id)}
+          />
         )}
         {pathname === "/trash" && (
           <MdRestoreFromTrash
+            title="Restore"
+            className="note-icons"
             onClick={() => {
               inTrash(Note, id);
             }}
           />
         )}
         {pathname === "/trash" && (
-          <MdDeleteForever onClick={() => removeFromnote(id)} />
+          <MdDeleteForever
+            title="Delete"
+            className="note-icons"
+            onClick={() => removeFromnote(id)}
+          />
         )}
         {pathname !== "/trash" && (
           <MdOutlineEdit
+            title="Edit"
+            className="note-icons"
             onClick={() => {
               showModal(true);
             }}

diff --git a/src/components/Priority/Priority.jsx b/src/components/Priority/Priority.jsx
@@ -8,6 +8,7 @@ export const Priority = ({ priority, updatePriority }) => {
   return (
     <div className="priority-container" onClick={(e) => e.preventDefault()}>
       <RiArrowUpDownFill
+        title="priority"
         className="priority-icon"
         onClick={() => showpriorityField((prev) => !prev)}
       />