feat: Outline UI changes

openedx · Mar 21, 2024 · 723d41d · 723d41d
1 parent 7617115
commit 723d41d
Show file tree

Hide file tree

Showing 20 changed files with 240 additions and 69 deletions.
diff --git a/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordFragment.kt b/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordFragment.kt
@@ -289,7 +289,7 @@ private fun RestorePasswordScreen(
                                     }
                                 } else {
                                     OpenEdXButton(
-                                        width = buttonWidth.testTag("btn_reset_password"),
+                                        modifier = buttonWidth.testTag("btn_reset_password"),
                                         text = stringResource(id = authR.string.auth_reset_password),
                                         onClick = {
                                             onRestoreButtonClick(email)
@@ -337,7 +337,7 @@ private fun RestorePasswordScreen(
                                 )
                                 Spacer(Modifier.height(48.dp))
                                 OpenEdXButton(
-                                    width = buttonWidth,
+                                    modifier = buttonWidth,
                                     text = stringResource(id = R.string.core_sign_in),
                                     onClick = {
                                         onBackClick()

diff --git a/auth/src/main/java/org/openedx/auth/presentation/signin/compose/SignInView.kt b/auth/src/main/java/org/openedx/auth/presentation/signin/compose/SignInView.kt
@@ -273,7 +273,7 @@ private fun AuthForm(
             CircularProgressIndicator(color = MaterialTheme.appColors.primary)
         } else {
             OpenEdXButton(
-                width = buttonWidth.testTag("btn_sign_in"),
+                modifier = buttonWidth.testTag("btn_sign_in"),
                 text = stringResource(id = coreR.string.core_sign_in),
                 onClick = {
                     onEvent(AuthEvent.SignIn(login = login, password = password))

diff --git a/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SignUpView.kt b/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SignUpView.kt
@@ -435,7 +435,7 @@ internal fun SignUpView(
                                     }
                                 } else {
                                     OpenEdXButton(
-                                        width = buttonWidth.testTag("btn_create_account"),
+                                        modifier = buttonWidth.testTag("btn_create_account"),
                                         text = stringResource(id = R.string.auth_create_account),
                                         onClick = {
                                             showErrorMap.clear()

diff --git a/auth/src/main/java/org/openedx/auth/presentation/ui/SocialAuthView.kt b/auth/src/main/java/org/openedx/auth/presentation/ui/SocialAuthView.kt
@@ -74,7 +74,7 @@ internal fun SocialAuthView(
                 R.string.auth_continue_facebook
             }
             OpenEdXButton(
-                width = Modifier
+                modifier = Modifier
                     .testTag("btn_facebook_auth")
                     .padding(top = 12.dp)
                     .fillMaxWidth(),
@@ -106,7 +106,7 @@ internal fun SocialAuthView(
                 R.string.auth_continue_microsoft
             }
             OpenEdXButton(
-                width = Modifier
+                modifier = Modifier
                     .testTag("btn_microsoft_auth")
                     .padding(top = 12.dp)
                     .fillMaxWidth(),

diff --git a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt
@@ -40,7 +40,6 @@ import androidx.compose.material.TextFieldDefaults
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Search
-import androidx.compose.material.icons.filled.Wifi
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.NonRestartableComposable
@@ -1045,40 +1044,48 @@ fun OfflineModeDialog(
         Row(
             Modifier
                 .fillMaxWidth()
-                .padding(16.dp),
+                .padding(vertical = 10.dp, horizontal = 24.dp),
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
-            Text(
-                modifier = Modifier.testTag("txt_offline_label"),
+            IconText(
                 text = stringResource(id = R.string.core_offline),
-                style = MaterialTheme.appTypography.labelMedium,
-                color = MaterialTheme.appColors.textDark
+                painter = painterResource(id = R.drawable.core_ic_offline),
+                color = Color.Black,
+                textStyle = MaterialTheme.appTypography.titleSmall
             )
-            Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-                Text(
-                    modifier = Modifier
-                        .testTag("txt_dismiss")
-                        .clickable { onDismissCLick() },
-                    text = stringResource(id = R.string.core_dismiss),
-                    style = MaterialTheme.appTypography.labelMedium,
-                    color = MaterialTheme.appColors.primary
-                )
-                Text(
-                    modifier = Modifier
-                        .testTag("txt_reload")
-                        .clickable { onReloadClick() },
-                    text = stringResource(id = R.string.core_reload),
-                    style = MaterialTheme.appTypography.labelMedium,
-                    color = MaterialTheme.appColors.primary
-                )
+            Row(horizontalArrangement = Arrangement.spacedBy(36.dp)) {
+                IconButton(
+                    modifier = Modifier.size(20.dp),
+                    onClick = {
+                        onReloadClick()
+                    }) {
+                    Icon(
+                        modifier = Modifier.size(20.dp),
+                        painter = painterResource(R.drawable.core_ic_reload),
+                        contentDescription = null,
+                        tint = MaterialTheme.appColors.primary
+                    )
+                }
+                IconButton(
+                    modifier = Modifier.size(20.dp),
+                    onClick = {
+                        onDismissCLick()
+                    }) {
+                    Icon(
+                        modifier = Modifier.size(20.dp),
+                        painter = painterResource(R.drawable.core_ic_close),
+                        contentDescription = null,
+                        tint = Color.Black
+                    )
+                }
             }
         }
     }
 }
 
 @Composable
 fun OpenEdXButton(
-    width: Modifier = Modifier.fillMaxWidth(),
+    modifier: Modifier = Modifier.fillMaxWidth(),
     text: String = "",
     onClick: () -> Unit,
     enabled: Boolean = true,
@@ -1088,7 +1095,7 @@ fun OpenEdXButton(
     Button(
         modifier = Modifier
             .testTag("btn_${text.tagId()}")
-            .then(width)
+            .then(modifier)
             .height(42.dp),
         shape = MaterialTheme.appShapes.buttonShape,
         colors = ButtonDefaults.buttonColors(
@@ -1171,23 +1178,29 @@ fun ConnectionErrorView(
     ) {
         Icon(
             modifier = Modifier.size(100.dp),
-            imageVector = Icons.Filled.Wifi,
+            painter = painterResource(id = R.drawable.core_no_internet_connection),
             contentDescription = null,
             tint = MaterialTheme.appColors.onSurface
         )
+        Spacer(Modifier.height(28.dp))
+        Text(
+            modifier = Modifier.fillMaxWidth(0.8f),
+            text = stringResource(id = R.string.core_not_internet_connection),
+            color = MaterialTheme.appColors.textPrimary,
+            style = MaterialTheme.appTypography.titleLarge,
+            textAlign = TextAlign.Center
+        )
         Spacer(Modifier.height(16.dp))
         Text(
-            modifier = Modifier
-                .testTag("txt_connection_error_label")
-                .fillMaxWidth(0.6f),
-            text = stringResource(id = R.string.core_not_connected_to_internet),
+            modifier = Modifier.fillMaxWidth(0.8f),
+            text = stringResource(id = R.string.core_not_internet_connection_description),
             color = MaterialTheme.appColors.textPrimary,
-            style = MaterialTheme.appTypography.titleMedium,
+            style = MaterialTheme.appTypography.bodyLarge,
             textAlign = TextAlign.Center
         )
         Spacer(Modifier.height(16.dp))
         OpenEdXButton(
-            width = Modifier
+            modifier = Modifier
                 .widthIn(Dp.Unspecified, 162.dp),
             text = stringResource(id = R.string.core_reload),
             onClick = onReloadClick
@@ -1202,7 +1215,7 @@ fun AuthButtonsPanel(
 ) {
     Row {
         OpenEdXButton(
-            width = Modifier
+            modifier = Modifier
                 .testTag("btn_register")
                 .width(0.dp)
                 .weight(1f),

diff --git a/core/src/main/res/drawable/core_ic_close.xml b/core/src/main/res/drawable/core_ic_close.xml
@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <group>
+    <clip-path
+        android:pathData="M0,0h20v20h-20z"/>
+    <path
+        android:pathData="M15,5L5,15"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.45833"
+        android:fillColor="#00000000"
+        android:strokeColor="#313131"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M5,5L15,15"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.45833"
+        android:fillColor="#00000000"
+        android:strokeColor="#313131"
+        android:strokeLineCap="round"/>
+  </group>
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_offline.xml b/core/src/main/res/drawable/core_ic_offline.xml
@@ -0,0 +1,45 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <group>
+    <clip-path
+        android:pathData="M0,0h20v20h-20z"/>
+    <path
+        android:pathData="M10,15H10.008"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.45833"
+        android:fillColor="#00000000"
+        android:strokeColor="#313131"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M7.643,12.643C8.268,12.018 9.116,11.667 10,11.667C10.884,11.667 11.732,12.018 12.357,12.643"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.45833"
+        android:fillColor="#00000000"
+        android:strokeColor="#313131"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M5.286,10.286C6.17,9.4 7.286,8.781 8.506,8.502M11.975,8.632C13.011,8.955 13.951,9.527 14.714,10.298"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.45833"
+        android:fillColor="#00000000"
+        android:strokeColor="#313131"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M2.929,7.929C3.782,7.075 4.783,6.381 5.883,5.883M8.467,5.117C10.021,4.876 11.61,5.005 13.105,5.493C14.6,5.982 15.959,6.816 17.071,7.928"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.45833"
+        android:fillColor="#00000000"
+        android:strokeColor="#313131"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M2.5,2.5L17.5,17.5"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.45833"
+        android:fillColor="#00000000"
+        android:strokeColor="#313131"
+        android:strokeLineCap="round"/>
+  </group>
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_reload.xml b/core/src/main/res/drawable/core_ic_reload.xml
@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <group>
+    <clip-path
+        android:pathData="M0,0h20v20h-20z"/>
+    <path
+        android:pathData="M16.611,10.868C16.454,12.067 15.972,13.202 15.219,14.149C14.466,15.097 13.469,15.821 12.336,16.245C11.202,16.669 9.975,16.776 8.785,16.556C7.595,16.335 6.487,15.794 5.581,14.992C4.675,14.19 4.005,13.156 3.641,12.001C3.278,10.847 3.236,9.615 3.52,8.439C3.803,7.262 4.402,6.185 5.251,5.323C6.1,4.46 7.168,3.846 8.34,3.544C11.589,2.711 14.953,4.383 16.194,7.5"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.45833"
+        android:fillColor="#00000000"
+        android:strokeColor="#506EFF"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M16.667,3.333V7.5H12.5"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.45833"
+        android:fillColor="#00000000"
+        android:strokeColor="#506EFF"
+        android:strokeLineCap="round"/>
+  </group>
+</vector>
diff --git a/core/src/main/res/drawable/core_no_internet_connection.xml b/core/src/main/res/drawable/core_no_internet_connection.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="86dp"
+    android:height="86dp"
+    android:viewportWidth="86"
+    android:viewportHeight="86">
+  <path
+      android:pathData="M43,78C36.928,78 32.285,73.357 32.285,67.286C32.285,64.428 33.357,61.571 35.5,59.786C39.785,55.857 46.571,55.857 50.5,59.786C54.785,64.071 54.785,70.857 50.5,74.786C48.714,76.928 45.857,78 43,78ZM65.143,50.143L84.785,30.5C86.214,29.071 86.214,26.928 84.785,25.5C69.428,10.143 46.571,4.429 25.857,10.5L65.143,50.143ZM84.785,79.786L6.214,1.214C4.785,-0.214 2.643,-0.214 1.214,1.214C-0.215,2.643 -0.215,4.786 1.214,6.214L11.928,16.928C8,19.428 4.428,22.286 1.214,25.5C-0.215,26.928 -0.215,29.071 1.214,30.5L24.071,53.357C25.5,54.786 27.643,54.786 29.071,53.357C32.643,49.786 37.643,47.643 42.643,47.643L79.785,84.786C81.214,86.214 83.357,86.214 84.785,84.786C86.214,83.357 86.214,81.214 84.785,79.786Z"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/core/src/main/res/values-uk/strings.xml b/core/src/main/res/values-uk/strings.xml
@@ -58,7 +58,6 @@
     <string name="core_rate_us">Оцінити нас</string>
     <string name="core_thank_you_dialog_positive_description">Дякуємо за надання відгуку. Чи бажаєте ви поділитися своєю оцінкою цього додатка з іншими користувачами в магазині додатків?</string>
     <string name="core_thank_you_dialog_negative_description">Ми отримали ваш відгук і використовуватимемо його, щоб покращити ваш досвід навчання в майбутньому. Дякуємо, що поділилися!</string>
-    <string name="core_not_connected_to_internet">Ви не підключені до Інтернету. Будь ласка, перевірте ваше підключення до Інтернету.</string>
 
     <string name="core_register">Зареєструватися</string>
     <string name="core_sign_in">Увійти</string>

diff --git a/core/src/main/res/values/strings.xml b/core/src/main/res/values/strings.xml
@@ -73,7 +73,8 @@
     <string name="core_rate_us">Rate Us</string>
     <string name="core_thank_you_dialog_positive_description">Thank you for sharing your feedback with us. Would you like to share your review of this app with other users on the app store?</string>
     <string name="core_thank_you_dialog_negative_description">We received your feedback and will use it to help improve your learning experience going forward. Thank you for sharing!</string>
-    <string name="core_not_connected_to_internet">You are not connected to the Internet. Please check your Internet connection.</string>
+    <string name="core_not_internet_connection">No internet connection</string>
+    <string name="core_not_internet_connection_description">Please connect to the internet to view this content.</string>
     <string name="core_ok" tools:ignore="MissingTranslation">OK</string>
     <string name="core_continue" tools:ignore="MissingTranslation">Continue</string>
     <string name="core_leaving_the_app" tools:ignore="MissingTranslation">Leaving the app</string>