From 8bfd60efa163c61199252b7b310003e4b4e86c4b Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sun, 8 Mar 2026 00:55:04 +0530
Subject: [PATCH] refactor: update notification frequency selection button
 styling and layout in settings.

---
 src/components/settings/NotificationsForm.tsx | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/settings/NotificationsForm.tsx b/src/components/settings/NotificationsForm.tsx
index 9ab1794..5a91b44 100644
--- a/src/components/settings/NotificationsForm.tsx
+++ b/src/components/settings/NotificationsForm.tsx
@@ -270,24 +270,24 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
           </p>
 
           {/* Frequency Tabs */}
-          <div className="inline-flex border border-[#00293D]/10 rounded-[7px] overflow-hidden">
+          <div className="inline-flex items-center border border-[#00293D]/10 rounded-[7px] h-[49px] px-2">
             {frequencyOptions.map((option, index) => (
-              <button
-                key={option.value}
-                type="button"
-                onClick={() => setDigestFrequency(option.value)}
-                className={`px-5 py-2 text-[14px] font-fractul transition-colors ${
-                  digestFrequency === option.value
-                    ? 'bg-[#e58625] text-[#00293D] font-medium'
-                    : 'bg-white text-[#00293D] hover:bg-[#00293D]/5'
-                } ${
-                  index < frequencyOptions.length - 1
-                    ? 'border-r border-[#00293D]/10'
-                    : ''
-                }`}
-              >
-                {option.label}
-              </button>
+              <div key={option.value} className="flex items-center h-full">
+                <button
+                  type="button"
+                  onClick={() => setDigestFrequency(option.value)}
+                  className={`px-5 py-1.5 text-[14px] font-fractul transition-colors rounded-[15px] ${
+                    digestFrequency === option.value
+                      ? 'bg-[#e58625] text-[#00293D]'
+                      : 'text-[#00293D] hover:bg-[#00293D]/5'
+                  }`}
+                >
+                  {option.label}
+                </button>
+                {index < frequencyOptions.length - 1 && (
+                  <div className="w-px h-full bg-[#00293D]/10 mx-1" />
+                )}
+              </div>
             ))}
           </div>
         </div>