redeem: initial commit

src/pages/menu/menu.module.css

@@ -483,9 +483,6 @@
   position: absolute;
   z-index: 999;
   top: 70px;
-  opacity: 0.9;
-  background: #aaa8a833;
-  backdrop-filter: blur(40px);
 }
 
 .backButtonContainer {
@@ -567,7 +564,7 @@
 
 .ratingScore {
   position: relative;
-  top:6px;
+  top: 6px;
   font-family: Roboto;
   font-weight: 600;
   font-style: SemiBold;
@@ -802,3 +799,48 @@
     display: none !important;
   }
 }
+
+.frame {
+  align-items: flex-start;
+  background-color: #aaa7a733;
+  border-radius: 60px;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 8px 10px;
+  position: relative;
+}
+
+.div {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 4px;
+  position: relative;
+}
+
+.pickup {
+  color: #ffffff;
+  font-family: "Roboto-Medium", Helvetica;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: normal;
+  margin-top: -1px;
+  position: relative;
+  white-space: nowrap;
+  width: fit-content;
+}
+
+.elementMin {
+  color: var(--greylight-hover);
+  font-family: "Roboto-Regular", Helvetica;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: normal;
+  position: relative;
+  white-space: nowrap;
+  width: fit-content;
+}

src/pages/menu/page.tsx

@@ -96,21 +96,31 @@ function MenuPage() {
             <div
               className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer} order-type-select-container`}
             >
-              <Select
-                value={orderType}
-                options={orderTypeOptions}
-                open={false}
-                onOpenChange={() => false}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setIsOrderTypesOpen(true);
-                }}
-                variant="borderless"
-                size="small"
-                className={styles.orderTypeSelect}
-                classNames={{ popup: { root: "order-type-select-dropdown" } }}
-                listHeight={150}
-              />
+              {orderType !== OrderType.Redeem && (
+                <Select
+                  value={orderType}
+                  options={orderTypeOptions}
+                  open={false}
+                  onOpenChange={() => false}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsOrderTypesOpen(true);
+                  }}
+                  variant="borderless"
+                  size="small"
+                  className={styles.orderTypeSelect}
+                  classNames={{ popup: { root: "order-type-select-dropdown" } }}
+                  listHeight={150}
+                />
+              )}
+              {orderType === OrderType.Redeem && (
+                <div className={styles.frame}>
+                  <div className={styles.div}>
+                    <div className={styles.pickup}>Balance</div>
+                    <div className={styles.elementMin}>60 OMR</div>
+                  </div>
+                </div>
+              )}
             </div>
             <SearchButton />
           </div>