Merge branch 'refactor-settings-header'

16 files changed, 180 insertions, 213 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/BackButton.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/BackButton.kt
new file mode 100644
index 0000000000..b0ae6024ec
--- /dev/null
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/BackButton.kt
@@ -0,0 +1,71 @@
+package net.mullvad.mullvadvpn.ui.widget
+
+import android.content.Context
+import android.util.AttributeSet
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.LayoutInflater
+import android.widget.LinearLayout
+import android.widget.TextView
+import net.mullvad.mullvadvpn.R
+
+class BackButton : LinearLayout {
+    private val container =
+        context.getSystemService(Context.LAYOUT_INFLATER_SERVICE).let { service ->
+            val inflater = service as LayoutInflater
+
+            inflater.inflate(R.layout.settings_back_button, this)
+        }
+
+    private val label = container.findViewById<TextView>(R.id.label)
+
+    constructor(context: Context) : super(context) {}
+
+    constructor(context: Context, attributes: AttributeSet) : super(context, attributes) {
+        loadAttributes(attributes)
+    }
+
+    constructor(context: Context, attributes: AttributeSet, defaultStyleAttribute: Int) :
+        super(context, attributes, defaultStyleAttribute) {
+            loadAttributes(attributes)
+        }
+
+    constructor(
+        context: Context,
+        attributes: AttributeSet,
+        defaultStyleAttribute: Int,
+        defaultStyleResource: Int
+    ) : super(context, attributes, defaultStyleAttribute, defaultStyleResource) {
+        loadAttributes(attributes)
+    }
+
+    init {
+        isClickable = true
+        gravity = Gravity.CENTER_VERTICAL or Gravity.LEFT
+        orientation = HORIZONTAL
+
+        resources.getDimensionPixelSize(R.dimen.settings_back_button_padding).let { padding ->
+            setPadding(padding, padding, padding, padding)
+        }
+
+        loadBackground()
+    }
+
+    private fun loadAttributes(attributes: AttributeSet) {
+        context.theme.obtainStyledAttributes(attributes, R.styleable.TextAttribute, 0, 0).apply {
+            try {
+                label.text = getString(R.styleable.TextAttribute_text) ?: ""
+            } finally {
+                recycle()
+            }
+        }
+    }
+
+    private fun loadBackground() {
+        val typedValue = TypedValue()
+
+        context.theme.resolveAttribute(android.R.attr.selectableItemBackground, typedValue, true)
+
+        setBackgroundResource(typedValue.resourceId)
+    }
+}
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/Button.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/Button.kt
index 9c2573664f..791b8caaa5 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/Button.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/Button.kt
@@ -142,7 +142,6 @@ open class Button : FrameLayout {
 
         context.theme.obtainStyledAttributes(attributes, styleableId, 0, 0).apply {
             try {
-                button.text = getString(R.styleable.Button_text) ?: ""
                 buttonColor = ButtonColor.fromCode(getInteger(R.styleable.Button_buttonColor, 0))
                 detailImage = getDrawable(R.styleable.Button_detailImage)
                 showSpinner = getBoolean(R.styleable.Button_showSpinner, false)
@@ -150,5 +149,13 @@ open class Button : FrameLayout {
                 recycle()
             }
         }
+
+        context.theme.obtainStyledAttributes(attributes, R.styleable.TextAttribute, 0, 0).apply {
+            try {
+                button.text = getString(R.styleable.TextAttribute_text) ?: ""
+            } finally {
+                recycle()
+            }
+        }
     }
 }
diff --git a/android/src/main/res/layout/account.xml b/android/src/main/res/layout/account.xml
index d827e77acd..86d4e31664 100644
--- a/android/src/main/res/layout/account.xml
+++ b/android/src/main/res/layout/account.xml
@@ -8,43 +8,24 @@
     <TextView android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:textColor="@color/white"
-              android:textSize="16sp"
-              android:textStyle="bold"
-              android:text="@string/settings_account" />
+              android:text="@string/settings_account"
+              style="@style/SettingsCollapsedHeader" />
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">
         <FrameLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content">
