chore: improve webhook sheet design

Signed-off-by: Infi <infi@infi.sh>

app/src/main/java/chat/revolt/sheets/WebHookUserSheet.kt

@@ -1,14 +1,13 @@
 package chat.revolt.sheets
 
 import android.widget.Toast
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
-import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -17,44 +16,35 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import chat.revolt.R
-import chat.revolt.components.generic.NonIdealState
 
 @Composable
 fun WebHookUserSheet(modifier: Modifier = Modifier) {
     val context = LocalContext.current
 
-    NonIdealState(
+    Column(
-        icon = {
+        verticalArrangement = Arrangement.spacedBy(16.dp),
-            Icon(
+        modifier = modifier.padding(16.dp)
-                painter = painterResource(R.drawable.ic_hook_24dp),
+    ) {
-                contentDescription = null,
+        Image(
-                modifier = Modifier.size(24.dp)
+            painter = painterResource(R.drawable.ux_webhooks),
-            )
+            contentDescription = null,
-        },
+            modifier = Modifier.fillMaxWidth().height(120.dp)
-        title = {
+        )
-            Text(
-                text = stringResource(R.string.user_info_sheet_webhook)
-            )
-        },
-        description = {
-            Text(
-                text = stringResource(R.string.user_info_sheet_webhook_description),
-                style = MaterialTheme.typography.bodyLarge,
-                textAlign = TextAlign.Center,
-                modifier = Modifier.fillMaxWidth()
-            )
-        }
-    )
-    Column(Modifier.padding(horizontal = 16.dp)) {
         Text(
-            text = stringResource(R.string.user_info_sheet_webhook_description_2),
+            text = stringResource(R.string.user_info_sheet_webhook),
+            style = MaterialTheme.typography.headlineMedium,
+            textAlign = TextAlign.Center,
+            modifier = Modifier.fillMaxWidth()
+        )
+        Text(
+            text = stringResource(R.string.user_info_sheet_webhook_body),
             style = MaterialTheme.typography.bodyMedium,
             textAlign = TextAlign.Center,
             modifier = Modifier.fillMaxWidth()
         )
-        Spacer(Modifier.height(32.dp))
         Button(
             onClick = {
                 Toast(context).apply {
@@ -63,10 +53,19 @@ fun WebHookUserSheet(modifier: Modifier = Modifier) {
                     show()
                 }
             },
-            modifier = Modifier.fillMaxWidth()
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 8.dp)
         ) {
             Text(text = stringResource(R.string.user_info_sheet_webhook_learn_more))
         }
     }
-    Spacer(Modifier.height(48.dp))
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun WebHookUserSheetPreview() {
+    Column {
+        WebHookUserSheet()
+    }
 }

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

@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="128dp"
+    android:height="56dp"
+    android:viewportWidth="128"
+    android:viewportHeight="56">
+  <path
+      android:pathData="M12.91,45.75C9.63,45.75 6.83,44.62 4.51,42.36C2.19,40.08 1.04,37.31 1.04,34.04C1.04,31.24 1.88,28.73 3.56,26.53C5.26,24.33 7.48,22.92 10.21,22.32C11.12,19.01 12.92,16.33 15.61,14.29C18.32,12.23 21.38,11.2 24.79,11.2C29,11.2 32.57,12.67 35.5,15.6C38.43,18.53 39.9,22.1 39.9,26.31C42.39,26.6 44.45,27.68 46.08,29.55C47.72,31.4 48.54,33.55 48.54,36.03C48.54,38.74 47.6,41.03 45.71,42.92C43.82,44.8 41.53,45.75 38.82,45.75H12.91Z"
+      android:fillColor="?attr/colorOnSurface"/>
+  <path
+      android:pathData="M57.04,30.89L57.57,28.62L71.18,31.77L66.39,24.09L68.37,22.85L75.27,33.91L64.21,40.82L62.97,38.83L70.66,34.04L57.04,30.89Z"
+      android:fillColor="?attr/colorOnSurfaceVariant"/>
+  <path
+      android:pathData="M9.93,6.62L18.03,3.97A2.84,2.84 116.89,0 1,21.62 5.79L24.27,13.89A2.84,2.84 116.89,0 1,22.45 17.48L14.34,20.13A2.84,2.84 116.89,0 1,10.76 18.31L8.11,10.21A2.84,2.84 116.89,0 1,9.93 6.62z"
+      android:fillColor="?attr/colorPrimaryContainer"/>
+  <path
+      android:pathData="M16.58,15.75C16.2,16.98 14.9,17.68 13.68,17.31C12.46,16.94 11.77,15.62 12.14,14.38C12.24,14.04 12.42,13.72 12.67,13.46C12.91,13.19 13.22,12.99 13.56,12.86L13.81,13.54C13.38,13.72 13.02,14.09 12.88,14.58C12.62,15.43 13.08,16.32 13.9,16.57C14.72,16.82 15.59,16.34 15.85,15.48C15.93,15.22 15.94,14.95 15.89,14.7L15.73,14.21L18.43,13.31L18.44,13.24C18.55,12.71 19.06,12.38 19.58,12.49C19.7,12.51 19.82,12.57 19.92,12.64C20.03,12.71 20.12,12.8 20.19,12.91C20.26,13.02 20.3,13.14 20.33,13.26C20.35,13.39 20.35,13.51 20.32,13.64C20.21,14.16 19.7,14.5 19.18,14.39C18.94,14.35 18.74,14.21 18.61,14.03L16.65,14.68C16.7,15.04 16.68,15.4 16.58,15.75ZM18.97,11.14C20.24,10.89 21.47,11.7 21.72,12.96C21.96,14.21 21.13,15.43 19.86,15.69C19.5,15.76 19.14,15.75 18.79,15.65C18.44,15.56 18.12,15.39 17.85,15.16L18.33,14.61C18.52,14.77 18.74,14.87 18.97,14.93C19.21,14.99 19.45,15 19.69,14.95C20.57,14.77 21.13,13.95 20.97,13.11C20.8,12.27 19.96,11.72 19.09,11.9C18.82,11.95 18.58,12.07 18.38,12.23L18.04,12.57L16.03,10.67L15.93,10.71C15.68,10.78 15.42,10.75 15.19,10.63C14.96,10.51 14.8,10.3 14.72,10.06C14.57,9.55 14.88,9.01 15.39,8.87C15.91,8.73 16.45,9.01 16.6,9.52C16.66,9.73 16.64,9.96 16.56,10.15L18.03,11.55C18.3,11.35 18.62,11.21 18.97,11.14ZM13.95,11.32C13.09,10.34 13.18,8.87 14.14,8.03C15.11,7.19 16.58,7.31 17.44,8.29C17.94,8.85 18.12,9.6 17.99,10.29L17.27,10.13C17.35,9.68 17.22,9.19 16.88,8.8C16.3,8.13 15.3,8.05 14.66,8.61C14,9.17 13.96,10.17 14.54,10.84C14.78,11.12 15.09,11.29 15.42,11.36L15.64,11.4L14.94,14.3C14.97,14.32 14.99,14.34 15.02,14.38C15.4,14.74 15.42,15.35 15.05,15.73C14.69,16.12 14.08,16.12 13.69,15.75C13.3,15.38 13.28,14.77 13.65,14.38C13.81,14.22 14.01,14.13 14.22,14.11L14.74,11.92C14.45,11.78 14.17,11.58 13.95,11.32Z"
+      android:fillColor="?attr/colorOnPrimaryContainer"/>
+  <path
+      android:pathData="M88.97,53.78L89.11,48.7L84.16,49.44L84.22,46.9L89.17,46.16L89.37,38.55L84.42,39.29L84.48,36.75L89.43,36.01L89.56,30.94L92.04,30.57L91.9,35.64L99.32,34.53L99.45,29.46L101.93,29.08L101.79,34.16L106.73,33.42L106.67,35.96L101.73,36.7L101.53,44.31L106.47,43.57L106.41,46.11L101.47,46.85L101.33,51.92L98.86,52.29L98.99,47.22L91.58,48.33L91.44,53.41L88.97,53.78ZM91.84,38.18L91.64,45.79L99.06,44.68L99.25,37.07L91.84,38.18Z"
+      android:fillColor="?attr/colorOnSurface"/>
+  <path
+      android:pathData="M125.16,9.98L109.85,8.39C108.8,8.28 107.85,9.05 107.74,10.1L105.94,27.33L110.17,23.9L123.57,25.29C124.63,25.4 125.57,24.64 125.68,23.58L126.88,12.1C126.93,11.59 126.78,11.08 126.46,10.68C126.14,10.29 125.67,10.03 125.16,9.98ZM114.85,20.52L111.88,16.82L113.36,15.61L115.13,17.81L120.55,13.37L121.75,14.86L114.85,20.52Z"
+      android:fillColor="?attr/colorTertiary"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -353,9 +353,8 @@
     <string name="user_info_sheet_open">Open user info</string>
     <string name="user_info_sheet_user_not_found">Can\'t resolve this user</string>
     <string name="user_info_sheet_user_not_found_description">This user may have been deleted or you may not have permission to view them.</string>
-    <string name="user_info_sheet_webhook">Is it a bird, is it a plane?</string>
+    <string name="user_info_sheet_webhook">You\'ve found a Webhook!</string>
-    <string name="user_info_sheet_webhook_description">No, it\'s a webhook!</string>
+    <string name="user_info_sheet_webhook_body">Webhooks are automated broadcasts from other services on the internet. They can\'t chat back, but you can still see what they have to say.</string>
-    <string name="user_info_sheet_webhook_description_2">Webhooks are automated broadcasts from other services on the internet. They can\'t chat back, but you can still see what they have to say.</string>
     <string name="user_info_sheet_webhook_learn_more">Learn more</string>
     <string name="user_info_sheet_category_bio">Bio</string>
     <string name="user_info_sheet_bio_empty">This user hasn\'t set a bio yet.</string>