refactor: Update Accessibility Explainer Dialog UI and improve layout consistency

Author: duartebarbosadev

feature/home/src/main/java/com/scrolless/app/feature/home/HomeScreen.kt

@@ -42,9 +42,13 @@ import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.foundation.layout.windowInsetsTopHeight
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
@@ -282,7 +286,7 @@ fun HomeScreen(
         }
 
         HomeContent(
-            modifier = modifier.windowInsetsPadding(WindowInsets.safeDrawing),
+            modifier = modifier,
             uiState = uiState,
             onNavigateToSettings = onNavigateToSettings,
             onBlockOptionSelected = { blockOption ->
@@ -518,14 +522,16 @@ private fun HomeContent(
                 onUsageAnalyticsDateSelected = onUsageAnalyticsDateSelected,
                 onSwipeStart = { hasDismissedSwipeHint = true },
             )
-            .padding(16.dp),
+            .padding(horizontal = 16.dp),
     ) {
         Column(
             modifier = Modifier
                 .fillMaxSize()
                 .verticalScroll(rememberScrollState()),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
+            Spacer(modifier = Modifier.windowInsetsTopHeight(WindowInsets.statusBars))
+
             UsageOverviewHeader(
                 uiState = uiState,
                 analytics = analytics,
@@ -583,6 +589,8 @@ private fun HomeContent(
                     )
                 }
             }
+
+            Spacer(modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars))
         }
 
         if (showDebugPanel) {

feature/home/src/main/java/com/scrolless/app/feature/home/dialogs/AccessibilityExplainerDialog.kt

@@ -37,6 +37,10 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
@@ -148,17 +152,7 @@ private fun AccessibilityExplainerContent(onDismiss: () -> Unit, onOpenSettings:
                 maxLines = 1,
             )
 
-            Spacer(modifier = Modifier.height(8.dp))
-
-            AutoResizingText(
-                text = stringResource(R.string.accessibility_explainer_subtitle),
-                style = MaterialTheme.typography.bodyMedium,
-                color = MaterialTheme.colorScheme.onSurface,
-                textAlign = TextAlign.Center,
-                maxLines = 2,
-            )
-
-            Spacer(modifier = Modifier.height(24.dp))
+            Spacer(modifier = Modifier.height(16.dp))
 
             // Steps with staggered animation
             AccessibilityStep(
@@ -219,6 +213,8 @@ private fun AccessibilityExplainerContent(onDismiss: () -> Unit, onOpenSettings:
                     maxLines = 1,
                 )
             }
+
+            Spacer(modifier = Modifier.height(12.dp))
             // Privacy Note
             Card(
                 modifier = Modifier.fillMaxWidth(),
@@ -227,14 +223,26 @@ private fun AccessibilityExplainerContent(onDismiss: () -> Unit, onOpenSettings:
                 ),
                 shape = RoundedCornerShape(16.dp),
             ) {
-                Text(
-                    text = stringResource(R.string.accessibility_explainer_privacy_note),
-                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onSecondaryContainer,
-                    textAlign = TextAlign.Center,
-                    fontWeight = FontWeight.Light,
+                Row(
                     modifier = Modifier.padding(12.dp),
-                )
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Info,
+                        contentDescription = null,
+                        modifier = Modifier.size(20.dp),
+                        tint = MaterialTheme.colorScheme.onSecondaryContainer,
+                    )
+                    Spacer(modifier = Modifier.width(12.dp))
+                    Text(
+                        text = stringResource(R.string.accessibility_explainer_privacy_note),
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.onSecondaryContainer,
+                        textAlign = TextAlign.Start,
+                        fontWeight = FontWeight.Medium,
+                        modifier = Modifier.weight(1f),
+                    )
+                }
             }
 
             Spacer(modifier = Modifier.height(16.dp))
@@ -246,17 +254,33 @@ private fun AccessibilityExplainerContent(onDismiss: () -> Unit, onOpenSettings:
                 },
                 modifier = Modifier
                     .fillMaxWidth()
-                    .height(42.dp),
+                    .height(48.dp),
                 colors = ButtonDefaults.buttonColors(
                     containerColor = MaterialTheme.colorScheme.primaryContainer,
                 ),
                 shape = RoundedCornerShape(12.dp),
             ) {
-                Text(
-                    text = stringResource(R.string.accessibility_explainer_proceed_button),
-                    fontWeight = FontWeight.Bold,
-                    color = MaterialTheme.colorScheme.onPrimaryContainer,
-                )
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center,
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Settings,
+                        contentDescription = null,
+                        modifier = Modifier.size(18.dp),
+                        tint = MaterialTheme.colorScheme.onPrimaryContainer,
+                    )
+                    Spacer(modifier = Modifier.width(8.dp))
+                    AutoResizingText(
+                        text = stringResource(R.string.accessibility_explainer_proceed_button),
+                        modifier = Modifier.weight(1f, fill = false),
+                        fontWeight = FontWeight.Bold,
+                        color = MaterialTheme.colorScheme.onPrimaryContainer,
+                        style = MaterialTheme.typography.bodyMedium.copy(fontSize = 14.sp),
+                        maxLines = 1,
+                        minFontSize = 10.sp,
+                    )
+                }
             }
 
             Spacer(modifier = Modifier.height(8.dp))
