Merge pull request #8339 from sagemathinc/fix-tab-icon-compact

frontend/file tabs: fix compact design

Author: williamstein

src/packages/frontend/project/page/file-tab.tsx

@@ -208,10 +208,10 @@ export function FileTab(props: Readonly<Props>) {
   // alerts only work on non-docker projects (for now) -- #7077
   const status_alerts: string[] =
     !onCoCalcDocker && name === "info"
-      ? (project_status
+      ? project_status
           ?.get("alerts")
           ?.map((a) => a.get("type"))
-          .toJS() ?? [])
+          .toJS() ?? []
       : [];
 
   const other_settings = useTypedRedux("account", "other_settings");
@@ -294,8 +294,8 @@ export function FileTab(props: Readonly<Props>) {
       flyout === active_flyout
         ? COLORS.PROJECT.FIXED_LEFT_ACTIVE
         : active_flyout == null
-          ? COLORS.GRAY_L
-          : COLORS.GRAY_L0;
+        ? COLORS.GRAY_L
+        : COLORS.GRAY_L0;
     const bg = flyout === active_flyout ? COLORS.GRAY_L0 : undefined;
 
     return (
@@ -335,7 +335,6 @@ export function FileTab(props: Readonly<Props>) {
   // how to read: default color -> style for component -> override color if there is activity
   const icon_style: CSSProperties = {
     marginRight: "2px",
-    marginLeft: "-10px",
     color: COLORS.FILE_ICON,
     ...props.iconStyle,
     ...(has_activity ? { color: "orange" } : undefined),
@@ -356,7 +355,7 @@ export function FileTab(props: Readonly<Props>) {
 
   const icon =
     path != null
-      ? (file_options(path)?.icon ?? "code-o")
+      ? file_options(path)?.icon ?? "code-o"
       : FIXED_PROJECT_TABS[name!].icon;
 
   const tags =
@@ -413,7 +412,12 @@ export function FileTab(props: Readonly<Props>) {
     >
       <div
         className="cc-project-fixedtab"
-        style={{ textAlign: "center", width: "100%" }}
+        style={{
+          textAlign: "center",
+          width: "100%",
+          paddingLeft: "8px",
+          paddingRight: "8px",
+        }}
       >
         {btnLeft}
       </div>