chore: UI theming updates

This commit is contained in:
gurusainath 2023-09-12 23:17:47 +05:30
parent 3b85444e1f
commit 834e672245
2 changed files with 8 additions and 6 deletions

View File

@ -16,7 +16,7 @@ export const FilterHeader = ({
<div className="flex items-center justify-between gap-2 p-[6px] pb-2 bg-custom-background-80 sticky top-0"> <div className="flex items-center justify-between gap-2 p-[6px] pb-2 bg-custom-background-80 sticky top-0">
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">{title}</div> <div className="text-gray-500 text-sm text-custom-text-300 font-medium">{title}</div>
<div <div
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer" className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-background-100 cursor-pointer"
onClick={() => handleIsPreviewEnabled(!isPreviewEnabled)} onClick={() => handleIsPreviewEnabled(!isPreviewEnabled)}
> >
{isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />} {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}

View File

@ -90,12 +90,14 @@ export const LayoutSelection = observer(() => {
}; };
return ( return (
<div className="relative flex items-center p-1 rounded bg-gray-100 gap-[1px]"> <div className="relative flex items-center p-1 rounded gap-1 bg-custom-background-80">
{layoutSelectionFilters.map((_layout) => ( {layoutSelectionFilters.map((_layout) => (
<div <div
key={_layout?.key} key={_layout?.key}
className={`w-[32px] h-[26px] rounded flex justify-center items-center cursor-pointer transition-all hover:bg-white overflow-hidden group ${ className={`w-[32px] h-[26px] rounded flex justify-center items-center cursor-pointer transition-all hover:bg-custom-background-100 overflow-hidden group ${
issueFilterStore?.issueLayout == _layout?.key ? `bg-white shadow shadow-gray-200` : `` issueFilterStore?.issueLayout == _layout?.key
? `bg-custom-background-100 shadow shadow-gray-200`
: ``
}}`} }}`}
onClick={() => handleLayoutSelection(_layout?.key)} onClick={() => handleLayoutSelection(_layout?.key)}
> >
@ -104,8 +106,8 @@ export const LayoutSelection = observer(() => {
strokeWidth={2} strokeWidth={2}
className={`${ className={`${
issueFilterStore?.issueLayout == _layout?.key issueFilterStore?.issueLayout == _layout?.key
? `text-gray-900` ? `text-custom-text-100`
: `text-gray-700 group-hover:text-gray-900` : `text-custom-text-100 group-hover:text-custom-text-200`
}`} }`}
/> />
</div> </div>