diff --git a/ts/components/PreferencesNotificationProfiles.dom.tsx b/ts/components/PreferencesNotificationProfiles.dom.tsx
index f1118e5f12..55d064384d 100644
--- a/ts/components/PreferencesNotificationProfiles.dom.tsx
+++ b/ts/components/PreferencesNotificationProfiles.dom.tsx
@@ -1974,7 +1974,11 @@ function TimePicker({
theme ? themeClassName2(theme) : undefined
)}
>
-
+
{(use24HourTime ? HOURS_24 : HOURS_12).map(hour => {
const isSelected = hour === hours;
@@ -1983,7 +1987,9 @@ function TimePicker({
key={hour.toString()}
ref={isSelected ? selectedHour : null}
className={classNames(
- tw('w-[46px] rounded-sm py-[7px] type-body-medium'),
+ tw(
+ 'w-[46px] rounded-sm border-[2.5px] border-transparent py-[7px] type-body-medium outline-none focus:border-border-focused'
+ ),
isSelected ? tw('bg-fill-secondary') : null
)}
type="button"
@@ -1997,7 +2003,11 @@ function TimePicker({
);
})}
-
+
{MINUTES.map(minute => {
const isSelected = minute === minutes;
@@ -2006,7 +2016,9 @@ function TimePicker({
key={minute.toString()}
ref={isSelected ? selectedMinute : null}
className={classNames(
- tw('w-[46px] rounded-sm py-[7px] type-body-medium'),
+ tw(
+ 'w-[46px] rounded-sm border-[2.5px] border-transparent py-[7px] type-body-medium outline-none focus:border-border-focused'
+ ),
isSelected ? tw('bg-fill-secondary') : null
)}
type="button"
@@ -2021,7 +2033,11 @@ function TimePicker({
})}
{!use24HourTime ? (
-
+
{AM_PM.map(item => {
const isSelected = item === period;
@@ -2029,7 +2045,9 @@ function TimePicker({