minor UI fix and screenshots added

gargVader · Jun 20, 2023 · 6f34c27 · 6f34c27
1 parent 942350e
commit 6f34c27
Show file tree

Hide file tree

Showing 15 changed files with 89 additions and 23 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -23,7 +23,7 @@ android {
         }
 
         ndk {
-            abiFilters "armeabi-v7a", "x86_64"
+            abiFilters "armeabi-v7a"
         }
 
         python {

diff --git a/.../java/com/example/mp3downloader/presentation/common/step_content/ConvertingStepContent.kt b/.../java/com/example/mp3downloader/presentation/common/step_content/ConvertingStepContent.kt
@@ -2,8 +2,9 @@ package com.example.mp3downloader.presentation.common.step_content
 
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import com.example.mp3downloader.ui.theme.Typography
 
 @Composable
 fun ConvertingStepContent() {
-    Text(text = "Converting...")
+    Text(text = "Converting...", style = Typography.bodyMedium)
 }
diff --git a/...java/com/example/mp3downloader/presentation/common/step_content/DownloadingStepContent.kt b/...java/com/example/mp3downloader/presentation/common/step_content/DownloadingStepContent.kt
@@ -12,6 +12,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.example.mp3downloader.ui.theme.Blue
+import com.example.mp3downloader.ui.theme.Typography
 
 @Composable
 fun DownloadingStepContent(
@@ -21,7 +22,7 @@ fun DownloadingStepContent(
         targetValue = percentComplete,
         animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
     )
-    Text(text = "Downloading...")
+    Text(text = "Downloading...", style = Typography.bodyMedium)
     LinearProgressIndicator(
         progress = animatedProgress,
         modifier = Modifier.fillMaxWidth().padding(top = 8.dp),

diff --git a/...ain/java/com/example/mp3downloader/presentation/common/step_content/FailureStepContent.kt b/...ain/java/com/example/mp3downloader/presentation/common/step_content/FailureStepContent.kt
@@ -2,19 +2,65 @@ package com.example.mp3downloader.presentation.common.step_content
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
+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.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Cancel
+import androidx.compose.material.icons.filled.Error
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import com.example.mp3downloader.presentation.common.DownloadButton
 import com.example.mp3downloader.presentation.home_screen.HomeScreenStep
+import com.example.mp3downloader.ui.theme.Typography
 
+@Preview
 @Composable
 fun FailureStepContent(errorMessage: String, onClick: () -> Unit) {
     Column(modifier = Modifier.fillMaxHeight(), verticalArrangement = Arrangement.SpaceBetween) {
-        Text(text = "Failure\n$errorMessage")
+        Column() {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(text = "Failure", style = Typography.bodyMedium, color = Color.Red)
+                Icon(
+                    Icons.Filled.Cancel,
+                    contentDescription = null,
+                    modifier = Modifier.size(16.dp),
+                    tint = Color.Red
+                )
+            }
+            Spacer(modifier = Modifier.height(8.dp))
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Icon(
+                    Icons.Default.Error,
+                    contentDescription = null,
+                    modifier = Modifier.size(16.dp),
+                    tint = Color.Gray
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(
+                    text = errorMessage,
+                    color = Color.Gray,
+                    style = Typography.bodyMedium,
+                    fontSize = 12.sp
+                )
+            }
+        }
         // Ideally DownloadButton shouldn't depend on Step. Since this is just an UI element, we should
         // have an enum for different button types.
         DownloadButton(

diff --git a/...main/java/com/example/mp3downloader/presentation/common/step_content/SavingStepContent.kt b/...main/java/com/example/mp3downloader/presentation/common/step_content/SavingStepContent.kt
@@ -2,8 +2,9 @@ package com.example.mp3downloader.presentation.common.step_content
 
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import com.example.mp3downloader.ui.theme.Typography
 
 @Composable
 fun SavingStepContent() {
-    Text(text = "Saving...")
+    Text(text = "Saving...", style = Typography.bodyMedium)
 }
diff --git a/...ain/java/com/example/mp3downloader/presentation/common/step_content/SuccessStepContent.kt b/...ain/java/com/example/mp3downloader/presentation/common/step_content/SuccessStepContent.kt
@@ -5,10 +5,13 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
+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.layout.width
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.CheckCircle
 import androidx.compose.material.icons.filled.Info
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -25,29 +28,43 @@ import com.example.mp3downloader.ui.theme.Typography
 @Composable
 fun SuccessStepContent(onClick: () -> Unit) {
     Column(modifier = Modifier.fillMaxHeight(), verticalArrangement = Arrangement.SpaceBetween) {
-        Text(text = "Success")
+        Column() {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(text = "Success", style = Typography.bodyMedium)
+                Icon(
+                    Icons.Filled.CheckCircle,
+                    contentDescription = null,
+                    modifier = Modifier.size(16.dp),
+                    tint = Color.Green
+                )
+            }
+            Spacer(modifier = Modifier.height(8.dp))
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Icon(
+                    Icons.Default.Info,
+                    contentDescription = null,
+                    modifier = Modifier.size(16.dp),
+                    tint = Color.Gray
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(
+                    text = "Where you want to save the MP3",
+                    color = Color.Gray,
+                    style = Typography.bodyMedium,
+                    fontSize = 12.sp
+                )
+            }
+        }
         // Ideally DownloadButton shouldn't depend on Step. Since this is just an UI element, we should
         // have an enum for different button types.
         DownloadButton(
             step = HomeScreenStep.SUCCESS,
             onClick = onClick,
             modifier = Modifier.padding(bottom = 16.dp)
         )
-        Row(verticalAlignment = Alignment.CenterVertically) {
-            Icon(
-                Icons.Default.Info,
-                contentDescription = null,
-                modifier = Modifier.size(16.dp),
-                tint = Color.Gray
-            )
-            Spacer(modifier = Modifier.width(8.dp))
-            Text(
-                text = "Where you want to save the MP3",
-                color = Color.Gray,
-                style = Typography.bodyMedium,
-                fontSize = 12.sp
-            )
-        }
     }
-
 }
diff --git a/app/src/main/java/com/example/mp3downloader/presentation/home_screen/HomeScreen.kt b/app/src/main/java/com/example/mp3downloader/presentation/home_screen/HomeScreen.kt
@@ -156,7 +156,7 @@ fun HomeScreen(
             state.videoInfo?.let { videoInfo ->
                 Column {
                     VideoInfoItem(videoInfo = videoInfo)
-                    Spacer(modifier = Modifier.height(8.dp))
+                    Spacer(modifier = Modifier.height(24.dp))
                     when (state.step) {
                         HomeScreenStep.DOWNLOADING -> {
                             DownloadingStepContent(percentComplete = state.downloadPercentComplete)

diff --git a/screenshots/1.png b/screenshots/1.png
diff --git a/screenshots/2.png b/screenshots/2.png
diff --git a/screenshots/3.png b/screenshots/3.png
diff --git a/screenshots/4.png b/screenshots/4.png
diff --git a/screenshots/5.png b/screenshots/5.png
diff --git a/screenshots/6.png b/screenshots/6.png
diff --git a/screenshots/7.jpg b/screenshots/7.jpg
diff --git a/screenshots/video.mp4 b/screenshots/video.mp4
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ android { @@
             }
             ndk {
-                abiFilters "armeabi-v7a", "x86_64"
+                abiFilters "armeabi-v7a"
             }
             python {
@@ Expand Down @@