(core) Improve styling of right panel tabs (#1011) (#1296)

Those few visual changes (colors, borders, font weight) make it easier to understand what tab is the selected one in the right tab panel.
gristlabs · Nov 19, 2024 · 1c26dd7 · 1c26dd7
1 parent 26d3ecd
commit 1c26dd7
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 22 deletions.
diff --git a/app/client/ui/PagePanels.ts b/app/client/ui/PagePanels.ts
@@ -532,6 +532,7 @@ const cssLeftPaneHeader = styled(cssHeader, `
 `);
 const cssRightPaneHeader = styled(cssHeader, `
   background-color: ${theme.rightPanelBg};
+  border-bottom: 0;
 `);
 const cssBottomFooter = styled ('div', `
   height: ${bottomFooterHeightPx}px;

diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts
@@ -1182,21 +1182,35 @@ const cssTopBarItem = styled('div', `
   flex: 1 1 0px;
   height: 100%;
   background-color: ${theme.rightPanelTabBg};
-  font-weight: ${vars.headerControlTextWeight};
+  border-right: 1px solid ${theme.rightPanelTabBg};
+  border-left: 1px solid ${theme.rightPanelTabBg};
+  border-bottom: 1px solid ${theme.rightPanelTabBorder};
+  font-weight: initial;
   color: ${theme.rightPanelTabFg};
   --icon-color: ${theme.rightPanelTabIcon};
   display: flex;
   align-items: center;
   cursor: default;
-
+  &:first-child {
+    border-left: 0;
+  }
+  &:last-child {
+    border-right: 0;
+  }
   &-selected {
     background-color: ${theme.rightPanelTabSelectedBg};
-    font-weight: initial;
+    font-weight: ${vars.headerControlTextWeight};
     color: ${theme.rightPanelTabSelectedFg};
-    --icon-color: ${theme.rightPanelTabSelectedFg};
+    --icon-color: ${theme.rightPanelTabSelectedIcon};
+    border-bottom-color: ${theme.rightPanelTabSelectedBg};
+    border-left-color: ${theme.rightPanelTabBorder};
+    border-right-color: ${theme.rightPanelTabBorder};
   }
   &:not(&-selected):hover {
     background-color: ${theme.rightPanelTabHoverBg};
+    border-left-color: ${theme.rightPanelTabHoverBg};
+    border-right-color: ${theme.rightPanelTabHoverBg};
+    color: ${theme.rightPanelTabHoverFg};
     --icon-color: ${theme.rightPanelTabIconHover};
   }
 `);

diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts
@@ -436,16 +436,19 @@ export const theme = {
     colors.darkGrey),
 
   /* Right Panel */
-  rightPanelTabFg: new CustomProp('theme-right-panel-tab-fg', undefined, colors.dark),
-  rightPanelTabBg: new CustomProp('theme-right-panel-tab-bg', undefined, colors.lightGrey),
+  rightPanelTabFg: new CustomProp('theme-right-panel-tab-fg', undefined, colors.slate),
+  rightPanelTabBg: new CustomProp('theme-right-panel-tab-bg', undefined, colors.light),
   rightPanelTabIcon: new CustomProp('theme-right-panel-tab-icon', undefined, colors.slate),
   rightPanelTabIconHover: new CustomProp('theme-right-panel-tab-icon-hover', undefined,
-    colors.lightGreen),
-  rightPanelTabHoverBg: new CustomProp('theme-right-panel-tab-hover-bg', undefined,
-    colors.mediumGrey),
+    colors.dark),
+  rightPanelTabBorder: new CustomProp('theme-right-panel-tab-border', undefined, colors.mediumGrey),
+  rightPanelTabHoverBg: new CustomProp('theme-right-panel-tab-hover-bg', undefined, colors.light),
+  rightPanelTabHoverFg: new CustomProp('theme-right-panel-tab-hover-fg', undefined, colors.dark),
   rightPanelTabSelectedFg: new CustomProp('theme-right-panel-tab-selected-fg', undefined,
-    colors.light),
+    colors.dark),
   rightPanelTabSelectedBg: new CustomProp('theme-right-panel-tab-selected-bg', undefined,
+    colors.lightGrey),
+  rightPanelTabSelectedIcon: new CustomProp('theme-right-panel-tab-selected-icon', undefined,
     colors.lightGreen),
   rightPanelTabButtonHoverBg: new CustomProp('theme-right-panel-tab-button-hover-bg',
     undefined, colors.darkGreen),

diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts
@@ -196,9 +196,12 @@ export const ThemeColors = t.iface([], {
   "right-panel-tab-bg": "string",
   "right-panel-tab-icon": "string",
   "right-panel-tab-icon-hover": "string",
+  "right-panel-tab-border": "string",
   "right-panel-tab-hover-bg": "string",
+  "right-panel-tab-hover-fg": "string",
   "right-panel-tab-selected-fg": "string",
   "right-panel-tab-selected-bg": "string",
+  "right-panel-tab-selected-icon": "string",
   "right-panel-tab-button-hover-bg": "string",
   "right-panel-subtab-fg": "string",
   "right-panel-subtab-selected-fg": "string",

diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts
@@ -254,9 +254,12 @@ export interface ThemeColors {
   'right-panel-tab-bg': string;
   'right-panel-tab-icon': string;
   'right-panel-tab-icon-hover': string;
+  'right-panel-tab-border': string;
   'right-panel-tab-hover-bg': string;
+  'right-panel-tab-hover-fg': string;
   'right-panel-tab-selected-fg': string;
   'right-panel-tab-selected-bg': string;
+  'right-panel-tab-selected-icon': string;
   'right-panel-tab-button-hover-bg': string;
   'right-panel-subtab-fg': string;
   'right-panel-subtab-selected-fg': string;

diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts
@@ -229,13 +229,16 @@ export const GristDark: ThemeColors = {
   'left-panel-page-emoji-outline': '#70707D',
 
   /* Right Panel */
-  'right-panel-tab-fg': '#EFEFEF',
-  'right-panel-tab-bg': '#262633',
+  'right-panel-tab-fg': '#A4A4B1',
+  'right-panel-tab-bg': '#32323f',
   'right-panel-tab-icon': '#A4A4B1',
-  'right-panel-tab-icon-hover': '#13D78D',
-  'right-panel-tab-hover-bg': 'rgba(111,111,117,0.6)',
-  'right-panel-tab-selected-fg': '#FFFFFF',
-  'right-panel-tab-selected-bg': '#157A54',
+  'right-panel-tab-icon-hover': '#EFEFEF',
+  'right-panel-tab-border': '#60606D',
+  'right-panel-tab-hover-bg': '#32323f',
+  'right-panel-tab-hover-fg': '#EFEFEF',
+  'right-panel-tab-selected-fg': '#EFEFEF',
+  'right-panel-tab-selected-bg': '#262633',
+  'right-panel-tab-selected-icon': '#16B378',
   'right-panel-tab-button-hover-bg': '#0A5438',
   'right-panel-subtab-fg': '#17B378',
   'right-panel-subtab-selected-fg': '#EFEFEF',

diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts
@@ -229,13 +229,16 @@ export const GristLight: ThemeColors = {
   'left-panel-page-emoji-outline': '#BDBDBD',
 
   /* Right Panel */
-  'right-panel-tab-fg': '#262633',
-  'right-panel-tab-bg': '#F7F7F7',
+  'right-panel-tab-fg': '#929299',
+  'right-panel-tab-bg': 'white',
   'right-panel-tab-icon': '#929299',
-  'right-panel-tab-icon-hover': '#16B378',
-  'right-panel-tab-hover-bg': 'rgba(217,217,217,0.6)',
-  'right-panel-tab-selected-fg': '#FFFFFF',
-  'right-panel-tab-selected-bg': '#16B378',
+  'right-panel-tab-icon-hover': '#262633',
+  'right-panel-tab-border': 'rgba(217,217,217,0.6)',
+  'right-panel-tab-hover-bg': 'white',
+  'right-panel-tab-hover-fg': '#262633',
+  'right-panel-tab-selected-fg': '#262633',
+  'right-panel-tab-selected-bg': '#F7F7F7',
+  'right-panel-tab-selected-icon': '#16B378',
   'right-panel-tab-button-hover-bg': '#009058',
   'right-panel-subtab-fg': '#16B378',
   'right-panel-subtab-selected-fg': '#262633',