Redesigned tag dialog

src/main/kotlin/com/jetpackduba/gitnuro/ui/dialogs/NewTagDialog.kt

@@ -1,11 +1,7 @@
 package com.jetpackduba.gitnuro.ui.dialogs
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material.*
-import androidx.compose.material.OutlinedTextField
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -13,11 +9,14 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusProperties
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.input.key.onPreviewKeyEvent
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.jetpackduba.gitnuro.keybindings.KeybindingOption
 import com.jetpackduba.gitnuro.keybindings.matchesBinding
-import com.jetpackduba.gitnuro.theme.outlinedTextFieldColors
+import com.jetpackduba.gitnuro.theme.secondaryTextColor
 import com.jetpackduba.gitnuro.theme.textButtonColors
+import com.jetpackduba.gitnuro.ui.components.AdjustableOutlinedTextField
 import com.jetpackduba.gitnuro.ui.components.PrimaryButton
 
 @Composable
@@ -25,44 +24,60 @@ fun NewTagDialog(
     onReject: () -> Unit,
     onAccept: (tagName: String) -> Unit
 ) {
-    var tagField by remember { mutableStateOf("") }
+    var field by remember { mutableStateOf("") }
-    val tagFieldFocusRequester = remember { FocusRequester() }
+    val fieldFocusRequester = remember { FocusRequester() }
     val buttonFieldFocusRequester = remember { FocusRequester() }
 
     MaterialDialog(onCloseRequested = onReject) {
         Column(
-            modifier = Modifier
-                .background(MaterialTheme.colors.background),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center,
         ) {
-            OutlinedTextField(
+            Icon(
+                painterResource("tag.svg"),
+                contentDescription = null,
                 modifier = Modifier
-                    .focusRequester(tagFieldFocusRequester)
+                    .size(64.dp)
+                    .padding(vertical = 16.dp),
+                tint = MaterialTheme.colors.onBackground,
+            )
+
+            Text(
+                text = "Set tag name",
+                modifier = Modifier
+                    .padding(bottom = 8.dp),
+                color = MaterialTheme.colors.onBackground,
+                style = MaterialTheme.typography.body1,
+            )
+
+            Text(
+                text = "Create a new tag to the specified commit",
+                modifier = Modifier
+                    .padding(bottom = 16.dp),
+                color = MaterialTheme.colors.secondaryTextColor,
+                style = MaterialTheme.typography.body2,
+                textAlign = TextAlign.Center,
+            )
+
+            AdjustableOutlinedTextField(
+                modifier = Modifier
+                    .focusRequester(fieldFocusRequester)
                     .focusProperties {
                         this.next = buttonFieldFocusRequester
                     }
                     .width(300.dp)
                     .onPreviewKeyEvent { keyEvent ->
-                        if (keyEvent.matchesBinding(KeybindingOption.SIMPLE_ACCEPT) && tagField.isNotBlank()) {
+                        if (keyEvent.matchesBinding(KeybindingOption.SIMPLE_ACCEPT) && field.isNotBlank()) {
-                            onAccept(tagField)
+                            onAccept(field)
                             true
                         } else {
                             false
                         }
                     },
-                value = tagField,
+                value = field,
-                singleLine = true,
+                maxLines = 1,
-                label = {
-                    Text(
-                        "New tag name",
-                        style = MaterialTheme.typography.body1.copy(MaterialTheme.colors.primaryVariant),
-                    )
-                },
-                textStyle = MaterialTheme.typography.body1,
-                colors = outlinedTextFieldColors(),
                 onValueChange = {
-                    tagField = it
+                    field = it
                 },
             )
             Row(
@@ -87,20 +102,20 @@ fun NewTagDialog(
                     modifier = Modifier
                         .focusRequester(buttonFieldFocusRequester)
                         .focusProperties {
-                            this.previous = tagFieldFocusRequester
+                            this.previous = fieldFocusRequester
-                            this.next = tagFieldFocusRequester
+                            this.next = fieldFocusRequester
                         },
-                    enabled = tagField.isNotBlank(),
+                    enabled = field.isNotBlank(),
                     onClick = {
-                        onAccept(tagField)
+                        onAccept(field)
                     },
-                    text = "Create tag",
+                    text = "Create tag"
                 )
             }
         }
+    }
 
-        LaunchedEffect(Unit) {
+    LaunchedEffect(Unit) {
-            tagFieldFocusRequester.requestFocus()
+        fieldFocusRequester.requestFocus()
-        }
     }
 }