🔧Cleanup, small tweaks and style updates

yungsamd17 · Feb 10, 2024 · 8ec7f13 · 8ec7f13
1 parent 9d23d80
commit 8ec7f13
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/popup.html b/popup.html
@@ -1,16 +1,18 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <title>Quick Notes</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
     <link rel="stylesheet" href="src/style.css">
 </head>
+
 <body>
     <header>
         <h1><a href="popup.html" target="_blank" title="Open Quick Notes in new tab"><i class="fa-solid fa-note-sticky"></i>&nbsp;Quick Notes</a></h1>
         <div id="buttons-container">
-            <button id="new-note-button"><i class="fa-solid fa-plus"></i> New Note</button>
-            <button id="saved-notes-button"><i class="fa-regular fa-folder-open"></i> Saved Notes</button>
+            <button id="new-note-button"><i class="fa-solid fa-plus"></i>&nbsp;New Note</button>
+            <button id="saved-notes-button"><i class="fa-regular fa-folder-open"></i>&nbsp;Saved Notes</button>
         </div>
     </header>
     <input type="text" id="note-title" placeholder="Note Title">
@@ -37,4 +39,5 @@ <h2><i class="fa-regular fa-folder-open"></i> Saved Notes</h2>
     </div>
     <script src="src/popup.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/src/popup.js b/src/popup.js
@@ -91,7 +91,7 @@ function displaySavedNotes() {
         } else {
             // Reverse the order of notes to display newest notes first
             const reversedNotes = notes.slice().reverse();
-            
+
             // Display saved notes
             reversedNotes.forEach((note) => {
                 const listItem = document.createElement('li');
@@ -259,4 +259,4 @@ modalContainer.addEventListener('click', (event) => {
 
 closeButton.addEventListener('click', () => {
     modalContainer.classList.remove('visible');
-});
+});
diff --git a/src/style.css b/src/style.css
@@ -17,20 +17,23 @@ body {
 ::-webkit-scrollbar {
     width: 10px;
 }
+
 ::-webkit-scrollbar-track {
     background: rgba(56, 56, 63, 0.4);
     border-radius: 5px;
 }
+
 ::-webkit-scrollbar-thumb {
     background: #38383f;
     border-radius: 5px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba(253, 233, 87, 1.0);;
+    background: rgba(253, 233, 87, 1.0);
 }
 
 ::selection {
-    background-color: rgba(175.31, 175.31, 175.31, 0.4);;
+    background-color: rgba(175.31, 175.31, 175.31, 0.4);
     color: #fff;
 }
 
@@ -42,7 +45,7 @@ header {
 
 h1 {
     font-size: 24px;
-    margin: 15px 0;
+    margin: 10px 0;
     color: #fff;
     display: flex;
     align-items: center;
@@ -67,8 +70,10 @@ h1 a i {
 }
 
 #buttons-container button {
-    height: 70%;
+    height: 60%;
     margin-left: 10px;
+    display: flex;
+    align-items: center;
 }
 
 button {
@@ -77,6 +82,7 @@ button {
     border-radius: 5px;
     cursor: pointer;
     background-color: #38383f;
+    border: 1px solid #54545f;
 }
 
 button:hover {
@@ -186,12 +192,13 @@ li.selected {
 #modal-close-button:hover {
     color: #fff;
 }
+
 .modal-content-buttons {
     display: flex;
 }
 
 .modal-content-buttons button {
-    margin-right: 5px;
+    margin-right: 10px;
 }
 
 #delete-all-notes-button,
@@ -232,7 +239,6 @@ li.selected {
     float: right;
     margin-left: 5px;
     opacity: 0;
-    transition: opacity 0.1s ease-in-out;
 }
 
 #saved-notes-list li:hover button {