color change and window top bar change

Author: Coding-Meet

src/main/kotlin/App.kt

@@ -1,8 +1,11 @@
+
 import androidx.compose.desktop.ui.tooling.preview.Preview
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.MaterialTheme
@@ -11,6 +14,7 @@ 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.unit.dp
 import components.CustomButton
@@ -56,27 +60,34 @@ fun App() {
     var isShowToast by remember { mutableStateOf(false) }
     var toastMessage by remember { mutableStateOf("") }
     MaterialTheme {
-        Row(
-            Modifier.fillMaxSize().padding(10.dp)
-        ) {
+        Column(Modifier.fillMaxSize().padding(8.dp)) {
             CustomTextField(
                 stringState,
                 "Enter the Strings",
-                Modifier.fillMaxHeight().weight(0.8f, true),
+                Modifier.fillMaxHeight().weight(0.9f, true),
             ) { stringState = it }
 
-            Column(
-                Modifier.weight(0.2f, true).padding(start = 10.dp)
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(0.1f),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
             ) {
-                CustomButton("Select Languages", onClick = {
+                CustomButton(modifier = Modifier.weight(1f).height(50.dp),"Select Languages", onClick = {
                     isWindowShow = WindowState.SELECT_COUNTRY
                 })
                 CustomTextField(
                     folderState,
                     "Enter the Folder Name",
-                    Modifier.height(80.dp),
+                    Modifier
+                        .padding(start = 8.dp, end = 8.dp)
+                        .weight(1f) // Use weight to make the TextField fill the available space
+                        .height(50.dp)
                 ) { folderState = it }
-                CustomButton("Translate",
+                CustomButton(
+                    modifier = Modifier.weight(1f).height(50.dp),
+                    "Translate",
                     isEnable = stringState.isNotEmpty() && folderState.isNotEmpty() && countryListState.any { it.isChecked },
                     onClick = {
                         isWindowShow = WindowState.CONVERT_TRANSLATE

src/main/kotlin/Main.kt

@@ -1,14 +1,38 @@
 
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.window.WindowDraggableArea
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Close
+import androidx.compose.material.icons.rounded.KeyboardArrowDown
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.WindowPosition
+import androidx.compose.ui.window.WindowScope
 import androidx.compose.ui.window.WindowState
 import androidx.compose.ui.window.application
+import theme.TextFieldBackground
 
 fun main() = application {
     val windowState = WindowState(
-        width =  1280 .dp,
+        width = 1280.dp,
         height = 720.dp,
         position = WindowPosition(Alignment.Center)
     )
@@ -17,7 +41,53 @@ fun main() = application {
         title = "String Translator Desktop App",
         state = windowState,
         resizable = false,
+        undecorated = true
     ) {
-        App()
+        Column(Modifier.fillMaxSize()
+            .border(width = 2.dp, color = TextFieldBackground, shape = RoundedCornerShape(2.dp))
+            .clip(RoundedCornerShape(bottomStart = 120.dp, bottomEnd = 120.dp))) {
+            AppWindowTitleBar(windowState) { exitApplication() }
+            App()
+        }
+    }
+}
+
+@Composable
+private fun WindowScope.AppWindowTitleBar(state: WindowState, onClose: () -> Unit) =
+    WindowDraggableArea {
+        Box(
+            Modifier.fillMaxWidth()
+                .height(48.dp)
+                .padding(horizontal = 16.dp),
+            contentAlignment = Alignment.CenterEnd
+        ) {
+            TopAppBar(
+                title = {
+                    Text(
+                        "String Translator Desktop App",
+                        textAlign = TextAlign.Center,
+                        fontWeight = FontWeight.Bold,
+                        modifier = Modifier.fillMaxWidth()
+                    )
+                },
+                contentColor = Color.White,
+                backgroundColor = TextFieldBackground,
+                modifier = Modifier.fillMaxSize().padding(horizontal = 160.dp)
+                    .clip(RoundedCornerShape(bottomStart = 100.dp, bottomEnd = 100.dp))
+            )
+
+            Icon(
+                imageVector = Icons.Rounded.KeyboardArrowDown,
+                contentDescription = "Minimise",
+                tint = TextFieldBackground,
+                modifier = Modifier.padding(end = 32.dp).clickable { state.isMinimized = true }
+            )
+
+            Icon(
+                imageVector = Icons.Rounded.Close,
+                contentDescription = "Close",
+                tint = TextFieldBackground,
+                modifier = Modifier.padding(start = 8.dp).clickable { onClose() }
+            )
+        }
     }
-}

src/main/kotlin/components/Components.kt

@@ -87,13 +87,13 @@ fun CustomTextField(
 }
 
 @Composable
-fun CustomButton(text: String, onClick: () -> Unit, isEnable: Boolean = true) {
+fun CustomButton(modifier: Modifier, text: String, onClick: () -> Unit, isEnable: Boolean = true) {
     Button(
         onClick = onClick,
         colors = ButtonDefaults.buttonColors(TextFieldBackground, Color.White),
         shape = RoundedCornerShape(12.dp),
         enabled = isEnable,
-        modifier = Modifier.fillMaxWidth()
+        modifier = modifier.fillMaxWidth()
     ) {
         Text(text, fontWeight = FontWeight.Bold, fontSize = 16.sp)
     }
@@ -258,7 +258,7 @@ fun translateDialog(
                             .fillMaxWidth(),
                         horizontalArrangement = Arrangement.SpaceAround,
                     ) {
-                        CustomButton("Done", onClick = {
+                        CustomButton(Modifier,"Done", onClick = {
                             onDismiss()
                         })
                     }

src/main/kotlin/theme/Color.kt

@@ -4,4 +4,4 @@ import androidx.compose.ui.graphics.Color
 
 val PurpleBlue = Color(0xFF7F52FF)
 val Background = Color(0xFF1F1D2B)
-val TextFieldBackground = Color(0xFF2D2A3D)
+val TextFieldBackground = Color(0xFF000000)