-            <LinearLayout android:id="@+id/back"
-                          android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:padding="12dp"
-                          android:orientation="horizontal"
-                          android:gravity="center_vertical | left"
-                          android:clickable="true"
-                          android:background="?android:attr/selectableItemBackground">
-                <ImageView android:layout_width="24dp"
-                           android:layout_height="24dp"
-                           android:layout_marginRight="8dp"
-                           android:src="@drawable/icon_back" />
-                <TextView android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:textColor="@color/white60"
-                          android:textSize="13sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings" />
-            </LinearLayout>
+            <net.mullvad.mullvadvpn.ui.widget.BackButton android:id="@+id/back"
+                                                         android:layout_width="wrap_content"
+                                                         android:layout_height="wrap_content"
+                                                         mullvad:text="@string/settings" />
             <TextView android:id="@+id/collapsed_title"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_marginHorizontal="4dp"
                       android:layout_gravity="center"
-                      android:textColor="@color/white"
-                      android:textSize="16sp"
-                      android:textStyle="bold"
-                      android:text="@string/settings_account" />
+                      android:text="@string/settings_account"
+                      style="@style/SettingsCollapsedHeader" />
         </FrameLayout>
         <net.mullvad.mullvadvpn.ui.widget.ListenableScrollView android:id="@+id/scroll_area"
                                                                android:layout_width="match_parent"
@@ -60,10 +41,8 @@
                           android:layout_height="wrap_content"
                           android:layout_marginBottom="12dp"
                           android:layout_marginHorizontal="24dp"
-                          android:textColor="@color/white"
-                          android:textSize="32sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings_account" />
+                          android:text="@string/settings_account"
+                          style="@style/SettingsExpandedHeader" />
                 <net.mullvad.mullvadvpn.ui.widget.CopyableInformationView android:id="@+id/account_number"
                                                                           android:layout_width="match_parent"
                                                                           android:layout_height="wrap_content"
diff --git a/android/src/main/res/layout/advanced.xml b/android/src/main/res/layout/advanced.xml
index 3d24a40d03..3aef5882b7 100644
--- a/android/src/main/res/layout/advanced.xml
+++ b/android/src/main/res/layout/advanced.xml
@@ -8,43 +8,24 @@
     <TextView android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:textColor="@color/white"
-              android:textSize="16sp"
-              android:textStyle="bold"
-              android:text="@string/settings_advanced" />
+              android:text="@string/settings_advanced"
+              style="@style/SettingsCollapsedHeader" />
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">
         <FrameLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content">
-            <LinearLayout android:id="@+id/back"
-                          android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:padding="12dp"
-                          android:orientation="horizontal"
-                          android:gravity="center_vertical | left"
-                          android:clickable="true"
-                          android:background="?android:attr/selectableItemBackground">
-                <ImageView android:layout_width="24dp"
-                           android:layout_height="24dp"
-                           android:layout_marginRight="8dp"
-                           android:src="@drawable/icon_back" />
-                <TextView android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:textColor="@color/white60"
-                          android:textSize="13sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings" />
-            </LinearLayout>
+            <net.mullvad.mullvadvpn.ui.widget.BackButton android:id="@+id/back"
+                                                         android:layout_width="wrap_content"
+                                                         android:layout_height="wrap_content"
+                                                         mullvad:text="@string/settings" />
             <TextView android:id="@+id/collapsed_title"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_marginHorizontal="4dp"
                       android:layout_gravity="center"
-                      android:textColor="@color/white"
-                      android:textSize="16sp"
-                      android:textStyle="bold"
-                      android:text="@string/settings_advanced" />
+                      android:text="@string/settings_advanced"
+                      style="@style/SettingsCollapsedHeader" />
         </FrameLayout>
         <net.mullvad.mullvadvpn.ui.widget.ListenableScrollView android:id="@+id/scroll_area"
                                                                android:layout_width="match_parent"
@@ -59,10 +40,8 @@
                           android:layout_height="wrap_content"
                           android:layout_marginTop="4dp"
                           android:layout_marginLeft="24dp"
-                          android:textColor="@color/white"
-                          android:textSize="32sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings_advanced" />
+                          android:text="@string/settings_advanced"
+                          style="@style/SettingsExpandedHeader" />
                 <LinearLayout android:layout_width="match_parent"
                               android:layout_height="wrap_content"
                               android:layout_marginTop="24dp"
