From 6a520eb138ddd3948dc4f412a8d6cefdc51ba868 Mon Sep 17 00:00:00 2001
From: Infi <wingit@geist.ga>
Date: Sun, 18 Jun 2023 15:53:07 +0200
Subject: [PATCH] feat: design for role chips

Signed-off-by: Infi <wingit@geist.ga>
---
 .../chat/revolt/components/chat/RoleChip.kt   | 40 +++++++++++++++++++
 .../chat/revolt/sheets/UserContextSheet.kt    | 29 +++-----------
 2 files changed, 46 insertions(+), 23 deletions(-)
 create mode 100644 app/src/main/java/chat/revolt/components/chat/RoleChip.kt

diff --git a/app/src/main/java/chat/revolt/components/chat/RoleChip.kt b/app/src/main/java/chat/revolt/components/chat/RoleChip.kt
new file mode 100644
index 00000000..7d1e0c59
--- /dev/null
+++ b/app/src/main/java/chat/revolt/components/chat/RoleChip.kt
@@ -0,0 +1,40 @@
+package chat.revolt.components.chat
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun RoleChip(
+    label: String,
+    brush: Brush,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier
+            .clip(MaterialTheme.shapes.small)
+            .background(
+                brush = brush,
+            )
+            .background(
+                // darken the background a bit
+                color = MaterialTheme.colorScheme.background.copy(alpha = 0.8f)
+            )
+            .padding(vertical = 6.dp, horizontal = 8.dp)
+    ) {
+        Text(
+            text = label,
+            style = LocalTextStyle.current.copy(
+                brush = brush
+            )
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/chat/revolt/sheets/UserContextSheet.kt b/app/src/main/java/chat/revolt/sheets/UserContextSheet.kt
index 010f3a09..f25a785b 100644
--- a/app/src/main/java/chat/revolt/sheets/UserContextSheet.kt
+++ b/app/src/main/java/chat/revolt/sheets/UserContextSheet.kt
@@ -1,7 +1,5 @@
 package chat.revolt.sheets
 
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -13,7 +11,6 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.LocalContentColor
-import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -34,6 +31,7 @@ import chat.revolt.api.internals.WebCompat
 import chat.revolt.api.internals.solidColor
 import chat.revolt.api.routes.user.fetchUserProfile
 import chat.revolt.api.schemas.Profile
+import chat.revolt.components.chat.RoleChip
 import chat.revolt.components.generic.UIMarkdown
 import chat.revolt.components.screens.settings.RawUserOverview
 
@@ -89,26 +87,11 @@ fun UserContextSheet(
                     it.forEach { roleId ->
                         val role = server?.roles?.get(roleId)
                         role?.let {
-                            Box(
-                                modifier = Modifier
-                                    .border(
-                                        border = BorderStroke(
-                                            width = 1.dp,
-                                            brush = role.colour?.let { WebCompat.parseColour(it) }
-                                                ?: Brush.solidColor(LocalContentColor.current),
-                                        ),
-                                        shape = MaterialTheme.shapes.small
-                                    )
-                                    .padding(8.dp)
-                            ) {
-                                Text(
-                                    text = role.name ?: roleId,
-                                    style = LocalTextStyle.current.copy(
-                                        brush = role.colour?.let { WebCompat.parseColour(it) }
-                                            ?: Brush.solidColor(LocalContentColor.current)
-                                    )
-                                )
-                            }
+                            RoleChip(
+                                label = role.name ?: roleId,
+                                brush = role.colour?.let { WebCompat.parseColour(it) }
+                                    ?: Brush.solidColor(LocalContentColor.current)
+                            )
                         }
                     }
                 }