add a couple stylistic changes to the password dialouge

src/pages/profile_page.html

@@ -14,10 +14,20 @@
 <div id="popup_background" class="blocked"></div>
 
 <div id="change_password_dialogue" class="card static_center">
-    Change Password
-
+    <div class="dialouge_title">Change Password</div>
+    <!--<div class="dialouge_title" id=change_password_text">Change Password</div>-->
     <button id="close_password_dialogue">X</button>
 
+    <hr
+        style="
+            border: 0;
+            border-top: 1px solid var(--border-subtle);
+            margin: 20px 0;
+            margin-bottom: 0px;
+            margin-top: 0px;
+        "
+    />
+
     <div id="password_error" class="error hidden">
         <div id="password_text"></div>
         <button id="password_error_close_button" class="close_error_button">

static/javascript/handle_password_change.js

@@ -44,7 +44,7 @@ changePasswordButton.addEventListener("click", () => {
     document.getElementById("new_password").value !==
     document.getElementById("new_password_repeat").value
   ) {
-    displayError("New password and new password repeat do not match");
+    displayError("New passwords do not match");
     return;
   }
 

static/profile_page.css

@@ -128,7 +128,11 @@
 }
 
 #close_password_dialogue {
-    width: fit-content;
+    display: inline-block;
+    aspect-ratio: 1 / 1;
     position: absolute;
     right: 2.5rem;
+    padding: 0px;
+    margin: 0px;
+    width: 30px;
 }

static/style.css

@@ -77,3 +77,8 @@ input::placeholder {
     background-color: black;
     opacity: 10%;
 }
+
+.dialouge_title {
+    font-size: 20px;
+    margin-bottom: 0px;
+}