Add Settings Popup

src/app/features/settings/popup.html

@@ -1,16 +1,37 @@
-<!--<popup (close)="handleClose()">
+<app-popup (closeRequest)="close()">
   <div header-left class="profile-section">
-    <img [src]="userProfileImg" alt="profile" class="avatar">
+    <img ngSrc="/guest_profile.png" alt="profile" class="avatar" width="24" height="24">
     <span>{{ userName }}</span>
   </div>
 
   <div class="settings-content">
-    <label>Language</label>
-    <dropdown [options]="languages"
-              placeholder="Choose Language"></dropdown>
-    <switch></switch>
+    <section class="settings-category">
+      <label class="category-header">Language</label>
 
-    <label>Appearance</label>
+      <div class="settings-container">
+        <dropdown [options]="languages"
+                  placeholder="Choose Language"
+                  icon="language"></dropdown>
+      </div>
 
+      <div class="settings-container">
+        <div class="settings-name">
+          <span class="material-symbols-outlined icon-24 settings-icon">match_case</span>
+          <span>Romanisation</span>
+        </div>
+        <switch></switch>
+      </div>
+    </section>
+
+    <section class="settings-category">
+      <label class="category-header">Appearance</label>
+      <div class="settings-container">
+        <div class="settings-name">
+          <span class="material-symbols-outlined icon-24 settings-icon">dark_mode</span>
+          <span>Dark Mode</span>
+        </div>
+        <switch></switch>
+      </div>
+    </section>
   </div>
-</popup>-->
+</app-popup>