From e122b0e01979b951c6c55263973f7bfdae13a4bd Mon Sep 17 00:00:00 2001
From: SerhiiTsybulskyi <c4r0n0s@gmail.com>
Date: Fri, 31 May 2024 12:46:41 +0300
Subject: [PATCH 1/3] update theme for tooltip,list,dialog

---
 src/layers/Dialog/Dialog.story.tsx | 26 ++++++++++++++++++++++++++
 src/layers/Dialog/DialogTheme.tsx  |  5 ++++-
 src/layers/Tooltip/TooltipTheme.ts |  2 +-
 src/layout/List/List.story.tsx     | 11 +++++++----
 src/layout/List/ListTheme.ts       | 21 ++++++++++++++++++---
 5 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/src/layers/Dialog/Dialog.story.tsx b/src/layers/Dialog/Dialog.story.tsx
index 5322bd16..88ad98cf 100644
--- a/src/layers/Dialog/Dialog.story.tsx
+++ b/src/layers/Dialog/Dialog.story.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Dialog } from './Dialog';
 import { useDialog } from './useDialog';
 import { Button } from '../../elements';
+import { Stack } from '@/layout';
 
 export default {
   title: 'Components/Layers/Dialog',
@@ -88,3 +89,28 @@ export const Footer = () => {
     </div>
   );
 };