diff --git a/android/src/main/res/layout/preferences.xml b/android/src/main/res/layout/preferences.xml
index ad51a62277..0f513be296 100644
--- a/android/src/main/res/layout/preferences.xml
+++ b/android/src/main/res/layout/preferences.xml
@@ -1,4 +1,5 @@
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+             xmlns:mullvad="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/darkBlue"
@@ -7,43 +8,24 @@
     <TextView android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:textColor="@color/white"
-              android:textSize="16sp"
-              android:textStyle="bold"
-              android:text="@string/settings_preferences" />
+              android:text="@string/settings_preferences"
+              style="@style/SettingsCollapsedHeader" />
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">
         <FrameLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content">
-            <LinearLayout android:id="@+id/back"
-                          android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:padding="12dp"
-                          android:orientation="horizontal"
-                          android:gravity="center_vertical | left"
-                          android:clickable="true"
-                          android:background="?android:attr/selectableItemBackground">
-                <ImageView android:layout_width="24dp"
-                           android:layout_height="24dp"
-                           android:layout_marginRight="8dp"
-                           android:src="@drawable/icon_back" />
-                <TextView android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:textColor="@color/white60"
-                          android:textSize="13sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings" />
-            </LinearLayout>
+            <net.mullvad.mullvadvpn.ui.widget.BackButton android:id="@+id/back"
+                                                         android:layout_width="wrap_content"
+                                                         android:layout_height="wrap_content"
+                                                         mullvad:text="@string/settings" />
             <TextView android:id="@+id/collapsed_title"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_marginHorizontal="4dp"
                       android:layout_gravity="center"
-                      android:textColor="@color/white"
-                      android:textSize="16sp"
-                      android:textStyle="bold"
-                      android:text="@string/settings_preferences" />
+                      android:text="@string/settings_preferences"
+                      style="@style/SettingsCollapsedHeader" />
         </FrameLayout>
         <net.mullvad.mullvadvpn.ui.widget.ListenableScrollView android:id="@+id/scroll_area"
                                                                android:layout_width="match_parent"
@@ -58,10 +40,8 @@
                           android:layout_height="wrap_content"
                           android:layout_marginTop="4dp"
                           android:layout_marginLeft="24dp"
-                          android:textColor="@color/white"
-                          android:textSize="32sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings_preferences" />
+                          android:text="@string/settings_preferences"
+                          style="@style/SettingsExpandedHeader" />
                 <LinearLayout android:id="@+id/auto_connect"
                               android:layout_width="match_parent"
                               android:layout_height="wrap_content"
diff --git a/android/src/main/res/layout/problem_report.xml b/android/src/main/res/layout/problem_report.xml
index 38ac852949..d0259a2bfc 100644
--- a/android/src/main/res/layout/problem_report.xml
+++ b/android/src/main/res/layout/problem_report.xml
@@ -1,4 +1,5 @@
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+             xmlns:mullvad="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/darkBlue"
@@ -7,43 +8,24 @@
     <TextView android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:textColor="@color/white"
-              android:textSize="16sp"
-              android:textStyle="bold"
-              android:text="@string/report_a_problem" />
+              android:text="@string/report_a_problem"
+              style="@style/SettingsCollapsedHeader" />
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">
         <FrameLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content">
-            <LinearLayout android:id="@+id/back"
-                          android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:padding="12dp"
-                          android:orientation="horizontal"
-                          android:gravity="center_vertical | left"
-                          android:clickable="true"
-                          android:background="?android:attr/selectableItemBackground">
-                <ImageView android:layout_width="24dp"
-                           android:layout_height="24dp"
-                           android:layout_marginRight="8dp"
-                           android:src="@drawable/icon_back" />
-                <TextView android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:textColor="@color/white60"
-                          android:textSize="13sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings" />
-            </LinearLayout>
+            <net.mullvad.mullvadvpn.ui.widget.BackButton android:id="@+id/back"
+                                                         android:layout_width="wrap_content"
+                                                         android:layout_height="wrap_content"
+                                                         mullvad:text="@string/settings" />
             <TextView android:id="@+id/collapsed_title"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_marginHorizontal="4dp"
                       android:layout_gravity="center"
-                      android:textColor="@color/white"
-                      android:textSize="16sp"
-                      android:textStyle="bold"
-                      android:text="@string/report_a_problem" />
+                      android:text="@string/report_a_problem"
+                      style="@style/SettingsCollapsedHeader" />
         </FrameLayout>
         <net.mullvad.mullvadvpn.ui.widget.ListenableScrollView android:id="@+id/scroll_area"
                                                                android:layout_width="match_parent"
