feat: icons for MFA options

Signed-off-by: Infi <wingit@geist.ga>

app/src/main/java/chat/revolt/components/generic/CollapsibleCard.kt

@@ -2,15 +2,26 @@ package chat.revolt.components.generic
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.KeyboardArrowDown
 import androidx.compose.material.icons.filled.KeyboardArrowUp
 import androidx.compose.material3.Card
 import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
@@ -18,7 +29,7 @@ import androidx.compose.ui.unit.dp
 
 @Composable
 fun CollapsibleCard(
-    title: String,
+    header: @Composable () -> Unit,
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
@@ -30,18 +41,19 @@ fun CollapsibleCard(
     ) {
         Column {
             Row(
+                verticalAlignment = Alignment.CenterVertically,
                 modifier = Modifier
                     .clickable { expanded = !expanded }
                     .fillMaxWidth()
                     .padding(16.dp),
             ) {
-                Text(
+                CompositionLocalProvider(
-                    text = title,
+                    LocalTextStyle provides MaterialTheme.typography.titleMedium.copy(
-                    style = MaterialTheme.typography.titleMedium.copy(
                         fontWeight = FontWeight.Bold
-                    ),
+                    )
-                    modifier = Modifier.padding(5.dp)
+                ) {
-                )
+                    header()
+                }
                 Spacer(modifier = Modifier.weight(1f))
                 Icon(
                     imageVector = if (expanded) Icons.Filled.KeyboardArrowUp else Icons.Filled.KeyboardArrowDown,
@@ -61,7 +73,11 @@ fun CollapsibleCard(
 @Composable
 fun CollapsibleCardPreview() {
     CollapsibleCard(
-        title = "Title",
+        header = {
+            Text(
+                text = "Header"
+            )
+        },
         content = {
             Text(
                 text = "Content",

app/src/main/java/chat/revolt/screens/login/MfaScreen.kt

@@ -1,13 +1,16 @@
 package chat.revolt.screens.login
 
 import android.util.Log
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawingPadding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
@@ -22,6 +25,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
@@ -178,7 +182,7 @@ fun MfaScreen(
                     textAlign = TextAlign.Center
                 ),
                 modifier = Modifier
-                    .padding(horizontal = 20.dp, vertical = 10.dp)
+                    .padding(horizontal = 20.dp)
                     .fillMaxWidth(),
             )
 
@@ -216,7 +220,20 @@ fun MfaScreen(
             allowedAuthTypes.forEach { authType ->
                 when (authType) {
                     "Totp" -> {
-                        CollapsibleCard(title = stringResource(R.string.mfa_totp_header)) {
+                        CollapsibleCard(header = {
+                            Row(
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Image(
+                                    painter = painterResource(id = R.drawable.ux_mfa_totp),
+                                    contentDescription = null, // See label
+                                    modifier = Modifier
+                                        .size(64.dp)
+                                        .padding(end = 10.dp)
+                                )
+                                Text(stringResource(R.string.mfa_totp_header))
+                            }
+                        }) {
                             Column(
                                 verticalArrangement = Arrangement.Center,
                                 horizontalAlignment = Alignment.CenterHorizontally
@@ -258,7 +275,20 @@ fun MfaScreen(
                     }
 
                     "Recovery" -> {
-                        CollapsibleCard(title = stringResource(R.string.mfa_recovery_header)) {
+                        CollapsibleCard(header = {
+                            Row(
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Image(
+                                    painter = painterResource(id = R.drawable.ux_mfa_restore),
+                                    contentDescription = null, // See label
+                                    modifier = Modifier
+                                        .size(64.dp)
+                                        .padding(end = 10.dp)
+                                )
+                                Text(stringResource(R.string.mfa_recovery_header))
+                            }
+                        }) {
                             Column(
                                 verticalArrangement = Arrangement.Center,
                                 horizontalAlignment = Alignment.CenterHorizontally

app/src/main/res/drawable/ux_mfa_restore.xml

@@ -0,0 +1,51 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="59.772dp"
+    android:height="25.031dp"
+    android:viewportWidth="59.772"
+    android:viewportHeight="25.031">
+    <path
+        android:fillAlpha="0.33"
+        android:fillColor="@color/material_dynamic_neutral_variant60"
+        android:pathData="M2.216,0L55.521,0A2.216,2.216 0,0 1,57.738 2.216L57.738,13.369A2.216,2.216 0,0 1,55.521 15.585L2.216,15.585A2.216,2.216 0,0 1,0 13.369L0,2.216A2.216,2.216 0,0 1,2.216 0z" />
+    <path
+        android:fillAlpha="0.33"
+        android:fillColor="@color/foreground"
+        android:pathData="m52.855,13.718h0.606v-11.851h-0.606z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m6.61,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m10.811,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m15.012,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m19.213,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m23.415,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m25.119,8.316h2.097v-0.695h-2.097z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m30.375,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m34.576,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m38.778,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m42.979,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/foreground"
+        android:pathData="m47.18,9.673h0.878l-1.134,-1.684 1.081,-1.592h-0.839l-0.701,1.042 -0.688,-1.042h-0.878l1.081,1.619 -1.134,1.658h0.852l0.74,-1.101z" />
+    <path
+        android:fillColor="@color/material_dynamic_tertiary60"
+        android:pathData="m52.855,11.198a6.917,6.917 0,0 0,-6.917 6.917h-2.306l3.074,3.074 3.074,-3.074h-2.306a5.38,5.38 0,0 1,5.38 -5.38,5.38 5.38,0 0,1 5.38,5.38 5.38,5.38 0,0 1,-5.38 5.38c-1.153,0 -2.236,-0.384 -3.12,-0.999l-1.107,1.107c1.184,0.891 2.644,1.429 4.227,1.429a6.917,6.917 0,0 0,6.917 -6.917,6.917 6.917,0 0,0 -6.917,-6.917m1.537,6.917a1.537,1.537 0,0 0,-1.537 -1.537,1.537 1.537,0 0,0 -1.537,1.537 1.537,1.537 0,0 0,1.537 1.537,1.537 1.537,0 0,0 1.537,-1.537z"
+        android:strokeWidth="0.768531" />
+</vector>

app/src/main/res/drawable/ux_mfa_totp.xml

@@ -0,0 +1,35 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="59.884dp"
+    android:height="24.337dp"
+    android:viewportWidth="59.884"
+    android:viewportHeight="24.337">
+  <path
+      android:pathData="M2.216,0L50.518,0A2.216,2.216 0,0 1,52.735 2.216L52.735,13.369A2.216,2.216 0,0 1,50.518 15.585L2.216,15.585A2.216,2.216 0,0 1,0 13.369L0,2.216A2.216,2.216 0,0 1,2.216 0z"
+      android:fillColor="@color/material_dynamic_neutral_variant60"
+      android:fillAlpha="0.33"/>
+  <path
+      android:pathData="m7.381,6.643q0.246,0 0.457,0.094 0.211,0.088 0.364,0.246 0.158,0.152 0.246,0.364 0.088,0.211 0.088,0.452 0,0.235 -0.088,0.446 -0.088,0.205 -0.246,0.364 -0.152,0.152 -0.364,0.24 -0.211,0.094 -0.457,0.094 -0.235,0 -0.44,-0.094 -0.205,-0.088 -0.358,-0.24 -0.152,-0.158 -0.24,-0.364 -0.088,-0.211 -0.088,-0.446 0,-0.24 0.088,-0.452 0.088,-0.211 0.24,-0.364 0.152,-0.158 0.358,-0.246 0.205,-0.094 0.44,-0.094z"
+      android:fillColor="@color/foreground"/>
+  <path
+      android:pathData="m13.984,6.643q0.246,0 0.457,0.094 0.211,0.088 0.364,0.246 0.158,0.152 0.246,0.364 0.088,0.211 0.088,0.452 0,0.235 -0.088,0.446 -0.088,0.205 -0.246,0.364 -0.152,0.152 -0.364,0.24 -0.211,0.094 -0.457,0.094 -0.235,0 -0.44,-0.094 -0.205,-0.088 -0.358,-0.24 -0.152,-0.158 -0.24,-0.364 -0.088,-0.211 -0.088,-0.446 0,-0.24 0.088,-0.452 0.088,-0.211 0.24,-0.364 0.152,-0.158 0.358,-0.246 0.205,-0.094 0.44,-0.094z"
+      android:fillColor="@color/foreground"/>
+  <path
+      android:pathData="m20.587,6.643q0.246,0 0.457,0.094 0.211,0.088 0.364,0.246 0.158,0.152 0.246,0.364 0.088,0.211 0.088,0.452 0,0.235 -0.088,0.446 -0.088,0.205 -0.246,0.364 -0.152,0.152 -0.364,0.24 -0.211,0.094 -0.457,0.094 -0.235,0 -0.44,-0.094 -0.205,-0.088 -0.358,-0.24 -0.152,-0.158 -0.24,-0.364 -0.088,-0.211 -0.088,-0.446 0,-0.24 0.088,-0.452 0.088,-0.211 0.24,-0.364 0.152,-0.158 0.358,-0.246 0.205,-0.094 0.44,-0.094z"
+      android:fillColor="@color/foreground"/>
+  <path
+      android:pathData="m27.19,6.643q0.246,0 0.457,0.094 0.211,0.088 0.364,0.246 0.158,0.152 0.246,0.364 0.088,0.211 0.088,0.452 0,0.235 -0.088,0.446 -0.088,0.205 -0.246,0.364 -0.152,0.152 -0.364,0.24 -0.211,0.094 -0.457,0.094 -0.235,0 -0.44,-0.094 -0.205,-0.088 -0.358,-0.24 -0.152,-0.158 -0.24,-0.364 -0.088,-0.211 -0.088,-0.446 0,-0.24 0.088,-0.452 0.088,-0.211 0.24,-0.364 0.152,-0.158 0.358,-0.246 0.205,-0.094 0.44,-0.094z"
+      android:fillColor="@color/foreground"/>
+  <path
+      android:pathData="m33.794,6.643q0.246,0 0.457,0.094 0.211,0.088 0.364,0.246 0.158,0.152 0.246,0.364 0.088,0.211 0.088,0.452 0,0.235 -0.088,0.446 -0.088,0.205 -0.246,0.364 -0.152,0.152 -0.364,0.24 -0.211,0.094 -0.457,0.094 -0.235,0 -0.44,-0.094 -0.205,-0.088 -0.358,-0.24 -0.152,-0.158 -0.24,-0.364 -0.088,-0.211 -0.088,-0.446 0,-0.24 0.088,-0.452 0.088,-0.211 0.24,-0.364 0.152,-0.158 0.358,-0.246 0.205,-0.094 0.44,-0.094z"
+      android:fillColor="@color/foreground"/>
+  <path
+      android:pathData="m40.397,6.643q0.246,0 0.457,0.094 0.211,0.088 0.364,0.246 0.158,0.152 0.246,0.364 0.088,0.211 0.088,0.452 0,0.235 -0.088,0.446 -0.088,0.205 -0.246,0.364 -0.152,0.152 -0.364,0.24 -0.211,0.094 -0.457,0.094 -0.235,0 -0.44,-0.094 -0.205,-0.088 -0.358,-0.24 -0.152,-0.158 -0.24,-0.364 -0.088,-0.211 -0.088,-0.446 0,-0.24 0.088,-0.452 0.088,-0.211 0.24,-0.364 0.152,-0.158 0.358,-0.246 0.205,-0.094 0.44,-0.094z"
+      android:fillColor="@color/foreground"/>
+  <path
+      android:pathData="m45.874,13.718h0.606v-11.851h-0.606z"
+      android:fillColor="@color/foreground"
+      android:fillAlpha="0.33"/>
+  <path
+      android:pathData="m37.163,18.874 l5.463,5.463 1.378,-1.388 -5.453,-5.453m19.946,-6.274 l-10.339,10.349 -4.065,-4.075 -1.397,1.378 5.463,5.463 11.727,-11.727m-5.531,0 l-1.378,-1.388 -6.206,6.206 1.388,1.378z"
+      android:fillColor="@color/material_dynamic_primary60"/>
+</vector>