Updated subscription bottomsheet UI

- Rounded the corners of the gems for gold banner to 16dp. - Verified and adjusted the background color of the gold banner to Teal1 #005158. - Updated headline 'Subscribe to buy gems and gold...' color to gray700 in dark mode and gray10 in light mode. - Enlarged text descriptions under each perk to 14sp and set color to gray400 in dark mode and gray100 in light mode. - Added a 4dp thick outline to unselected subscription benefit boxes with color gray50 in dark mode and gray600 in light mode. - Resized the 'Subscribing supports our small team...' line to 12sp. - Renamed 'Monthly Mystery Items' to 'Exclusive Monthly Gear Sets'.
HabitRPG · Sep 15, 2023 · dd34c2f · dd34c2f
1 parent bf01050
commit dd34c2f
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 17 deletions.
diff --git a/Habitica/res/drawable/subscription_box_bg.xml b/Habitica/res/drawable/subscription_box_bg.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="?attr/colorWindowBackground"/>
-    <corners android:radius="20dip"/>
+    <corners android:radius="8dip"/>
     <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
-</shape>
+    <stroke android:color="@color/gray600_gray50" android:width="3dp" />
+</shape>
diff --git a/Habitica/res/layout/fragment_bottomsheet_subscription.xml b/Habitica/res/layout/fragment_bottomsheet_subscription.xml
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
-    app:cardBackgroundColor="@color/window_background"
-    android:layout_height="match_parent">
+    app:cardCornerRadius="28dp"
+    android:layout_height="match_parent"
+    app:cardBackgroundColor="@color/window_background">
 
     <androidx.core.widget.NestedScrollView
         android:id="@+id/scroll_view"
@@ -32,7 +33,7 @@
                 android:layout_marginStart="@dimen/spacing_large"
                 android:layout_marginEnd="@dimen/spacing_large"
                 android:layout_marginBottom="@dimen/spacing_medium"
-                app:cardBackgroundColor="@color/teal_5"
+                app:cardBackgroundColor="@color/teal_1"
                 app:cardCornerRadius="24dp"
                 app:strokeWidth="0dp">
 
@@ -72,25 +73,26 @@
                         <TextView
                             style="@style/Title1"
                             android:layout_width="wrap_content"
-                            android:textColor="@color/white"
                             android:layout_height="wrap_content"
                             android:fontFamily="sans-serif-medium"
-                            android:text="@string/buy_gems_with_gold" />
+                            android:text="@string/buy_gems_with_gold"
+                            android:textColor="@color/white" />
 
                         <TextView
                             style="@style/Caption2.Regular"
                             android:layout_width="wrap_content"
                             android:layout_height="wrap_content"
                             android:fontFamily="sans-serif-medium"
-                            android:textColor="@color/white"
-                            android:text="SUBSCRIBER BENEFIT" />
+                            android:text="SUBSCRIBER BENEFIT"
+                            android:textColor="@color/white" />
                     </LinearLayout>
                 </RelativeLayout>
             </com.google.android.material.card.MaterialCardView>
+
             <LinearLayout
-                android:layout_marginBottom="100dp"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
+                android:layout_marginBottom="100dp"
                 android:orientation="vertical"
                 android:paddingHorizontal="20dp">
 
@@ -105,8 +107,8 @@
                     android:gravity="center"
                     android:lineSpacingExtra="4dp"
                     android:text="@string/subscribe_prompt_2"
-                    app:dayTextColor="@color/text_brand"
-                    app:nightTextColor="@color/gray_400" />
+                    android:textColor="@color/gray700_gray10"
+                    />
 
                 <ImageView
                     android:layout_width="wrap_content"
@@ -182,10 +184,10 @@
                     android:layout_height="wrap_content"
                     android:layout_marginStart="@dimen/spacing_large"
                     android:layout_marginEnd="@dimen/spacing_large"
-                    android:textSize="11sp"
                     android:gravity="center_horizontal"
                     android:text="@string/subscribe_title"
-                    android:textColor="@color/text_quad" />
+                    android:textColor="@color/text_quad"
+                    android:textSize="12sp" />
 
                 <Button
                     android:id="@+id/see_more_options"
@@ -201,4 +203,4 @@
 
     </androidx.core.widget.NestedScrollView>
 
-</FrameLayout>
+</com.google.android.material.card.MaterialCardView>
diff --git a/Habitica/res/values-night/colors.xml b/Habitica/res/values-night/colors.xml
@@ -62,6 +62,7 @@
 
     <color name="text_green10_green500">@color/green_500</color>
     <color name="gray200_gray400">@color/gray_400</color>
+    <color name="gray600_gray50">@color/gray_50</color>
     <color name="gray700_gray10">@color/gray_10</color>
     <color name="maroon100_red100">@color/red_100</color>
     <color name="brand_button">@color/brand_600</color>

diff --git a/Habitica/res/values/colors.xml b/Habitica/res/values/colors.xml
@@ -129,6 +129,7 @@
 
     <color name="text_green10_green500">@color/green_10</color>
     <color name="gray200_gray400">@color/gray_200</color>
+    <color name="gray600_gray50">@color/gray_600</color>
     <color name="gray700_gray10">@color/gray_700</color>
     <color name="maroon100_red100">@color/maroon_100</color>
     <color name="brand_button">@color/brand_400</color>

diff --git a/Habitica/res/values/strings.xml b/Habitica/res/values/strings.xml
@@ -382,7 +382,7 @@
     <string name="subscribe_prompt">Become a subscriber to receive these exclusive benefits!</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_listitem3">Exclusive Monthly Gear Sets</string>
     <string name="subscribe_listitem4">Special Subscriber Pet</string>
     <string name="subscribe_listitemFaint">Hang on with 1 HP!</string>
     <string name="subscribe_listitem5">Double the Drops</string>

diff --git a/...a/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt b/...a/com/habitrpg/android/habitica/ui/fragments/purchases/SubscriptionBottomSheetFragment.kt
@@ -148,6 +148,7 @@ open class SubscriptionBottomSheetFragment : BottomSheetDialogFragment() {
     private fun buttonForSku(sku: String?): SubscriptionOptionView? {
         return when (sku) {
             PurchaseTypes.Subscription1Month -> binding.subscription1month
+            PurchaseTypes.Subscription3Month -> binding.subscription1month
             PurchaseTypes.Subscription12Month -> binding.subscription12month
             else -> null
         }