@@ -59,10 +41,8 @@
                           android:layout_marginTop="4dp"
                           android:layout_marginBottom="8dp"
                           android:layout_marginHorizontal="24dp"
-                          android:textColor="@color/white"
-                          android:textSize="32sp"
-                          android:textStyle="bold"
-                          android:text="@string/report_a_problem" />
+                          android:text="@string/report_a_problem"
+                          style="@style/SettingsExpandedHeader" />
                 <ViewSwitcher android:id="@+id/body_container"
                               android:layout_width="match_parent"
                               android:layout_height="match_parent">
diff --git a/android/src/main/res/layout/select_location.xml b/android/src/main/res/layout/select_location.xml
index cf3e905876..1bd76268db 100644
--- a/android/src/main/res/layout/select_location.xml
+++ b/android/src/main/res/layout/select_location.xml
@@ -7,10 +7,8 @@
     <TextView android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:textColor="@color/white"
-              android:textSize="16sp"
-              android:textStyle="bold"
-              android:text="@string/select_location" />
+              android:text="@string/select_location"
+              style="@style/SettingsCollapsedHeader" />
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">
@@ -27,10 +25,8 @@
                       android:layout_height="wrap_content"
                       android:layout_marginHorizontal="4dp"
                       android:layout_gravity="center"
-                      android:textColor="@color/white"
-                      android:textSize="16sp"
-                      android:textStyle="bold"
-                      android:text="@string/select_location" />
+                      android:text="@string/select_location"
+                      style="@style/SettingsCollapsedHeader" />
         </FrameLayout>
         <net.mullvad.mullvadvpn.ui.widget.CustomRecyclerView android:id="@+id/relay_list"
                                                              android:layout_width="match_parent"
diff --git a/android/src/main/res/layout/select_location_header.xml b/android/src/main/res/layout/select_location_header.xml
index 85b160ad9f..9cc9f53860 100644
--- a/android/src/main/res/layout/select_location_header.xml
+++ b/android/src/main/res/layout/select_location_header.xml
@@ -9,10 +9,8 @@
               android:layout_weight="0"
               android:layout_marginVertical="4dp"
               android:layout_marginHorizontal="24dp"
-              android:textColor="@color/white"
-              android:textSize="32sp"
-              android:textStyle="bold"
-              android:text="@string/select_location" />
+              android:text="@string/select_location"
+              style="@style/SettingsExpandedHeader" />
     <TextView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_weight="0"
diff --git a/android/src/main/res/layout/settings.xml b/android/src/main/res/layout/settings.xml
index 13488a2b43..da849c4144 100644
--- a/android/src/main/res/layout/settings.xml
+++ b/android/src/main/res/layout/settings.xml
@@ -7,10 +7,8 @@
     <TextView android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:textColor="@color/white"
-              android:textSize="16sp"
-              android:textStyle="bold"
-              android:text="@string/settings" />
+              android:text="@string/settings"
+              style="@style/SettingsCollapsedHeader" />
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">
@@ -27,10 +25,8 @@
                       android:layout_height="wrap_content"
                       android:layout_marginHorizontal="4dp"
                       android:layout_gravity="center"
-                      android:textColor="@color/white"
-                      android:textSize="16sp"
-                      android:textStyle="bold"
-                      android:text="@string/settings" />
+                      android:text="@string/settings"
+                      style="@style/SettingsCollapsedHeader" />
         </FrameLayout>
         <net.mullvad.mullvadvpn.ui.widget.ListenableScrollView android:id="@+id/scroll_area"
                                                                android:layout_width="match_parent"
@@ -44,10 +40,8 @@
                           android:layout_height="wrap_content"
                           android:layout_marginTop="4dp"
                           android:layout_marginLeft="24dp"
-                          android:textColor="@color/white"
-                          android:textSize="32sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings" />
+                          android:text="@string/settings"
+                          style="@style/SettingsExpandedHeader" />
                 <LinearLayout android:id="@+id/account"
                               android:layout_width="match_parent"
                               android:layout_height="wrap_content"
