make the color of the top navbar and home button consistent

Author: williamstein

src/packages/frontend/app/page.tsx

@@ -203,7 +203,6 @@ export const Page: React.FC = () => {
       return (
         <NavTab
           name="admin"
-          label={"Admin"}
           label_class={NAV_CLASS}
           icon={"users"}
           active_top_tab={active_top_tab}

src/packages/frontend/app/use-context.ts

@@ -55,6 +55,7 @@ export function calcStyle(isNarrow: boolean): PageStyle {
 
   const topBarStyle = {
     height: `${height}px`,
+    background: "#fafafa",
   } as const;
 
   const fileUseStyle = {

src/packages/frontend/components/sortable-tabs.tsx

@@ -130,13 +130,14 @@ export function SortableTabs(props: Props) {
   );
 }
 
-export function SortableTab({ children, id }) {
+export function SortableTab({ children, id, style }) {
   const { attributes, listeners, setNodeRef, transform, transition, active } =
     useSortable({ id });
   return (
     <div
       ref={setNodeRef}
       style={{
+        ...style,
         transform: transform
           ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
           : undefined,
@@ -151,11 +152,11 @@ export function SortableTab({ children, id }) {
   );
 }
 
-export function renderTabBar(tabBarProps, DefaultTabBar) {
+export function renderTabBar(tabBarProps, DefaultTabBar, styles?) {
   return (
     <DefaultTabBar {...tabBarProps}>
       {(node) => (
-        <SortableTab key={node.key} id={node.key}>
+        <SortableTab key={node.key} id={node.key} style={styles?.[node.key]}>
           {node}
         </SortableTab>
       )}

src/packages/frontend/project/page/activity-bar-tabs.tsx

@@ -51,7 +51,7 @@ export default function ProjectTabs(props: PTProps) {
   const openFiles = useTypedRedux({ project_id }, "open_files_order");
   const activeTab = useTypedRedux({ project_id }, "active_project_tab");
 
-  if (openFiles.size == 0) return <></>;
+  //if (openFiles.size == 0) return <></>;
 
   return (
     <div
@@ -207,8 +207,8 @@ export function VerticalFixedTabs({
     const spacing: string = showActBarLabels
       ? "5px"
       : condensed
-      ? "8px" // margin for condensed mode
-      : "12px"; // margin for normal mode
+        ? "8px" // margin for condensed mode
+        : "12px"; // margin for normal mode
 
     const tab = (
       <FileTab

src/packages/frontend/project/page/home-page/button.tsx

@@ -32,6 +32,7 @@ export default function HomePageButton({ project_id, active, width }) {
         fontSize: "24px",
         color: active ? COLORS.ANTD_LINK_BLUE : COLORS.FILE_ICON,
         transitionDuration: "0s",
+        background: "#fafafa",
       }}
       onClick={() => {
         // Showing homepage in flyout only mode, otherwise the files as usual

src/packages/frontend/projects/projects-nav.tsx

@@ -295,6 +295,17 @@ export function ProjectsNav(props: ProjectsNavProps) {
     }
   }
 
+  function renderTabBar0(tabBarProps, DefaultTabBar) {
+    return renderTabBar(tabBarProps, DefaultTabBar, {
+      [activeTopTab]: {
+        border: "1px solid #d3d3d3",
+        borderRadius: "10px",
+        // negative margin to prevent moving when adding the border above.
+        margin: "-1px -1px 0 -1px",
+      },
+    });
+  }
+
   return (
     <div
       style={{
@@ -318,7 +329,7 @@ export function ProjectsNav(props: ProjectsNavProps) {
               actions.set_active_tab(project_id);
             }}
             type={"editable-card"}
-            renderTabBar={renderTabBar}
+            renderTabBar={renderTabBar0}
             items={items}
           />
         </SortableTabs>