update design for subscription promo

Habitica/res/drawable/rounded_purple_square.xml

@@ -5,7 +5,7 @@
 
     <!-- view background color -->
     <solid
-        android:color="@color/brand_300" >
+        android:color="@color/brand_400" >
     </solid>
 
     <!-- Here is the corner radius -->

Habitica/res/layout/activity_main.xml

@@ -143,7 +143,6 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_gravity="start"
-        android:layout_marginEnd="32dp"
         tools:layout="@layout/drawer_main"/>
 
 </androidx.drawerlayout.widget.DrawerLayout>

Habitica/res/layout/fragment_gem_purchase.xml

@@ -135,6 +135,6 @@
         <com.habitrpg.android.habitica.ui.views.promo.SubscriptionBuyGemsPromoView
             android:id="@+id/subscription_promo"
             android:layout_width="match_parent"
-            android:layout_height="139dp" />
+            android:layout_height="148dp" />
     </LinearLayout>
 </androidx.core.widget.NestedScrollView>

Habitica/res/layout/promo_subscription_buy_gems.xml

@@ -5,7 +5,7 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:parentTag="android.widget.RelativeLayout"
-    android:background="@color/blue_50">
+    android:background="@color/gray_700">
 <LinearLayout
     android:id="@+id/contentWrapper"
     android:layout_width="wrap_content"
@@ -18,23 +18,39 @@
     android:paddingEnd="@dimen/spacing_large"
     >
     <TextView
-        android:id="@+id/textView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/promo_subscription_buy_gems_prompt"
-        android:textColor="@color/white"
-        style="@style/Subheader1"/>
+        android:textColor="@color/gray_100"
+        android:textSize="14sp"
+        android:textStyle="bold"/>
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="@string/promo_subscription_buy_gems_description"
+        android:textColor="@color/gray_100"
+        android:textSize="12sp"
+        android:textAlignment="center"
+        android:maxWidth="240dp"/>
     <Button
         android:id="@+id/button"
         android:layout_width="wrap_content"
-        android:layout_height="40dp"
-        android:minWidth="100dp"
+        android:layout_height="32dp"
+        android:minWidth="110dp"
         android:text="@string/subscribe"
-        android:textAllCaps="false"
-        android:textColor="@color/white"
-        android:background="@drawable/white_rounded_border"
-        android:elevation="0dp"
-        android:shadowColor="@color/transparent"
-        android:layout_marginTop="19dp"/>
+        style="@style/HabiticaButton.Purple"
+        android:layout_marginTop="14dp"/>
 </LinearLayout>
+    <ImageView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:src="@drawable/subscription_promo_gems"
+        android:layout_alignParentBottom="true"
+        android:layout_alignParentStart="true" />
+    <ImageView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:src="@drawable/subscription_promo_gold"
+        android:layout_alignParentBottom="true"
+        android:layout_alignParentEnd="true" />
 </merge>

Habitica/res/values/strings.sidebar.xml

@@ -6,14 +6,14 @@
     <string name="sidebar_inbox">Messages</string>
     <string name="sidebar_tavern">Tavern</string>
     <string name="sidebar_party">Party</string>
-    <string name="sidebar_gems">Gems</string>
+    <string name="sidebar_gems">Purchase Gems</string>
     <string name="sidebar_subscription">Subscription</string>
     <string name="sidebar_guilds">Guilds</string>
     <string name="sidebar_challenges">Challenges</string>
     <string name="sidebar_section_inventory">Inventory</string>
     <string name="sidebar_avatar">Avatar</string>
     <string name="sidebar_equipment">Equipment</string>
-    <string name="sidebar_stable">Stable</string>
+    <string name="sidebar_stable">Pets &amp; Mounts</string>
     <string name="sidebar_news">News</string>
     <string name="sidebar_about">About</string>
     <string name="sidebar_shops">Shops</string>

Habitica/res/values/strings.xml

@@ -845,5 +845,6 @@
     <string name="search">Search</string>
     <string name="search_hint">Search tasks</string>
     <string name="preference_push_party_activity">Party Activity</string>
-    <string name="promo_subscription_buy_gems_prompt">Want to buy gems with gold?</string>
+    <string name="promo_subscription_buy_gems_prompt">Need Gems?</string>
+    <string name="promo_subscription_buy_gems_description">Become a Subscriber to buy Gems with gold, get monthly mystery items, increased drop caps and more!</string>
 </resources>

Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/NavigationDrawerAdapter.kt

