remove tailwind css class & update subscription app link in README

Shopify · Jun 12, 2024 · 27cf5a2 · 27cf5a2
1 parent 790cdd5
commit 27cf5a2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/examples/subscriptions/README.md b/examples/subscriptions/README.md
@@ -10,7 +10,7 @@ This example is connected to the `hydrogen-preview` storefront which contains on
 
 To run this example on your own store, you'll need to:
 
-- Install a [subscription app](https://apps.shopify.com/categories/selling-products-purchase-options-subscriptions).
+- Install a [subscription app](https://apps.shopify.com/shopify-subscriptions).
 - Use the subscription app to create a selling plan for a product.
 
 ## Install

diff --git a/examples/subscriptions/app/routes/products.$handle.tsx b/examples/subscriptions/app/routes/products.$handle.tsx
@@ -46,6 +46,12 @@ import {
   SellingPlanSelector,
   type SellingPlanGroup,
 } from '~/components/SellingPlanSelector';
+import sellingPanStyle from '~/styles/selling-plan.css?url';
+import type {LinksFunction} from '@remix-run/node';
+
+export const links: LinksFunction = () => [
+  {rel: 'stylesheet', href: sellingPanStyle},
+];
 /**********   EXAMPLE UPDATE END   ************/
 /***********************************************/
 
@@ -396,7 +402,7 @@ function SellingPlanPrice({
           return {
             amount:
               acc.amount *
-              (1 - adjustment.adjustmentValue.adjustmentPercentage),
+              (1 - adjustment.adjustmentValue.adjustmentPercentage / 100),
             currencyCode: acc.currencyCode,
           };
         default:
@@ -435,12 +441,9 @@ function SellingPlanGroup({
             key={sellingPlan.id}
             prefetch="intent"
             to={sellingPlan.url}
-            className={`border inline-block p-4 mr-2 leading-none py-1 border-b-[1.5px] hover:no-underline cursor-pointer transition-all duration-200
-                  ${
-                    sellingPlan.isSelected
-                      ? 'border-gray-500'
-                      : 'border-neutral-50'
-                  }`}
+            className={`selling-plan ${
+              sellingPlan.isSelected ? 'selected' : 'unselected'
+            }`}
             preventScrollReset
             replace
           >

diff --git a/examples/subscriptions/app/styles/selling-plan.css b/examples/subscriptions/app/styles/selling-plan.css
@@ -0,0 +1,24 @@
+.selling-plan {
+  border: 1px solid;
+  display: inline-block;
+  padding: 1rem;
+  margin-right: 0.5rem;
+  line-height: 1;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border-bottom-width: 1.5px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.selling-plan:hover {
+  text-decoration: none;
+}
+
+.selling-plan.selected {
+  border-color: #6b7280; /* Equivalent to 'border-gray-500' */
+}
+
+.selling-plan.unselected {
+  border-color: #fafafa; /* Equivalent to 'border-neutral-50' */
+}