feat: Finish UI (#98)

Closes #93
Closes #108
Closes #107

app/build.gradle

@@ -15,6 +15,7 @@ apply plugin: 'kotlin-android-extensions'
 apply plugin: 'kotlin-kapt'
 apply plugin: 'com.diffplug.gradle.spotless'
 apply plugin: 'com.github.triplet.play'
+apply plugin: 'com.mikepenz.aboutlibraries.plugin'
 
 apply from: 'jacoco.gradle'
 
@@ -145,6 +146,9 @@ dependencies {
     implementation 'org.conscrypt:conscrypt-android:2.4.0'
     implementation 'org.bouncycastle:bcpkix-jdk15on:1.65'
 
+    // Display open-source licenses
+    implementation "com.mikepenz:aboutlibraries:$aboutLibsVersion"
+
     // Testing
     testImplementation 'org.junit.jupiter:junit-jupiter:5.6.2'
     testImplementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:$kotlinCoroutinesVersion"

app/src/main/AndroidManifest.xml

@@ -49,5 +49,10 @@
             android:name=".ui.settings.SettingsActivity"
             android:label="@string/settings"
             android:screenOrientation="portrait" />
+
+        <activity
+            android:name=".ui.settings.LicensesActivity"
+            android:label="@string/about_licenses"
+            android:screenOrientation="portrait" />
     </application>
 </manifest>

app/src/main/java/tech/relaycorp/courier/ui/main/MainActivity.kt

@@ -7,6 +7,7 @@ import androidx.lifecycle.lifecycleScope
 import com.stationhead.android.shared.viewmodel.ViewModelFactory
 import kotlinx.android.synthetic.main.activity_main.hotspotIcon
 import kotlinx.android.synthetic.main.activity_main.hotspotLabel
+import kotlinx.android.synthetic.main.activity_main.innerContainer
 import kotlinx.android.synthetic.main.activity_main.internetIcon
 import kotlinx.android.synthetic.main.activity_main.internetLabel
 import kotlinx.android.synthetic.main.activity_main.lowStorageMessage
@@ -25,6 +26,7 @@ import tech.relaycorp.courier.R
 import tech.relaycorp.courier.background.WifiHotspotState
 import tech.relaycorp.courier.data.model.StorageUsage
 import tech.relaycorp.courier.ui.BaseActivity
+import tech.relaycorp.courier.ui.common.Insets.addSystemWindowInsetToPadding
 import tech.relaycorp.courier.ui.common.format
 import tech.relaycorp.courier.ui.settings.SettingsActivity
 import tech.relaycorp.courier.ui.sync.internet.InternetSyncActivity
@@ -45,6 +47,7 @@ class MainActivity : BaseActivity() {
         component.inject(this)
         setTitle(R.string.main_title)
         setContentView(R.layout.activity_main)
+        innerContainer.addSystemWindowInsetToPadding(bottom = true)
 
         settings.setOnClickListener { openSettings() }
         syncPeopleButton.setOnClickListener { openSyncWithPeople() }

app/src/main/java/tech/relaycorp/courier/ui/settings/LicensesActivity.kt

@@ -0,0 +1,13 @@
+package tech.relaycorp.courier.ui.settings
+
+import android.os.Bundle
+import com.mikepenz.aboutlibraries.ui.LibsActivity
+import tech.relaycorp.courier.R
+
+class LicensesActivity : LibsActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_close)
+        supportActionBar?.elevation = 0f
+    }
+}

app/src/main/java/tech/relaycorp/courier/ui/settings/SettingsActivity.kt

@@ -3,21 +3,29 @@ package tech.relaycorp.courier.ui.settings
 import android.app.AlertDialog
 import android.content.Context
 import android.content.Intent
+import android.net.Uri
 import android.os.Bundle
 import androidx.lifecycle.ViewModelProvider
 import androidx.lifecycle.lifecycleScope
+import com.mikepenz.aboutlibraries.LibsBuilder
 import com.stationhead.android.shared.viewmodel.ViewModelFactory
 import kotlinx.android.synthetic.main.activity_settings.deleteData
