UI update: Replaced advance notice select with orange button chips in Push Settings

Author: realtomchuk-source

web/src/pages/Cabinet/components/NotificationEditorSheet.module.css

@@ -83,31 +83,28 @@
     color: #ffffff;
 }
 
-.selectWrap {
-    position: relative;
-    width: 100%;
+.advanceRow {
+    display: flex;
+    gap: 12px;
 }
 
-.select {
-    width: 100%;
-    height: 52px;
-    padding: 0 16px;
+.advanceBtn {
+    flex: 1;
+    height: 48px;
     background: #ffffff;
     border: 1px solid #e5e7eb;
     border-radius: 12px;
-    font-size: 16px;
-    color: #1f2937;
-    appearance: none;
+    font-size: 14px;
+    font-weight: 600;
+    color: #4b5563;
     cursor: pointer;
+    transition: all 0.2s;
 }
 
-.selectIcon {
-    position: absolute;
-    right: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    color: #4b5563;
+.advanceBtnSelected {
+    background: #f97316;
+    border-color: #f97316;
+    color: #ffffff;
 }
 
 .toggleRow {

web/src/pages/Cabinet/components/NotificationEditorSheet.tsx

@@ -100,17 +100,16 @@ export const NotificationEditorSheet: React.FC<NotificationEditorSheetProps> = (
 
                 <div className={styles.formGroup}>
                     <div className={styles.label}>Попередити за</div>
-                    <div className={styles.selectWrap}>
-                        <select 
-                            className={styles.select} 
-                            value={notifyAdvance}
-                            onChange={e => setNotifyAdvance(Number(e.target.value))}
-                        >
-                            <option value={5}>5 хв</option>
-                            <option value={10}>10 хв</option>
-                            <option value={15}>15 хв</option>
-                        </select>
-                        <ChevronDown className={styles.selectIcon} size={18} />
+                    <div className={styles.advanceRow}>
+                        {[5, 10, 15].map(mins => (
+                            <button
+                                key={mins}
+                                className={`${styles.advanceBtn} ${notifyAdvance === mins ? styles.advanceBtnSelected : ''}`}
+                                onClick={() => setNotifyAdvance(mins)}
+                            >
+                                {mins} хв
+                            </button>
+                        ))}
                     </div>
                 </div>