feat: Improving AboutScreen

app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/atoms/AboutTile.kt

@@ -39,13 +39,13 @@ fun AboutTile(
         modifier = Modifier
             .padding(horizontal = 32.dp, vertical = 48.dp)
             .fillMaxWidth()
+            .clip(MaterialTheme.shapes.medium)
             .semantics {
                 contentDescription = label
             }
             .clickable {
                 navController.navigate(Screen.About.route)
             }
-            .clip(MaterialTheme.shapes.medium)
             .background(MaterialTheme.colorScheme.surfaceVariant)
             .padding(16.dp),
         horizontalArrangement = Arrangement.SpaceBetween,

app/src/main/java/app/myzel394/alibi/ui/screens/AboutScreen.kt

@@ -2,6 +2,7 @@ package app.myzel394.alibi.ui.screens
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -13,6 +14,14 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.CurrencyBitcoin
+import androidx.compose.material.icons.filled.CurrencyFranc
+import androidx.compose.material.icons.filled.CurrencyLira
+import androidx.compose.material.icons.filled.CurrencyPound
+import androidx.compose.material.icons.filled.CurrencyRuble
+import androidx.compose.material.icons.filled.CurrencyRupee
+import androidx.compose.material.icons.filled.CurrencyYen
+import androidx.compose.material.icons.filled.CurrencyYuan
 import androidx.compose.material.icons.filled.OpenInNew
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -25,18 +34,29 @@ import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import app.myzel394.alibi.R
 import app.myzel394.alibi.BuildConfig
+import kotlin.random.Random
+
+const val GITHUB_URL = "https://github.com/Myzel394/Alibi"
+const val CROWDIN_URL = "https://crowdin.com/project/alibi"
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -46,6 +66,7 @@ fun AboutScreen(
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
         rememberTopAppBarState()
     )
+    val uriHandler = LocalUriHandler.current
 
     Scaffold(
         topBar = {
@@ -115,22 +136,30 @@ fun AboutScreen(
                     stringResource(R.string.ui_about_contribute_message),
                     style = MaterialTheme.typography.titleMedium,
                 )
+
+                val githubLabel = stringResource(R.string.accessibility_open_in_browser, GITHUB_URL)
                 Row(
                     modifier = Modifier
                         .fillMaxWidth()
                         .clip(MaterialTheme.shapes.medium)
+                        .semantics {
+                            contentDescription = githubLabel
+                        }
+                        .clickable {
+                            uriHandler.openUri(GITHUB_URL)
+                        }
                         .background(
                             MaterialTheme.colorScheme.surfaceVariant
                         )
                         .padding(16.dp),
-                    horizontalArrangement = Arrangement.SpaceEvenly,
+                    horizontalArrangement = Arrangement.SpaceBetween,
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
                     Image(
                         painter = painterResource(R.drawable.ic_github),
                         colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurfaceVariant),
                         contentDescription = null,
-                        modifier = Modifier.size(ButtonDefaults.IconSize.times(1.5f))
+                        modifier = Modifier.size(ButtonDefaults.IconSize.times(1.2f))
                     )
                     Text(
                         stringResource(R.string.ui_about_contribute_development),
@@ -142,6 +171,83 @@ fun AboutScreen(
                         modifier = Modifier.size(ButtonDefaults.IconSize)
                     )
                 }
+
+                val crowdinLabel =
+                    stringResource(R.string.accessibility_open_in_browser, CROWDIN_URL)
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .clip(MaterialTheme.shapes.medium)
+                        .semantics {
+                            contentDescription = crowdinLabel
+                        }
+                        .clickable {
+                            uriHandler.openUri(CROWDIN_URL)
+                        }
+                        .background(
+                            MaterialTheme.colorScheme.surfaceVariant
+                        )
+                        .padding(16.dp),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Image(
+                        painter = painterResource(R.drawable.ic_crowdin),
+                        colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurfaceVariant),
+                        contentDescription = null,
+                        modifier = Modifier.size(ButtonDefaults.IconSize.times(1.2f))
+                    )
+                    Text(
+                        stringResource(R.string.ui_about_contribute_translation),
+                        fontWeight = FontWeight.Bold,
+                    )
+                    Icon(
+                        Icons.Default.OpenInNew,
+                        contentDescription = null,
+                        modifier = Modifier.size(ButtonDefaults.IconSize)
+                    )
+                }
+
+                var donationsOpened by rememberSaveable {
+                    mutableStateOf(false)
+                }
+                val donationLabel = stringResource(R.string.ui_about_contribute_donatation)
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .clip(MaterialTheme.shapes.medium)
+                        .semantics {
+                            contentDescription = donationLabel
+                        }
+                        .clickable {
+                            donationsOpened = !donationsOpened
+                        }
+                        .background(
+                            MaterialTheme.colorScheme.surfaceVariant
+                        )
+                        .padding(16.dp),
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Icon(
+                        listOf(
+                            Icons.Default.CurrencyBitcoin,
+                            Icons.Default.CurrencyFranc,
+                            Icons.Default.CurrencyLira,
+                            Icons.Default.CurrencyPound,
+                            Icons.Default.CurrencyRuble,
+                            Icons.Default.CurrencyRupee,
+                            Icons.Default.CurrencyYen,
+                            Icons.Default.CurrencyYuan,
+                        ).asSequence().shuffled().first(),
+                        contentDescription = null,
+                        modifier = Modifier.size(ButtonDefaults.IconSize.times(1.2f))
+                    )
+                    Text(
+                        stringResource(R.string.ui_about_contribute_donatation),
+                        fontWeight = FontWeight.Bold,
+                    )
+                }
             }
         }
     }

