@vitessce/vit-s 3.9.1 → 3.9.2

package/dist/index.js

@@ -19399,21 +19399,20 @@ Popper.Utils = (typeof window !== "undefined" ? window : global).PopperUtils;
 Popper.placements = placements;
 Popper.Defaults = Defaults;
 function createChainedFunction(...funcs) {
-  return funcs.reduce((acc, func) => {
-    if (func == null) {
-      return acc;
-    }
-    {
-      if (typeof func !== "function") {
-        console.error("Material-UI: Invalid Argument Type, must only provide functions, undefined, or null.");
+  return funcs.reduce(
+    (acc, func) => {
+      if (func == null) {
+        return acc;
       }
+      return function chainedFunction(...args) {
+        acc.apply(this, args);
+        func.apply(this, args);
+      };
+    },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    () => {
     }
-    return function chainedFunction(...args) {
-      acc.apply(this, args);
-      func.apply(this, args);
-    };
-  }, () => {
-  });
+  );
 }
 function setRef(ref, value) {
   if (typeof ref === "function") {
@@ -19452,7 +19451,7 @@ function flipPlacement(placement, theme) {
   }
 }
 function getAnchorEl(anchorEl) {
-  return typeof anchorEl === "function" ? anchorEl() : anchorEl;
+  return typeof anchorEl === "function" ? anchorEl(document.body) : anchorEl;
 }
 const useEnhancedEffect = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;
 const defaultPopperOptions = {};
@@ -19482,25 +19481,18 @@ React$1.forwardRef((props, ref) => {
     }
     if (popperRef.current) {
       popperRef.current.destroy();
-      handlePopperRefRef.current(null);
+      if (handlePopperRefRef.current) {
+        setRef(handlePopperRefRef.current, null);
+      }
     }
     const handlePopperUpdate = (data) => {
       setPlacement(data.placement);
     };
-    const resolvedAnchorEl = getAnchorEl(anchorEl);
-    {
-      if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
-        const box = resolvedAnchorEl.getBoundingClientRect();
-        if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          console.warn([
-            "Material-UI: The `anchorEl` prop provided to the component is invalid.",
-            "The anchor element should be part of the document layout.",
-            "Make sure the element is present in the document or that it's not display none."
-          ].join("\n"));
-        }
-      }
+    const anchorElement = getAnchorEl(anchorEl);
+    if (!anchorElement) {
+      return;
     }
-    const popper2 = new Popper(getAnchorEl(anchorEl), tooltipRef.current, {
+    const popper2 = new Popper(anchorElement, tooltipRef.current, {
       placement: rtlPlacement,
       ...popperOptions,
       modifiers: {
@@ -19518,7 +19510,9 @@ React$1.forwardRef((props, ref) => {
       onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate),
       onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate)
     });
-    handlePopperRefRef.current(popper2);
+    if (handlePopperRefRef.current) {
+      setRef(handlePopperRefRef.current, popper2);
+    }
   }, [anchorEl, disablePortal, modifiers2, open2, rtlPlacement, popperOptions]);
   const handleRef = React$1.useCallback((node2) => {
     setRef(ownRef, node2);
@@ -19532,7 +19526,9 @@ React$1.forwardRef((props, ref) => {
       return;
     }
     popperRef.current.destroy();
-    handlePopperRefRef.current(null);
+    if (handlePopperRefRef.current) {
+      setRef(handlePopperRefRef.current, null);
+    }
   };
   const handleExited = () => {
     setExited(true);
@@ -19563,7 +19559,7 @@ React$1.forwardRef((props, ref) => {
     // Fix Popper.js display issue
     top: 0,
     left: 0,
-    display: !open2 && keepMounted && !transition ? "none" : null,
+    display: !open2 && keepMounted && !transition ? "none" : void 0,
     ...style2
   }, children: typeof children === "function" ? children(childProps) : children }) });
 });
@@ -19578,7 +19574,7 @@ function ScopedGlobalStyles(props) {
   const component = useMemo(() => {
     const computedStyles = prependParentClassName(styles2, parentClassName);
     return jsxRuntimeExports.jsx(GlobalStyles$3, { styles: computedStyles });
-  }, [parentClassName]);
+  }, [parentClassName, styles2]);
   return component;
 }
 function readBlobAsArrayBuffer(blob) {
@@ -34371,7 +34367,7 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
     CoordinationType$1.HIERARCHY_LEVELS
   ]
 });
