Add creation date below device name in the device list screen

10 files changed, 107 insertions, 24 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
index babeee68e8..23fba8981f 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
@@ -25,26 +25,53 @@ import androidx.compose.ui.unit.Dp
 import androidx.constraintlayout.compose.ConstraintLayout
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.theme.Dimens
+import net.mullvad.mullvadvpn.compose.theme.typeface.listItemSubText
 import net.mullvad.mullvadvpn.compose.theme.typeface.listItemText
 
 @Preview
 @Composable
 fun PreviewListItem() {
     Column {
-        ListItem(text = "No icon not loading", isLoading = false, onClick = {})
-        ListItem(text = "No icon is loading", isLoading = true, onClick = {})
+        ListItem(text = "No subtext No icon not loading", isLoading = false, onClick = {})
+        ListItem(text = "No subtext No icon is loading", isLoading = true, onClick = {})
         ListItem(
-            text = "With icon is loading",
+            text = "No subtext With icon is loading",
             isLoading = true,
             iconResourceId = R.drawable.icon_close,
             onClick = {}
         )
         ListItem(
-            text = "With icon not loading",
+            text = "No subtext With icon not loading",
             isLoading = false,
             iconResourceId = R.drawable.icon_close,
             onClick = {}
         )
+        ListItem(
+            text = "With subtext with icon is loading",
+            subText = "Subtext",
+            isLoading = true,
+            iconResourceId = R.drawable.icon_close,
+            onClick = {}
+        )
+        ListItem(
+            text = "With subtext no icon is loading",
+            subText = "Subtext",
+            isLoading = true,
+            onClick = {}
+        )
+        ListItem(
+            text = "With subtext with icon not loading",
+            subText = "Subtext",
+            isLoading = false,
+            iconResourceId = R.drawable.icon_close,
+            onClick = {}
+        )
+        ListItem(
+            text = "With subtext no icon not loading",
+            subText = "Subtext",
+            isLoading = false,
+            onClick = {}
+        )
     }
 }
 
