make selected premium option more obvious

Coflnet · Mar 26, 2024 · 990f81d · 990f81d
1 parent 7218b15
commit 990f81d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/components/Premium/BuyPremium/BuyPremium.module.css b/components/Premium/BuyPremium/BuyPremium.module.css
@@ -54,3 +54,15 @@
         width: 100%;
     }
 }
+
+/** Show the not selected price options more clearly as not selected **/
+.purchaseCard :global(:not(.btn-check:checked)) + .priceRangeButton{
+    background-color: #2a3644;
+    border-color: #2a3644;
+    color: lightgray;
+}
+
+/** Show the selected price option more clearly as selected **/
+.purchaseCard :global(.btn-check:checked) + .priceRangeButton{
+    border-color: white;
+}
diff --git a/components/Premium/BuyPremium/BuyPremium.tsx b/components/Premium/BuyPremium/BuyPremium.tsx
@@ -94,8 +94,9 @@ function BuyPremium(props: Props) {
                                             id={premiumType.productId}
                                             key={premiumType.productId}
                                             value={premiumType.productId}
-                                            className="price-range-button"
-                                            size="sm"
+                                            className={styles.priceRangeButton}
+                                            size="lg"
+                                            variant="primary"
                                         >
                                             {premiumType.label}
                                         </ToggleButton>