Merge pull request matrix-org#4831 from matrix-org/dbkr/recovery_key_passphrase_2

Implement new design on security setup & login

Author: dbkr

res/css/_common.scss

@@ -319,7 +319,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog_titleImage {
-    vertical-align: middle;
+    vertical-align: sub;
     width: 25px;
     height: 25px;
     margin-left: -2px;

res/css/views/dialogs/secretstorage/_AccessSecretStorageDialog.scss

@@ -15,13 +15,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_AccessSecretStorageDialog_keyStatus {
-    height: 30px;
+.mx_AccessSecretStorageDialog_titleWithIcon::before {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+    background-color: $primary-fg-color;
+}
+
+.mx_AccessSecretStorageDialog_secureBackupTitle::before {
+    mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
 }
 
-.mx_AccessSecretStorageDialog_primaryContainer {
-    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
-    padding: 20px;
+.mx_AccessSecretStorageDialog_securePhraseTitle::before {
+    mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
+.mx_AccessSecretStorageDialog_keyStatus {
+    height: 30px;
 }
 
 .mx_AccessSecretStorageDialog_passPhraseInput,

res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss

@@ -48,6 +48,29 @@ limitations under the License.
     margin-bottom: 1em;
 }
 
+.mx_CreateSecretStorageDialog_titleWithIcon::before {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+    background-color: $primary-fg-color;
+}
+
+.mx_CreateSecretStorageDialog_secureBackupTitle::before {
+    mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+}
+
+.mx_CreateSecretStorageDialog_securePhraseTitle::before {
+    mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
+.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
+    text-align: center;
+}
+
 .mx_CreateSecretStorageDialog_primaryContainer {
     /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
     padding-top: 20px;
@@ -59,6 +82,36 @@ limitations under the License.
     display: block;
 }
 
+.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
+    margin-bottom: 16px;
+    padding: 11px;
+}
+
+.mx_CreateSecretStorageDialog_optionTitle {
+    color: $dialog-title-fg-color;
+    font-weight: 600;
+    font-size: $font-18px;
+    padding-bottom: 10px;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+    background-color: $primary-fg-color;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
+    mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
+    mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+}
+
 .mx_CreateSecretStorageDialog_passPhraseContainer {
     display: flex;
     align-items: flex-start;
@@ -73,33 +126,42 @@ limitations under the License.
     margin-left: 20px;
 }
 
-.mx_CreateSecretStorageDialog_recoveryKeyHeader {
-    margin-bottom: 1em;
-}
-
 .mx_CreateSecretStorageDialog_recoveryKeyContainer {
-    display: flex;
+    width: 380px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKey {
-    width: 262px;
+    font-weight: bold;
+    text-align: center;
     padding: 20px;
     color: $info-plinth-fg-color;
     background-color: $info-plinth-bg-color;
-    margin-right: 12px;
+    border-radius: 6px;
+    word-spacing: 1em;
+    margin-bottom: 20px;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKeyButtons {
-    flex: 1;
     display: flex;
+    justify-content: space-between;
     align-items: center;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
-    margin-right: 10px;
+    width: 160px;
+    padding-left: 0px;
+    padding-right: 0px;
+    white-space: nowrap;
 }
 
-.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
-    flex: 1;
-    white-space: nowrap;
+.mx_CreateSecretStorageDialog_continueSpinner {
+    margin-top: 33px;
+    text-align: right;
+}
+
+.mx_CreateSecretStorageDialog_continueSpinner img {
+    width: 20px;
+    height: 20px;
 }

res/css/views/elements/_StyledRadioButton.scss

@@ -25,13 +25,17 @@ limitations under the License.
     position: relative;
 
     display: flex;
-    align-items: center;
+    align-items: baseline;
     flex-grow: 1;
 
-    > span {
+    border: 1px solid $input-darker-bg-color;
+    border-radius: 8px;
+
+    > .mx_RadioButton_content {
         flex-grow: 1;
 
         display: flex;
+        flex-direction: column;
 
         margin-left: 8px;
         margin-right: 8px;
@@ -105,3 +109,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_RadioButton_checked {
+    border-color: $accent-color;
+}