+import kotlinx.android.synthetic.main.activity_settings.innerContainer
+import kotlinx.android.synthetic.main.activity_settings.knowMore
+import kotlinx.android.synthetic.main.activity_settings.licenses
 import kotlinx.android.synthetic.main.activity_settings.storageAvailable
 import kotlinx.android.synthetic.main.activity_settings.storageMaxSlider
 import kotlinx.android.synthetic.main.activity_settings.storageMaxValue
 import kotlinx.android.synthetic.main.activity_settings.storageTotal
 import kotlinx.android.synthetic.main.activity_settings.storageUsed
+import kotlinx.android.synthetic.main.activity_settings.version
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.flow.take
+import tech.relaycorp.courier.BuildConfig
 import tech.relaycorp.courier.R
 import tech.relaycorp.courier.ui.BaseActivity
+import tech.relaycorp.courier.ui.common.Insets.addSystemWindowInsetToPadding
 import tech.relaycorp.courier.ui.common.format
 import tech.relaycorp.courier.ui.common.set
 import javax.inject.Inject
@@ -38,7 +46,13 @@ class SettingsActivity : BaseActivity() {
         component.inject(this)
         setContentView(R.layout.activity_settings)
         setupNavigation(R.drawable.ic_close)
+        innerContainer.addSystemWindowInsetToPadding(bottom = true)
 
+        version.text =
+            getString(R.string.about_version, BuildConfig.VERSION_NAME, BuildConfig.VERSION_CODE)
+
+        knowMore.setOnClickListener { openKnowMore() }
+        licenses.setOnClickListener { openLicenses() }
         deleteData.setOnClickListener { openDeleteDataDialog() }
 
         viewModel
@@ -49,11 +63,7 @@ class SettingsActivity : BaseActivity() {
         viewModel
             .storageStats()
             .onEach {
-                storageUsed.text = getString(
-                    R.string.value_with_percentage,
-                    it.used.format(this),
-                    it.usedPercentage
-                )
+                storageUsed.text = it.used.format(this)
                 storageAvailable.text = it.available.format(this)
                 storageTotal.text = it.total.format(this)
             }
@@ -85,6 +95,21 @@ class SettingsActivity : BaseActivity() {
         deleteDataDialog = null
     }
 
+    private fun openKnowMore() {
+        startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(getString(R.string.relaynet_website))))
+    }
+
+    private fun openLicenses() {
+        LibsBuilder()
+            .withActivityTitle(getString(R.string.about_licenses))
+            .withAboutIconShown(false)
+            .withVersionShown(false)
+            .withOwnLibsActivityClass(LicensesActivity::class.java)
+            .withEdgeToEdge(true)
+            .withFields(R.string::class.java.fields)
+            .start(this)
+    }
+
     private fun openDeleteDataDialog() {
         deleteDataDialog = AlertDialog.Builder(this)
             .setTitle(R.string.settings_clear_dialog_title)

app/src/main/java/tech/relaycorp/courier/ui/sync/internet/InternetSyncActivity.kt

@@ -19,6 +19,7 @@ import kotlinx.coroutines.flow.onEach
 import tech.relaycorp.courier.R
 import tech.relaycorp.courier.domain.PublicSync
 import tech.relaycorp.courier.ui.BaseActivity
+import tech.relaycorp.courier.ui.common.Insets.addSystemWindowInsetToMargin
 import tech.relaycorp.courier.ui.common.startLoopingAvd
 import tech.relaycorp.courier.ui.common.stopLoopingAvd
 import javax.inject.Inject
@@ -38,6 +39,8 @@ class InternetSyncActivity : BaseActivity() {
         component.inject(this)
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_internet_sync)
+        stop.addSystemWindowInsetToMargin(bottom = true)
+        close.addSystemWindowInsetToMargin(bottom = true)
 
         stop.setOnClickListener { showStopConfirmDialog() }
         close.setOnClickListener { finish() }

app/src/main/java/tech/relaycorp/courier/ui/sync/people/PeopleSyncActivity.kt

@@ -15,12 +15,12 @@ import kotlinx.android.synthetic.main.activity_people_sync.clientsConnected
 import kotlinx.android.synthetic.main.activity_people_sync.close
 import kotlinx.android.synthetic.main.activity_people_sync.stop
 import kotlinx.android.synthetic.main.activity_people_sync.syncMessage
-import kotlinx.android.synthetic.main.activity_people_sync.waitingFirstClient
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onCompletion
 import kotlinx.coroutines.flow.onEach
 import tech.relaycorp.courier.R
 import tech.relaycorp.courier.ui.BaseActivity
+import tech.relaycorp.courier.ui.common.Insets.addSystemWindowInsetToMargin
 import tech.relaycorp.courier.ui.common.startLoopingAvd
 import tech.relaycorp.courier.ui.common.stopLoopingAvd
 import javax.inject.Inject
@@ -40,6 +40,8 @@ class PeopleSyncActivity : BaseActivity() {
         component.inject(this)
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_people_sync)
+        stop.addSystemWindowInsetToMargin(bottom = true)
+        close.addSystemWindowInsetToMargin(bottom = true)
 
         stop.setOnClickListener { viewModel.stopClicked() }
         close.setOnClickListener { finish() }
@@ -49,10 +51,8 @@ class PeopleSyncActivity : BaseActivity() {
             .onEach { state ->
                 syncMessage.setText(state.toSyncMessageRes())
 
-                waitingFirstClient.isVisible =
-                    state == PeopleSyncViewModel.State.Syncing.WaitingFirstClient
-                clientsConnected.isVisible =
-                    state is PeopleSyncViewModel.State.Syncing.HadFirstClient
+                clientsConnected.isInvisible =
+                    state !is PeopleSyncViewModel.State.Syncing.HadFirstClient
                 clientsConnected.text = state.clientsConnectedValue.toString()
 
                 stop.isInvisible = state !is PeopleSyncViewModel.State.Syncing
@@ -114,7 +114,7 @@ class PeopleSyncActivity : BaseActivity() {
     private fun PeopleSyncViewModel.State.toSyncMessageRes() =
         when (this) {
             PeopleSyncViewModel.State.Starting -> R.string.sync_people_starting
-            PeopleSyncViewModel.State.Syncing.WaitingFirstClient -> R.string.sync_people_syncing
+            PeopleSyncViewModel.State.Syncing.WaitingFirstClient -> R.string.sync_people_waiting_first_client
             is PeopleSyncViewModel.State.Syncing.HadFirstClient -> R.string.sync_people_syncing_some
             is PeopleSyncViewModel.State.Error -> R.string.sync_error
         }

app/src/main/res/color/icon_activatable.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:alpha="1.00" android:color="?attr/colorPrimary" android:state_activated="true" />
-    <item android:alpha="0.30" android:color="?attr/colorOnBackground" />
+    <item android:alpha="1.00" android:color="?colorPrimary" android:state_activated="true" />
+    <item android:alpha="0.30" android:color="?colorOnBackground" />
 </selector>

app/src/main/res/color/text_secondary.xml

@@ -2,6 +2,6 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:alpha="0.80" android:color="?attr/colorPrimary" android:state_checkable="true" android:state_checked="true" android:state_enabled="true"/>
     <item android:alpha="0.50" android:color="?attr/colorPrimary" android:state_checkable="true" android:state_checked="false" android:state_enabled="true"/>
-    <item android:alpha="0.80" android:color="?attr/colorOnBackground" android:state_enabled="true"/>
+    <item android:alpha="0.60" android:color="?attr/colorOnBackground" android:state_enabled="true"/>
     <item android:alpha="0.30" android:color="?attr/colorOnBackground"/>
 </selector>

app/src/main/res/drawable/background_icon_large.xml

@@ -3,6 +3,6 @@
     android:shape="oval">
     <stroke
         android:width="4dp"
-        android:color="@color/black" />
+        android:color="@color/white" />
     <solid android:color="@android:color/transparent" />
 </shape>

app/src/main/res/drawable/background_icon_small.xml

@@ -1,8 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="oval">
-    <stroke
-        android:width="1dp"
-        android:color="@color/black" />
-    <solid android:color="@android:color/transparent" />
-</shape>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="oval">
+            <stroke
+                android:width="1dp"
+                android:color="@color/white" />
+            <solid android:color="@android:color/transparent" />
+        </shape>
+    </item>
+    <item android:drawable="?selectableItemBackgroundBorderless" />
+</layer-list>

app/src/main/res/drawable/ic_hotspot_off.xml

@@ -1,10 +1,10 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
+    android:width="56dp"
+    android:height="56dp"
+    android:tint="?attr/colorControlNormal"
     android:viewportWidth="24"
-    android:viewportHeight="24"
-    android:tint="?attr/colorControlNormal">
-  <path
-      android:fillColor="@android:color/white"
-      android:pathData="M17.56,14.24c0.28,-0.69 0.44,-1.45 0.44,-2.24 0,-3.31 -2.69,-6 -6,-6 -0.79,0 -1.55,0.16 -2.24,0.44l1.62,1.62c0.2,-0.03 0.41,-0.06 0.62,-0.06 2.21,0 4,1.79 4,4 0,0.21 -0.02,0.42 -0.05,0.63l1.61,1.61zM12,4c4.42,0 8,3.58 8,8 0,1.35 -0.35,2.62 -0.95,3.74l1.47,1.47C21.46,15.69 22,13.91 22,12c0,-5.52 -4.48,-10 -10,-10 -1.91,0 -3.69,0.55 -5.21,1.47l1.46,1.46C9.37,4.34 10.65,4 12,4zM3.27,2.5L2,3.77l2.1,2.1C2.79,7.57 2,9.69 2,12c0,3.7 2.01,6.92 4.99,8.65l1,-1.73C5.61,17.53 4,14.96 4,12c0,-1.76 0.57,-3.38 1.53,-4.69l1.43,1.44C6.36,9.68 6,10.8 6,12c0,2.22 1.21,4.15 3,5.19l1,-1.74c-1.19,-0.7 -2,-1.97 -2,-3.45 0,-0.65 0.17,-1.25 0.44,-1.79l1.58,1.58L10,12c0,1.1 0.9,2 2,2l0.21,-0.02 0.01,0.01 7.51,7.51L21,20.23 4.27,3.5l-1,-1z"/>
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M17.56,14.24c0.28,-0.69 0.44,-1.45 0.44,-2.24 0,-3.31 -2.69,-6 -6,-6 -0.79,0 -1.55,0.16 -2.24,0.44l1.62,1.62c0.2,-0.03 0.41,-0.06 0.62,-0.06 2.21,0 4,1.79 4,4 0,0.21 -0.02,0.42 -0.05,0.63l1.61,1.61zM12,4c4.42,0 8,3.58 8,8 0,1.35 -0.35,2.62 -0.95,3.74l1.47,1.47C21.46,15.69 22,13.91 22,12c0,-5.52 -4.48,-10 -10,-10 -1.91,0 -3.69,0.55 -5.21,1.47l1.46,1.46C9.37,4.34 10.65,4 12,4zM3.27,2.5L2,3.77l2.1,2.1C2.79,7.57 2,9.69 2,12c0,3.7 2.01,6.92 4.99,8.65l1,-1.73C5.61,17.53 4,14.96 4,12c0,-1.76 0.57,-3.38 1.53,-4.69l1.43,1.44C6.36,9.68 6,10.8 6,12c0,2.22 1.21,4.15 3,5.19l1,-1.74c-1.19,-0.7 -2,-1.97 -2,-3.45 0,-0.65 0.17,-1.25 0.44,-1.79l1.58,1.58L10,12c0,1.1 0.9,2 2,2l0.21,-0.02 0.01,0.01 7.51,7.51L21,20.23 4.27,3.5l-1,-1z" />
 </vector>

app/src/main/res/drawable/ic_hotspot_on.xml

@@ -1,10 +1,10 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
+    android:width="56dp"
+    android:height="56dp"
+    android:tint="?attr/colorControlNormal"
     android:viewportWidth="24"
-    android:viewportHeight="24"
-    android:tint="?attr/colorControlNormal">
-  <path
-      android:fillColor="@android:color/white"
-      android:pathData="M12,11c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM18,13c0,-3.31 -2.69,-6 -6,-6s-6,2.69 -6,6c0,2.22 1.21,4.15 3,5.19l1,-1.74c-1.19,-0.7 -2,-1.97 -2,-3.45 0,-2.21 1.79,-4 4,-4s4,1.79 4,4c0,1.48 -0.81,2.75 -2,3.45l1,1.74c1.79,-1.04 3,-2.97 3,-5.19zM12,3C6.48,3 2,7.48 2,13c0,3.7 2.01,6.92 4.99,8.65l1,-1.73C5.61,18.53 4,15.96 4,13c0,-4.42 3.58,-8 8,-8s8,3.58 8,8c0,2.96 -1.61,5.53 -4,6.92l1,1.73c2.99,-1.73 5,-4.95 5,-8.65 0,-5.52 -4.48,-10 -10,-10z"/>
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M12,11c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM18,13c0,-3.31 -2.69,-6 -6,-6s-6,2.69 -6,6c0,2.22 1.21,4.15 3,5.19l1,-1.74c-1.19,-0.7 -2,-1.97 -2,-3.45 0,-2.21 1.79,-4 4,-4s4,1.79 4,4c0,1.48 -0.81,2.75 -2,3.45l1,1.74c1.79,-1.04 3,-2.97 3,-5.19zM12,3C6.48,3 2,7.48 2,13c0,3.7 2.01,6.92 4.99,8.65l1,-1.73C5.61,18.53 4,15.96 4,13c0,-4.42 3.58,-8 8,-8s8,3.58 8,8c0,2.96 -1.61,5.53 -4,6.92l1,1.73c2.99,-1.73 5,-4.95 5,-8.65 0,-5.52 -4.48,-10 -10,-10z" />
 </vector>

app/src/main/res/drawable/ic_info.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M11,7h2v2h-2zM11,11h2v6h-2zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
+</vector>

app/src/main/res/drawable/ic_launcher_foreground.xml

@@ -2,14 +2,34 @@
     android:width="108dp"
     android:height="108dp"
     android:viewportWidth="108"
-    android:viewportHeight="108"
-    android:tint="#FFFFFF">
-  <group android:scaleX="1.7487"
-      android:scaleY="1.7487"
-      android:translateX="33.0156"
-      android:translateY="33.0156">
-      <path
-          android:fillColor="#FF000000"
-          android:pathData="M20,4L4,4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,6c0,-1.1 -0.9,-2 -2,-2zM20,8l-8,5 -8,-5L4,6l8,5 8,-5v2z"/>
+    android:viewportHeight="108">
+  <group android:scaleX="0.13582318"
+      android:scaleY="0.13582318"
+      android:translateX="19.229269"
+      android:translateY="19.229269">
+    <path
+        android:pathData="M176.326,284.662l172.068,-135.473l82.274,104.498l-172.068,135.473z"
+        android:fillColor="#E1B785"/>
+    <path
+        android:pathData="M249.569,225.732l24.357,-19.177l23.507,29.857l-24.357,19.177z"
+        android:fillColor="#876650"/>
+    <path
+        android:pathData="M104.272,193.148l139.069,-109.492l70.52,89.57l-139.069,109.492z"
+        android:fillColor="#E1B785"/>
+    <path
+        android:pathData="M160.288,149.131l24.357,-19.177l22.888,29.071l-24.357,19.177z"
+        android:fillColor="#876650"/>
+    <path
+        android:pathData="M174.841,282.822l139.051,-109.528l1.547,1.964l-139.051,109.528z"
+        android:fillColor="#876650"/>
+    <path
+        android:pathData="M256.6,407.6c-2.4,0 -4.7,-1 -6.3,-3.1L96.9,209.7l-18.9,14.8c-3.5,2.7 -8.5,2.1 -11.2,-1.3c-2.7,-3.5 -2.1,-8.5 1.3,-11.2l25.1,-19.8c1.7,-1.3 3.8,-1.9 5.9,-1.7c2.1,0.3 4,1.3 5.3,3l153.4,194.9l176,-138.6c3.5,-2.7 8.5,-2.1 11.2,1.3c2.7,3.5 2.1,8.5 -1.3,11.2L261.6,405.9C260.1,407.1 258.3,407.6 256.6,407.6z"
+        android:fillColor="#EDEDED"/>
+    <path
+        android:pathData="M253.3,393.7m-34.5,0a34.5,34.5 0,1 1,69 0a34.5,34.5 0,1 1,-69 0"
+        android:fillColor="#393C3D"/>
+    <path
+        android:pathData="M253.3,393.7m-19.2,0a19.2,19.2 0,1 1,38.4 0a19.2,19.2 0,1 1,-38.4 0"
+        android:fillColor="#EDEDED"/>
   </group>
 </vector>