From 91d5980a7e5d7bdada74175474d6d8c1a0ecba7e Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 8 Sep 2022 21:29:50 +0530
Subject: [PATCH] fix(web): autolock option style when selected (#1501)

---
 .../Preferences/Panes/Security/PasscodeLock.tsx        | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
index 06ff37bac..daab3703a 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
@@ -20,6 +20,7 @@ import Button from '@/Components/Button/Button'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   application: WebApplication
@@ -240,9 +241,12 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
                   return (
                     <a
                       key={option.value}
-                      className={`mr-3 cursor-pointer rounded text-info ${
-                        option.value === selectedAutoLockInterval ? 'bg-info px-1.5 py-0.5 text-info-contrast' : ''
-                      }`}
+                      className={classNames(
+                        'mr-3 cursor-pointer rounded',
+                        option.value === selectedAutoLockInterval
+                          ? 'bg-info px-1.5 py-0.5 text-info-contrast'
+                          : 'text-info',
+                      )}
                       onClick={() => selectAutoLockInterval(option.value)}
                     >
                       {option.label}