small ui changes

src/App.css

@@ -1108,8 +1108,12 @@
     color: #374151;
 }
 
-/* Version */
-.settings-version {
+/* End-to-end encrypted badge */
+.settings-enc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.3rem;
     text-align: center;
     font-size: 0.625rem;
     font-weight: 500;
@@ -1528,12 +1532,17 @@
 
     /* ---- Settings page ---- */
     .settings-header {
-        padding: 2rem 2.5rem 0;
+        padding: 2rem 2rem 0;
+        max-width: 720px;
+        width: 100%;
+        margin: 0 auto;
     }
 
     .settings-container {
-        padding: 1.25rem 2.5rem 1.5rem;
+        padding: 1.25rem 2rem 1.5rem;
         max-width: 720px;
+        width: 100%;
+        margin: 0 auto;
     }
 }
 
@@ -1865,8 +1874,8 @@
     box-shadow: 0 0 0 2px #4ade80;
 }
 
-/* -- Settings version -- */
-[data-theme="dark"] .settings-version {
+/* -- Settings enc -- */
+[data-theme="dark"] .settings-enc {
     color: #3a3a3a;
 }
 

src/hooks/useOnboardingTour.ts

@@ -113,6 +113,15 @@ function getHistorySteps(isMobile: boolean): DriveStep[] {
 
 function getSettingsSteps(isMobile: boolean): DriveStep[] {
   return [
+    {
+      element: '#tour-edit-profile',
+      popover: {
+        title: 'Edit Your Profile',
+        description: 'Tap the pencil icon to change your display name or profile photo.',
+        side: isMobile ? 'bottom' : 'bottom',
+        align: 'center',
+      },
+    },
     {
       element: '#tour-theme-switcher',
       popover: {

src/pages/HistoryPage.tsx

@@ -345,7 +345,7 @@ export default function HistoryPage() {
                   <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                   <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                 </svg>
-                End-to-end encrypted
+                End-to-end Encrypted
               </div>
             )}
           </div>

src/pages/SettingsPage.tsx

@@ -63,6 +63,7 @@ export default function SettingsPage() {
       clearPendingTourStep()
       continueTourOnSettings()
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleSeeTutorial = () => {
@@ -205,7 +206,7 @@ export default function SettingsPage() {
 
       <main className="settings-container">
         {/* Profile Section */}
-        <div className="settings-profile">
+        <div id="tour-edit-profile" className="settings-profile">
           <div className="settings-avatar">
             {photoURL ? (
               <img src={photoURL} alt={displayName} className="settings-avatar-img" />
@@ -382,7 +383,12 @@ export default function SettingsPage() {
         </button>
 
         {/* Version */}
-        <p className="settings-version">VERSION 1.0.2</p>
+        {/* <p className="settings-version">VERSION 1.0.2</p> */}
+        <p className="settings-enc"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                </svg>
+                End-to-end Encrypted</p>
       </main>
 
       {/* Clear Data Confirmation Modal */}