From 029d6ba6eea98e148c63fa11263c9261fae8719a Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Thu, 22 May 2025 03:02:38 -0700
Subject: [PATCH] fix(android): Fix request permission screen padding (#9200)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The padding on this screen was broken, resulting in elements flush
against the edge of the display.

While I was in here, I decided to do a quick round of polish on the
layout and sizing of elements here.

<img width="395" alt="Screenshot 2025-05-21 at 4 24 08 PM"
src="https://github.com/user-attachments/assets/db4f53a3-1ee9-41ae-8172-8cca22be742b"
/>
---
 .../app/src/main/res/font/manrope_bold.xml    |  7 ++
 .../res/layout/activity_vpn_permission.xml    | 99 ++++++++++---------
 .../src/main/res/values/preloaded_fonts.xml   |  1 +
 3 files changed, 62 insertions(+), 45 deletions(-)
 create mode 100644 kotlin/android/app/src/main/res/font/manrope_bold.xml

diff --git a/kotlin/android/app/src/main/res/font/manrope_bold.xml b/kotlin/android/app/src/main/res/font/manrope_bold.xml
new file mode 100644
index 000000000..99b746225
--- /dev/null
+++ b/kotlin/android/app/src/main/res/font/manrope_bold.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto"
+        app:fontProviderAuthority="com.google.android.gms.fonts"
+        app:fontProviderPackage="com.google.android.gms"
+        app:fontProviderQuery="Manrope:wght700"
+        app:fontProviderCerts="@array/com_google_android_gms_fonts_certs">
+</font-family>
diff --git a/kotlin/android/app/src/main/res/layout/activity_vpn_permission.xml b/kotlin/android/app/src/main/res/layout/activity_vpn_permission.xml
index f1f75305e..a12bc67cc 100644
--- a/kotlin/android/app/src/main/res/layout/activity_vpn_permission.xml
+++ b/kotlin/android/app/src/main/res/layout/activity_vpn_permission.xml
@@ -9,59 +9,68 @@
     tools:context=".features.permission.vpn.ui.VpnPermissionActivity"
     android:fitsSystemWindows="true">
 
-  <androidx.appcompat.widget.LinearLayoutCompat
-      android:id="@+id/llContainer"
-      android:layout_width="0dp"
+  <androidx.appcompat.widget.AppCompatImageView
+      android:id="@+id/ivLogo"
+      android:layout_width="@dimen/iv_logo_size"
+      android:layout_height="@dimen/iv_logo_size"
+      android:layout_marginTop="8dp"
+      android:src="@drawable/ic_firezone_logo"
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintHorizontal_bias="0.498"
+      app:layout_constraintStart_toStartOf="parent"
+      app:layout_constraintTop_toTopOf="parent" />
+
+  <com.google.android.material.textview.MaterialTextView
+      style="@style/AppTheme.Base.HeaderText"
+      android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:gravity="center"
-      android:orientation="horizontal"
+      android:text="@string/app_short_name"
+      android:textSize="48sp"
+      app:fontFamily="@font/manrope_bold"
+      app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent">
+      app:layout_constraintTop_toBottomOf="@+id/ivLogo" />
 
-    <androidx.appcompat.widget.AppCompatImageView
-        android:id="@+id/ivLogo"
-        android:layout_width="@dimen/iv_logo_size"
-        android:layout_height="@dimen/iv_logo_size"
-        android:src="@drawable/ic_firezone_logo" />
+  <androidx.constraintlayout.widget.ConstraintLayout
+      android:id="@+id/constraintLayout"
+      android:layout_width="match_parent"
+      android:layout_height="275dp"
+      android:padding="@dimen/spacing_medium"
+      app:layout_constraintBottom_toBottomOf="parent"
+      app:layout_constraintTop_toTopOf="parent"
+      tools:ignore="MissingConstraints"
+      tools:layout_editor_absoluteX="16dp">
 
     <com.google.android.material.textview.MaterialTextView
-        style="@style/AppTheme.Base.HeaderText"
-        android:layout_width="wrap_content"
+        android:id="@+id/tvHeaderTitle"
+        style="@style/AppTheme.Base.H5"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/spacing_small"
-        android:gravity="center"
-        android:text="@string/app_short_name" />
+        android:layout_marginTop="36dp"
+        android:text="@string/enable_vpn_permission"
+        android:textAlignment="center"
+        app:layout_constraintStart_toStartOf="parent" />
 
-  </androidx.appcompat.widget.LinearLayoutCompat>
-
-  <com.google.android.material.textview.MaterialTextView
-      android:id="@+id/tvHeaderTitle"
-      style="@style/AppTheme.Base.H5"
-      android:layout_width="match_parent"
-      android:layout_height="wrap_content"
-      android:layout_marginTop="32dp"
-      android:text="@string/enable_vpn_permission"
-      app:layout_constraintTop_toBottomOf="@id/llContainer"
-      app:layout_constraintStart_toStartOf="parent" />
-
-  <com.google.android.material.textview.MaterialTextView
-      android:id="@+id/tvBody"
-      style="@style/AppTheme.Base.Body1"
-      android:layout_width="match_parent"
-      android:layout_height="wrap_content"
-      android:layout_marginTop="12dp"
-      android:text="@string/vpn_permission_description"
-      app:layout_constraintTop_toBottomOf="@id/tvHeaderTitle"
-      app:layout_constraintStart_toStartOf="parent" />
-
-  <com.google.android.material.button.MaterialButton
-      android:id="@+id/btnRequest"
-      android:layout_width="0dp"
-      android:layout_height="wrap_content"
-      android:text="@string/request_permission"
-      app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent"
-      app:layout_constraintStart_toStartOf="parent" />
+    <com.google.android.material.textview.MaterialTextView
+        android:id="@+id/tvBody"
+        style="@style/AppTheme.Base.Body1"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:text="@string/vpn_permission_description"
+        android:textAlignment="center"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:layout_editor_absoluteX="16dp" />
 
+    <com.google.android.material.button.MaterialButton
+        android:id="@+id/btnRequest"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:text="@string/request_permission"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent" />
+  </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/kotlin/android/app/src/main/res/values/preloaded_fonts.xml b/kotlin/android/app/src/main/res/values/preloaded_fonts.xml
index 8601c358c..bf427bd82 100644
--- a/kotlin/android/app/src/main/res/values/preloaded_fonts.xml
+++ b/kotlin/android/app/src/main/res/values/preloaded_fonts.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <array name="preloaded_fonts" translatable="false">
+        <item>@font/manrope_bold</item>
         <item>@font/source_sans_pro</item>
         <item>@font/source_sans_pro_bold</item>
     </array>