Replace most usages of dimension resources in compose

mullvad · Oct 11, 2023 · d5c1ea2 · d5c1ea2
1 parent 473bb4a
commit d5c1ea2
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 60 deletions.
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DnsCell.kt
@@ -9,14 +9,11 @@ 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.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 
@@ -58,12 +55,10 @@ fun DnsCell(
 
 @Composable
 private fun DnsTitle(address: String, modifier: Modifier = Modifier) {
-    val textSize = dimensionResource(id = R.dimen.text_medium).value.sp
     Text(
         text = address,
         color = Color.White,
-        fontSize = textSize,
-        fontStyle = FontStyle.Normal,
+        style = MaterialTheme.typography.labelLarge,
         textAlign = TextAlign.Start,
         modifier = modifier.wrapContentWidth(align = Alignment.End).wrapContentHeight()
     )

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
@@ -12,13 +12,13 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
+import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.MullvadBlue
 import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
 
@@ -62,7 +62,6 @@ fun InformationComposeCell(
 
 @Composable
 private fun InformationComposeCellBody(modifier: Modifier, onInfoClicked: (() -> Unit)? = null) {
-    val horizontalPadding = dimensionResource(id = R.dimen.medium_padding)
     val verticalPadding = 13.dp
     Row(
         modifier = modifier.wrapContentWidth().wrapContentHeight(),
@@ -73,8 +72,8 @@ private fun InformationComposeCellBody(modifier: Modifier, onInfoClicked: (() ->
                 modifier =
                     Modifier.clickable { onInfoClicked() }
                         .padding(
-                            start = horizontalPadding,
-                            end = horizontalPadding,
+                            start = Dimens.mediumPadding,
+                            end = Dimens.mediumPadding,
                             top = verticalPadding,
                             bottom = verticalPadding
                         )

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeviceRemovalDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeviceRemovalDialog.kt
@@ -18,7 +18,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -28,6 +27,7 @@ import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.HtmlText
 import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.lib.common.util.capitalizeFirstCharOfEachWord
+import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.model.Device
 
 @Preview
@@ -68,11 +68,8 @@ fun ShowDeviceRemovalDialog(onDismiss: () -> Unit, onConfirm: () -> Unit, device
         dismissButton = {
             Button(
                 modifier =
-                    Modifier.height(dimensionResource(id = R.dimen.button_height))
-                        .defaultMinSize(
-                            minWidth = 0.dp,
-                            minHeight = dimensionResource(id = R.dimen.button_height)
-                        )
+                    Modifier.height(Dimens.buttonHeight)
+                        .defaultMinSize(minWidth = 0.dp, minHeight = Dimens.buttonHeight)
                         .fillMaxWidth(),
                 colors =
                     ButtonDefaults.buttonColors(
@@ -90,11 +87,8 @@ fun ShowDeviceRemovalDialog(onDismiss: () -> Unit, onConfirm: () -> Unit, device
                 contentPadding = PaddingValues(0.dp),
                 modifier =
                     Modifier.focusRequester(FocusRequester())
-                        .height(dimensionResource(id = R.dimen.button_height))
-                        .defaultMinSize(
-                            minWidth = 0.dp,
-                            minHeight = dimensionResource(id = R.dimen.button_height)
-                        )
+                        .height(Dimens.buttonHeight)
+                        .defaultMinSize(minWidth = 0.dp, minHeight = Dimens.buttonHeight)
                         .fillMaxWidth(),
                 colors =
                     ButtonDefaults.buttonColors(

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -18,16 +17,17 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.compose.button.ActionButton
 import net.mullvad.mullvadvpn.compose.textfield.DnsTextField
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.MullvadBlue
 import net.mullvad.mullvadvpn.lib.theme.MullvadRed
 import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
@@ -61,16 +61,12 @@ fun DnsDialog(
     onRemove: () -> Unit,
     onDismiss: () -> Unit
 ) {
-    val buttonSize = dimensionResource(id = R.dimen.button_height)
-    val mediumPadding = dimensionResource(id = R.dimen.medium_padding)
+    val buttonSize = Dimens.buttonHeight
+    val mediumPadding = Dimens.mediumPadding
     val dialogPadding = 20.dp
     val midPadding = 10.dp
     val smallPadding = 5.dp
 
-    val textSmallSize = dimensionResource(id = R.dimen.text_small).value.sp
-    val textMediumSize = dimensionResource(id = R.dimen.text_medium_plus).value.sp
-    val textBigSize = dimensionResource(id = R.dimen.text_big).value.sp
-
     val textFieldFocusRequester = FocusRequester()
 
     Dialog(
@@ -84,7 +80,7 @@ fun DnsDialog(
                     .fillMaxWidth(0.8f)
                     .background(
                         color = MaterialTheme.colorScheme.background,
-                        MaterialTheme.shapes.extraLarge
+                        shape = MaterialTheme.shapes.extraLarge
                     )
                     .padding(dialogPadding)
             ) {
@@ -96,7 +92,8 @@ fun DnsDialog(
                             stringResource(R.string.update_dns_server_dialog_title)
                         },
                     color = Color.White,
-                    fontSize = textBigSize
+                    style =
+                        MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.Normal)
                 )
 
                 Box(
@@ -133,13 +130,13 @@ fun DnsDialog(
                 if (errorMessage != null) {
                     Text(
                         text = errorMessage,
-                        fontSize = textSmallSize,
+                        style = MaterialTheme.typography.bodySmall,
                         color = MullvadRed,
                         modifier = Modifier.padding(top = smallPadding)
                     )
                 }
 
-                Button(
+                ActionButton(
                     modifier =
                         Modifier.padding(top = mediumPadding)
                             .height(buttonSize)
@@ -153,17 +150,12 @@ fun DnsDialog(
                             disabledContainerColor = MullvadWhite20
                         ),
                     onClick = { onAttemptToSave() },
-                    enabled = stagedDns.isValid(),
-                    shape = MaterialTheme.shapes.small
-                ) {
-                    Text(
-                        text = stringResource(id = R.string.submit_button),
-                        fontSize = textMediumSize
-                    )
-                }
+                    isEnabled = stagedDns.isValid(),
+                    text = stringResource(id = R.string.submit_button),
+                )
 
                 if (stagedDns is StagedDns.EditDns) {
-                    Button(
+                    ActionButton(
                         modifier =
                             Modifier.padding(top = mediumPadding)
                                 .height(buttonSize)
@@ -175,16 +167,11 @@ fun DnsDialog(
                                 contentColor = MullvadWhite
                             ),
                         onClick = { onRemove() },
-                        shape = MaterialTheme.shapes.small
-                    ) {
-                        Text(
-                            text = stringResource(id = R.string.remove_button),
-                            fontSize = textMediumSize
-                        )
-                    }
+                        text = stringResource(id = R.string.remove_button)
+                    )
                 }
 
-                Button(
+                ActionButton(
                     modifier =
                         Modifier.padding(top = mediumPadding)
                             .height(buttonSize)
@@ -196,10 +183,8 @@ fun DnsDialog(
                             contentColor = Color.White
                         ),
                     onClick = { onDismiss() },
-                    shape = MaterialTheme.shapes.small
-                ) {
-                    Text(text = stringResource(id = R.string.cancel), fontSize = textMediumSize)
-                }
+                    text = stringResource(id = R.string.cancel)
+                )
             }
         }
     )

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/PrivacyDisclaimerScreen.kt
@@ -17,7 +17,6 @@ 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.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
@@ -33,6 +32,7 @@ import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.ActionButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
 
 @Preview
 @Composable
@@ -61,7 +61,7 @@ fun PrivacyDisclaimerScreen(
                     .background(color = MaterialTheme.colorScheme.background)
         ) {
             val (body, actionButtons) = createRefs()
-            val sideMargin = dimensionResource(id = R.dimen.side_margin)
+            val sideMargin = Dimens.sideMargin
 
             Column(
                 modifier =

diff --git a/android/lib/resource/src/main/res/values/dimensions.xml b/android/lib/resource/src/main/res/values/dimensions.xml
@@ -1,7 +1,4 @@
 <resources>
-    <dimen name="text_small">13sp</dimen>
-    <dimen name="text_medium">16sp</dimen>
     <dimen name="text_medium_plus">18sp</dimen>
-    <dimen name="text_big">24sp</dimen>
     <dimen name="zero_size">0px</dimen>
 </resources>