Update create room screen

features/createroom/src/main/kotlin/io/element/android/features/createroom/root/CreateRoomRootNode.kt

@@ -43,7 +43,7 @@ class CreateRoomRootNode @AssistedInject constructor(
     @Composable
     override fun View(modifier: Modifier) {
         val state = presenter.present()
-        CreateRoomRootView(
+        CreateRoomRootScreen(
             state = state,
             modifier = modifier
         )

features/createroom/src/main/kotlin/io/element/android/features/createroom/root/CreateRoomRootScreen.kt

@@ -17,26 +17,44 @@
 package io.element.android.features.createroom.root
 
 import androidx.compose.foundation.layout.Box
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.foundation.layout.displayCutoutPadding
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.R.drawable as DrawableR
+import io.element.android.libraries.ui.strings.R.string as StringR
 
 @Composable
-fun CreateRoomRootView(
+fun CreateRoomRootScreen(
     state: CreateRoomRootState,
     modifier: Modifier = Modifier,
+    onBackPressed: () -> Unit = {}
 ) {
-    Box(modifier, contentAlignment = Alignment.Center) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .displayCutoutPadding(),
+    ) {
         Text(
-            "CreateRoom feature view",
-            color = MaterialTheme.colorScheme.primary,
+            text = stringResource(id = StringR.create_chat),
+            modifier = Modifier.align(Alignment.Center)
         )
+        IconButton(
+            modifier = Modifier
+                .align(Alignment.CenterEnd),
+            onClick = onBackPressed,
+        ) {
+            Icon(resourceId = DrawableR.ic_close, contentDescription = stringResource(id = StringR.action_close))
+        }
     }
 }
 
@@ -52,7 +70,7 @@ fun CreateRoomRootViewDarkPreview(@PreviewParameter(CreateRoomRootStateProvider:
 
 @Composable
 private fun ContentToPreview(state: CreateRoomRootState) {
-    CreateRoomRootView(
+    CreateRoomRootScreen(
         state = state,
     )
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt

@@ -43,8 +43,8 @@ fun elementColorsDark() = ElementColors(
 val materialColorSchemeDark = darkColorScheme(
     primary = Color.White,
     onPrimary = Color.Black,
-    primaryContainer = Color.White,
-    onPrimaryContainer = Color.Black,
+    primaryContainer = Color.Black,
+    onPrimaryContainer = Color.White,
     // TODO inversePrimary = ColorDarkTokens.InversePrimary,
     secondary = DarkGrey,
     // TODO onSecondary = ColorDarkTokens.OnSecondary,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt

@@ -44,8 +44,8 @@ fun elementColorsLight() = ElementColors(
 val materialColorSchemeLight = lightColorScheme(
     primary = Black_900,
     onPrimary = Color.White,
-    primaryContainer = Color.Black,
-    onPrimaryContainer = Color.White,
+    primaryContainer = Color.White,
+    onPrimaryContainer = Color.Black,
     // TODO inversePrimary = ColorLightTokens.InversePrimary,
     secondary = Gray_200,
     // TODO onSecondary = ColorLightTokens.OnSecondary,

libraries/designsystem/src/main/res/drawable/ic_close.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14dp"
+    android:height="14dp"
+    android:tint="#000000"
+    android:viewportWidth="14"
+    android:viewportHeight="14">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M12.871,2.374C13.262,1.984 13.262,1.35 12.871,0.96C12.481,0.569 11.847,0.569 11.457,0.96L6.928,5.489L2.398,0.96C2.008,0.569 1.375,0.569 0.984,0.96C0.594,1.35 0.594,1.984 0.984,2.374L5.513,6.903L0.79,11.627C0.4,12.017 0.4,12.65 0.79,13.041C1.181,13.431 1.814,13.431 2.204,13.041L6.928,8.318L11.651,13.041C12.041,13.431 12.675,13.431 13.065,13.041C13.456,12.65 13.456,12.017 13.065,11.627L8.342,6.903L12.871,2.374Z" />
+</vector>

libraries/ui-strings/src/main/res/values/strings_eax.xml

@@ -14,5 +14,6 @@
     <string name="server_selection_server_footer">You can only connect to an existing server that supports sliding sync. Your homeserver admin will need to configure it.</string>
     <string name="server_selection_sliding_sync_alert_title">Server not supported</string>
     <string name="server_selection_sliding_sync_alert_message">This server currently doesn\'t support sliding sync.</string>
+    <string name="create_chat">Create chat</string>
 
 </resources>