diff --git a/android/src/main/res/layout/settings_back_button.xml b/android/src/main/res/layout/settings_back_button.xml
new file mode 100644
index 0000000000..da8bad7356
--- /dev/null
+++ b/android/src/main/res/layout/settings_back_button.xml
@@ -0,0 +1,12 @@
+<merge xmlns:android="http://schemas.android.com/apk/res/android">
+    <ImageView android:layout_width="24dp"
+               android:layout_height="24dp"
+               android:layout_marginRight="8dp"
+               android:src="@drawable/icon_back" />
+    <TextView android:id="@+id/label"
+              android:layout_width="wrap_content"
+              android:layout_height="wrap_content"
+              android:textColor="@color/white60"
+              android:textSize="13sp"
+              android:textStyle="bold" />
+</merge>
diff --git a/android/src/main/res/layout/split_tunnelling.xml b/android/src/main/res/layout/split_tunnelling.xml
index e6284884c5..aabc764c95 100644
--- a/android/src/main/res/layout/split_tunnelling.xml
+++ b/android/src/main/res/layout/split_tunnelling.xml
@@ -8,44 +8,24 @@
     <TextView android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:textColor="@color/white"
-              android:textSize="16sp"
-              android:textStyle="bold"
-              android:text="@string/split_tunnelling" />
+              android:text="@string/split_tunnelling"
+              style="@style/SettingsCollapsedHeader" />
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">
         <FrameLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content">
-            <LinearLayout android:id="@+id/back"
-                          android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:layout_weight="0"
-                          android:padding="12dp"
-                          android:orientation="horizontal"
-                          android:gravity="center_vertical | left"
-                          android:clickable="true"
-                          android:background="?android:attr/selectableItemBackground">
-                <ImageView android:layout_width="24dp"
-                           android:layout_height="24dp"
-                           android:layout_marginRight="8dp"
-                           android:src="@drawable/icon_back" />
-                <TextView android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:textColor="@color/white60"
-                          android:textSize="13sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings_advanced" />
-            </LinearLayout>
+            <net.mullvad.mullvadvpn.ui.widget.BackButton android:id="@+id/back"
+                                                         android:layout_width="wrap_content"
+                                                         android:layout_height="wrap_content"
+                                                         mullvad:text="@string/settings_advanced" />
             <TextView android:id="@+id/collapsed_title"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_marginHorizontal="4dp"
                       android:layout_gravity="center"
-                      android:textColor="@color/white"
-                      android:textSize="16sp"
-                      android:textStyle="bold"
-                      android:text="@string/split_tunnelling" />
+                      android:text="@string/split_tunnelling"
+                      style="@style/SettingsCollapsedHeader" />
         </FrameLayout>
         <net.mullvad.mullvadvpn.ui.widget.CustomRecyclerView android:id="@+id/app_list"
                                                              android:layout_width="match_parent"
diff --git a/android/src/main/res/layout/split_tunnelling_header.xml b/android/src/main/res/layout/split_tunnelling_header.xml
index 4db5c6fc80..3fa595f55f 100644
--- a/android/src/main/res/layout/split_tunnelling_header.xml
+++ b/android/src/main/res/layout/split_tunnelling_header.xml
@@ -11,9 +11,7 @@
               android:layout_marginTop="4dp"
               android:layout_marginBottom="12dp"
               android:text="@string/split_tunnelling"
-              android:textColor="@color/white"
-              android:textSize="32sp"
-              android:textStyle="bold" />
+              style="@style/SettingsExpandedHeader" />
     <TextView android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:paddingTop="8dp"
diff --git a/android/src/main/res/layout/wireguard_key.xml b/android/src/main/res/layout/wireguard_key.xml
index 0abbdb526e..24b3548240 100644
--- a/android/src/main/res/layout/wireguard_key.xml
+++ b/android/src/main/res/layout/wireguard_key.xml
@@ -8,44 +8,24 @@
     <TextView android:id="@+id/title"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
-              android:textColor="@color/white"
-              android:textSize="16sp"
-              android:textStyle="bold"
-              android:text="@string/wireguard_key" />
+              android:text="@string/wireguard_key"
+              style="@style/SettingsCollapsedHeader" />
     <LinearLayout android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:orientation="vertical">
         <FrameLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content">
