Fix(GUI): Redesign and fix parts of the gui to be more responsive

GUI/src/main/kotlin/ui/components/diffScreen/FullScreenButton.kt

@@ -1,29 +1,36 @@
 package ui.components.diffScreen
 
-import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import ui.components.general.SvgButton
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
 
 /**
  * A Composable function that displays a button to open the image in a full screen window.
- * @param rowModifier [Modifier] to apply to the row.
- * @param spacerModifier [Modifier] to apply to the spacer.
  * @param buttonModifier [Modifier] to apply to the button.
  * @param onClick function to call when the button is clicked.
  * @return [Unit]
  */
 @Composable
-fun ColumnScope.FullScreenButton(
-    rowModifier: Modifier = Modifier,
-    spacerModifier: Modifier = Modifier,
+fun FullScreenButton(
     buttonModifier: Modifier = Modifier,
     onClick: () -> Unit,
 ) {
-    Row(rowModifier.weight(0.2f)) {
-        Spacer(spacerModifier.weight(0.7f))
-        SvgButton(content = "full-screen.svg", modifier = buttonModifier.weight(0.3f), onClick = onClick)
-    }
+    IconButton(
+        onClick = onClick,
+        modifier = buttonModifier,
+        content = {
+            Image(
+                painter = painterResource("full-screen.svg"),
+                contentDescription = "Fullscreen Button",
+                modifier = Modifier.padding(8.dp),
+                colorFilter = ColorFilter.tint(LocalContentColor.current),
+            )
+        },
+    )
 }

GUI/src/main/kotlin/ui/components/diffScreen/ImageDisplayer.kt

@@ -1,15 +1,18 @@
 package ui.components.diffScreen
 
 import androidx.compose.foundation.focusable
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.input.key.onKeyEvent
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
 import frameNavigation.FrameNavigation
 import models.AppState
 import ui.components.general.SaveableImage
@@ -38,13 +41,17 @@ fun RowScope.DisplayDifferenceImage(
     // handles the window creation if the window is not null
     WindowCreator(window, title) { FullScreenContent(bitmap = bitmap, navigator = navigator, state) }
 
-    Column(modifier = Modifier.fillMaxSize().weight(1f)) {
+    Column(modifier = Modifier.weight(1f), verticalArrangement = Arrangement.Bottom) {
         // button sets the window to null and then to not null, which triggers the window render
-        FullScreenButton {
-            window.value = null
-            window.value = Unit
+
+        Row(Modifier, verticalAlignment = Alignment.CenterVertically) {
+            VideoTitle(title)
+            FullScreenButton {
+                window.value = null
+                window.value = Unit
+            }
         }
-        SaveableImage(bitmap = bitmap, modifier = modifier.weight(0.92f), state = state)
+        SaveableImage(bitmap = bitmap, modifier = modifier, fullScreen = false, state = state)
     }
 }
 
@@ -72,8 +79,23 @@ fun FullScreenContent(
             focusRequester.requestFocus()
         }
         // #####   Difference Videos   #####
-        SaveableImage(bitmap = bitmap, modifier = Modifier.weight(0.85f), state = state)
+        SaveableImage(bitmap = bitmap, modifier = Modifier.fillMaxSize().weight(0.85f), fullScreen = true, state = state)
         // #####   Navigation   #####
-        NavigationButtons(navigator = navigator, buttonModifier = Modifier.weight(1f), rowModifier = Modifier.weight(0.15f))
+        NavigationButtons(navigator = navigator, buttonModifier = Modifier.weight(1f), rowModifier = Modifier.weight(0.10f))
     }
 }
+
+/**
+ * A Composable function that creates a centered title with 30% width.
+ * @param text [String] containing the text of the title.
+ * @return [Unit]
+ */
+@Composable
+fun RowScope.VideoTitle(text: String) {
+    Text(
+        text = text,
+        modifier = Modifier.padding(0.dp, 5.dp).weight(0.7f),
+        fontSize = MaterialTheme.typography.displaySmall.fontSize,
+        textAlign = TextAlign.Center,
+    )
+}

GUI/src/main/kotlin/ui/components/diffScreen/SaveCollageButton.kt

@@ -1,12 +1,13 @@
 package ui.components.diffScreen
 
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import frameNavigation.FrameNavigation
 import models.AppState
@@ -23,14 +24,18 @@ import ui.components.general.openFileSaverAndGetPath
 @Composable
 fun SaveCollageButton(
     navigator: FrameNavigation,
-    modifier: Modifier,
+    modifier: Modifier = Modifier,
     state: MutableState<AppState>,
 ) {
     Button(
-        modifier = modifier.padding(8.dp).fillMaxSize(),
+        modifier = modifier.padding(8.dp),
         onClick = { openFileSaverAndGetPath(state.value.saveCollagePath) { path -> saveCollageCallback(navigator, path, state) } },
     ) {
-        Text(text = "Save Collage")
+        Text(
+            text = "Save Collage",
+            fontSize = MaterialTheme.typography.bodyLarge.fontSize,
+            fontWeight = FontWeight.Bold,
+        )
     }
 }
 

GUI/src/main/kotlin/ui/components/diffScreen/SaveInsertedFramesButton.kt

@@ -1,14 +1,15 @@
 package ui.components.diffScreen
 
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.toAwtImage
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import frameNavigation.FrameNavigation
 import models.AppState
@@ -27,18 +28,22 @@ import javax.imageio.ImageIO
 @Composable
 fun SaveInsertedFramesButton(
     navigator: FrameNavigation,
-    modifier: Modifier,
+    modifier: Modifier = Modifier,
     state: MutableState<AppState>,
 ) {
     Button(
-        modifier = modifier.padding(8.dp).fillMaxSize(),
+        modifier = modifier.padding(8.dp),
         onClick = {
             openFileSaverAndGetPath(
                 state.value.saveInsertionsPath,
             ) { path -> saveInsertedFramesCallback(navigator, path, state) }
         },
     ) {
-        Text(text = "Export Inserted")
+        Text(
+            text = "Export Inserted",
+            fontSize = MaterialTheme.typography.bodyLarge.fontSize,
+            fontWeight = FontWeight.Bold,
+        )
     }
 }
 

GUI/src/main/kotlin/ui/components/diffScreen/Timeline.kt

@@ -8,6 +8,7 @@ import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -22,6 +23,7 @@ import frameNavigation.FrameNavigation
 import kotlinx.coroutines.launch
 import logic.caches.ThumbnailCache
 import ui.components.general.AutoSizeText
+import ui.components.general.TitleWithInfo
 
 /**
  * A Composable function that creates a box to display the timeline.
@@ -95,9 +97,32 @@ fun Timeline(navigator: FrameNavigation) {
     }
 
     Column(
-        modifier = Modifier.background(color = Color.Gray).fillMaxSize(),
+        modifier = Modifier.padding(16.dp).fillMaxWidth(),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
+        Row(
+            horizontalArrangement = Arrangement.Start,
+            modifier = Modifier.padding(0.dp, 0.dp, 0.dp, 4.dp),
+        ) {
+            Box(modifier = Modifier.weight(0.1f)) {}
+            Box(modifier = Modifier.weight(0.2f)) {
+                val statisticalInformation =
+                    "Total Frames Reference Video: ${navigator.getSizeOfVideoReference()}\n" +
+                        "Total Frames Current Video: ${navigator.getSizeOfVideoCurrent()}\n" +
+                        "Frames with Differences: ${navigator.getFramesWithPixelDifferences()}\n" +
+                        "Inserted Frames: ${navigator.getInsertions()}\n" +
+                        "Deleted Frames: ${navigator.getDeletions()}"
+                TitleWithInfo(
+                    text = "Statistical Information",
+                    tooltipText = statisticalInformation,
+                    fontSize = MaterialTheme.typography.titleMedium.fontSize,
+                    topSpace = 4.dp,
+                )
+            }
+
+            Box(modifier = Modifier.weight(0.7f)) {}
+        }
+
         Box(modifier = generalModifier.weight(0.3f)) {
             Row(
                 modifier =
@@ -203,13 +228,13 @@ fun Timeline(navigator: FrameNavigation) {
                 generalModifier
                     .fillMaxHeight(0.1f)
                     .padding(top = 5.dp)
-                    .border(width = 1.dp, color = Color.LightGray, shape = CircleShape),
+                    .border(width = 1.dp, color = MaterialTheme.colorScheme.primary, shape = CircleShape),
             adapter = rememberScrollbarAdapter(scrollState = scrollState),
             style =
                 LocalScrollbarStyle.current.copy(
                     hoverDurationMillis = 500,
-                    unhoverColor = Color.LightGray,
-                    hoverColor = Color.White,
+                    unhoverColor = MaterialTheme.colorScheme.secondary,
+                    hoverColor = MaterialTheme.colorScheme.primary,
                     shape = CircleShape,
                 ),
         )
@@ -330,14 +355,14 @@ private fun TimelineTopLabels(
                 continue
             }
 
-            // somehow, we need to manually convert the offset for text only dependening on the
+            // somehow, we need to manually convert the offset for text only depending on the
             // density of the device (e.g. on Windows: window scaling)
             val textOffset = with(LocalDensity.current) { (offset - textWidth / 2).toDp() }
 
             // draw label with diff index
             AutoSizeText(
                 text = i.toString(),
-                color = Color.Black,
+                color = MaterialTheme.colorScheme.primary,
                 modifier =
                     Modifier
                         .onGloballyPositioned { coordinates ->
@@ -347,13 +372,13 @@ private fun TimelineTopLabels(
                         .offset(x = textOffset)
                         .align(Alignment.TopStart),
             )
-
+            val lineColor = MaterialTheme.colorScheme.primary
             // draw a tick for the text
             Canvas(modifier = Modifier.fillMaxSize()) {
                 drawLine(
                     start = Offset(offset, textHeight),
                     end = Offset(offset, size.height),
-                    color = Color.Black,
+                    color = lineColor,
                     strokeWidth = 1f,
                 )
             }

GUI/src/main/kotlin/ui/components/general/ConfirmationPopup.kt

@@ -2,6 +2,8 @@ package ui.components.general
 
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -17,16 +19,49 @@ fun ConfirmationPopup(
     if (showDialog) {
         AlertDialog(
             onDismissRequest = { onCancel() },
-            title = { Text(text = "Confirmation") },
-            text = { Text(text) },
+            title = {
+                Text(
+                    text = "Confirmation",
+                    color = MaterialTheme.colorScheme.onSecondary,
+                    fontSize = MaterialTheme.typography.titleMedium.fontSize,
+                )
+            },
+            text = {
+                Text(
+                    text,
+                    color = MaterialTheme.colorScheme.onSecondary,
+                    fontSize = MaterialTheme.typography.bodyMedium.fontSize,
+                )
+            },
+            backgroundColor = MaterialTheme.colorScheme.secondary,
             confirmButton = {
-                TextButton(onClick = { onConfirm() }) {
-                    Text("Yes")
+                TextButton(
+                    onClick = { onConfirm() },
+                    colors =
+                        ButtonDefaults.textButtonColors(
+                            containerColor = MaterialTheme.colorScheme.secondaryContainer,
+                            contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                        ),
+                ) {
+                    Text(
+                        "Yes",
+                        color = MaterialTheme.colorScheme.onSecondaryContainer,
+                    )
                 }
             },
             dismissButton = {
-                TextButton(onClick = { onCancel() }) {
-                    Text("No")
+                TextButton(
+                    onClick = { onCancel() },
+                    colors =
+                        ButtonDefaults.textButtonColors(
+                            containerColor = MaterialTheme.colorScheme.secondaryContainer,
+                            contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                        ),
+                ) {
+                    Text(
+                        "No",
+                        color = MaterialTheme.colorScheme.onSecondaryContainer,
+                    )
                 }
             },
         )