@@ -57,6 +84,7 @@ fun PreviewChangeListItem() {
 @Composable
 fun ListItem(
     text: String,
+    subText: String? = null,
     height: Dp = Dimens.listItemHeight,
     isLoading: Boolean,
     @DrawableRes iconResourceId: Int? = null,
@@ -80,6 +108,13 @@ fun ListItem(
                 style = MaterialTheme.typography.listItemText,
                 color = MaterialTheme.colorScheme.onPrimary
             )
+            subText?.let {
+                Text(
+                    text = subText,
+                    style = MaterialTheme.typography.listItemSubText,
+                    color = MaterialTheme.colorScheme.onPrimary
+                )
+            }
         }
 
         Box(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
index e0df9b7e8a..70082e9f3a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
@@ -15,23 +15,27 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.Dimension
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.ActionButton
 import net.mullvad.mullvadvpn.compose.component.ListItem
 import net.mullvad.mullvadvpn.compose.dialog.ShowDeviceRemovalDialog
+import net.mullvad.mullvadvpn.compose.theme.Dimens
+import net.mullvad.mullvadvpn.compose.theme.MullvadBlue
+import net.mullvad.mullvadvpn.compose.theme.MullvadGreen
+import net.mullvad.mullvadvpn.compose.theme.MullvadGreen40
+import net.mullvad.mullvadvpn.compose.theme.MullvadWhite
+import net.mullvad.mullvadvpn.compose.theme.MullvadWhite80
 import net.mullvad.mullvadvpn.util.capitalizeFirstCharOfEachWord
+import net.mullvad.mullvadvpn.util.formatDate
 import net.mullvad.mullvadvpn.viewmodel.DeviceListViewModel
 
 @Composable
@@ -48,7 +52,7 @@ fun DeviceListScreen(
 
     ConstraintLayout(
         modifier =
-            Modifier.fillMaxHeight().fillMaxWidth().background(colorResource(id = R.color.darkBlue))
+            Modifier.fillMaxHeight().fillMaxWidth().background(MaterialTheme.colorScheme.secondary)
     ) {
         val (content, buttons) = createRefs()
 
@@ -105,9 +109,7 @@ fun DeviceListScreen(
                                         R.string.max_devices_resolved_title
                                     }
                             ),
-                        fontSize = 24.sp,
-                        color = Color.White,
-                        fontWeight = FontWeight.Bold
+                        style = MaterialTheme.typography.headlineSmall
                     )
 
                     Text(
@@ -120,8 +122,7 @@ fun DeviceListScreen(
                                         R.string.max_devices_resolved_description
                                     }
                             ),
-                        color = Color.White,
-                        fontSize = 14.sp,
+                        style = MaterialTheme.typography.bodySmall,
                         modifier =
                             Modifier.wrapContentHeight().animateContentSize().padding(top = 8.dp)
                     )
@@ -139,6 +140,14 @@ fun DeviceListScreen(
                         state.deviceUiItems.forEach { deviceUiState ->
                             ListItem(
                                 text = deviceUiState.device.name.capitalizeFirstCharOfEachWord(),
+                                subText =
+                                    deviceUiState.device.creationDate?.let { creationDate ->
+                                        stringResource(
+                                            id = R.string.created_x,
+                                            creationDate.formatDate()
+                                        )
+                                    },
+                                height = Dimens.listItemHeightExtra,
                                 isLoading = deviceUiState.isLoading,
                                 iconResourceId = R.drawable.icon_close
                             ) {
@@ -165,10 +174,10 @@ fun DeviceListScreen(
                 isEnabled = state.hasTooManyDevices.not() && state.isLoading.not(),
                 colors =
                     ButtonDefaults.buttonColors(
-                        backgroundColor = colorResource(id = R.color.green),
-                        disabledBackgroundColor = colorResource(id = R.color.green40),
-                        disabledContentColor = colorResource(id = R.color.white80),
-                        contentColor = Color.White
+                        backgroundColor = MullvadGreen,
+                        disabledBackgroundColor = MullvadGreen40,
+                        disabledContentColor = MullvadWhite80,
+                        contentColor = MullvadWhite
                     )
             )
 
@@ -177,8 +186,8 @@ fun DeviceListScreen(
                 onClick = onBackClick,
                 colors =
                     ButtonDefaults.buttonColors(
-                        backgroundColor = colorResource(id = R.color.blue),
-                        contentColor = Color.White
+                        backgroundColor = MullvadBlue,
+                        contentColor = MullvadWhite
                     ),
                 modifier = Modifier.padding(top = 16.dp)
             )
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt
index 27ae19b402..8ed9346c2b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Color.kt
@@ -9,6 +9,7 @@ val MullvadBlue20 = Color(0x33294D73)
 val MullvadBrown = Color(0xFFD2943B)
 val MullvadDarkBlue = Color(0xFF192E45)
 val MullvadGreen = Color(0xFF44AD4D)
+val MullvadGreen40 = Color(0x6644AD4D)
 val MullvadRed = Color(0xFFE34039)
 val MullvadYellow = Color(0xFFFFD524)
 val MullvadHelmetYellow = Color(0xFFFFD524)
@@ -17,6 +18,7 @@ val MullvadWhite10 = Color(0x1AFFFFFF)
 val MullvadWhite20 = Color(0x33FFFFFF)
 val MullvadWhite40 = Color(0x66FFFFFF)
 val MullvadWhite60 = Color(0x99FFFFFF)
+val MullvadWhite80 = Color(0xCCFFFFFF)
 
 const val AlphaActive = 1f
 const val AlphaInactive = 0.4f
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Theme.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Theme.kt
index f3654b7d9f..815cfbf88b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Theme.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/Theme.kt
@@ -9,12 +9,24 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.compose.theme.dimensions.Dimensions
 import net.mullvad.mullvadvpn.compose.theme.dimensions.defaultDimensions
+import net.mullvad.mullvadvpn.compose.theme.typeface.TypeScale
 
 // Add our own definitions here
-private val MullvadTypography = Typography()
+private val MullvadTypography =
+    Typography(
+        headlineSmall =
+            TextStyle(
+                color = MullvadWhite,
+                fontSize = TypeScale.TextBig,
+                fontWeight = FontWeight.Bold
+            ),
+        bodySmall = TextStyle(color = MullvadWhite, fontSize = TypeScale.TextSmall)
+    )
 
 private val MullvadColorPalette =
     lightColorScheme(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt
index ac45241776..04904ac410 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/dimensions/Dimensions.kt
@@ -8,6 +8,7 @@ data class Dimensions(
     val smallPadding: Dp = 8.dp,
     val listItemDivider: Dp = 1.dp,
     val listItemHeight: Dp = 50.dp,
+    val listItemHeightExtra: Dp = 60.dp,
     val loadingSpinnerSize: Dp = 24.dp,
     val loadingSpinnerStrokeWidth: Dp = 3.dp,
     val loadingSpinnerPadding: Dp = 12.dp
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/TypeScale.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/TypeScale.kt
index 17faaa2455..1098dbdaf2 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/TypeScale.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/TypeScale.kt
@@ -2,8 +2,16 @@ package net.mullvad.mullvadvpn.compose.theme.typeface
 
 import androidx.compose.ui.unit.sp
 
-// Do not use these font sizes directly. Instead use the styles defined in Typeface and/or the
-// standard styles in the material theme
+/**
+ * Font sizes used by text styles in the app.
+ *
+ * NOTE:
+ * * Do not use these font sizes directly. Instead use the styles defined in Typeface and/or the
+ * standard styles in the material theme
+ * * Order entries within each type by descending size.
+ */
 internal object TypeScale {
+    val TextBig = 24.sp
     val TextMediumPlus = 18.sp
+    val TextSmall = 13.sp
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/Typeface.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/Typeface.kt
index c76aacf73b..71c72bd1af 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/Typeface.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/theme/typeface/Typeface.kt
@@ -16,3 +16,13 @@ val Typography.listItemText: TextStyle
             fontSize = TypeScale.TextMediumPlus
         )
     }
+
+val Typography.listItemSubText: TextStyle
+    @Composable
+    get() {
+        return TextStyle(
+            fontWeight = FontWeight.SemiBold,
+            letterSpacing = TextUnit.Unspecified,
+            fontSize = TypeScale.TextSmall
+        )
+    }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/util/DateExtensions.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/util/DateExtensions.kt
new file mode 100644
index 0000000000..614c758794
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/util/DateExtensions.kt
@@ -0,0 +1,6 @@
+package net.mullvad.mullvadvpn.util
+
+import org.joda.time.DateTime
+import org.joda.time.format.ISODateTimeFormat
+
+fun DateTime.formatDate(): String = ISODateTimeFormat.date().print(this)
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
index bf1608f2ee..77a20b7922 100644
--- a/android/app/src/main/res/values/colors.xml
+++ b/android/app/src/main/res/values/colors.xml
@@ -14,7 +14,6 @@
     <color name="green">#44AD4D</color>
     <color name="green90">#E644AD4D</color>
     <color name="green80">#CC44AD4D</color>
-    <color name="green40">#6644AD4D</color>
     <color name="red">#FFE34039</color>
     <color name="red95">#F2E34039</color>
     <color name="red80">#CCE34039</color>
diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml
index 3c91b34b9c..871ef46360 100644
--- a/android/app/src/main/res/values/strings.xml
+++ b/android/app/src/main/res/values/strings.xml
@@ -193,4 +193,5 @@
     <string name="automatic">Automatic</string>
     <string name="off">Off</string>
     <string name="udp_over_tcp_port_info">Which TCP port the UDP-over-TCP obfuscation protocol should connect to on the VPN server.</string>
+    <string name="created_x">Created: %s</string>
 </resources>