Redesign subscription page

Habitica/build.gradle

@@ -115,10 +115,10 @@ dependencies {
     debugImplementation 'com.squareup.leakcanary:leakcanary-android:1.6.2'
     releaseImplementation 'com.squareup.leakcanary:leakcanary-android-no-op:1.6.2'
     //Push Notifications
-    implementation 'com.google.firebase:firebase-core:17.2.0'
-    implementation 'com.google.firebase:firebase-messaging:20.0.0'
+    implementation 'com.google.firebase:firebase-core:17.2.1'
+    implementation 'com.google.firebase:firebase-messaging:20.0.1'
     implementation 'com.google.firebase:firebase-config:19.0.3'
-    implementation 'com.google.firebase:firebase-perf:19.0.1'
+    implementation 'com.google.firebase:firebase-perf:19.0.2'
     implementation 'com.google.android.gms:play-services-auth:17.0.0'
     implementation 'io.realm:android-adapters:3.1.0'
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
@@ -151,8 +151,8 @@ android {
         multiDexEnabled true
         resConfigs "en", "bg", "de", "en-rGB", "es", "fr", "hr-rHR", "in", "it", "iw", "ja", "ko", "lt", "nl", "pl", "pt-rBR", "pt-rPT", "ru", "tr", "zh", "zh-rTW"
 
-        versionCode 2299
-        versionName "2.3"
+        versionCode 2304
+        versionName "2.4"
     }
 
     viewBinding {
@@ -217,11 +217,6 @@ android {
             buildConfigField "String", "TESTING_LEVEL", "\"production\""
             dimension "buildType"
         }
-
-        amazon {
-            buildConfigField "String", "STORE", "\"amazon\""
-            dimension "buildType"
-        }
     }
 
     sourceSets {

Habitica/res/drawable/g1g1_box.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/teal_50"/>
+    <corners android:radius="8dip"/>
+</shape>

Habitica/res/drawable/pill_bg_purple_400.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/brand_400"/>
+    <corners android:radius="20dip"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+</shape>

Habitica/res/drawable/pill_bg_yellow.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/yellow_5"/>
+    <corners android:radius="20dip"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+</shape>

Habitica/res/drawable/subscription_box_bg.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/gray_700"/>
+    <corners android:radius="8dip"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+</shape>

Habitica/res/drawable/subscription_box_bg_selected.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/gray_700"/>
+    <corners android:radius="8dip"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+    <stroke android:color="@color/brand_400" android:width="3dp" />
+</shape>

Habitica/res/drawable/subscription_selected.xml

@@ -5,14 +5,14 @@
     <item>
         <shape android:shape="oval">
             <corners android:radius="@dimen/daily_checkbox_corner_radius"/>
-            <solid android:color="@color/white" />
+            <solid android:color="@color/brand_400" />
             <stroke android:color="@color/transparent" android:width="5dp" />
         </shape>
     </item>
     <item>
         <shape android:shape="oval">
             <corners android:radius="@dimen/daily_checkbox_corner_radius"/>
-            <stroke android:color="@color/white" android:width="1dp" />
+            <stroke android:color="@color/brand_400" android:width="2dp" />
             <size android:height="16dp" android:width="16dp" />
         </shape>
     </item>

Habitica/res/drawable/subscription_unselected.xml

@@ -2,7 +2,7 @@
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
     <corners android:radius="@dimen/daily_checkbox_corner_radius"/>
-    <stroke android:color="?colorPrimary" android:width="1dp" />
+    <stroke android:color="@color/brand_400" android:width="2dp" />
     <size android:height="16dp" android:width="16dp" />
     <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
 </shape>

Habitica/res/layout/activity_gem_purchase.xml

@@ -1,64 +1,43 @@
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
-             xmlns:app="http://schemas.android.com/apk/res-auto"
-             xmlns:tools="http://schemas.android.com/tools"
-             android:layout_width="match_parent"
-             android:layout_height="match_parent"
-             tools:context=".ui.activities.MainActivity"
-             android:id="@+id/overlayFrameLayout">
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".ui.activities.MainActivity"
+    android:id="@+id/overlayFrameLayout">
     <androidx.drawerlayout.widget.DrawerLayout
-            android:id="@+id/drawer_layout"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-                        android:gravity="center">
+        android:id="@+id/drawer_layout"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:gravity="center">
 
         <androidx.coordinatorlayout.widget.CoordinatorLayout
             android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:elevation="0dp"
-                tools:context=".ui.activities.MainActivity">
+            android:layout_height="match_parent"
+            android:elevation="0dp"
+            tools:context=".ui.activities.MainActivity">
 
             <FrameLayout
-                    android:id="@+id/fragment_container"
-                    android:layout_width="match_parent"
-                    android:layout_height="match_parent"
-                    android:background="@android:color/white"
-                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
+                android:id="@+id/fragment_container"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@android:color/white"
+                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
 
             <com.google.android.material.appbar.AppBarLayout
-                    android:id="@+id/appbar"
+                android:id="@+id/appbar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:fitsSystemWindows="false">
+
+                <androidx.appcompat.widget.Toolbar
+                    android:id="@+id/toolbar"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:fitsSystemWindows="false">
-
-                <com.google.android.material.appbar.CollapsingToolbarLayout
-                        android:id="@+id/collapsing_toolbar"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:fitsSystemWindows="false"
-                        app:titleEnabled="false"
-                        app:contentScrim="?attr/colorPrimary"
-                        app:expandedTitleMarginEnd="?attr/actionBarSize"
-                        app:expandedTitleMarginStart="0dp"
-                        app:layout_scrollFlags="scroll|exitUntilCollapsed">
-
-                    <ImageView
-                        android:layout_width="match_parent"
-                            android:layout_height="wrap_content"
-                            android:layout_marginTop="?attr/actionBarSize"
-                            app:layout_collapseMode="parallax"
-                            android:src="@drawable/support_habitica"
-                            android:paddingBottom="21dp"
-                            android:contentDescription="@string/support_habitica"/>
-
-                    <androidx.appcompat.widget.Toolbar
-                            android:id="@+id/toolbar"
-                            android:layout_width="match_parent"
-                            android:layout_height="wrap_content"
-                            android:minHeight="?attr/actionBarSize"
-                            android:theme="@style/Toolbar"
-                            app:layout_collapseMode="pin"
-                            app:popupTheme="@style/Theme.AppCompat.Light" />
-                </com.google.android.material.appbar.CollapsingToolbarLayout>
+                    android:minHeight="?attr/actionBarSize"
+                    android:background="@color/white"
+                    app:layout_collapseMode="pin"
+                    app:popupTheme="@style/Theme.AppCompat.Light" />
             </com.google.android.material.appbar.AppBarLayout>
 
         </androidx.coordinatorlayout.widget.CoordinatorLayout>

Habitica/res/layout/fragment_subscription.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.core.widget.NestedScrollView
+    android:id="@+id/scroll_view"
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
@@ -16,33 +17,28 @@
         <RelativeLayout
             android:id="@+id/gift_subscription_container"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:background="@color/teal_50">
+            android:layout_height="80dp"
+            android:background="@drawable/g1g1_box"
+            android:layout_marginStart="10dp"
+            android:layout_marginEnd="10dp"
+            android:layout_marginTop="10dp"
+            android:clipChildren="true"
+            android:clipToPadding="true">
             <ImageView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@drawable/presents1"
+                android:scaleType="center"
                 android:layout_alignParentTop="true"
                 android:layout_alignParentStart="true"
-                android:layout_marginTop="18dp"/>
+                android:layout_alignParentBottom="false"/>
             <ImageView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@drawable/presents2"
+                android:scaleType="center"
                 android:layout_alignParentTop="true"
-                android:layout_alignParentEnd="true"
-                android:layout_marginTop="18dp"/>
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:paddingTop="21dp"
-                android:paddingBottom="21dp"
-                android:orientation="vertical"
-                android:gravity="center_horizontal"
-                android:layout_alignParentEnd="true"
-                android:layout_alignParentStart="true"
-                android:layout_alignParentTop="true"
-                android:layout_alignParentBottom="true">
+                android:layout_alignParentEnd="true"/>
                 <TextView
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
@@ -53,18 +49,8 @@
                     android:textColor="@color/white"
                     android:textSize="16sp"
                     android:fontFamily="@string/font_family_medium"
-                    android:layout_marginBottom="12dp"/>
-                <Button
-                    android:id="@+id/gift_subscription_promo_button"
-                    android:layout_width="wrap_content"
-                    android:layout_height="40dp"
-                    android:text="@string/gift_subscription"
-                    android:background="@drawable/white_rounded_border"
-                    android:textColor="@color/white"
-                    android:textAllCaps="false"
-                    android:paddingLeft="12dp"
-                    android:paddingRight="12dp"/>
-            </LinearLayout>
+                    android:layout_marginBottom="12dp"
+                    android:layout_centerInParent="true"/>
         </RelativeLayout>
 
         <LinearLayout
@@ -72,134 +58,193 @@
             android:layout_height="wrap_content"
             android:padding="20dp">
 
+            <ImageView
+                android:id="@+id/header_image_view"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/subscribe_header"
+                android:layout_gravity="center_horizontal"
+                android:layout_marginBottom="20dp"/>
+
+            <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionDetailsView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:id="@+id/subscriptionDetails"/>
+
             <TextView
                 android:id="@+id/subscribeBenefitsTitle"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/subscribe_prompt"
                 android:gravity="center"
-                android:textStyle="normal|bold"
-                android:textColor="?colorPrimary"
-                android:textSize="16sp"
+                style="@style/Subheader1"
+                android:textColor="@color/brand_300"
                 android:lineSpacingExtra="4dp"
                 android:layout_marginTop="8dp"
-                android:layout_marginBottom="16dp"
                 android:layout_marginLeft="26dp"
                 android:layout_marginRight="26dp"/>
 
-            <FrameLayout
-                android:id="@+id/subscribe_listitem1_box"
+            <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/separator_fancy"
+                android:layout_gravity="center_horizontal"
+                android:layout_marginTop="20dp"
+                android:layout_marginBottom="20dp"/>
+
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/subscriptionBox">
-
-                <TextView
-                    android:text="@string/subscribe_listitem1"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    style="@style/SubscriptionListTitle"
-                    />
-
+                android:orientation="horizontal">
                 <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:src="@drawable/sub_benefits_gems"
+                    android:scaleType="center"/>
+                <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
-                    android:id="@+id/subscribe_listitem1_expand"
-                    android:layout_gravity="end"/>
-
-            </FrameLayout>
-
-            <TextView
-                android:id="@+id/subscribe_listitem1_description"
-                android:text="@string/subscribe_listitem1_description"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem1"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem1_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/SubscriptionListDescription"
-                android:visibility="gone"/>
-
-            <FrameLayout
-                android:id="@+id/subscribe_listitem2_box"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                style="@style/subscriptionBox">
-                <TextView
-                    android:text="@string/subscribe_listitem2"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    style="@style/SubscriptionListTitle"
-                    />
-
+                android:orientation="horizontal">
                 <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:src="@drawable/sub_benefits_hourglasses"
+                    android:scaleType="center"/>
+                <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
-                    android:id="@+id/subscribe_listitem2_expand"
-                    android:layout_gravity="end"/>
-            </FrameLayout>
-
-            <TextView
-                android:id="@+id/subscribe_listitem2_description"
-                android:text="@string/subscribe_listitem2_description"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem2"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem2_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/SubscriptionListDescription"
-                android:visibility="gone" />
-
-            <FrameLayout
-                android:id="@+id/subscribe_listitem3_box"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                style="@style/subscriptionBox">
-                <TextView
-                    android:text="@string/subscribe_listitem3"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    style="@style/SubscriptionListTitle"
-                    />
-
+                android:orientation="horizontal">
                 <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:scaleType="center"/>
+                <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
-                    android:id="@+id/subscribe_listitem3_expand"
-                    android:layout_gravity="end"/>
-            </FrameLayout>
-
-            <TextView
-                android:id="@+id/subscribe_listitem3_description"
-                android:text="@string/subscribe_listitem3_description"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem3"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem3_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/SubscriptionListDescription"
-                android:visibility="gone" />
-
-            <FrameLayout
-                android:id="@+id/subscribe_listitem4_box"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                style="@style/subscriptionBox"
-                android:layout_marginBottom="8dp">
-                <TextView
-                    android:text="@string/subscribe_listitem4"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    style="@style/SubscriptionListTitle"
-                    />
+                android:orientation="horizontal">
                 <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:src="@drawable/sub_benefits_pet"
+                    android:scaleType="center"/>
+                <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
-                    android:id="@+id/subscribe_listitem4_expand"
-                    android:layout_gravity="end"/>
-            </FrameLayout>
-
-            <TextView
-                android:id="@+id/subscribe_listitem4_description"
-                android:text="@string/subscribe_listitem4_description"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem4"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem4_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+            <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                style="@style/SubscriptionListDescription"
-                android:visibility="gone" />
+                android:orientation="horizontal">
+                <ImageView
+                    android:layout_width="68dp"
+                    android:layout_height="68dp"
+                    android:src="@drawable/sub_benefits_drops"
+                    android:scaleType="center"/>
+                <LinearLayout
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    android:layout_marginStart="12dp"
+                    android:layout_gravity="center_vertical">
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem5"
+                        android:textColor="@color/black"
+                        style="@style/Body1"/>
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/subscribe_listitem5_description"
+                        android:textColor="@color/black"
+                        style="@style/Caption2.Regular"/>
+                </LinearLayout>
+            </LinearLayout>
+
+
+            <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/separator_fancy"
+                android:layout_gravity="center"
+                android:layout_marginTop="20dp"
+                android:layout_marginBottom="20dp"/>
 
             <ProgressBar
                 style="?android:attr/progressBarStyle"
@@ -232,6 +277,18 @@
                 android:layout_marginTop="24dp"
                 >
 
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:gravity="center_horizontal"
+                    style="@style/Subheader1"
+                    android:textColor="@color/brand_300"
+                    android:text="@string/subscribe_options_title"
+                    android:layout_marginStart="20dp"
+                    android:layout_marginEnd="20dp"
+                    android:layout_marginBottom="20dp"/>
+
                 <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView
                     android:id="@+id/subscription1month"
                     android:layout_width="match_parent"
@@ -259,9 +316,7 @@
                     android:layout_height="wrap_content"
                     app:recurringText="@string/twelve_months"
                     app:gemCapText="@string/subscribe12month_gemcap"
-                    app:hourGlassCount="4" >
-
-                </com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionOptionView>
+                    app:hourGlassCount="4" />
 
                 <Button
                     android:text="@string/subscribe"
@@ -272,14 +327,13 @@
                     android:textAllCaps="false"
                     android:layout_marginTop="8dp"/>
             </LinearLayout>
-
-
-            <com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionDetailsView
-                android:layout_width="match_parent"
+            <ImageView
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:id="@+id/subscriptionDetails"
-                android:layout_marginTop="24dp"/>
-
+                android:layout_gravity="center_horizontal"
+                android:src="@drawable/gift_sub_gift"
+                android:layout_marginTop="24dp"
+                android:layout_marginBottom="2dp" />
             <TextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
@@ -287,8 +341,7 @@
                 android:text="@string/subscribe_gift_description"
                 android:gravity="center_horizontal"
                 android:layout_marginLeft="@dimen/spacing_large"
-                android:layout_marginRight="@dimen/spacing_large"
-                android:layout_marginTop="@dimen/spacing_large"/>
+                android:layout_marginRight="@dimen/spacing_large"/>
             <Button
                 android:id="@+id/gift_subscription_button"
                 android:layout_width="match_parent"
@@ -297,7 +350,6 @@
                 android:background="@color/transparent"
                 android:textColor="?colorAccent"
                 android:textAllCaps="false"/>
-
         </LinearLayout>
         <LinearLayout
             android:layout_width="match_parent"

Habitica/res/layout/purchase_subscription_view.xml

@@ -1,8 +1,9 @@
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+     android:id="@+id/wrapper"
     xmlns:tools="http://schemas.android.com/tools"
     android:orientation="horizontal" android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@color/gem_view_background"
+    android:background="@drawable/subscription_box_bg"
     android:gravity="center"
     android:minHeight="80dp"
     android:layout_marginBottom="8dp">
@@ -10,7 +11,6 @@
     <FrameLayout
         android:layout_width="50dp"
         android:layout_height="match_parent"
-        android:background="@color/brand_700"
         android:id="@+id/subscriptionSelectedFrameView">
         <View
             android:id="@+id/subscriptionSelectedView"
@@ -25,9 +25,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginEnd="@dimen/spacing_medium"
-        android:layout_marginRight="@dimen/spacing_medium"
         android:layout_marginStart="@dimen/spacing_large"
-        android:layout_marginLeft="@dimen/spacing_large"
         android:layout_marginTop="8dp"
         android:layout_marginBottom="8dp">
 
@@ -35,7 +33,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:id="@+id/priceLabel"
-            android:textColor="?colorPrimary"
+            android:textColor="@color/gray_50"
             android:textSize="24sp"
             android:fontFamily="@string/font_family_medium"
             tools:text="$ 21" />
@@ -44,7 +42,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:id="@+id/descriptionTextView"
-            android:textColor="?colorPrimary"
+            android:textColor="@color/gray_50"
             tools:text="recurring every month"
             />
         <LinearLayout
@@ -57,7 +55,6 @@
                 tools:text="@string/subscribe1month.gemcap"
                 style="@style/Pill"
                 android:layout_marginTop="4dp"
-                android:layout_marginRight="8dp"
                 android:layout_marginEnd="8dp"/>
             <TextView
                 android:id="@+id/hourglassTextView"

Habitica/res/layout/subscription_details.xml

@@ -6,6 +6,21 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:background="@color/white">
+    <ImageView
+        android:id="@+id/heart_icon"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
+        android:layout_gravity="center_horizontal"/>
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/thanks_for_subscribing"
+        style="@style/Body2"
+        android:textColor="@color/gray_300"
+        android:layout_gravity="center_horizontal"
+        android:layout_marginBottom="12dp"
+        android:layout_marginTop="4dp"
+        />
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
@@ -19,7 +34,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="@string/subscription"
-                style="@style/subscriptionBoxText.Title" />
+                style="@style/subscriptionBoxText.Title"/>
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
@@ -35,6 +50,14 @@
             style="@style/Pill.Selected.Green"
             android:id="@+id/subscriptionStatusActive"
             android:layout_gravity="center_vertical"/>
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/not_recurring"
+            style="@style/Pill.Selected.Yellow"
+            android:id="@+id/subscriptionStatusNotRecurring"
+            android:layout_gravity="center_vertical"
+            android:visibility="gone"/>
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
@@ -43,22 +66,43 @@
             android:id="@+id/subscriptionStatusInactive"
             android:layout_gravity="center_vertical"
             android:visibility="gone"/>
-    </LinearLayout>
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        style="@style/subscriptionBox">
-        <TextView
-            android:layout_width="0dp"
-            android:layout_weight="1"
-            android:layout_height="wrap_content"
-            android:text="@string/payment_method"
-            style="@style/subscriptionBoxText.Title" />
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:id="@+id/paymentProcessorTextView"
-            tools:text="Google" />
+            android:text="@string/cancelled"
+            style="@style/Pill.Selected.Red"
+            android:id="@+id/subscriptionStatusCancelled"
+            android:layout_gravity="center_vertical"
+            android:visibility="gone"/>
+    </LinearLayout>
+    <LinearLayout
+        android:id="@+id/payment_processor_wrapper"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        style="@style/subscriptionBox">
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:orientation="vertical">
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/payment_method"
+                style="@style/subscriptionBoxText.Title" />
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:id="@+id/subscription_payment_method_textview"
+                tools:text="Recurring every 3 months"
+                style="@style/subscriptionBoxText.Subtitle" />
+        </LinearLayout>
+
+        <ImageView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:id="@+id/paymentProcessorImageView"
+            android:layout_gravity="center_vertical"/>
     </LinearLayout>
 
     <LinearLayout
@@ -125,17 +169,19 @@
     </LinearLayout>
 
     <LinearLayout
+        android:id="@+id/change_subscription_wrapper"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         style="@style/subscriptionBox"
         android:orientation="vertical">
         <TextView
+            android:id="@+id/change_subscription_title"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="@string/cancel_subscription"
             style="@style/subscriptionBoxText.Title" />
         <TextView
-            android:id="@+id/cancelSubscriptionDescription"
+            android:id="@+id/change_subscription_description"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             style="@style/subscriptionBoxText.Subtitle"
@@ -143,12 +189,12 @@
             android:layout_marginTop="8dp"
             android:layout_marginBottom="8dp"/>
         <Button
-            android:id="@+id/visitWebsiteButton"
+            android:id="@+id/change_subscription_button"
             android:layout_width="match_parent"
             android:layout_height="32dp"
             android:text="@string/visit_website"
             android:layout_gravity="center"
-            style="@style/HabiticaButton.Purple.Small"/>
+            style="@style/HabiticaButton.Purple"/>
     </LinearLayout>
 
 </LinearLayout>

Habitica/res/values/colors.xml

@@ -16,13 +16,14 @@
     <color name="maroon_50">#C92B2B</color>
     <color name="maroon_10">#B01515</color>
     <color name="maroon_5">#7D0C0C</color>
+    <color name="maroon_1">#4C0001</color>
 
     <color name="red_500">#ffb6b8</color>
     <color name="red_100">#FF6165</color>
     <color name="red_50">#F74E52</color>
     <color name="red_10">#F23035</color>
     <color name="red_5">#BF262B</color>
-    <color name="red_1">#8C1C20</color>
+    <color name="red_1">#6C0406</color>
 
     <color name="orange_500">#ffc8a7</color>
     <color name="orange_100">#FF944C</color>
@@ -109,7 +110,7 @@
 
     <color name="widget_background">#c8432874</color>
 
-    <color name="gem_view_background">@color/habit_inactive_gray</color>
+    <color name="gem_view_background">@color/gray_700</color>
     <color name="task_border_gray">#1a000000</color>
     <color name="task_secondary_text">#B2B2B2</color>
     <color name="gem_icon_color">#24cc8f</color>

Habitica/res/values/strings.xml

@@ -383,18 +383,20 @@
     <string name="has_tag">Has Tag</string>
     <string name="subscribe_title">Subscribing supports the developers and helps keep Habitica running</string>
     <string name="subscribe_prompt">Become a subscriber and you’ll get these useful benefits:</string>
-    <string name="subscribe_listitem1">Buy gems with gold</string>
-    <string name="subscribe_listitem2">Exclusive monthly items</string>
-    <string name="subscribe_listitem3">Retain additional history entries</string>
-    <string name="subscribe_listitem4">Daily drop-caps doubled</string>
+    <string name="subscribe_listitem1">Gold for Gems</string>
+    <string name="subscribe_listitem2">Mystic Hourglasses</string>
+    <string name="subscribe_listitem3">Monthly Mystery Items</string>
+    <string name="subscribe_listitem4">Special Subscriber Pet</string>
+    <string name="subscribe_listitem5">Double the Drops</string>
     <string name="subscriptions">Subscriptions</string>
     <string name="subscription_duration">Recurring every %s</string>
     <string name="subscription_duration_norenew">For %s</string>
     <string name="subscribe">Subscribe</string>
-    <string name="subscribe_listitem1_description">Alexander the Merchant will now sell you gems for 20 gold each!\n\nHis monthly shipments are initially capped at 25 Gems per month, but can increase based on your subscription length.\n\nThe cap increases by 5 Gems for every three months of consecutive subscription, up to a maximum of 50 Gems per month!</string>
-    <string name="subscribe_listitem2_description">Each month you will receive a unique cosmetic item for your avatar!\n\nPlus, for every three months of consecutive subscription, the Mysterious Time Travelers will grant you access to historic (and futuristic!) cosmetic items.</string>
-    <string name="subscribe_listitem3_description">Makes completed To-Dos and task history available for longer.</string>
-    <string name="subscribe_listitem4_description">Double drop caps will let you receive more items from your completed tasks every day, helping you complete your stable faster!</string>
+    <string name="subscribe_listitem1_description">You’ll be able to buy Gems from the Market for 20 gold each!</string>
+    <string name="subscribe_listitem2_description">Earn Mystic Hourglasses to purchase items in the Time Traveler’s Shop!</string>
+    <string name="subscribe_listitem3_description">Subscribe now to get an exclusive set now and receive new items every month! </string>
+    <string name="subscribe_listitem4_description">Receive the Royal Purple Jackalope pet when you become a new subscriber.</string>
+    <string name="subscribe_listitem5_description">Discover even more items in Habitica with a 2x bonus daily drop rate.</string>
     <string name="subscribe1month_gemcap">25 Gem cap</string>
     <string name="subscribe3month_gemcap">30 Gem cap</string>
     <string name="subscribe6month_gemcap">35 Gem cap</string>
@@ -891,4 +893,13 @@
     <string name="apple_sign_in">Sign in with Apple</string>
     <string name="google">Google</string>
     <string name="send_invites">Send Invites</string>
+    <string name="cancelled">Cancelled</string>
+    <string name="not_recurring">Not Recurring</string>
+    <string name="ending_on">Ending on %s</string>
+    <string name="subscribe_options_title">Choose the Subscription length that works for you</string>
+    <string name="thanks_for_subscribing">Thanks for subscribing</string>
+    <string name="renew_subscription">Renew Subscription</string>
+    <string name="resubscribe">Resubscribe</string>
+    <string name="resubscribe_description">Want to continue your benefits? You can start a new subscription before this one runs out to keep your benefits active.</string>
+    <string name="gifted">Gifted</string>
 </resources>

Habitica/res/values/styles.xml

@@ -69,19 +69,19 @@
     </style>
 
     <style name="MainAppTheme.Maroon">
-        <item name="colorPrimary">@color/maroon_10</item>
-        <item name="colorPrimaryDark">@color/maroon_5</item>
+        <item name="colorPrimary">@color/red_1</item>
+        <item name="colorPrimaryDark">@color/maroon_1</item>
         <item name="colorAccent">@color/maroon_100</item>
-        <item name="android:colorPrimary">@color/maroon_10</item>
-        <item name="android:colorPrimaryDark">@color/maroon_5</item>
+        <item name="android:colorPrimary">@color/red_1</item>
+        <item name="android:colorPrimaryDark">@color/maroon_1</item>
         <item name="android:colorAccent">@color/maroon_100</item>
-        <item name="colorPrimaryOffset">@color/maroon_50</item>
-        <item name="colorPrimaryDistinct">@color/maroon_500</item>
-        <item name="colorBadgeBackground">@color/maroon_100</item>
-        <item name="textColorSecondaryDark">@color/maroon_500</item>
+        <item name="colorPrimaryOffset">@color/red_1</item>
+        <item name="colorPrimaryDistinct">@color/red_500</item>
+        <item name="colorBadgeBackground">@color/red_10</item>
+        <item name="textColorSecondaryDark">@color/red_500</item>
         <item name="android:textColorLink">@color/maroon_100</item>
-        <item name="textColorPrimaryDark">@color/maroon_500</item>
-        <item name="barColor">@color/maroon_10</item>
+        <item name="textColorPrimaryDark">@color/red_500</item>
+        <item name="barColor">@color/red_1</item>
         <item name="taskFormTint">@color/maroon_100</item>
     </style>
 
@@ -377,14 +377,18 @@
         <item name="android:background">@drawable/pill_bg_green</item>
     </style>
 
+    <style name="Pill.Selected.Yellow">
+        <item name="android:background">@drawable/pill_bg_yellow</item>
+    </style>
+
     <style name="Pill.Selected.Red">
         <item name="android:background">@drawable/pill_bg_red</item>
     </style>
 
     <style name="subscriptionBox">
-        <item name="android:background">@color/habit_inactive_gray</item>
-        <item name="android:paddingTop">8dp</item>
-        <item name="android:paddingBottom">8dp</item>
+        <item name="android:background">@drawable/subscription_box_bg</item>
+        <item name="android:paddingTop">16dp</item>
+        <item name="android:paddingBottom">16dp</item>
         <item name="android:paddingLeft">18dp</item>
         <item name="android:paddingRight">18dp</item>
         <item name="android:layout_marginBottom">8dp</item>
@@ -396,10 +400,15 @@
 
     <style name="subscriptionBoxText.Title">
         <item name="android:textSize">14sp</item>
+        <item name="android:fontFamily" tools:targetApi="jelly_bean">
+            @string/font_family_medium
+        </item>
+        <item name="android:textColor">@color/black</item>
+        <item name="android:layout_marginBottom">4dp</item>
     </style>
 
     <style name="subscriptionBoxText.Subtitle">
-        <item name="android:textSize">11sp</item>
+        <item name="android:textSize">14sp</item>
         <item name="android:fontFamily" tools:targetApi="jelly_bean">
             @string/font_family_regular
         </item>

Habitica/src/main/java/com/habitrpg/android/habitica/models/user/SubscriptionPlan.java

@@ -17,7 +17,7 @@ public class SubscriptionPlan extends RealmObject {
     public static String PLANID_BASIC12MONTH = "basic_12mo";
 
     @PrimaryKey
-    private String customerId;
+    public String customerId;
     public Date dateCreated;
     public Date dateUpdated;
     @Nullable

Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/GemPurchaseActivity.kt

@@ -51,7 +51,7 @@ class GemPurchaseActivity : BaseActivity() {
 
         supportActionBar?.setDisplayHomeAsUpEnabled(true)
         supportActionBar?.setDisplayShowHomeEnabled(true)
-        supportActionBar?.setTitle(R.string.gem_purchase_toolbartitle)
+        supportActionBar?.title = ""
 
         purchaseHandler = PurchaseHandler(this, crashlyticsProxy)
 

Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/NavigationDrawerFragment.kt

@@ -91,7 +91,7 @@ class NavigationDrawerFragment : DialogFragment() {
             questMenuView.visibility = View.GONE
             context?.let {
                 adapter.tintColor = it.getThemeColor(R.attr.colorPrimary)
-                adapter.backgroundTintColor = it.getThemeColor(R.attr.colorPrimaryOffset)
+                adapter.backgroundTintColor = it.getThemeColor(R.attr.colorPrimary)
             }
             adapter.items.filter { it.identifier == SIDEBAR_TAVERN }.forEach {
                 it.additionalInfo = null

Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionFragment.kt

@@ -8,6 +8,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.*
 import androidx.core.view.isVisible
+import androidx.core.widget.NestedScrollView
 import com.habitrpg.android.habitica.R
 import com.habitrpg.android.habitica.components.UserComponent
 import com.habitrpg.android.habitica.data.UserRepository
@@ -25,6 +26,7 @@ import com.habitrpg.android.habitica.ui.fragments.BaseFragment
 import com.habitrpg.android.habitica.ui.helpers.bindOptionalView
 import com.habitrpg.android.habitica.ui.helpers.bindView
 import com.habitrpg.android.habitica.ui.helpers.dismissKeyboard
+import com.habitrpg.android.habitica.ui.helpers.resetViews
 import com.habitrpg.android.habitica.ui.views.HabiticaIconsHelper
 import com.habitrpg.android.habitica.ui.views.dialogs.HabiticaAlertDialog
 import com.habitrpg.android.habitica.ui.views.subscriptions.SubscriptionDetailsView
@@ -45,24 +47,12 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
     @Inject
     lateinit var appConfigManager: AppConfigManager
 
+    private val scrollView: NestedScrollView? by bindView(R.id.scroll_view)
+
     private val giftOneGetOneContainer: ViewGroup? by bindView(R.id.gift_subscription_container)
-    private val giftOneGetOneButton: Button? by bindView(R.id.gift_subscription_promo_button)
     private val giftSubscriptionButton: Button? by bindView(R.id.gift_subscription_button)
 
-    private val subscribeListitem1Box: View? by bindView(R.id.subscribe_listitem1_box)
-    private val subscribeListitem2Box: View? by bindView(R.id.subscribe_listitem2_box)
-    private val subscribeListitem3Box: View? by bindView(R.id.subscribe_listitem3_box)
-    private val subscribeListitem4Box: View? by bindView(R.id.subscribe_listitem4_box)
-
-    private val subscribeListitem1Button: ImageView? by bindView(R.id.subscribe_listitem1_expand)
-    private val subscribeListitem2Button: ImageView? by bindView(R.id.subscribe_listitem2_expand)
-    private val subscribeListitem3Button: ImageView? by bindView(R.id.subscribe_listitem3_expand)
-    private val subscribeListitem4Button: ImageView? by bindView(R.id.subscribe_listitem4_expand)
-
-    private val subscribeListItem1Description: TextView? by bindView(R.id.subscribe_listitem1_description)
-    private val subscribeListItem2Description: TextView? by bindView(R.id.subscribe_listitem2_description)
-    private val subscribeListItem3Description: TextView? by bindView(R.id.subscribe_listitem3_description)
-    private val subscribeListItem4Description: TextView? by bindView(R.id.subscribe_listitem4_description)
+    private val headerImageView: ImageView? by bindView(R.id.header_image_view)
 
     private val loadingIndicator: ProgressBar? by bindOptionalView(R.id.loadingIndicator)
     private val subscriptionOptions: View? by bindView(R.id.subscriptionOptions)
@@ -103,10 +93,13 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
+        resetViews()
+
         subscriptionOptions?.visibility = View.GONE
         subscriptionDetailsView?.visibility = View.GONE
+        subscriptionDetailsView?.onShowSubscriptionOptions = { showSubscriptionOptions() }
 
-        giftOneGetOneButton?.setOnClickListener { showGiftSubscriptionDialog() }
+        giftOneGetOneContainer?.setOnClickListener { showGiftSubscriptionDialog() }
         giftSubscriptionButton?.setOnClickListener { showGiftSubscriptionDialog() }
 
         this.subscription1MonthView?.setOnPurchaseClickListener(View.OnClickListener { selectSubscription(PurchaseTypes.Subscription1Month) })
@@ -114,11 +107,6 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
         this.subscription6MonthView?.setOnPurchaseClickListener(View.OnClickListener { selectSubscription(PurchaseTypes.Subscription6Month) })
         this.subscription12MonthView?.setOnPurchaseClickListener(View.OnClickListener { selectSubscription(PurchaseTypes.Subscription12Month) })
 
-        this.subscribeListitem1Box?.setOnClickListener { toggleDescriptionView(this.subscribeListitem1Button, this.subscribeListItem1Description) }
-        this.subscribeListitem2Box?.setOnClickListener { toggleDescriptionView(this.subscribeListitem2Button, this.subscribeListItem2Description) }
-        this.subscribeListitem3Box?.setOnClickListener { toggleDescriptionView(this.subscribeListitem3Button, this.subscribeListItem3Description) }
-        this.subscribeListitem4Box?.setOnClickListener { toggleDescriptionView(this.subscribeListitem4Button, this.subscribeListItem4Description) }
-
         val heartDrawable = BitmapDrawable(resources, HabiticaIconsHelper.imageOfHeartLarge())
         supportTextView?.setCompoundDrawablesWithIntrinsicBounds(null, null, null, heartDrawable)
 
@@ -127,16 +115,6 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
         giftOneGetOneContainer?.isVisible = appConfigManager.enableGiftOneGetOne()
     }
 
-    private fun toggleDescriptionView(button: ImageView?, descriptionView: TextView?) {
-        if (descriptionView?.visibility == View.VISIBLE) {
-            descriptionView.visibility = View.GONE
-            button?.setImageResource(R.drawable.ic_keyboard_arrow_down_black_24dp)
-        } else {
-            descriptionView?.visibility = View.VISIBLE
-            button?.setImageResource(R.drawable.ic_keyboard_arrow_up_black_24dp)
-        }
-    }
-
     override fun injectFragment(component: UserComponent) {
         component.inject(this)
     }
@@ -219,26 +197,35 @@ class SubscriptionFragment : BaseFragment(), GemPurchaseActivity.CheckoutFragmen
         if (user != null) {
             val isSubscribed = user?.isSubscribed ?: false
 
-            if (this.subscriptionDetailsView == null) {
+            if (subscriptionDetailsView == null) {
                 return
             }
 
             if (isSubscribed) {
-                this.subscriptionDetailsView?.visibility = View.VISIBLE
+                headerImageView?.setImageResource(R.drawable.subscriber_header)
+                subscriptionDetailsView?.visibility = View.VISIBLE
                 user?.purchased?.plan?.let { this.subscriptionDetailsView?.setPlan(it) }
-                this.subscribeBenefitsTitle?.setText(R.string.subscribe_prompt_thanks)
-                this.subscriptionOptions?.visibility = View.GONE
+                subscribeBenefitsTitle?.setText(R.string.subscribe_prompt_thanks)
+                subscriptionOptions?.visibility = View.GONE
             } else {
+                headerImageView?.setImageResource(R.drawable.subscribe_header)
                 if (!hasLoadedSubscriptionOptions) {
                     return
                 }
-                this.subscriptionOptions?.visibility = View.VISIBLE
-                this.subscriptionDetailsView?.visibility = View.GONE
+                subscriptionOptions?.visibility = View.VISIBLE
+                subscriptionDetailsView?.visibility = View.GONE
             }
-            this.loadingIndicator?.visibility = View.GONE
+            loadingIndicator?.visibility = View.GONE
         }
     }
 
+    private fun showSubscriptionOptions() {
+        subscriptionOptions?.visibility = View.VISIBLE
+        subscriptionOptions?.postDelayed({
+            scrollView?.smoothScrollTo(0, subscriptionOptions?.top ?: 0)
+        }, 500)
+    }
+
     private fun subscribeUser() {
         purchaseSubscription()
     }

Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/NoPartyFragmentFragment.kt

@@ -23,7 +23,6 @@ import com.habitrpg.android.habitica.helpers.RxErrorHandler
 import com.habitrpg.android.habitica.models.members.Member
 import com.habitrpg.android.habitica.models.user.User
 import com.habitrpg.android.habitica.ui.activities.GroupFormActivity
-import com.habitrpg.android.habitica.ui.activities.MainActivity
 import com.habitrpg.android.habitica.ui.fragments.BaseMainFragment
 import com.habitrpg.android.habitica.ui.helpers.DataBindingUtils
 import com.habitrpg.android.habitica.ui.helpers.setMarkdown
@@ -72,7 +71,7 @@ class NoPartyFragmentFragment : BaseMainFragment() {
             val clipboard = context?.getSystemService(Context.CLIPBOARD_SERVICE) as? ClipboardManager
             val clip = ClipData.newPlainText(context?.getString(R.string.username), user?.username)
             clipboard?.setPrimaryClip(clip)
-            val activity = activity as? MainActivity
+            val activity = activity
             if (activity != null) {
                 HabiticaSnackbar.showSnackbar(activity.snackbarContainer, getString(R.string.username_copied), HabiticaSnackbar.SnackbarDisplayType.NORMAL)
             }

Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/social/party/PartyFragment.kt

@@ -119,7 +119,7 @@ class PartyFragment : BaseMainFragment() {
                 return true
             }
             R.id.menu_guild_leave -> {
-                (detailFragment as? PartyDetailFragment)?.leaveParty()
+                detailFragment?.leaveParty()
                 return true
             }
             R.id.menu_guild_refresh -> {

Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/social/ChatBarView.kt

@@ -73,7 +73,7 @@ class ChatBarView : LinearLayout {
 
         HabiticaBaseApplication.userComponent?.inject(this)
 
-        chatEditText.addTextChangedListener(OnChangeTextWatcher { s, _, _, _ ->
+        chatEditText.addTextChangedListener(OnChangeTextWatcher { _, _, _, _ ->
                 setSendButtonEnabled(chatEditText.text.isNotEmpty() && chatEditText.text.length <= maxChatLength)
                 updateTextIndicator(chatEditText.text.toString())
         })

Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionDetailsView.kt

@@ -3,31 +3,27 @@ package com.habitrpg.android.habitica.ui.views.subscriptions
 
 import android.content.Context
 import android.content.Intent
+import android.graphics.drawable.BitmapDrawable
 import android.net.Uri
 import android.util.AttributeSet
 import android.view.View
-import android.widget.Button
 import android.widget.LinearLayout
-import android.widget.TextView
 import com.habitrpg.android.habitica.R
-import com.habitrpg.android.habitica.extensions.inflate
+import com.habitrpg.android.habitica.databinding.SubscriptionDetailsBinding
+import com.habitrpg.android.habitica.extensions.layoutInflater
 import com.habitrpg.android.habitica.models.user.SubscriptionPlan
-import com.habitrpg.android.habitica.ui.helpers.bindView
+import com.habitrpg.android.habitica.ui.views.HabiticaIconsHelper
+import java.text.DateFormat
+import java.util.*
 
 class SubscriptionDetailsView : LinearLayout {
 
-    internal val subscriptionDurationTextView: TextView by bindView(R.id.subscriptionDurationTextView)
-    internal val subscriptionStatusActive: TextView by bindView(R.id.subscriptionStatusActive)
-    private val getSubscriptionStatusInactive: TextView by bindView(R.id.subscriptionStatusInactive)
-    internal val paymentProcessorTextView: TextView by bindView(R.id.paymentProcessorTextView)
-    internal val monthsSubscribedTextView: TextView by bindView(R.id.monthsSubscribedTextView)
-    internal val gemCapTextView: TextView by bindView(R.id.gemCapTextView)
-    internal val currentHourglassesTextView: TextView by bindView(R.id.currentHourglassesTextView)
-    private val cancelSubscripnDescription: TextView by bindView(R.id.cancelSubscriptionDescription)
-    internal val visitWebsiteButton: Button by bindView(R.id.visitWebsiteButton)
+    lateinit var binding: SubscriptionDetailsBinding
 
     private var plan: SubscriptionPlan? = null
 
+    var onShowSubscriptionOptions: (() -> Unit)? = null
+
     constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) {
         setupView()
     }
@@ -37,20 +33,33 @@ class SubscriptionDetailsView : LinearLayout {
     }
 
     private fun setupView() {
-        inflate(R.layout.subscription_details, true)
-
-        visitWebsiteButton.setOnClickListener { openSubscriptionWebsite() }
+        binding = SubscriptionDetailsBinding.inflate(context.layoutInflater, this, true)
+        binding.changeSubscriptionButton.setOnClickListener { changeSubscriptionButtonTapped() }
+        binding.heartIcon.setImageDrawable(BitmapDrawable(context.resources, HabiticaIconsHelper.imageOfHeartLightBg()))
     }
 
     fun setPlan(plan: SubscriptionPlan) {
         this.plan = plan
 
         if (plan.isActive) {
-            subscriptionStatusActive.visibility = View.VISIBLE
-            getSubscriptionStatusInactive.visibility = View.GONE
+            if (plan.dateTerminated != null) {
+                if (plan.customerId == "Gift") {
+                    binding.subscriptionStatusNotRecurring.visibility = View.VISIBLE
+                    binding.subscriptionStatusCancelled.visibility = View.GONE
+                } else {
+                    binding.subscriptionStatusNotRecurring.visibility = View.GONE
+                    binding.subscriptionStatusCancelled.visibility = View.VISIBLE
+                }
+                binding.subscriptionStatusActive.visibility = View.GONE
+            } else {
+                binding.subscriptionStatusActive.visibility = View.VISIBLE
+                binding.subscriptionStatusNotRecurring.visibility = View.GONE
+            }
+            binding.subscriptionStatusInactive.visibility = View.GONE
         } else {
-            subscriptionStatusActive.visibility = View.GONE
-            getSubscriptionStatusInactive.visibility = View.VISIBLE
+            binding.subscriptionStatusActive.visibility = View.GONE
+            binding.subscriptionStatusInactive.visibility = View.VISIBLE
+            binding.subscriptionStatusNotRecurring.visibility = View.GONE
         }
 
         var duration: String? = null
@@ -68,31 +77,52 @@ class SubscriptionDetailsView : LinearLayout {
         }
 
         if (duration != null) {
-            subscriptionDurationTextView.text = resources.getString(R.string.subscription_duration, duration)
+            binding.subscriptionDurationTextView.text = resources.getString(R.string.subscription_duration, duration)
+        } else if (plan.dateTerminated != null) {
+            binding.subscriptionDurationTextView.text = resources.getString(R.string.ending_on, DateFormat.getDateInstance().format(plan.dateTerminated ?: Date()))
         }
 
-        paymentProcessorTextView.text = plan.paymentMethod
+        when (plan.paymentMethod) {
+            "Amazon" -> binding.paymentProcessorImageView.setImageResource(R.drawable.payment_amazon)
+            "Apple" -> binding.paymentProcessorImageView.setImageResource(R.drawable.payment_apple)
+            "Google" -> binding.paymentProcessorImageView.setImageResource(R.drawable.payment_google)
+            "Stripe" -> binding.paymentProcessorImageView.setImageResource(R.drawable.payment_stripe)
+             else -> {
+                 if (plan.customerId == "Gift") {
+                     binding.paymentProcessorImageView.setImageResource(R.drawable.payment_gift)
+                     binding.subscriptionPaymentMethodTextview.text = context.getString(R.string.gifted)
+                 } else {
+                     binding.paymentProcessorWrapper.visibility = View.GONE
+                 }
+             }
+        }
 
         if (plan.consecutive?.count == 1) {
-            monthsSubscribedTextView.text = resources.getString(R.string.one_month)
+            binding.monthsSubscribedTextView.text = resources.getString(R.string.one_month)
         } else {
-            monthsSubscribedTextView.text = resources.getString(R.string.x_months, plan.consecutive?.count ?: 0)
+            binding.monthsSubscribedTextView.text = resources.getString(R.string.x_months, plan.consecutive?.count ?: 0)
         }
-        gemCapTextView.text = plan.totalNumberOfGems().toString()
-        currentHourglassesTextView.text = plan.consecutive?.trinkets.toString()
+        binding.gemCapTextView.text = plan.totalNumberOfGems().toString()
+        binding.currentHourglassesTextView.text = plan.consecutive?.trinkets.toString()
 
         if (plan.paymentMethod != null) {
+            binding.changeSubscriptionTitle.setText(R.string.cancel_subscription)
             if (plan.paymentMethod == "Google") {
-                cancelSubscripnDescription.setText(R.string.cancel_subscription_google_description)
-                visitWebsiteButton.setText(R.string.open_in_store)
+                binding.changeSubscriptionDescription.setText(R.string.cancel_subscription_google_description)
+                binding.changeSubscriptionButton.setText(R.string.open_in_store)
             } else {
-                cancelSubscripnDescription.setText(R.string.cancel_subscription_notgoogle_description)
-                visitWebsiteButton.setText(R.string.visit_habitica_website)
+                binding.changeSubscriptionDescription.setText(R.string.cancel_subscription_notgoogle_description)
+                binding.changeSubscriptionButton.setText(R.string.visit_habitica_website)
             }
         }
+        if (plan.dateTerminated != null) {
+            binding.changeSubscriptionTitle.setText(R.string.resubscribe)
+            binding.changeSubscriptionDescription.setText(R.string.resubscribe_description)
+            binding.changeSubscriptionButton.setText(R.string.renew_subscription)
+        }
     }
 
-    private fun openSubscriptionWebsite() {
+    private fun changeSubscriptionButtonTapped() {
         if (plan?.paymentMethod != null) {
             val url = if (plan?.paymentMethod == "Google") {
                 "https://play.google.com/store/account/subscriptions"
@@ -100,6 +130,8 @@ class SubscriptionDetailsView : LinearLayout {
                 context.getString(R.string.base_url) + "/"
             }
             context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(url)))
+        } else if (plan?.dateTerminated != null) {
+            onShowSubscriptionOptions?.invoke()
         }
     }
 }

Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/subscriptions/SubscriptionOptionView.kt

@@ -1,48 +1,40 @@
 package com.habitrpg.android.habitica.ui.views.subscriptions
 
 import android.content.Context
-import androidx.core.content.ContextCompat
 import android.util.AttributeSet
 import android.view.View
 import android.widget.FrameLayout
-import android.widget.TextView
+import androidx.core.content.ContextCompat
 import com.habitrpg.android.habitica.R
-import com.habitrpg.android.habitica.ui.helpers.bindView
-import com.habitrpg.android.habitica.extensions.inflate
+import com.habitrpg.android.habitica.databinding.PurchaseSubscriptionViewBinding
+import com.habitrpg.android.habitica.extensions.layoutInflater
 
 
 class SubscriptionOptionView(context: Context, attrs: AttributeSet) : FrameLayout(context, attrs) {
 
-    private val priceTextView: TextView by bindView(R.id.priceLabel)
-    internal val descriptionTextView: TextView by bindView(R.id.descriptionTextView)
-    internal val subscriptionSelectedView: View by bindView(R.id.subscriptionSelectedView)
-    internal val subscriptionSelectedFrameView: View by bindView(R.id.subscriptionSelectedFrameView)
-    internal val gemCapTextView: TextView by bindView(R.id.gemCapTextView)
-    private val hourGlassTextView: TextView by bindView(R.id.hourglassTextView)
+    private val binding = PurchaseSubscriptionViewBinding.inflate(context.layoutInflater, this, true)
 
     var sku: String? = null
 
     init {
-        inflate(R.layout.purchase_subscription_view, true)
-
         val a = context.theme.obtainStyledAttributes(
                 attrs,
                 R.styleable.SubscriptionOptionView,
                 0, 0)
 
         if (a.getBoolean(R.styleable.SubscriptionOptionView_isNonRecurring, false)) {
-            descriptionTextView.text = context.getString(R.string.subscription_duration_norenew, a.getText(R.styleable.SubscriptionOptionView_recurringText))
+            binding.descriptionTextView.text = context.getString(R.string.subscription_duration_norenew, a.getText(R.styleable.SubscriptionOptionView_recurringText))
         } else {
-            descriptionTextView.text = context.getString(R.string.subscription_duration, a.getText(R.styleable.SubscriptionOptionView_recurringText))
+            binding.descriptionTextView.text = context.getString(R.string.subscription_duration, a.getText(R.styleable.SubscriptionOptionView_recurringText))
         }
 
-        gemCapTextView.text = a.getText(R.styleable.SubscriptionOptionView_gemCapText)
+        binding.gemCapTextView.text = a.getText(R.styleable.SubscriptionOptionView_gemCapText)
         val hourGlassCount = a.getInteger(R.styleable.SubscriptionOptionView_hourGlassCount, 0)
         if (hourGlassCount != 0) {
-            hourGlassTextView.text = context.getString(R.string.subscription_hourglasses, hourGlassCount)
-            hourGlassTextView.visibility = View.VISIBLE
+            binding.hourglassTextView.text = context.getString(R.string.subscription_hourglasses, hourGlassCount)
+            binding.hourglassTextView.visibility = View.VISIBLE
         } else {
-            hourGlassTextView.visibility = View.GONE
+            binding.hourglassTextView.visibility = View.GONE
         }
 
     }
@@ -52,28 +44,32 @@ class SubscriptionOptionView(context: Context, attrs: AttributeSet) : FrameLayou
     }
 
     fun setPriceText(text: String) {
-        this.priceTextView.text = text
+        binding.priceLabel.text = text
     }
 
     fun setIsPurchased(purchased: Boolean) {
         if (purchased) {
-            subscriptionSelectedView.setBackgroundResource(R.drawable.subscription_selected)
-            subscriptionSelectedFrameView.setBackgroundResource(R.color.brand_300)
-            gemCapTextView.setBackgroundResource(R.drawable.pill_bg_green)
-            gemCapTextView.setTextColor(ContextCompat.getColor(context, R.color.white))
-            hourGlassTextView.setBackgroundResource(R.drawable.pill_bg_green)
-            hourGlassTextView.setTextColor(ContextCompat.getColor(context, R.color.white))
+            binding.wrapper.setBackgroundResource(R.drawable.subscription_box_bg_selected)
+            binding.subscriptionSelectedView.setBackgroundResource(R.drawable.subscription_selected)
+            binding.gemCapTextView.setBackgroundResource(R.drawable.pill_bg_purple_400)
+            binding.gemCapTextView.setTextColor(ContextCompat.getColor(context, R.color.white))
+            binding.hourglassTextView.setBackgroundResource(R.drawable.pill_bg_purple_400)
+            binding.hourglassTextView.setTextColor(ContextCompat.getColor(context, R.color.white))
+            binding.priceLabel.setTextColor(ContextCompat.getColor(context, R.color.brand_300))
+            binding.descriptionTextView.setTextColor(ContextCompat.getColor(context, R.color.brand_300))
         } else {
-            subscriptionSelectedView.setBackgroundResource(R.drawable.subscription_unselected)
-            subscriptionSelectedFrameView.setBackgroundResource(R.color.brand_700)
-            gemCapTextView.setBackgroundResource(R.drawable.pill_bg)
-            gemCapTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
-            hourGlassTextView.setBackgroundResource(R.drawable.pill_bg)
-            hourGlassTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
+            binding.wrapper.setBackgroundResource(R.drawable.subscription_box_bg)
+            binding.subscriptionSelectedView.setBackgroundResource(R.drawable.subscription_unselected)
+            binding.gemCapTextView.setBackgroundResource(R.drawable.pill_bg)
+            binding.gemCapTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
+            binding.hourglassTextView.setBackgroundResource(R.drawable.pill_bg)
+            binding.hourglassTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
+            binding.priceLabel.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
+            binding.descriptionTextView.setTextColor(ContextCompat.getColor(context, R.color.gray_50))
         }
         val horizontalPadding = resources.getDimension(R.dimen.pill_horizontal_padding).toInt()
         val verticalPadding = resources.getDimension(R.dimen.pill_vertical_padding).toInt()
-        gemCapTextView.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
-        hourGlassTextView.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
+        binding.gemCapTextView.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
+        binding.hourglassTextView.setPadding(horizontalPadding, verticalPadding, horizontalPadding, verticalPadding)
     }
 }

Habitica/src/main/java/com/habitrpg/android/habitica/userpicture/BitmapUtils.kt

@@ -6,15 +6,15 @@ import java.io.FileOutputStream
 
 object BitmapUtils {
     fun saveToShareableFile(directory: String, filename: String, bmp: Bitmap): File? {
-        var filename = filename
+        var name = filename
         try {
-            filename = "$directory/$filename"
+            name = "$directory/$name"
 
-            val out = FileOutputStream(filename)
+            val out = FileOutputStream(name)
             bmp.compress(Bitmap.CompressFormat.PNG, 100, out)
             out.flush()
             out.close()
-            return File(filename)
+            return File(name)
         } catch (ignored: Exception) {
         }