@@ -267,12 +291,31 @@ private fun AccessibilityExplainerContent(onDismiss: () -> Unit, onOpenSettings:
                     Timber.d("AccessibilityExplainer: Not now")
                     onDismiss()
                 },
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(48.dp),
             ) {
-                Text(
-                    text = stringResource(R.string.accessibility_explainer_not_now_button),
-                    color = MaterialTheme.colorScheme.primary,
-                )
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center,
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Close,
+                        contentDescription = null,
+                        modifier = Modifier.size(18.dp),
+                        tint = MaterialTheme.colorScheme.primary,
+                    )
+                    Spacer(modifier = Modifier.width(8.dp))
+                    AutoResizingText(
+                        text = stringResource(R.string.accessibility_explainer_not_now_button),
+                        modifier = Modifier.weight(1f, fill = false),
+                        fontWeight = FontWeight.Bold,
+                        color = MaterialTheme.colorScheme.primary,
+                        style = MaterialTheme.typography.bodyMedium.copy(fontSize = 14.sp),
+                        maxLines = 1,
+                        minFontSize = 10.sp,
+                    )
+                }
             }
         }
 

mobile/src/main/res/values-b+sr+Latn/strings.xml

@@ -25,7 +25,6 @@
     <string name="accessibility_explainer_step2">Pronađite aplikacije i dodirnite „Scrolless“ na listi usluga</string>
     <string name="accessibility_explainer_step3">Prebacite prekidač na UKLJUČENO da biste omogućili Scrolless-u da vam pomogne da zaustavite beskonačno skrolovanje</string>
     <string name="accessibility_explainer_subtitle">Scrolless-u je potreban pristup pristupačnosti da bi otkrio i zaustavio kratke video zapise.</string>
-    <string name="accessibility_explainer_title">Potreban nam je pristup pristupačnosti</string>
     <string name="accessibility_service_description">Ova usluga otkriva kada se otvore reels/shorts/tiktok, tako da ih Scrolless može blokirati ako je konfigurisan.</string>
     <string name="accessibility_success_description">Scrolless je sada spreman!</string>
     <string name="accessibility_success_title">Sve je spremno!</string>

mobile/src/main/res/values-ca/strings.xml

@@ -25,7 +25,6 @@
     <string name="accessibility_explainer_step2">Cerca aplicacions i toca \"Scrolless\" a la llista de serveis</string>
     <string name="accessibility_explainer_step3">Activa l\'interruptor per permetre que Scrolless t\'ajudi a aturar el desplaçament sense fi</string>
     <string name="accessibility_explainer_subtitle">Scrolless necessita accés d\'accessibilitat per detectar i aturar vídeos curts.</string>
-    <string name="accessibility_explainer_title">Necessitem accés d\'accessibilitat</string>
     <string name="accessibility_service_description">Aquest servei detecta quan s\'obren reels/shorts/tiktok perquè Scrolless els pugui bloquejar si està configurat.</string>
     <string name="accessibility_success_description">Scrolless ja està a punt!</string>
     <string name="accessibility_success_title">Tot a punt!</string>

mobile/src/main/res/values-cs/strings.xml

@@ -25,7 +25,6 @@
     <string name="accessibility_explainer_step2">Najděte aplikace a klepněte na „Scrolless“ v seznamu služeb</string>
     <string name="accessibility_explainer_step3">Přepněte přepínač do polohy ZAPNUTO, abyste aplikaci Scrolless umožnili pomoci vám zastavit nekonečné posouvání</string>
     <string name="accessibility_explainer_subtitle">Scrolless potřebuje přístup k usnadnění přístupu k detekci a zastavení krátkých videí.</string>
-    <string name="accessibility_explainer_title">Potřebujeme přístup k usnadnění přístupu</string>
     <string name="accessibility_service_description">Tato služba detekuje, kdy jsou otevřeny Reels/Shorts/TikTok, aby je Scrolless mohl zablokovat, pokud je tak nastaven.</string>
     <string name="accessibility_success_description">Scrolless je nyní připraven!</string>
     <string name="accessibility_success_title">Vše nastaveno!</string>

mobile/src/main/res/values-de/strings.xml

@@ -25,7 +25,6 @@
     <string name="accessibility_explainer_step2">Suchen Sie Anwendungen und tippen Sie in der Diensteliste auf \"Scrolless\"</string>
     <string name="accessibility_explainer_step3">Schalten Sie den Schalter auf EIN, damit Scrolless Ihnen helfen kann, endloses Scrollen zu stoppen</string>
     <string name="accessibility_explainer_subtitle">Scrolless benötigt Barrierefreiheitszugriff, um kurze Videos zu erkennen und zu stoppen.</string>
