chore: improve the wording in logging page

Author: dpc

crates/rostra-web-ui/assets/style.css

@@ -1126,6 +1126,7 @@ emoji-picker {
   padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 5vw, 4rem);
   border: solid 1px var(--color-timeline-item-border);
   border-radius: 6px;
+  max-width: 700px;
 
   display: flex;
   flex-direction: column;
@@ -1186,6 +1187,15 @@ emoji-picker {
   gap: 5pt;
 }
 
+.o-unlockScreen__generateButton {
+  white-space: nowrap;
+  max-width: unset;
+}
+
+.o-unlockScreen__generateButton .u-buttonIcon {
+  flex-shrink: 0;
+}
+
 .o-unlockScreen__unlockButtonIcon {
   background: url('/assets/icons/right-to-bracket.svg') center/contain no-repeat;
 }

crates/rostra-web-ui/src/routes/unlock.rs

@@ -174,10 +174,12 @@ impl UiState {
                         (n)
                     }
                     div ."o-unlockScreen__header"  {
-                        h4 { "Unlock Rostra account" }
-                        p { "Provide existing RostraId, secret passphrase or both to unlock your identity."}
-                        p { "Use Random button to generate new identity."}
-                        p { "Make sure to save your identity information."}
+                        h4 { "Login to Rostra" }
+                        p { "Provide existing RostraID (public key) only to log in in read-only mode," }
+                        p { "or Rostra secret passphrase to log in normally." }
+                        p {
+                            "Create Account to generate new RostraId/account. Saved it in the password manager."
+                        }
                     }
                     div."o-unlockScreen__idLine" {
                         input ."o-unlockScreen__id"
@@ -192,7 +194,7 @@ impl UiState {
                             type="submit"
                         {
                                 span ."o-unlockScreen__unlockButtonIcon u-buttonIcon" width="1rem" height="1rem" {}
-                                "Unlock"
+                                "Login"
                             }
                     }
                     div."o-unlockScreen__mnemonicLine" {
@@ -212,10 +214,10 @@ impl UiState {
                                     document.querySelector('.o-unlockScreen__mnemonic').value = '';
                                 "#
                             )
-                            title="Clear the mnemonic to unlock in a read-only mode"
+                            title="Clear the mnemonic to login in read-only mode"
                             {
                                 span ."o-unlockScreen__roButtonIcon u-buttonIcon" width="1rem" height="1rem" {}
-                                "Read-only"
+                                "Clear secret"
                             }
                     }
                     div."o-unlockScreen__unlockLine" {
@@ -228,10 +230,10 @@ impl UiState {
                                     document.querySelector('.o-unlockScreen__mnemonic').value = '{}';
                                 "#, random_rostra_id, random_mnemonic)
                             )
-                            title="Generate a random account."
+                            title="Create a new Rostra account. Make sure to save the generated secret passphrase."
                             {
                                 span ."o-unlockScreen__generateButtonIcon u-buttonIcon" width="1rem" height="1rem" {}
-                                "Random"
+                                "Create Account"
                             }
                     }
                 }