-const version = "3.9.1";
+const version = "3.9.2";
 const META_VERSION = {
   version
 };
@@ -35106,6 +35102,7 @@ const lightPalette = {
   gridLayoutBackground: "#FFFFFF",
   paperBackground: "#FFFFFF",
   cardBorder: "rgba(241, 241, 241, 0.125)",
+  cardInfoBorder: "#ccc",
   tooltipText: "rgba(0, 0, 0, 0.87)"
 };
 const muiTheme = {
@@ -35131,6 +35128,7 @@ const muiTheme = {
       gridLayoutBackground: "#333333",
       paperBackground: "#2b2b2b",
       cardBorder: "rgba(0, 0, 0, 0.125)",
+      cardInfoBorder: "#222222",
       tooltipText: "#FFFFFF",
       ...globalColors
     },
@@ -35140,6 +35138,7 @@ const muiTheme = {
   light: createTheme({
     palette: {
       ...lightPalette,
+      cardInfoBorder: "#F1F1F1",
       ...globalColors
     },
     ...sharedThemeOptions,
@@ -35157,7 +35156,7 @@ const muiTheme = {
       ...globalColors
     },
     ...sharedThemeOptions,
-    cardBorderSize: "2px"
+    cardBorderSize: "1px"
   })
 };
 const createStoreImpl = (createState) => {
@@ -44714,7 +44713,7 @@ const gridLayoutStyles = {
   },
   ".react-grid-item > .react-resizable-handle.react-resizable-handle-se": {
     bottom: "0",
-    right: "0",
+    right: "10px",
     cursor: "se-resize"
   },
   ".react-grid-item > .react-resizable-handle.react-resizable-handle-nw": {
@@ -44856,18 +44855,23 @@ const useTitleStyles = makeStyles()((theme) => ({
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
-  titleInfo: {
+  infoText: {
+    color: theme.palette.primaryForeground,
     width: "100%",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     overflow: "hidden",
-    fontSize: "80% !important",
+    fontSize: "60% !important",
     opacity: ".8",
-    padding: "0 4px",
+    padding: "0",
     justifyContent: "center",
-    lineHeight: "25px !important",
-    flexShrink: "1",
-    textAlign: "right !important"
+    textAlign: "center !important",
+    borderTop: "0px",
+    borderBottom: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderLeft: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderRight: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px"
   },
   titleButtons: {
     display: "flex",
@@ -44883,15 +44887,20 @@ const useTitleStyles = makeStyles()((theme) => ({
     border: `${theme.cardBorderSize} solid ${theme.palette.cardBorder}`,
     flex: "1 1 auto",
     minHeight: "1px",
-    marginTop: "8px",
-    marginBottom: "8px",
+    marginTop: "0",
+    marginBottom: "0",
     position: "relative",
     display: "flex",
     flexDirection: "column",
     minWidth: "0",
     wordWrap: "break-word",
     backgroundClip: "border-box",
-    borderRadius: "4px"
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px"
+  },
+  cardWithoutInfoText: {
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px"
   },
   paddingCard: {
     padding: "12px"
@@ -45824,9 +45833,10 @@ function TitleInfo(props) {
   } = props;
   const errors = errorsProp == null ? void 0 : errorsProp.filter(Boolean);
   const { classes } = useTitleStyles();
+  const hasInfoText = Boolean(info);
   return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
-    /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: classes.title, role: "banner" }, /* @__PURE__ */ React__default.createElement("div", { className: classes.titleLeft, role: "heading", "aria-level": "1" }, title), /* @__PURE__ */ React__default.createElement("div", { className: classes.titleInfo, title: info, role: "note" }, info), /* @__PURE__ */ React__default.createElement("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls" }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: classes.title, role: "banner" }, /* @__PURE__ */ React__default.createElement("div", { className: classes.titleLeft, role: "heading", "aria-level": "1" }, title), /* @__PURE__ */ React__default.createElement("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls" }, /* @__PURE__ */ React__default.createElement(
       PlotOptions,
       {
         options
@@ -45862,7 +45872,8 @@ function TitleInfo(props) {
             [classes.spatialCard]: isSpatial,
             [classes.noScrollCard]: !isScroll && !isSpatial,
             [classes.noPaddingCard]: !withPadding,
-            [classes.paddingCard]: withPadding
+            [classes.paddingCard]: withPadding,
+            [classes.cardWithoutInfoText]: !hasInfoText
           }
         ),
         "aria-busy": !isReady,
@@ -45870,7 +45881,7 @@ function TitleInfo(props) {
       },
       !isReady ? /* @__PURE__ */ React__default.createElement(LoadingIndicator, null) : null,
       children
-    ))
+    ), hasInfoText ? /* @__PURE__ */ React__default.createElement("div", { className: classes.infoText, title: info, role: "note" }, info) : null)
   );
 }
 class VitessceError extends Error {

package/dist-tsc/DebugWindow.d.ts

@@ -1,4 +1,4 @@
 export function DebugWindow({ debugErrors }: {
     debugErrors: any;
-}): import(".pnpm/@types+react@19.1.6/node_modules/@types/react").JSX.Element;
+}): import("react").JSX.Element;
 //# sourceMappingURL=DebugWindow.d.ts.map

package/dist-tsc/DebugWindow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebugWindow.d.ts","sourceRoot":"","sources":["../src/DebugWindow.js"],"names":[],"mappings":"AAIA;;8EA8BC"}
+{"version":3,"file":"DebugWindow.d.ts","sourceRoot":"","sources":["../src/DebugWindow.js"],"names":[],"mappings":"AAIA;;gCA8BC"}

package/dist-tsc/TitleInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AAmNA,mDAoEC"}
+{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AAmNA,mDAwEC"}

package/dist-tsc/TitleInfo.js

@@ -102,15 +102,17 @@ export function TitleInfo(props) {
     const { title, info, children, isScroll, isSpatial, removeGridComponent, urls, isReady, options, closeButtonVisible = true, downloadButtonVisible = true, helpText, withPadding = true, errors: errorsProp, } = props;
     const errors = errorsProp?.filter(Boolean);
     const { classes } = useTitleStyles();
+    const hasInfoText = Boolean(info);
     return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
-    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsx("div", { className: classes.titleInfo, title: info, role: "note", children: info }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, Array.isArray(errors) && errors.length > 0 ? (_jsx(ErrorInfo, { errors: errors })) : null, helpText ? (_jsx(HelpButton, { helpText: helpText })) : null, closeButtonVisible && removeGridComponent ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
+    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, Array.isArray(errors) && errors.length > 0 ? (_jsx(ErrorInfo, { errors: errors })) : null, helpText ? (_jsx(HelpButton, { helpText: helpText })) : null, closeButtonVisible && removeGridComponent ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
                     [classes.scrollCard]: isScroll,
                     [classes.spatialCard]: isSpatial,
                     [classes.noScrollCard]: !isScroll && !isSpatial,
                     [classes.noPaddingCard]: !withPadding,
                     [classes.paddingCard]: withPadding,
-                }), "aria-busy": !isReady, role: "main", children: [!isReady ? _jsx(LoadingIndicator, {}) : null, children] })] })
+                    [classes.cardWithoutInfoText]: !hasInfoText,
+                }), "aria-busy": !isReady, role: "main", children: [!isReady ? _jsx(LoadingIndicator, {}) : null, children] }), hasInfoText ? (_jsx("div", { className: classes.infoText, title: info, role: "note", children: info })) : null] })
     // "pl-2" only matters when the window is very narrow.
     );
 }