app/src/main/res/drawable/ic_crowdin.xml

@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="248dp"
+    android:height="248dp"
+    android:viewportWidth="248"
+    android:viewportHeight="248">
+  <path
+      android:pathData="M163.02,177.31C157.02,177.31 151.67,175.51 147.24,171.99C141.95,167.85 137.74,161.67 137.6,154.4C137.52,150.73 141.52,150.73 141.52,150.73C141.52,150.73 148.02,150.65 151.17,150.65C154.31,150.73 155.24,155.11 155.38,156.2C156.6,166.05 162.17,170.35 166.45,172.31C169.02,173.48 168.38,177.16 163.02,177.31Z"
+      android:fillColor="#263238"/>
+  <path
+      android:pathData="M109.1,127.25C103.82,126.63 95.96,126.08 90.89,124.84C82.68,122.82 82.9,115.44 83.25,113.03C84.25,105.8 86.89,99.12 90.96,92.91C96.03,85.29 103.32,78.61 112.67,73.17C130.24,62.99 154.8,57.32 181.79,57.32C201.57,57.32 222.2,59.89 222.42,59.89C224.27,60.12 225.63,61.91 225.56,63.93C225.49,65.95 224.06,67.5 222.2,67.66C219.2,67.58 216.28,67.58 213.49,67.58C186,67.58 166.44,71.31 151.87,79.39C137.52,87.31 127.52,99.43 120.74,117.38C120.03,118.93 117.67,128.18 109.1,127.25Z"
+      android:fillColor="#263238"/>
+  <path
+      android:pathData="M133.09,201.33C119.45,201.33 106.59,195.44 96.86,184.68C88.62,175.57 83.65,166.39 82.73,154.61C82.16,146.92 85.57,144.25 90.19,144.72C93.38,145.03 103.33,145.5 109.01,146.68C113.27,147.54 116.11,149.9 116.82,154.77C120.59,180.68 136.92,190.88 146.65,193.08C148.36,193.48 149.43,194.57 149.35,196.54C149.28,198.42 148.01,199.99 146.3,200.3C141.97,201.01 137.42,201.33 133.09,201.33Z"
+      android:fillColor="#263238"/>
+  <path
+      android:pathData="M94.22,224.32C84.55,224.32 75.08,222.78 72.38,222.3C60.99,220.27 51.46,216.79 43.28,211.6C23.71,199.2 11.9,177.33 10.47,151.4C10.12,145.24 9.34,133.49 23.99,134.38C30.04,134.71 39.65,137.62 46.41,139.57C54.8,141.92 58.86,148.4 58.86,154.8C58.86,191.34 91.95,215.49 106.39,215.49C112.58,215.49 110.31,222.13 107.6,222.86C102.83,224.16 96.71,224.32 94.22,224.32Z"
+      android:fillColor="#263238"/>
+  <path
+      android:pathData="M43.75,116.95C38.03,115.92 32.44,113.55 27.01,112.21C10.19,108.03 13.05,91.07 14.63,86.41C29.94,41.36 78.52,26.29 117.73,22.26C154.65,18.47 193.29,21.39 229.28,31.41C232.22,32.2 241.3,34.41 236.08,39.86C232.79,43.25 219.98,39.7 216.55,39.46C195.44,37.88 174.54,37.65 153.51,40.88C131.26,44.28 108.36,51.3 89.97,66.13C81.1,73.31 73.3,82.47 68.08,93.28C66.72,96.12 65.64,98.96 64.71,101.8C63.78,104.8 60.28,119.87 43.75,116.95Z"
+      android:fillColor="#263238"/>
+  <path
+      android:pathData="M137.89,125.64C141.04,111.54 155.04,89.19 198.38,90.74C208.32,91.04 203.77,97.82 198.87,97.67C174.37,96.82 162.74,112.62 156.65,128.64C154.69,133.8 150.21,134.58 144.61,133.65C140.69,132.96 136.42,132.5 137.89,125.64Z"
+      android:fillColor="#263238"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -92,4 +92,7 @@
     <string name="ui_about_contribute_title">Support Alibi</string>
     <string name="ui_about_contribute_message">In my free time I develop Alibi and other free open source software. It would mean the world to me if you could help me in any way :)</string>
     <string name="ui_about_contribute_development">Developing features or fixing bugs</string>
+    <string name="accessibility_open_in_browser">Open link in browser: %s</string>
+    <string name="ui_about_contribute_translation">Translate Alibi into your language</string>
+    <string name="ui_about_contribute_donatation">Make a donation</string>
 </resources>