From bbd1d9a5b7b901e233134c8fca8c030cccc6ae71 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Thu, 7 Sep 2023 14:29:36 +0300
Subject: [PATCH] [ENG-1079] Toggle focus styling update (#1309)

updated focus styling
---
 packages/ui/src/Switch.stories.tsx | 27 +++++++++++++++++++++++++++
 packages/ui/src/Switch.tsx         |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/Switch.stories.tsx

diff --git a/packages/ui/src/Switch.stories.tsx b/packages/ui/src/Switch.stories.tsx
new file mode 100644
index 000000000..83b44191d
--- /dev/null
+++ b/packages/ui/src/Switch.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/react';
+import { Switch } from './Switch';
+
+const meta: Meta<typeof Switch> = {
+	title: 'Switch',
+	component: Switch,
+	argTypes: {},
+	parameters: {
+		backgrounds: {
+			default: 'dark'
+		}
+	},
+};
+
+export default meta;
+
+
+export const Default = () => {
+	return (
+		<div className="w-full h-screen p-10 bg-app">
+			<h1 className="text-[20px] font-bold text-white">Switch</h1>
+			<div className='mt-6'>
+			<Switch/>
+			</div>
+		</div>
+	);
+};
diff --git a/packages/ui/src/Switch.tsx b/packages/ui/src/Switch.tsx
index 245f634ec..634119c8e 100644
--- a/packages/ui/src/Switch.tsx
+++ b/packages/ui/src/Switch.tsx
@@ -12,7 +12,7 @@ const switchStyles = cva(
 	[
 		'relative inline-flex shrink-0 transition',
 		'items-center rounded-full p-1',
-		'bg-app-line radix-state-checked:bg-accent'
+		'bg-app-line radix-state-checked:bg-accent focus:outline-none focus:ring-1 focus:ring-accent focus:ring-offset-2 focus:ring-offset-app-selected'
 	],
 	{
 		variants: {