-            <LinearLayout android:id="@+id/back"
-                          android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:layout_weight="0"
-                          android:padding="12dp"
-                          android:orientation="horizontal"
-                          android:gravity="center_vertical | left"
-                          android:clickable="true"
-                          android:background="?android:attr/selectableItemBackground">
-                <ImageView android:layout_width="24dp"
-                           android:layout_height="24dp"
-                           android:layout_marginRight="8dp"
-                           android:src="@drawable/icon_back" />
-                <TextView android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:textColor="@color/white60"
-                          android:textSize="13sp"
-                          android:textStyle="bold"
-                          android:text="@string/settings_advanced" />
-            </LinearLayout>
+            <net.mullvad.mullvadvpn.ui.widget.BackButton android:id="@+id/back"
+                                                         android:layout_width="wrap_content"
+                                                         android:layout_height="wrap_content"
+                                                         mullvad:text="@string/settings_advanced" />
             <TextView android:id="@+id/collapsed_title"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_marginHorizontal="4dp"
                       android:layout_gravity="center"
-                      android:textColor="@color/white"
-                      android:textSize="16sp"
-                      android:textStyle="bold"
-                      android:text="@string/wireguard_key" />
+                      android:text="@string/wireguard_key"
+                      style="@style/SettingsCollapsedHeader" />
         </FrameLayout>
         <net.mullvad.mullvadvpn.ui.widget.ListenableScrollView android:id="@+id/scroll_area"
                                                                android:layout_width="match_parent"
@@ -62,9 +42,7 @@
                           android:layout_marginTop="4dp"
                           android:layout_marginBottom="12dp"
                           android:text="@string/wireguard_key"
-                          android:textColor="@color/white"
-                          android:textSize="32sp"
-                          android:textStyle="bold" />
+                          style="@style/SettingsExpandedHeader" />
                 <net.mullvad.mullvadvpn.ui.widget.CopyableInformationView android:id="@+id/public_key"
                                                                           android:layout_width="match_parent"
                                                                           android:layout_height="wrap_content"
diff --git a/android/src/main/res/values/attrs.xml b/android/src/main/res/values/attrs.xml
index 449db0efd7..1ddae37ee7 100644
--- a/android/src/main/res/values/attrs.xml
+++ b/android/src/main/res/values/attrs.xml
@@ -13,8 +13,6 @@
               format="reference" />
         <attr name="showSpinner"
               format="boolean" />
-        <attr name="text"
-              format="reference|string" />
     </declare-styleable>
     <declare-styleable name="CopyableInformationView">
         <attr name="clipboardLabel"
@@ -41,6 +39,10 @@
                   value="2" />
         </attr>
     </declare-styleable>
+    <declare-styleable name="TextAttribute">
+        <attr name="text"
+              format="reference|string" />
+    </declare-styleable>
     <declare-styleable name="UrlButton">
         <attr name="url"
               format="reference|string" />
diff --git a/android/src/main/res/values/dimensions.xml b/android/src/main/res/values/dimensions.xml
index 197cb92ecb..99a79846f5 100644
--- a/android/src/main/res/values/dimensions.xml
+++ b/android/src/main/res/values/dimensions.xml
@@ -14,4 +14,5 @@
     <dimen name="cell_switch_knob_margin">4dp</dimen>
     <dimen name="cell_switch_knob_max_translation">20dp</dimen>
     <dimen name="cell_switch_knob_size">24dp</dimen>
+    <dimen name="settings_back_button_padding">12dp</dimen>
 </resources>
diff --git a/android/src/main/res/values/styles.xml b/android/src/main/res/values/styles.xml
index 198e0471a6..c1ac78d446 100644
--- a/android/src/main/res/values/styles.xml
+++ b/android/src/main/res/values/styles.xml
@@ -40,4 +40,16 @@
            parent="Button">
         <item name="android:background">@drawable/white20_button_background</item>
     </style>
+    <style name="SettingsHeader">
+        <item name="android:textColor">@color/white</item>
+        <item name="android:textStyle">bold</item>
+    </style>
+    <style name="SettingsExpandedHeader"
+           parent="SettingsHeader">
+        <item name="android:textSize">32sp</item>
+    </style>
+    <style name="SettingsCollapsedHeader"
+           parent="SettingsHeader">
+        <item name="android:textSize">16sp</item>
+    </style>
 </resources>