hide the warnings because I dont like the UI

src/pages/profile_page.html

@@ -11,9 +11,9 @@
 <link rel="stylesheet" href="static/profile_page.css" />
 <link rel="stylesheet" href="static/progress_bar.css" />
 
-<div id="popup_background" class="blocked hidden"></div>
+<div id="popup_background" class="blocked"></div>
 
-<div id="change_password_dialogue" class="card hidden static_center">
+<div id="change_password_dialogue" class="card static_center">
     <div class="dialouge_title">Change Password</div>
     <button id="close_password_dialogue">X</button>
 
@@ -79,6 +79,16 @@
         </div>
     </div>
 
+    <!--<div id="password_errors">
+        <div class="password_error">Error 1</div>
+        <div class="password_error">Error 2</div>
+    </div>
+
+    <div id="password_warnings">
+        <div class="password_error">Error 1</div>
+        <div class="password_error">Error 2</div>
+    </div>-->
+
     <button id="final_change_password_button">Change Password</button>
 </div>
 

static/profile_page.css

@@ -136,3 +136,23 @@
     margin: 0px;
     width: 30px;
 }
+
+#password_errors {
+    background-color: var(--error-red);
+    border-radius: 8px;
+    padding: 20px;
+    border-color: var(--error-border-red);
+    border-width: 2px;
+    border-style: solid;
+    color: var(--text-main);
+}
+
+#password_warnings {
+    background-color: var(--warning-yellow);
+    border-radius: 8px;
+    padding: 20px;
+    border-color: var(--warning-border-yellow);
+    border-width: 2px;
+    border-style: solid;
+    color: var(--text-main);
+}

static/style.css

@@ -16,8 +16,11 @@
     --error-red: #ef4444; /* Professional Red */
     --error-border-red: #e22d2d;
 
+    --warning-yellow: #fef08a;
+    --warning-border-yellow: #fde047;
+
     --password-strength-weak: var(--error-red);
-    --password-strength-medium: #efe943;
+    --password-strength-medium: var(--warning-border-yellow);
     --password-strength-strong: #43ef6b;
 
     font-family: "Inter", sans-serif;
@@ -90,4 +93,5 @@ input::placeholder {
 .dialouge_title {
     font-size: 20px;
     margin-bottom: 0px;
+    color: var(--text-main) !important;
 }