Additional UI improvements by adding cards to log and titles to commit detail

src/main/kotlin/CommitChanges.kt

@@ -12,6 +12,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.res.useResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import extensions.filePath
@@ -123,7 +125,21 @@ fun CommitChanges(commitDiff: Pair<RevCommit, List<DiffEntry>>, onDiffSelected:
                 .weight(1f, fill = true)
                 .padding(horizontal = 16.dp, vertical = 8.dp)
         ) {
-            CommitLogChanges(diff, onDiffSelected = onDiffSelected)
+            Column {
+                Text(
+                    modifier = Modifier
+                        .padding(vertical = 16.dp)
+                        .fillMaxWidth(),
+                    text = "Files changed",
+                    fontWeight = FontWeight.Bold,
+                    textAlign = TextAlign.Center,
+                    color = MaterialTheme.colors.primary,
+                )
+
+                Divider(modifier = Modifier.fillMaxWidth())
+
+                CommitLogChanges(diff, onDiffSelected = onDiffSelected)
+            }
         }
 
     }

src/main/kotlin/RepositorySelected.kt

@@ -83,7 +83,10 @@ fun RepositorySelected(gitManager: GitManager, repository: Repository) {
                         )
                     }
                     else -> {
-                        DiffView(gitManager = gitManager, diffEntry = diffEntry, onCloseDiffView = { diffSelected = null })
+                        DiffView(
+                            gitManager = gitManager,
+                            diffEntry = diffEntry,
+                            onCloseDiffView = { diffSelected = null })
                     }
                 }
             }
