From 5b92e0bee545c3fcbae7d7cfdbf04cb3635153e0 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 11 Aug 2022 14:04:55 +0200
Subject: [PATCH] change(ui) - session list tags bg and other changes, button
 hover bg

---
 .../components/SessionHeader/SessionHeader.tsx           | 2 +-
 .../components/SessionTags/SessionTags.tsx               | 9 +++++----
 frontend/app/components/ui/Button/Button.tsx             | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
index b2bbc1e65..3777763ca 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
@@ -33,7 +33,7 @@ function SessionHeader(props: Props) {
     };
 
     return (
-        <div className="flex items-center px-4 pt-2 justify-between">
+        <div className="flex items-center px-4 justify-between">
             <div className="flex items-center justify-between">
                 <div className="mr-3 text-lg flex items-center">
                     <div
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionTags/SessionTags.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionTags/SessionTags.tsx
index 4d49ab83b..22824e6e5 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionTags/SessionTags.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionTags/SessionTags.tsx
@@ -52,12 +52,13 @@ function TagItem({ isActive, onClick, label, icon = '', disabled = false }: any)
         <div>
             <button
                 onClick={onClick}
-                className={cn('transition group rounded ml-2 px-2 py-1 flex items-center uppercase text-sm hover:bg-teal hover:text-white', {
-                    'bg-teal text-white': isActive,
-                    'disabled': disabled,
+                className={cn('transition group rounded ml-2 px-2 py-1 flex items-center uppercase text-sm hover:bg-active-blue hover:text-teal', {
+                    'bg-active-blue text-teal': isActive,
+                    disabled: disabled,
                 })}
+                style={{ height: '36px' }}
             >
-                {icon && <Icon name={icon} color={isActive ? 'teal' : 'gray-medium'} size="14" className={cn('group-hover:fill-white mr-2', { 'fill-white': isActive })} />}
+                {icon && <Icon name={icon} color={isActive ? 'teal' : 'gray-medium'} size="14" className={cn('group-hover:fill-teal mr-2')} />}
                 <span className="leading-none font-medium">{label}</span>
             </button>
         </div>
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx
index bc71be3a0..d3e3acd15 100644
--- a/frontend/app/components/ui/Button/Button.tsx
+++ b/frontend/app/components/ui/Button/Button.tsx
@@ -30,7 +30,7 @@ export default (props: Props) => {
     let classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap'];
 
     if (variant === 'default') {
-        classes.push('bg-white hover:bg-gray-lightest border border-gray-light');
+        classes.push('bg-white hover:bg-gray-light border border-gray-light');
     }
 
     if (variant === 'primary') {
@@ -38,7 +38,7 @@ export default (props: Props) => {
     }
 
     if (variant === 'text') {
-        classes.push('bg-transparent color-gray-dark hover:bg-gray-lightest hover:color-gray-dark');
+        classes.push('bg-transparent color-gray-dark hover:bg-gray-light hover:color-gray-dark');
     }
 
     if (variant === 'text-primary') {