package/dist-tsc/Warning.d.ts

@@ -1,2 +1,2 @@
-export function Warning(props: any): import(".pnpm/@types+react@19.1.6/node_modules/@types/react").JSX.Element;
+export function Warning(props: any): import("react").JSX.Element;
 //# sourceMappingURL=Warning.d.ts.map

package/dist-tsc/Warning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Warning.d.ts","sourceRoot":"","sources":["../src/Warning.js"],"names":[],"mappings":"AAIA,+GAoBC"}
+{"version":3,"file":"Warning.d.ts","sourceRoot":"","sources":["../src/Warning.js"],"names":[],"mappings":"AAIA,iEAoBC"}

package/dist-tsc/shared-mui/container.js

@@ -96,7 +96,7 @@ const gridLayoutStyles = {
     },
     '.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
         bottom: '0',
-        right: '0',
+        right: '10px',
         cursor: 'se-resize',
     },
     '.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {

package/dist-tsc/shared-mui/styles.js

@@ -75,6 +75,7 @@ const lightPalette = {
     gridLayoutBackground: '#FFFFFF',
     paperBackground: '#FFFFFF',
     cardBorder: 'rgba(241, 241, 241, 0.125)',
+    cardInfoBorder: '#ccc',
     tooltipText: 'rgba(0, 0, 0, 0.87)',
 };
 export const muiTheme = {
@@ -100,6 +101,7 @@ export const muiTheme = {
             gridLayoutBackground: '#333333',
             paperBackground: '#2b2b2b',
             cardBorder: 'rgba(0, 0, 0, 0.125)',
+            cardInfoBorder: '#222222',
             tooltipText: '#FFFFFF',
             ...globalColors,
         },
@@ -109,6 +111,7 @@ export const muiTheme = {
     light: createTheme({
         palette: {
             ...lightPalette,
+            cardInfoBorder: '#F1F1F1',
             ...globalColors,
         },
         ...sharedThemeOptions,
@@ -126,6 +129,6 @@ export const muiTheme = {
             ...globalColors,
         },
         ...sharedThemeOptions,
-        cardBorderSize: '2px',
+        cardBorderSize: '1px',
     }),
 };

package/dist-tsc/title-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA;;cAyB0B,CAAC;;;kBAMR,eACC;gBAEd,WAAK;eACP,WAEJ;EAuCI"}
+{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA;;cAyBO,CAAC;;;kBAE+B,eACvC;gBAAyB,WAAU;eAAsB,WACpD;EAyDD"}

package/dist-tsc/title-styles.js

@@ -13,18 +13,23 @@ export const useTitleStyles = makeStyles()(theme => ({
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
     },
-    titleInfo: {
+    infoText: {
+        color: theme.palette.primaryForeground,
         width: '100%',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        fontSize: '80% !important',
+        fontSize: '60% !important',
         opacity: '.8',
-        padding: '0 4px',
+        padding: '0',
         justifyContent: 'center',
-        lineHeight: '25px !important',
-        flexShrink: '1',
-        textAlign: 'right !important',
+        textAlign: 'center !important',
+        borderTop: '0px',
+        borderBottom: `1px solid ${theme.palette.cardInfoBorder}`,
+        borderLeft: `1px solid ${theme.palette.cardInfoBorder}`,
+        borderRight: `1px solid ${theme.palette.cardInfoBorder}`,
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
     },
     titleButtons: {
         display: 'flex',
@@ -40,15 +45,20 @@ export const useTitleStyles = makeStyles()(theme => ({
         border: `${theme.cardBorderSize} solid ${theme.palette.cardBorder}`,
         flex: '1 1 auto',
         minHeight: '1px',
-        marginTop: '8px',
-        marginBottom: '8px',
+        marginTop: '0',
+        marginBottom: '0',
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
         minWidth: '0',
         wordWrap: 'break-word',
         backgroundClip: 'border-box',
-        borderRadius: '4px',
+        borderTopLeftRadius: '4px',
+        borderTopRightRadius: '4px',
+    },
+    cardWithoutInfoText: {
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
     },
     paddingCard: {
         padding: '12px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.9.1",
+  "version": "3.9.2",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -31,17 +31,17 @@
     "react-error-boundary": "^5.0.0",
     "@placemarkio/flat-drop-files": "^1.0.2",
     "zarrita": "0.5.4",
-    "@vitessce/styles": "3.9.1",
-    "@vitessce/error": "3.9.1",
-    "@vitessce/abstract": "3.9.1",
-    "@vitessce/constants-internal": "3.9.1",
-    "@vitessce/plugins": "3.9.1",
-    "@vitessce/utils": "3.9.1",
-    "@vitessce/sets-utils": "3.9.1",
-    "@vitessce/schemas": "3.9.1",
-    "@vitessce/config": "3.9.1",
-    "@vitessce/zarr-utils": "3.9.1",
-    "@vitessce/globals": "3.9.1"
+    "@vitessce/styles": "3.9.2",
+    "@vitessce/abstract": "3.9.2",
+    "@vitessce/error": "3.9.2",
+    "@vitessce/constants-internal": "3.9.2",
+    "@vitessce/plugins": "3.9.2",
+    "@vitessce/schemas": "3.9.2",
+    "@vitessce/sets-utils": "3.9.2",
+    "@vitessce/zarr-utils": "3.9.2",
+    "@vitessce/config": "3.9.2",
+    "@vitessce/utils": "3.9.2",
+    "@vitessce/globals": "3.9.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -50,7 +50,7 @@
     "react-dom": "18.3.1",
     "vite": "^7.0.0",
     "vitest": "^3.1.4",
-    "@vitessce/types": "3.9.1"
+    "@vitessce/types": "3.9.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package/src/TitleInfo.js

@@ -219,6 +219,7 @@ export function TitleInfo(props) {
   const errors = errorsProp?.filter(Boolean);
 
   const { classes } = useTitleStyles();
+  const hasInfoText = Boolean(info);
 
   return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
@@ -227,9 +228,6 @@ export function TitleInfo(props) {
         <div className={classes.titleLeft} role="heading" aria-level="1">
           {title}
         </div>
-        <div className={classes.titleInfo} title={info} role="note">
-          {info}
-        </div>
         <div className={classes.titleButtons} role="toolbar" aria-label="Plot options and controls">
           <PlotOptions
             options={options}
@@ -266,6 +264,7 @@ export function TitleInfo(props) {
             [classes.noScrollCard]: !isScroll && !isSpatial,
             [classes.noPaddingCard]: !withPadding,
             [classes.paddingCard]: withPadding,
+            [classes.cardWithoutInfoText]: !hasInfoText,
           },
         )}
         aria-busy={!isReady}
@@ -274,6 +273,11 @@ export function TitleInfo(props) {
         { !isReady ? <LoadingIndicator /> : null }
         {children}
       </div>
+      {hasInfoText ? (
+        <div className={classes.infoText} title={info} role="note">
+          {info}
+        </div>
+      ) : null}
     </>
     // "pl-2" only matters when the window is very narrow.
   );

package/src/shared-mui/container.js

@@ -97,7 +97,7 @@ const gridLayoutStyles = {
   },
   '.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
     bottom: '0',
-    right: '0',
+    right: '10px',
     cursor: 'se-resize',
   },
   '.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {

package/src/shared-mui/styles.js

@@ -78,6 +78,7 @@ const lightPalette = {
   gridLayoutBackground: '#FFFFFF',
   paperBackground: '#FFFFFF',
   cardBorder: 'rgba(241, 241, 241, 0.125)',
+  cardInfoBorder: '#ccc',
   tooltipText: 'rgba(0, 0, 0, 0.87)',
 };
 
@@ -104,6 +105,7 @@ export const muiTheme = {
       gridLayoutBackground: '#333333',
       paperBackground: '#2b2b2b',
       cardBorder: 'rgba(0, 0, 0, 0.125)',
+      cardInfoBorder: '#222222',
       tooltipText: '#FFFFFF',
       ...globalColors,
     },
@@ -113,6 +115,7 @@ export const muiTheme = {
   light: createTheme({
     palette: {
       ...lightPalette,
+      cardInfoBorder: '#F1F1F1',
       ...globalColors,
     },
     ...sharedThemeOptions,
@@ -130,6 +133,6 @@ export const muiTheme = {
       ...globalColors,
     },
     ...sharedThemeOptions,
-    cardBorderSize: '2px',
+    cardBorderSize: '1px',
   }),
 };

package/src/title-styles.js

@@ -14,18 +14,23 @@ export const useTitleStyles = makeStyles()(theme => ({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
   },
-  titleInfo: {
+  infoText: {
+    color: theme.palette.primaryForeground,
     width: '100%',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    fontSize: '80% !important',
+    fontSize: '60% !important',
     opacity: '.8',
-    padding: '0 4px',
+    padding: '0',
     justifyContent: 'center',
-    lineHeight: '25px !important',
-    flexShrink: '1',
-    textAlign: 'right !important',
+    textAlign: 'center !important',
+    borderTop: '0px',
+    borderBottom: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderLeft: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderRight: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderBottomLeftRadius: '4px',
+    borderBottomRightRadius: '4px',
   },
   titleButtons: {
     display: 'flex',
@@ -41,15 +46,20 @@ export const useTitleStyles = makeStyles()(theme => ({
     border: `${theme.cardBorderSize} solid ${theme.palette.cardBorder}`,
     flex: '1 1 auto',
     minHeight: '1px',
-    marginTop: '8px',
-    marginBottom: '8px',
+    marginTop: '0',
+    marginBottom: '0',
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     minWidth: '0',
     wordWrap: 'break-word',
     backgroundClip: 'border-box',
-    borderRadius: '4px',
+    borderTopLeftRadius: '4px',
+    borderTopRightRadius: '4px',
+  },
+  cardWithoutInfoText: {
+    borderBottomLeftRadius: '4px',
+    borderBottomRightRadius: '4px',
   },
   paddingCard: {
     padding: '12px',