@@ -175,7 +178,6 @@ fun Log(
     onUncommitedChangesSelected: () -> Unit,
     selectedIndex: MutableState<Int> = remember { mutableStateOf(-1) }
 ) {
-
     val logStatusState = gitManager.logStatus.collectAsState()
     val logStatus = logStatusState.value
 
@@ -186,15 +188,57 @@ fun Log(
     } else
         listOf()
 
-
+    Card(
-    LazyColumn(
         modifier = Modifier
+            .padding(8.dp)
             .background(MaterialTheme.colors.surface)
             .fillMaxSize()
     ) {
-        if (gitManager.hasUncommitedChanges())
+        LazyColumn(
-            item {
+            modifier = Modifier
-                val textColor = if (selectedUncommited.value) {
+                .background(MaterialTheme.colors.surface)
+                .fillMaxSize()
+        ) {
+            if (gitManager.hasUncommitedChanges())
+                item {
+                    val textColor = if (selectedUncommited.value) {
+                        MaterialTheme.colors.primary
+                    } else
+                        MaterialTheme.colors.primaryTextColor
+
+                    Column(
+                        modifier = Modifier
+                            .height(64.dp)
+                            .fillMaxWidth()
+                            .clickable {
+                                selectedIndex.value = -1
+                                selectedUncommited.value = true
+                                onUncommitedChangesSelected()
+                            },
+                        verticalArrangement = Arrangement.Center,
+                    ) {
+                        Spacer(modifier = Modifier.weight(2f))
+
+                        Text(
+                            text = "Uncommited changes",
+                            fontWeight = FontWeight.Bold,
+                            modifier = Modifier.padding(start = 16.dp),
+                            color = textColor,
+                        )
+                        Text(
+                            text = "You",
+                            modifier = Modifier.padding(start = 16.dp),
+                            color = MaterialTheme.colors.secondaryTextColor,
+                        )
+
+                        Spacer(modifier = Modifier.weight(2f))
+
+                        Divider()
+                    }
+                }
+
+            itemsIndexed(items = log) { index, item ->
+                val textColor = if (selectedIndex.value == index) {
                     MaterialTheme.colors.primary
                 } else
                     MaterialTheme.colors.primaryTextColor
@@ -204,22 +248,21 @@ fun Log(
                         .height(64.dp)
                         .fillMaxWidth()
                         .clickable {
-                            selectedIndex.value = -1
+                            selectedIndex.value = index
-                            selectedUncommited.value = true
+                            selectedUncommited.value = false
-                            onUncommitedChangesSelected()
+                            onRevCommitSelected(item)
                         },
                     verticalArrangement = Arrangement.Center,
                 ) {
                     Spacer(modifier = Modifier.weight(2f))
 
                     Text(
-                        text = "Uncommited changes",
+                        text = item.shortMessage,
-                        fontWeight = FontWeight.Bold,
                         modifier = Modifier.padding(start = 16.dp),
                         color = textColor,
                     )
                     Text(
-                        text = "You",
+                        text = item.authorIdent.name,
                         modifier = Modifier.padding(start = 16.dp),
                         color = MaterialTheme.colors.secondaryTextColor,
                     )
@@ -228,40 +271,7 @@ fun Log(
                     Divider()
                 }
             }
-
-        itemsIndexed(items = log) { index, item ->
-            val textColor = if (selectedIndex.value == index) {
-                MaterialTheme.colors.primary
-            } else
-                MaterialTheme.colors.primaryTextColor
-
-            Column(
-                modifier = Modifier
-                    .height(64.dp)
-                    .fillMaxWidth()
-                    .clickable {
-                        selectedIndex.value = index
-                        selectedUncommited.value = false
-                        onRevCommitSelected(item)
-                    },
-                verticalArrangement = Arrangement.Center,
-            ) {
-                Spacer(modifier = Modifier.weight(2f))
-
-                Text(
-                    text = item.shortMessage,
-                    modifier = Modifier.padding(start = 16.dp),
-                    color = textColor,
-                )
-                Text(
-                    text = item.authorIdent.name,
-                    modifier = Modifier.padding(start = 16.dp),
-                    color = MaterialTheme.colors.secondaryTextColor,
-                )
-                Spacer(modifier = Modifier.weight(2f))
-
-                Divider()
-            }
         }
     }
+
 }

src/main/kotlin/UncommitedChanges.kt

@@ -1,3 +1,8 @@
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
@@ -11,8 +16,10 @@ import androidx.compose.material.icons.filled.Close
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import extensions.filePath
@@ -20,6 +27,7 @@ import extensions.icon
 import git.StageStatus
 import org.eclipse.jgit.diff.DiffEntry
 
+@OptIn(ExperimentalAnimationApi::class)
 @Composable
 fun UncommitedChanges(
     gitManager: GitManager,
@@ -37,75 +45,121 @@ fun UncommitedChanges(
     var commitMessage by remember { mutableStateOf("") }
 
     Column {
-        if (stageStatus is StageStatus.Loading) {
+        AnimatedVisibility (
+            visible = stageStatus is StageStatus.Loading,
+            enter = fadeIn(),
+            exit = fadeOut(),
+        ) {
             LinearProgressIndicator(modifier = Modifier.fillMaxWidth())
         }
 
-        Text("Staged", fontWeight = FontWeight.Bold)
 
-        LazyColumn(modifier = Modifier.weight(5f)) {
+        EntriesList(
-            itemsIndexed(staged) { index, diffEntry ->
-                FileEntry(
-                    diffEntry = diffEntry,
-                    icon = Icons.Default.Close,
-                    onClick = {
-                        onDiffEntrySelected(diffEntry)
-                    },
-                    onButtonClick = {
-                        gitManager.unstage(diffEntry)
-                    }
-                )
-
-                if (index < staged.size - 1) {
-                    Divider(modifier = Modifier.fillMaxWidth())
-                }
-            }
-        }
-        Divider(modifier = Modifier.fillMaxWidth())
-
-        Text("Unstaged", fontWeight = FontWeight.Bold)
-
-        LazyColumn(modifier = Modifier.weight(5f)) {
-            itemsIndexed(unstaged) { index, diffEntry ->
-                FileEntry(
-                    diffEntry = diffEntry,
-                    icon = Icons.Default.Add,
-                    onClick = {
-                      onDiffEntrySelected(diffEntry)
-                    },
-                    onButtonClick = {
-                        gitManager.stage(diffEntry)
-                    }
-                )
-
-                if (index < unstaged.size - 1) {
-                    Divider(modifier = Modifier.fillMaxWidth())
-                }
-            }
-        }
-
-        Column(
             modifier = Modifier
+                .padding(8.dp)
+                .weight(5f)
+                .fillMaxWidth(),
+            title = "Staged",
+            optionIcon = Icons.Default.Close,
+            diffEntries = staged,
+            onDiffEntrySelected = onDiffEntrySelected,
+            onDiffEntryOptionSelected = {
+                gitManager.unstage(it)
+            }
+        )
+
+        EntriesList(
+            modifier = Modifier
+                .padding(8.dp)
+                .weight(5f)
+                .fillMaxWidth(),
+            title = "Unstaged",
+            optionIcon = Icons.Default.Add,
+            diffEntries = unstaged,
+            onDiffEntrySelected = onDiffEntrySelected,
+            onDiffEntryOptionSelected = {
+                gitManager.stage(it)
+            }
+        )
+
+        Card(
+            modifier = Modifier
+                .padding(8.dp)
                 .height(192.dp)
                 .fillMaxWidth()
         ) {
-            TextField(
+            Column(
                 modifier = Modifier
-                    .fillMaxWidth()
+                    .fillMaxSize()
-                    .weight(weight = 1f, fill = true),
+            ) {
-                value = commitMessage,
+                TextField(
-                onValueChange = { commitMessage = it }
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .weight(weight = 1f, fill = true),
+                    value = commitMessage,
+                    onValueChange = { commitMessage = it },
+                    label = { Text("Write your commit message here") },
+                    colors = TextFieldDefaults.textFieldColors(backgroundColor = MaterialTheme.colors.surface)
+                )
+
+                Button(
+                    modifier = Modifier
+                        .fillMaxWidth(),
+                    onClick = {
+                        gitManager.commit(commitMessage)
+                    },
+                    enabled = commitMessage.isNotEmpty(),
+                    shape = RectangleShape,
+                ) {
+                    Text("Commit")
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun EntriesList(
+    modifier: Modifier,
+    title: String,
+    optionIcon: ImageVector,
+    diffEntries: List<DiffEntry>,
+    onDiffEntrySelected: (DiffEntry) -> Unit,
+    onDiffEntryOptionSelected: (DiffEntry) -> Unit,
+) {
+    Card (
+        modifier = modifier
+    ) {
+        Column {
+            Text(
+                modifier = Modifier
+                    .padding(vertical = 16.dp)
+                    .fillMaxWidth(),
+                text = title,
+                fontWeight = FontWeight.Bold,
+                textAlign = TextAlign.Center,
+                color = MaterialTheme.colors.primary,
             )
 
-            Button(
+            Divider(modifier = Modifier.fillMaxWidth())
-                modifier = Modifier
+
-                    .fillMaxWidth(),
+            LazyColumn(modifier = Modifier.weight(5f)) {
-                onClick = {
+                itemsIndexed(diffEntries) { index, diffEntry ->
-                    gitManager.commit(commitMessage)
+                    FileEntry(
-                },
+                        diffEntry = diffEntry,
-                enabled = commitMessage.isNotEmpty()
+                        icon = optionIcon,
-            ) {
+                        onClick = {
-                Text("Commit")
+                            onDiffEntrySelected(diffEntry)
+                        },
+                        onButtonClick = {
+                            onDiffEntryOptionSelected(diffEntry)
+                        }
+                    )
+
+                    if (index < diffEntries.size - 1) {
+                        Divider(modifier = Modifier.fillMaxWidth())
+                    }
+                }
             }
         }
     }

src/main/kotlin/theme/Color.kt

@@ -6,7 +6,7 @@ val primaryLight = Color(0xFF9FD1FF)
 val primary = Color(0xFF0070D8)
 val primaryDark = Color(0xFF014F97)
 val secondary = Color(0xFFAB02E9)
-val mainText = Color(0xFF202124)
+val mainText = Color(0xFF212934)
 val mainTextDark = Color(0xFFFFFFFF)
 val secondaryText = Color(0xFF8F8F8F)
 val secondaryTextDark = Color(0xFFCCCBCB)