[Feat] Ui tweaks

target/server/src/main/kotlin/br/com/firstsoft/target/server/ui/ColorTokens.kt

@@ -12,6 +12,8 @@ object ColorTokens {
     val BackgroundOffWhite = Color(0xffF0F1F1)
     val BarelyVisibleGray = Color(0x0C111D1A)
     val AlmostVisibleGray = Color(0xFFCECFD2)
+    val BorderGray = Color(0x80CECFD2)
+    val LabelGray = Color(0xFF94969C)
     val DarkGray = Color(0xFF0C111D)
     val MutedGray = Color(0xFF475467)
 }

target/server/src/main/kotlin/br/com/firstsoft/target/server/ui/tabs/overlay/Overlay.kt

@@ -15,16 +15,36 @@ fun Overlay(
     hwInfoReader: HwInfoReader = HwInfoReader(),
     overlaySettings: OverlaySettings,
 ) = AppTheme {
-    val arrangement = when (overlaySettings.positionIndex) {
+    if (listOf(
+            overlaySettings.fps,
+            overlaySettings.frametime,
+            overlaySettings.cpuTemp,
+            overlaySettings.gpuTemp,
+            overlaySettings.cpuUsage,
+            overlaySettings.gpuUsage,
+            overlaySettings.vramUsage,
+            overlaySettings.ramUsage
+        ).all { !it }
+    ) {
+        return@AppTheme
+    }
+
+    val alignment = when (overlaySettings.positionIndex) {
         0 -> Alignment.TopStart
         1 -> Alignment.TopCenter
         2 -> Alignment.TopEnd
         3 -> Alignment.BottomStart
         4 -> Alignment.BottomCenter
         5 -> Alignment.BottomEnd
+        6 -> when {
+            overlaySettings.positionX <= 40 -> Alignment.CenterStart
+            overlaySettings.positionX >= 60 -> Alignment.CenterEnd
+            else -> Alignment.Center
+        }
         else -> Alignment.Center
     }
-    Box(modifier = Modifier.fillMaxSize(), contentAlignment = arrangement) {
+
+    Box(modifier = Modifier.fillMaxSize(), contentAlignment = alignment) {
         OverlayUi(
             reader = hwInfoReader,
             overlaySettings = overlaySettings

target/server/src/main/kotlin/br/com/firstsoft/target/server/ui/tabs/settings/Footer.kt

@@ -1,69 +1,219 @@
 package ui
 
-import Label
-import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.TooltipArea
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.ClickableText
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.ChevronRight
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.platform.UriHandler
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import br.com.firstsoft.target.server.ui.ColorTokens.AlmostVisibleGray
-import br.com.firstsoft.target.server.ui.ColorTokens.DarkGray
-import br.com.firstsoft.target.server.ui.ColorTokens.MutedGray
+import br.com.firstsoft.target.server.ui.ColorTokens.BorderGray
+import br.com.firstsoft.target.server.ui.ColorTokens.LabelGray
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun FooterUi(modifier: Modifier = Modifier) {
     val uriHandler = LocalUriHandler.current
-    Row(
-        modifier = modifier.fillMaxWidth().height(32.dp),
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(12.dp)
     ) {
-        Text(
-            text = "May your frames be high, and temps be low.",
-            fontSize = 12.sp,
-            color = AlmostVisibleGray,
-            lineHeight = 0.sp,
-            fontWeight = FontWeight(550),
-            letterSpacing = 0.14.sp
-        )
+        Github(uriHandler)
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            Discord(uriHandler)
+            Donate(uriHandler)
+        }
+
+        Row(
+            modifier = Modifier.fillMaxWidth().height(32.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            val text = remember {
+                buildAnnotatedString {
+                    append("Built by ")
+                    pushStringAnnotation("click", "https://github.com/Danil0v3s")
+                    withStyle(SpanStyle(textDecoration = TextDecoration.Underline)) {
+                        append("Danil0v3s")
+                    }
+                    pop()
+                    append(" & designed by ")
+                    pushStringAnnotation("click", "https://www.instagram.com/mars.designs")
+                    withStyle(SpanStyle(textDecoration = TextDecoration.Underline)) {
+                        append("Mars")
+                    }
+                    pop()
+                }
+            }
+
+            ClickableText(
+                text = text,
+                style = TextStyle(
+                    fontSize = 12.sp,
+                    color = LabelGray,
+                    lineHeight = 0.sp,
+                    fontWeight = FontWeight(450),
+                    letterSpacing = 0.14.sp,
+                ),
+                onClick = { offset ->
+                    text.getStringAnnotations("click", offset, offset).firstOrNull()?.let {
+                        uriHandler.openUri(it.item)
+                    }
+                }
+            )
 
-        TooltipArea({
-            Label(text = "Check for updates")
-        }) {
             Row(
                 verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
-                modifier = Modifier.clickable {
+                modifier = Modifier.clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null
+                ) {
                     uriHandler.openUri("https://github.com/Danil0v3s/CleanMeter/releases/latest")
                 }) {
-                Icon(
-                    painter = painterResource("imgs/github.svg"),
-                    null,
-                    tint = AlmostVisibleGray,
-                )
 
                 Text(
                     text = "Version ${System.getProperty("jpackage.app-version")}",
-                    fontSize = 14.sp,
-                    color = AlmostVisibleGray,
+                    fontSize = 12.sp,
+                    color = LabelGray,
                     lineHeight = 0.sp,
-                    fontWeight = FontWeight(550),
+                    fontWeight = FontWeight(450),
                     letterSpacing = 0.14.sp,
                 )
             }
         }
     }
 }
+
+@Composable
+private fun Github(uriHandler: UriHandler) {
+    Row(
+        modifier = Modifier
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null
+            ) {
+                uriHandler.openUri("https://github.com/Danil0v3s/CleanMeter/releases/latest")
+            }
+            .fillMaxWidth()
+            .background(Color.Transparent, RoundedCornerShape(12.dp))
+            .border(1.dp, BorderGray, RoundedCornerShape(12.dp))
+            .padding(12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Image(painterResource("icons/github.png"), "", modifier = Modifier.size(32.dp))
+            Text(
+                text = "Check the latest build",
+                color = Color.DarkGray,
+                fontSize = 14.sp,
+                fontWeight = FontWeight(600),
+            )
+        }
+        Icon(Icons.Rounded.ChevronRight, "")
+    }
+}
+
+@Composable
+private fun RowScope.Donate(uriHandler: UriHandler) {
+    Row(
+        modifier = Modifier
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null
+            ) {
+                uriHandler.openUri("https://ko-fi.com/danil0v3s")
+            }
+            .weight(.5f)
+            .background(Color.Transparent, RoundedCornerShape(12.dp))
+            .border(1.dp, BorderGray, RoundedCornerShape(12.dp))
+            .padding(12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Image(painterResource("icons/ko-fi.png"), "")
+            Text(
+                text = "Like the work? Support us!",
+                color = Color.DarkGray,
+                fontSize = 14.sp,
+                fontWeight = FontWeight(600),
+            )
+        }
+        Image(Icons.Rounded.ChevronRight, "")
+    }
+}
+
+@Composable
+private fun RowScope.Discord(uriHandler: UriHandler) {
+    Row(
+        modifier = Modifier
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null
+            ) {
+                uriHandler.openUri("https://discord.gg/phqwe89cvE")
+            }
+            .weight(.5f)
+            .background(Color.Transparent, RoundedCornerShape(12.dp))
+            .border(1.dp, BorderGray, RoundedCornerShape(12.dp))
+            .padding(12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Image(painterResource("icons/discord.png"), "")
+            Text(
+                text = "Join the discord server!",
+                color = Color.DarkGray,
+                fontSize = 14.sp,
+                fontWeight = FontWeight(600),
+            )
+        }
+        Image(Icons.Rounded.ChevronRight, "")
+    }
+}

target/server/src/main/kotlin/br/com/firstsoft/target/server/ui/tabs/settings/OverlaySettingsUi.kt

@@ -1,14 +1,30 @@
 package br.com.firstsoft.target.server.ui.tabs.settings
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import br.com.firstsoft.target.server.ui.ColorTokens.BorderGray
+import br.com.firstsoft.target.server.ui.ColorTokens.LabelGray
 import br.com.firstsoft.target.server.ui.components.CheckboxSection
 import br.com.firstsoft.target.server.ui.components.DropdownSection
 import ui.app.OverlaySettings
@@ -86,6 +102,31 @@ fun OverlaySettingsUi(
         onOverlaySettings(newSettings)
     }
 
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(Color.Transparent, RoundedCornerShape(12.dp))
+            .border(1.dp, BorderGray, RoundedCornerShape(12.dp))
+            .padding(20.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Icon(painterResource("icons/info.svg"), "")
+            Text(
+                text = "Hot key for showing/hiding the overlay",
+                color = Color.DarkGray,
+                fontSize = 14.sp,
+                fontWeight = FontWeight(600),
+                modifier = Modifier.padding(bottom = 2.5.dp),
+            )
+        }
+        Image(painterResource("icons/hotkey.png"), "")
+    }
+
     CheckboxSection(title = "FPS",
         options = availableOptions.filterOptions(SettingsOptionType.Framerate, SettingsOptionType.Frametime),
         onOptionToggle = ::onOptionsToggle,
@@ -121,4 +162,15 @@ fun OverlaySettingsUi(
         selectedIndex = overlaySettings.selectedDisplayIndex,
         onValueChanged = { onOverlaySettings(overlaySettings.copy(selectedDisplayIndex = it)) }
     )
+
+    Text(
+        text = "May your frames be high, and temps be low.",
+        fontSize = 12.sp,
+        color = LabelGray,
+        lineHeight = 0.sp,
+        fontWeight = FontWeight(550),
+        letterSpacing = 0.14.sp,
+        textAlign = TextAlign.Right,
+        modifier = Modifier.fillMaxWidth()
+    )
 }