Implement first screen (recovery key / passphrase choice)

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

@@ -59,6 +59,24 @@ 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;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon {
+    width: 24px;
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+}
+
 .mx_CreateSecretStorageDialog_passPhraseContainer {
     display: flex;
     align-items: flex-start;

res/css/views/elements/_StyledRadioButton.scss

@@ -25,16 +25,21 @@ 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;
 
         margin-left: 8px;
         margin-right: 8px;
+
+        flex-direction: column;
     }
 
     .mx_RadioButton_spacer {
@@ -105,3 +110,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_RadioButton_checked {
+    border-color: $accent-color;
+}