chore: center the falafel icon, move style constants to more general …

…location #2127
h2oai · Oct 6, 2023 · 825fa81 · 825fa81
1 parent 443748b
commit 825fa81
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/ui/src/card_menu.tsx b/ui/src/card_menu.tsx
@@ -30,6 +30,7 @@ const
       $nest: {
         '>div:first-child': {
           padding: 12,
+          paddingTop: 10,
           fontSize: 16,
           color: cssVar('$text7')
         },
@@ -38,6 +39,7 @@ const
     icon: {
       userSelect: 'none',
       color: cssVar('$text'),
+      marginRight: -4,
       $nest: {
         '&:hover': {
           color: cssVar('$themePrimary'),

diff --git a/ui/src/parts/styleConstants.ts b/ui/src/parts/styleConstants.ts
@@ -6,3 +6,6 @@ export const Z_INDEX = {
     TIME_PICKER: 4,
     NOTIFICATION_BAR: 5
 }
+
+export const CARD_TITLE_PADDING_TOP = 16
+export const CARD_TITLE_HEIGHT = 17
diff --git a/ui/src/plot.tsx b/ui/src/plot.tsx
@@ -23,6 +23,7 @@ import { cards, grid } from './layout'
 import { cssVarValue, cssVar, formItemWidth, themeB, themesB } from './theme'
 import { bond, wave } from './ui'
 import { Command } from './toolbar'
+import { CARD_TITLE_HEIGHT, CARD_TITLE_PADDING_TOP } from './parts/styleConstants'
 
 let
   cat10 = [
@@ -38,8 +39,6 @@ let
     '$brown',
   ]
 
-export const TITLE_PADDING_TOP = 16
-export const TITLE_HEIGHT = 17
 
 
 type AnnotationOption = ArcOption | LineOption | TextOption | RegionOption | DataMarkerOption | DataRegionOption
@@ -1201,7 +1200,7 @@ export const View = bond(({ name, state, changed }: Model<State & { commands?: C
         {title && <div className='wave-s12 wave-w6'>{title}</div>}
         <div
           className={css.body}
-          style={{ paddingTop: title ? TITLE_PADDING_TOP : commands?.length ? TITLE_PADDING_TOP + TITLE_HEIGHT : 0 }}
+          style={{ paddingTop: title ? CARD_TITLE_PADDING_TOP : commands?.length ? CARD_TITLE_PADDING_TOP + CARD_TITLE_HEIGHT : 0 }}
         >
           <XVisualization model={{ name, plot, data, events, interactions, animate }} />
         </div>

diff --git a/ui/src/vega.tsx b/ui/src/vega.tsx
@@ -19,8 +19,8 @@ import { Result } from 'vega-embed'
 import { cards } from './layout'
 import { formItemWidth } from './theme'
 import { bond, debounce } from './ui'
-import { TITLE_HEIGHT, TITLE_PADDING_TOP } from './plot'
 import { Command } from './toolbar'
+import { CARD_TITLE_HEIGHT, CARD_TITLE_PADDING_TOP } from './parts/styleConstants'
 
 const
   css = stylesheet({
@@ -151,7 +151,7 @@ export const
             {title && <div className='wave-s12 wave-w6'>{title}</div>}
             <div
               className={css.body}
-              style={{ paddingTop: title ? TITLE_PADDING_TOP : commands?.length ? TITLE_PADDING_TOP + TITLE_HEIGHT : 0 }}
+              style={{ paddingTop: title ? CARD_TITLE_PADDING_TOP : commands?.length ? CARD_TITLE_PADDING_TOP + CARD_TITLE_HEIGHT : 0 }}
             >
               <XVegaVisualization model={{ specification, data, grammar }} />
             </div>