@@ -6,9 +6,12 @@ import android.widget.TextView
 import androidx.core.content.ContextCompat
 import androidx.recyclerview.widget.RecyclerView
 import com.habitrpg.android.habitica.R
+import com.habitrpg.android.habitica.extensions.dpToPx
 import com.habitrpg.android.habitica.extensions.inflate
 import com.habitrpg.android.habitica.ui.helpers.bindOptionalView
 import com.habitrpg.android.habitica.ui.menu.HabiticaDrawerItem
+import com.habitrpg.android.habitica.ui.views.promo.SubscriptionBuyGemsPromoView
+import com.habitrpg.android.habitica.ui.views.promo.SubscriptionBuyGemsPromoViewHolder
 import io.reactivex.BackpressureStrategy
 import io.reactivex.Flowable
 import io.reactivex.subjects.PublishSubject
@@ -71,7 +74,7 @@ class NavigationDrawerAdapter(tintColor: Int, backgroundTintColor: Int): Recycle
             itemHolder?.backgroundTintColor = backgroundTintColor
             itemHolder?.bind(drawerItem, drawerItem.transitionId == selectedItem)
             itemHolder?.itemView?.setOnClickListener { itemSelectedEvents.onNext(drawerItem.transitionId) }
-        } else {
+        } else if (getItemViewType(position) == 1) {
             (holder as? SectionHeaderViewHolder)?.backgroundTintColor = backgroundTintColor
             (holder as? SectionHeaderViewHolder)?.bind(drawerItem)
         }
@@ -81,13 +84,30 @@ class NavigationDrawerAdapter(tintColor: Int, backgroundTintColor: Int): Recycle
 
     override fun getItemCount(): Int = items.count { it.isVisible }
 
-    override fun getItemViewType(position: Int): Int = if (getItem(position).isHeader) 1 else 0
+    override fun getItemViewType(position: Int): Int {
+        return if (getItem(position).isHeader) {
+            1
+        } else {
+            if (getItem(position).isPromo) {
+                2
+            } else {
+                0
+            }
+        }
+    }
 
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
-        return if (viewType == 0) {
-            DrawerItemViewHolder(parent.inflate(R.layout.drawer_main_item))
-        } else {
-            SectionHeaderViewHolder(parent.inflate(R.layout.drawer_main_section_header))
+        return when (viewType) {
+            0 -> DrawerItemViewHolder(parent.inflate(R.layout.drawer_main_item))
+            1 -> SectionHeaderViewHolder(parent.inflate(R.layout.drawer_main_section_header))
+            else -> {
+                val itemView = SubscriptionBuyGemsPromoView(parent.context)
+                itemView.layoutParams = ViewGroup.LayoutParams(
+                        ViewGroup.LayoutParams.MATCH_PARENT,
+                        148.dpToPx(parent.context)
+                )
+                SubscriptionBuyGemsPromoViewHolder(itemView)
+            }
         }
     }
 

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

@@ -228,6 +228,12 @@ class NavigationDrawerFragment : DialogFragment() {
             }
             updateItem(statsItem)
         }
+
+        val promoItem = getItemWithIdentifier(SIDEBAR_SUBSCRIPTION_PROMO)
+        if (promoItem != null) {
+            promoItem.isVisible = !user.isSubscribed
+            updateItem(promoItem)
+        }
         getItemWithIdentifier(SIDEBAR_NEWS)?.let {
             it.showBubble = user.flags?.newStuff ?: false
         }
@@ -265,7 +271,9 @@ class NavigationDrawerFragment : DialogFragment() {
             items.add(HabiticaDrawerItem(R.id.newsFragment, SIDEBAR_NEWS, context.getString(R.string.sidebar_news)))
             items.add(HabiticaDrawerItem(R.id.FAQOverviewFragment, SIDEBAR_HELP, context.getString(R.string.sidebar_help)))
             items.add(HabiticaDrawerItem(R.id.aboutFragment, SIDEBAR_ABOUT, context.getString(R.string.sidebar_about)))
+            items.add(HabiticaDrawerItem(R.id.subscriptionPurchaseActivity, SIDEBAR_SUBSCRIPTION_PROMO))
         }
+        items.last().isPromo = true
         adapter.updateItems(items)
     }
 
@@ -427,6 +435,7 @@ class NavigationDrawerFragment : DialogFragment() {
         const val SIDEBAR_STABLE = "stable"
         const val SIDEBAR_GEMS = "gems"
         const val SIDEBAR_SUBSCRIPTION = "subscription"
+        const val SIDEBAR_SUBSCRIPTION_PROMO = "subscriptionpromo"
         const val SIDEBAR_ABOUT_HEADER = "about_header"
         const val SIDEBAR_NEWS = "news"
         const val SIDEBAR_HELP = "help"

Habitica/src/main/java/com/habitrpg/android/habitica/ui/menu/HabiticaDrawerItem.kt

@@ -1,7 +1,9 @@
 package com.habitrpg.android.habitica.ui.menu
 
-class HabiticaDrawerItem(val transitionId: Int,val identifier: String, val text: String, val isHeader: Boolean = false, var additionalInfoAsPill: Boolean = true) {
+data class HabiticaDrawerItem(val transitionId: Int, val identifier: String, val text: String, val isHeader: Boolean = false, var additionalInfoAsPill: Boolean = true) {
+    constructor(transitionId: Int, identifier: String) : this(transitionId, identifier, "")
 
+    var isPromo: Boolean = false
     var additionalInfo: String? = null
     var showBubble: Boolean = false
     var isVisible: Boolean = true

Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/promo/SubscriptionBuyGemsPromoView.kt

@@ -1,93 +1,25 @@
 package com.habitrpg.android.habitica.ui.views.promo
 
 import android.content.Context
-import android.graphics.drawable.BitmapDrawable
 import android.util.AttributeSet
-import android.widget.ImageView
 import android.widget.RelativeLayout
-import androidx.appcompat.widget.AppCompatImageView
 import androidx.core.content.ContextCompat
 import androidx.core.os.bundleOf
 import com.habitrpg.android.habitica.R
-import com.habitrpg.android.habitica.extensions.dpToPx
 import com.habitrpg.android.habitica.extensions.inflate
 import com.habitrpg.android.habitica.helpers.MainNavigationController
-import com.habitrpg.android.habitica.ui.views.HabiticaIconsHelper
 import kotlinx.android.synthetic.main.promo_subscription_buy_gems.view.*
-import java.util.*
 
 class SubscriptionBuyGemsPromoView @JvmOverloads constructor(
         context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
 ) : RelativeLayout(context, attrs, defStyleAttr) {
-    private var didLayoutGold: Boolean = false
-    private var goldViews = mutableListOf<AppCompatImageView>()
-    private val random: Random = Random()
-
-    private var iconSize = 30.dpToPx(context)
-
-    private val starParams: LayoutParams
-        get() {
-            val params = LayoutParams(iconSize, iconSize)
-            params.leftMargin = if (random.nextBoolean()) {
-                -20 + random.nextInt(contentWrapper.left)
-            } else {
-                contentWrapper.right + random.nextInt(width - contentWrapper.right)
-            }
-            params.topMargin = -20 + random.nextInt(height + 20)
-            return params
-        }
 
     init {
         inflate(R.layout.promo_subscription_buy_gems, true)
-        setBackgroundColor(ContextCompat.getColor(context, R.color.blue_50))
+        setBackgroundColor(ContextCompat.getColor(context, R.color.gray_700))
         clipToPadding = false
         clipChildren = false
         clipToOutline = false
-        generateGold()
-
         button.setOnClickListener { MainNavigationController.navigate(R.id.gemPurchaseActivity, bundleOf(Pair("openSubscription", true))) }
     }
-
-    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
-        super.onLayout(changed, l, t, r, b)
-        updateGoldLayoutParams()
-    }
-
-    private fun generateGold() {
-        removeGoldViews()
-        for (x in 0 until 8) {
-            generateGoldView()
-        }
-        requestLayout()
-    }
-
-    private fun removeGoldViews() {
-        if (goldViews.size > 0) {
-            goldViews.forEach { this.removeView(it) }
-            goldViews.clear()
-        }
-    }
-
-    private fun generateGoldView() {
-        val goldView = AppCompatImageView(context)
-        goldView.scaleType = ImageView.ScaleType.CENTER
-        goldView.setImageDrawable(BitmapDrawable(resources, HabiticaIconsHelper.imageOfGoldReward()))
-        goldView.rotation = random.nextFloat() * 360
-        goldViews.add(goldView)
-        if (width > 0 && height > 0) {
-            this.addView(goldView, 0, starParams)
-        } else {
-            this.addView(goldView, 0)
-        }
-    }
-
-    private fun updateGoldLayoutParams() {
-        if (width <= 0 || height <= 0 || didLayoutGold || goldViews.size == 0) {
-            return
-        }
-        for (view in goldViews) {
-            view.layoutParams = starParams
-        }
-        didLayoutGold = true
-    }
 }