+
+export const ConfirmDialog = () => {
+  const { toggleOpen, Dialog } = useDialog();
+
+  return (
+    <div style={{ textAlign: 'center', margin: '50px' }}>
+      <Button onClick={toggleOpen}>Open</Button>
+      <Dialog
+        header="Whats up"
+        footer={
+          <Stack justifyContent="end" className="w-full">
+            <Button>Cancel</Button>
+            <Button color="primary">Save</Button>
+          </Stack>
+        }
+      >
+        <div>
+          This is notification text. Fusce dapibus, tellus ac cursus commodo,
+          tortor mauris condimentum nibh, ut fermentum massa justo sit amet
+          risus.
+        </div>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/src/layers/Dialog/DialogTheme.tsx b/src/layers/Dialog/DialogTheme.tsx
index aa2ec65e..33d59103 100644
--- a/src/layers/Dialog/DialogTheme.tsx
+++ b/src/layers/Dialog/DialogTheme.tsx
@@ -26,7 +26,10 @@ const baseTheme: DialogTheme = {
 
 export const dialogTheme: DialogTheme = {
   ...baseTheme,
-  inner: [baseTheme.inner, 'bg-panel text-panel-content'].join(' '),
+  inner: [
+    baseTheme.inner,
+    'bg-panel text-panel-content border border-panel-accent rounded'
+  ].join(' '),
   header: {
     ...baseTheme.header,
     closeButton: [baseTheme.header.closeButton, 'text-panel-content'].join(' ')
diff --git a/src/layers/Tooltip/TooltipTheme.ts b/src/layers/Tooltip/TooltipTheme.ts
index cd58d545..e86a3480 100644
--- a/src/layers/Tooltip/TooltipTheme.ts
+++ b/src/layers/Tooltip/TooltipTheme.ts
@@ -10,7 +10,7 @@ const baseTheme: TooltipTheme = {
 
 export const tooltipTheme: TooltipTheme = {
   ...baseTheme,
-  base: [baseTheme.base, 'bg-surface text-surface-content'].join(' ')
+  base: [baseTheme.base, 'bg-panel-accent text-surface-content'].join(' ')
 };
 
 export const legacyTooltipTheme: TooltipTheme = {
diff --git a/src/layout/List/List.story.tsx b/src/layout/List/List.story.tsx
index 4bb5993a..af279a02 100644
--- a/src/layout/List/List.story.tsx
+++ b/src/layout/List/List.story.tsx
@@ -62,15 +62,18 @@ const Icon = () => (
 );
 
 export const StartEnd = () => (
-  <List style={{ width: '150px' }}>
-    <ListItem start={<Icon />} end={<button>...</button>}>
-      Item 1
+  <List style={{ width: '200px' }}>
+    <ListItem disabled start={<Icon />} end={<button>...</button>}>
+      Item 1 (disabled)
     </ListItem>
     <ListItem start={<Icon />} end={<button>...</button>}>
       Item 2
     </ListItem>
+    <ListItem active start={<Icon />} end={<button>...</button>}>
+      Item 3 (active)
+    </ListItem>
     <ListItem start={<Icon />} end={<button>...</button>}>
-      Item 3
+      Item 4
     </ListItem>
   </List>
 );
diff --git a/src/layout/List/ListTheme.ts b/src/layout/List/ListTheme.ts
index 4fba6355..efe3ca72 100644
--- a/src/layout/List/ListTheme.ts
+++ b/src/layout/List/ListTheme.ts
@@ -29,8 +29,8 @@ const baseTheme: ListTheme = {
   header: 'pl-2 pr-2',
   listItem: {
     base: 'items-center flex p-2.5 relative rounded-none',
-    disabled: 'cursor-not-allowed',
-    active: 'underline',
+    disabled: 'cursor-not-allowed pointer-events-none',
+    active: '',
     clickable:
       'cursor-pointer transition-color duration-300 ease-linear transition-bg duration-300 ease-linear hover:color-inherit hover:bg-transparent',
     disablePadding: 'p-0',
@@ -54,7 +54,22 @@ const baseTheme: ListTheme = {
 export const listTheme = {
   ...baseTheme,
   base: [baseTheme.base, 'text-surface-content'].join(' '),
-  header: [baseTheme.header, 'text-surface-content'].join(' ')
+  header: [baseTheme.header, 'text-surface-content'].join(' '),
+  listItem: {
+    ...baseTheme.listItem,
+    base: [
+      baseTheme.listItem.base,
+      'hover:bg-panel-accent hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-panel-secondary-content [&:has(h3)]:hover:bg-transparent'
+    ].join(' '),
+    active: [
+      baseTheme.listItem.active,
+      'text-primary-active hover:text-mystic'
+    ].join(' '),
+    disabled: [
+      baseTheme.listItem.disabled,
+      'opacity-40 text-panel-secondary-content'
+    ].join(' ')
+  }
 };
 
 export const legacyListTheme = {

From 17d66fe487843fad8a6a84f839778185cab05f88 Mon Sep 17 00:00:00 2001
From: SerhiiTsybulskyi <c4r0n0s@gmail.com>
Date: Fri, 31 May 2024 12:50:33 +0300
Subject: [PATCH 2/3] add shadow for dialog

---
 src/layers/Dialog/DialogTheme.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layers/Dialog/DialogTheme.tsx b/src/layers/Dialog/DialogTheme.tsx
index 33d59103..19e445ff 100644
--- a/src/layers/Dialog/DialogTheme.tsx
+++ b/src/layers/Dialog/DialogTheme.tsx
@@ -28,7 +28,7 @@ export const dialogTheme: DialogTheme = {
   ...baseTheme,
   inner: [
     baseTheme.inner,
-    'bg-panel text-panel-content border border-panel-accent rounded'
+    'bg-panel text-panel-content border border-panel-accent rounded shadow-2xl'
   ].join(' '),
   header: {
     ...baseTheme.header,

From 399b32ebe4945f6d875185b846aa4096634423ac Mon Sep 17 00:00:00 2001
From: SerhiiTsybulskyi <c4r0n0s@gmail.com>
Date: Fri, 31 May 2024 13:28:19 +0300
Subject: [PATCH 3/3] update import

---
 src/layers/Dialog/Dialog.story.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layers/Dialog/Dialog.story.tsx b/src/layers/Dialog/Dialog.story.tsx
index 88ad98cf..08674db0 100644
--- a/src/layers/Dialog/Dialog.story.tsx
+++ b/src/layers/Dialog/Dialog.story.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Dialog } from './Dialog';
 import { useDialog } from './useDialog';
 import { Button } from '../../elements';
-import { Stack } from '@/layout';
+import { Stack } from '../../layout';
 
 export default {
   title: 'Components/Layers/Dialog',