Make "picked up" badge green

src/components/store/OrderSummary/index.tsx

@@ -54,7 +54,9 @@ const OrderItemPreview = ({ item, showFulfilled, showNotFulfilled }: OrderItemPr
           // up from a previous partially fulfilled order that was rescheduled.
           // For example, if an item is fulfilled but the order is missed or
           // cancelled
-          <div className={styles.badge}>{showNotFulfilled ? 'Picked up' : 'Already picked up'}</div>
+          <div className={`${styles.badge} ${styles.pickedUp}`}>
+            {showNotFulfilled ? 'Picked up' : 'Already picked up'}
+          </div>
         ) : null}
         {showNotFulfilled && !item.fulfilled ? (
           // Only shows for partially fulfilled orders when the item wasn't

src/components/store/OrderSummary/style.module.scss

@@ -33,6 +33,12 @@
         position: absolute;
         right: 0;
 
+        &.pickedUp {
+          background-color: vars.$green-100;
+          border-color: vars.$green-300;
+          color: vars.$green-300;
+        }
+
         &.notAvailable {
           background-color: vars.$scarlet-1;
           border-color: vars.$red;

src/components/store/OrderSummary/style.module.scss.d.ts

@@ -10,6 +10,7 @@ export type Styles = {
   label: string;
   notAvailable: string;
   partiallyFulfilledText: string;
+  pickedUp: string;
   rescheduleReminder: string;
   totalDiamonds: string;
   totalPrice: string;