chore: theme updates (#6642)

Author: bijin-bruno

packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js

@@ -8,8 +8,9 @@ const StyledWrapper = styled.div`
     height: 325px;
     padding: 8px;
     background: ${(props) => props.theme.dropdown.bg};
+    border: 1px solid ${(props) => props.theme.dropdown.border};
     border-radius: 6px;
-    box-shadow: 0px 1px 4px 0px #0000000D;
+    box-shadow: ${(props) => props.theme.dropdown.shadow};
     outline: none;
 
     &.two-columns {

packages/bruno-app/src/themes/dark/catppuccin-mocha.js

@@ -1,7 +1,7 @@
 // Catppuccin Mocha - Dark Theme (Original)
 // Based on https://catppuccin.com/palette/
 
-import { rgba } from 'polished';
+import { rgba, darken, lighten } from 'polished';
 
 const colors = {
   // Catppuccin Mocha Palette
@@ -208,11 +208,11 @@ const catppuccinMochaTheme = {
   dropdown: {
     color: colors.TEXT,
     iconColor: colors.SUBTEXT1,
-    bg: colors.SURFACE0,
+    bg: lighten(0.03, colors.BASE),
     hoverBg: 'rgba(108, 112, 134, 0.16)',
     shadow: 'none',
     border: rgba(colors.SURFACE1, 0.5),
-    separator: colors.SURFACE1,
+    separator: rgba(colors.SURFACE1, 0.5),
     selectedColor: colors.MAUVE,
     mutedText: colors.SUBTEXT0
   },

packages/bruno-app/src/themes/dark/dark.js

@@ -220,7 +220,7 @@ const darkTheme = {
     collection: {
       item: {
         bg: palette.background.SURFACE0,
-        hoverBg: palette.background.SURFACE0,
+        hoverBg: palette.background.MANTLE,
         focusBorder: palette.border.BORDER2,
         indentBorder: `solid 1px ${palette.border.BORDER1}`,
         active: {
@@ -240,8 +240,8 @@ const darkTheme = {
   dropdown: {
     color: palette.text.BASE,
     iconColor: palette.text.SUBTEXT2,
-    bg: palette.background.MANTLE,
-    hoverBg: palette.background.SURFACE1,
+    bg: palette.background.CRUST,
+    hoverBg: palette.background.MANTLE,
     shadow: 'none',
     border: palette.border.BORDER1,
     separator: palette.border.BORDER1,

packages/bruno-app/src/themes/light/catppuccin-latte.js

@@ -167,7 +167,7 @@ const catppuccinLatteTheme = {
   },
 
   input: {
-    bg: colors.SURFACE0,
+    bg: rgba(colors.SURFACE0, 0.2),
     border: colors.SURFACE1,
     focusBorder: colors.LAVENDER,
     placeholder: {
@@ -187,8 +187,8 @@ const catppuccinLatteTheme = {
 
     collection: {
       item: {
-        bg: colors.SURFACE0,
-        hoverBg: colors.SURFACE1,
+        bg: rgba(colors.SURFACE0, 0.5),
+        hoverBg: rgba(colors.SURFACE0, 0.7),
         focusBorder: colors.LAVENDER,
         indentBorder: `solid 1px ${colors.SURFACE1}`,
         active: {
@@ -209,7 +209,7 @@ const catppuccinLatteTheme = {
     color: colors.TEXT,
     iconColor: colors.SUBTEXT1,
     bg: colors.BASE,
-    hoverBg: colors.SURFACE0,
+    hoverBg: rgba(colors.SURFACE0, 0.5),
     shadow: 'rgba(76, 79, 105, 0.25) 0px 6px 12px -2px, rgba(76, 79, 105, 0.3) 0px 3px 7px -3px',
     border: 'none',
     separator: colors.SURFACE1,
@@ -381,7 +381,7 @@ const catppuccinLatteTheme = {
 
   requestTabs: {
     color: colors.TEXT,
-    bg: colors.SURFACE0,
+    bg: '#E4E7EC',
     bottomBorder: colors.SURFACE1,
     icon: {
       color: colors.OVERLAY0,

packages/bruno-app/src/themes/light/light-pastel.js

@@ -192,7 +192,7 @@ const lightPastelTheme = {
     collection: {
       item: {
         bg: colors.GRAY_2,
-        hoverBg: colors.GRAY_3,
+        hoverBg: rgba(colors.GRAY_3, 0.5),
         focusBorder: colors.BRAND,
         indentBorder: `solid 1px ${colors.GRAY_4}`,
         active: {