more style to the buttons and form

Views/Note/Index.cshtml

@@ -11,10 +11,10 @@
         }
     </select>
 
-    <a asp-action="Delete" asp-controller="Note" asp-route-noteName="@Model.CurrentNote" class="btn btn-danger">Delete</a>
+    <a asp-action="Delete" asp-controller="Note" asp-route-noteName="@Model.CurrentNote" class="btn-symbol btn-delete" title="Delete Note">✕</a>
     <form method="post" class="action-form" asp-action="Create" asp-controller="Note">
         <input type="text" name="noteName" placeholder="Note name" />
-        <button type="submit" class="btn btn-primary">Create</button>
+        <button type="submit" class="btn-symbol btn-create" title="Create Note">💾</button>
     </form>
 </div>
 

wwwroot/css/site.css

@@ -25,11 +25,120 @@ div.note-actions {
     bottom: 5px;
     left: 0;
     font-size: 14px;
-}   
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+}
 
 select.note-dropdown {
-    padding: 6px;
+    padding: 6px 8px;
     border-radius: 5px;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    font-size: 13px;
+    min-width: 120px;
+    max-width: 150px;
+}
+
+body.dark select.note-dropdown {
+    background-color: #333;
+    color: #ddd;
+    border: 1px solid #555;
+}
+
+form.action-form {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+form.action-form input[type="text"] {
+    padding: 6px 8px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 13px;
+    width: 100px;
+    background-color: #fff;
+}
+
+body.dark form.action-form input[type="text"] {
+    background-color: #333;
+    color: #ddd;
+    border: 1px solid #555;
+}
+
+form.action-form input[type="text"]:focus {
+    outline: none;
+    border-color: #009E60;
+    box-shadow: 0 0 0 2px rgba(0, 158, 96, 0.2);
+}
+
+.btn-symbol {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 5px;
+    border: 1px solid;
+    text-decoration: none;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s;
+    line-height: 1;
+}
+
+.btn-delete {
+    background-color: #dc3545;
+    color: #fff;
+    border-color: #dc3545;
+}
+
+.btn-delete:hover {
+    background-color: #c82333;
+    border-color: #bd2130;
+    transform: scale(1.05);
+}
+
+.btn-create {
+    background-color: #009E60;
+    color: #fff;
+    border-color: #009E60;
+}
+
+.btn-create:hover {
+    background-color: #007a4d;
+    border-color: #006b42;
+    transform: scale(1.05);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    div.note-actions {
+        gap: 6px;
+        padding: 6px;
+        font-size: 12px;
+    }
+    
+    select.note-dropdown {
+        min-width: 100px;
+        max-width: 120px;
+        font-size: 12px;
+        padding: 5px 6px;
+    }
+    
+    form.action-form input[type="text"] {
+        width: 80px;
+        font-size: 12px;
+        padding: 5px 6px;
+    }
+    
+    .btn-symbol {
+        width: 24px;
+        height: 24px;
+        font-size: 12px;
+    }
 }
 
 textarea {
@@ -97,13 +206,4 @@ form.login-form input[type=password] {
 
 button, select {
     cursor: pointer;    
-}
-
-form button {
-    color: #fff;
-    background-color: #009E60;
-}
-
-form.action-form {
-    display: inline;
 }