-    <string name="accessibility_explainer_title">Wir benötigen Barrierefreiheitszugriff</string>
     <string name="accessibility_service_description">Dieser Dienst erkennt, wann Reels/Shorts/TikToks geöffnet werden, damit Scrolless sie bei entsprechender Konfiguration blockieren kann.</string>
     <string name="accessibility_success_description">Scrolless ist jetzt bereit!</string>
     <string name="accessibility_success_title">Alles klar!</string>

mobile/src/main/res/values-el/strings.xml

@@ -25,7 +25,6 @@
     <string name="accessibility_explainer_step2">Βρείτε τις εφαρμογές και πατήστε στο \"Scrolless\" στη λίστα υπηρεσιών</string>
     <string name="accessibility_explainer_step3">Ενεργοποιήστε τον διακόπτη για να επιτρέψετε στο Scrolless να σας βοηθήσει να σταματήσετε το ατελείωτο scrolling</string>
     <string name="accessibility_explainer_subtitle">Το Scrolless χρειάζεται πρόσβαση στην προσβασιμότητα για να εντοπίζει και να σταματά τα σύντομα βίντεο.</string>
-    <string name="accessibility_explainer_title">Χρειαζόμαστε Πρόσβαση στην Προσβασιμότητα</string>
     <string name="accessibility_service_description">Αυτή η υπηρεσία εντοπίζει πότε ανοίγουν τα reels/shorts/tiktok, ώστε το Scrolless να μπορεί να τα μπλοκάρει, αν έχει ρυθμιστεί.</string>
     <string name="accessibility_success_description">Το Scrolless είναι τώρα έτοιμο!</string>
     <string name="accessibility_success_title">Όλα Έτοιμα!</string>

mobile/src/main/res/values-es/strings.xml

@@ -25,7 +25,6 @@
     <string name="accessibility_explainer_step2">Busca aplicaciones y toca \"Scrolless\" en la lista de servicios</string>
     <string name="accessibility_explainer_step3">Activa el interruptor para permitir que Scrolless te ayude a detener el desplazamiento sin fin</string>
     <string name="accessibility_explainer_subtitle">Scrolless necesita acceso de accesibilidad para detectar y detener vídeos cortos.</string>
-    <string name="accessibility_explainer_title">Necesitamos Acceso de Accesibilidad</string>
     <string name="accessibility_service_description">Este servicio detecta cuándo se abren reels/shorts/tiktok para que Scrolless pueda bloquearlos si está configurado.</string>
     <string name="accessibility_success_description">¡Scrolless ya está listo!</string>
     <string name="accessibility_success_title">¡Todo listo!</string>

mobile/src/main/res/values-fi-rFI/strings.xml

@@ -25,7 +25,6 @@
     <string name="accessibility_explainer_step2">Etsi sovellukset ja napauta \"Scrolless\" palveluiden luettelosta</string>
     <string name="accessibility_explainer_step3">Kytke kytkin PÄÄLLE, jotta Scrolless voi auttaa sinua lopettamaan loputtoman selaamisen</string>
     <string name="accessibility_explainer_subtitle">Scrolless tarvitsee esteettömyysluvan havaitakseen ja pysäyttääkseen lyhyet videot.</string>
-    <string name="accessibility_explainer_title">Tarvitsemme esteettömyysluvan</string>
     <string name="accessibility_service_description">Tämä palvelu havaitsee, kun reels/shorts/tiktok avataan, jotta Scrolless voi estää ne, jos se on määritetty.</string>
     <string name="accessibility_success_description">Scrolless on nyt valmis!</string>
     <string name="accessibility_success_title">Valmista!</string>

mobile/src/main/res/values-fr/strings.xml

@@ -25,7 +25,6 @@
     <string name="accessibility_explainer_step2">Recherchez les applications et appuyez sur \"Scrolless\" dans la liste des services</string>
     <string name="accessibility_explainer_step3">Activez l\'interrupteur pour permettre à Scrolless de vous aider à arrêter le défilement sans fin</string>
     <string name="accessibility_explainer_subtitle">Scrolless a besoin de l\'accès à l\'accessibilité pour détecter et arrêter les vidéos courtes.</string>
-    <string name="accessibility_explainer_title">Nous avons besoin de l\'accès à l\'accessibilité</string>
     <string name="accessibility_service_description">Ce service détecte quand les Reels/Shorts/TikTok sont ouverts afin que Scrolless puisse les bloquer si configuré.</string>
     <string name="accessibility_success_description">Scrolless est maintenant prêt !</string>
     <string name="accessibility_success_title">Tout est prêt !</string>