UX: Adjust repurchase styles to look better (#53)

Suggested here: https://meta.discourse.org/t/subscriptions-suggestions-for-interface-improvements/177970

Changes order and alignment so it makes a bit more sense in the UX of the /s route. Otherwise it looks too cluttered. This specifically impacted products that can be repurchased.

assets/javascripts/discourse/templates/components/product-item.hbs

@@ -7,15 +7,14 @@
 {{#if isLoggedIn}}
   <div class="product-purchase">
     {{#if product.repurchaseable}}
-      {{#if product.subscribed}}
-        <span class="purchased">&#x2713; {{i18n 'discourse_subscriptions.subscribe.purchased'}}</span>
-        {{#link-to "user.billing.subscriptions" currentUser.username class="billing-link"}}
-          {{i18n 'discourse_subscriptions.subscribe.go_to_billing'}}
-        {{/link-to}}
-      {{/if}}
       {{#link-to "s.show" product.id class="btn btn-primary"}}
         {{i18n 'discourse_subscriptions.subscribe.title'}}
       {{/link-to}}
+      {{#if product.subscribed}}
+        {{#link-to "user.billing.subscriptions" currentUser.username class="billing-link"}}
+          {{i18n 'discourse_subscriptions.subscribe.view_past'}}
+        {{/link-to}}
+      {{/if}}
     {{else}}
       {{#if product.subscribed}}
         <span class="purchased">&#x2713; {{i18n 'discourse_subscriptions.subscribe.purchased'}}</span>

assets/stylesheets/common/layout.scss

@@ -52,13 +52,17 @@
       flex-grow: 1;
     }
     .product-purchase {
-      align-self: baseline;
       display: flex;
-      flex-flow: column nowrap;
+      flex-flow: row wrap;
+      justify-content: space-between;
       .purchased {
         color: $success;
       }
       .billing-link {
+        align-self: flex-end;
+        @include breakpoint(large) {
+          margin-top: 1em;
+        }
         font-size: $font-down-1;
       }
     }

config/locales/client.en.yml

@@ -63,6 +63,7 @@ en:
               confirm: Are you sure you want to cancel this subscription?
       subscribe:
         title: Subscribe
+        view_past: View past purchases
         no_products: There are currently no products available.
         unauthenticated: Log in or create an account to subscribe.
         card: