[explorer] remove back button from internal pages and style fixes

explorer_frontend/src/features/code/code-toolbar/CodeToolbar.tsx

@@ -1,6 +1,6 @@
 import type { FC, ReactNode } from "react";
 import { useStyletron } from "styletron-react";
-import { BackRouterNavigationButton, useMobile } from "../../shared";
+import { useMobile } from "../../shared";
 import { CompilerVersionButton } from "./CompilerVersionButton.tsx";
 import { HyperlinkButton } from "./HyperlinkButton";
 import { OpenProjectButton } from "./OpenProjectButton.tsx";
@@ -25,17 +25,6 @@ export const CodeToolbar: FC<CodeToolbarProps> = ({ disabled, extraToolbarButton
         flexGrow: 1,
       })}
     >
-      {!isMobile && (
-        <BackRouterNavigationButton
-          overrides={{
-            Root: {
-              style: {
-                marginRight: "auto",
-              },
-            },
-          }}
-        />
-      )}
       <QuestionButton />
       <HyperlinkButton disabled={disabled} />
       {extraToolbarButton === undefined && (

explorer_frontend/src/features/shared/components/InternalPageContainer.tsx

@@ -0,0 +1,24 @@
+import type { FC, ReactNode } from "react";
+import { useStyletron } from "styletron-react";
+import { useMobile } from "../hooks/useMobile";
+
+type InternalPageContainerProps = {
+  children: ReactNode;
+};
+
+export const InternalPageContainer: FC<InternalPageContainerProps> = ({ children }) => {
+  const [css] = useStyletron();
+  const [isMobile] = useMobile();
+
+  return (
+    <div
+      className={css({
+        gridColumn: "1 / 4",
+        paddingLeft: isMobile ? "0" : "32px",
+        paddingRight: isMobile ? "0" : "32px",
+      })}
+    >
+      {children}
+    </div>
+  );
+};

explorer_frontend/src/features/shared/components/Sidebar/Navigation.tsx

@@ -13,7 +13,6 @@ import { useUnit } from "effector-react";
 import { playgroundRoute } from "../../../routing";
 import { explorerRoute } from "../../../routing/routes/explorerRoute";
 import { tutorialWithUrlStringRoute } from "../../../routing/routes/tutorialRoute";
-import { BackRouterNavigationButton } from "../BackRouterNavigationButton";
 
 const menuOverrides: MenuOverrides = {
   List: {
@@ -74,9 +73,5 @@ export const Navigation = () => {
     },
   ];
 
-  if (!isMainPage) {
-    return <BackRouterNavigationButton />;
-  }
-
   return <Menu items={items} size={MENU_SIZE.small} overrides={menuOverrides} />;
 };

explorer_frontend/src/features/shared/index.ts

@@ -7,7 +7,6 @@ export { Layout } from "./components/Layout";
 export { Card } from "./components/Card";
 export { StyledList } from "./components/StyledList";
 export { OverflowEllipsis } from "./components/OverflowEllipsis";
-export { SidebarWithBackLink } from "./components/SidebarWithBackLink";
 export { Space } from "./components/Space";
 export { Sidebar } from "./components/Sidebar";
 export { Heading } from "./components/Heading";
@@ -21,7 +20,7 @@ export { ClearIcon } from "./components/ClearIcon";
 export { HyperlinkIcon } from "./components/HyperlinkIcon";
 export { QuestionIcon } from "./components/QuestionIcon";
 export { ArrowUpRightIcon } from "./components/ArrowUpRightIcon";
-export { BackRouterNavigationButton } from "./components/BackRouterNavigationButton";
+export { InternalPageContainer } from "./components/InternalPageContainer";
 export * from "./components/Popover";
 export * from "./utils/age";
 export * from "./utils/convert";

explorer_frontend/src/features/transaction/components/Transaction.tsx

@@ -53,11 +53,6 @@ export const Transaction = () => {
         flexDirection: "column",
         flexWrap: "nowrap",
         width: "100%",
-        position: "absolute",
-        left: "0",
-        right: "0",
-        paddingLeft: "48px",
-        paddingRight: "48px",
       })}
     >
       <HeadingXLarge className={css({ marginBottom: SPACE[32] })}>Transaction</HeadingXLarge>

explorer_frontend/src/pages/address/AddressPage.tsx

@@ -5,8 +5,8 @@ import { type Store, combine } from "effector";
 import { useUnit } from "effector-react";
 import { AccountInfo } from "../../features/account";
 import { addressRoute, addressTransactionsRoute } from "../../features/routing";
-import { explorerRoute } from "../../features/routing/routes/explorerRoute";
-import { Layout, Meta, SidebarWithBackLink } from "../../features/shared";
+import { Layout, Meta } from "../../features/shared";
+import { InternalPageContainer } from "../../features/shared";
 import { TransactionList } from "../../features/transaction-list";
 
 const $routes: Store<[{ address: string }, string]> = combine(
@@ -30,15 +30,9 @@ export const AddressPage = () => {
   const [css] = useStyletron();
 
   return (
-    <Layout sidebar={<SidebarWithBackLink to={explorerRoute} />}>
+    <Layout>
       <Meta title={`Address ${params.address}`} description="zkSharding for Ethereum" />
-      <div
-        className={css({
-          display: "grid",
-          gridTemplateColumns: "1fr",
-          width: "100%",
-        })}
-      >
+      <InternalPageContainer>
         <HeadingXLarge className={css({ marginBottom: SPACE[32], wordBreak: "break-word" })}>
           Account {params.address}
         </HeadingXLarge>
@@ -66,7 +60,7 @@ export const AddressPage = () => {
             <TransactionList type="address" identifier={params.address} view="incoming" />
           </Tab>
         </Tabs>
-      </div>
+      </InternalPageContainer>
     </Layout>
   );
 };

explorer_frontend/src/pages/block/BlockPage.tsx

@@ -19,10 +19,9 @@ import { useStore } from "effector-react";
 import { BlockInfo } from "../../features/block/components/BlockInfo";
 import { $block } from "../../features/block/models/model";
 import { blockDetailsRoute, blockRoute } from "../../features/routing/routes/blockRoute";
-import { explorerRoute } from "../../features/routing/routes/explorerRoute";
 import { Meta, formatShard, useMobile } from "../../features/shared";
+import { InternalPageContainer } from "../../features/shared";
 import { Layout } from "../../features/shared/components/Layout";
-import { SidebarWithBackLink } from "../../features/shared/components/SidebarWithBackLink";
 import { TransactionList } from "../../features/transaction-list";
 
 const secondary = TAB_KIND.secondary;
@@ -60,15 +59,9 @@ export const BlockPage = () => {
     alignItems: "center",
   });
   return (
-    <Layout sidebar={<SidebarWithBackLink to={explorerRoute} />}>
+    <Layout>
       <Meta title="Block" description="zkSharding for Ethereum" />
-      <div
-        className={css({
-          display: "grid",
-          gridTemplateColumns: "1fr",
-          width: "100%",
-        })}
-      >
+      <InternalPageContainer>
         <div
           className={css({
             display: "flex",
@@ -182,7 +175,7 @@ export const BlockPage = () => {
             />
           </Tab>
         </Tabs>
-      </div>
+      </InternalPageContainer>
     </Layout>
   );
 };

explorer_frontend/src/pages/transaction/TransactionPage.tsx

@@ -1,23 +1,15 @@
-import { useStyletron } from "baseui";
 import { Meta } from "../../features/shared";
+import { InternalPageContainer } from "../../features/shared/components/InternalPageContainer";
 import { Layout } from "../../features/shared/components/Layout";
 import { Transaction } from "../../features/transaction";
 
 const TransactionPage = () => {
-  const [css] = useStyletron();
   return (
     <Layout>
-      <div
-        className={css({
-          display: "flex",
-          flexDirection: "column",
-          maxWidth: "100%",
-          width: "100%",
-        })}
-      >
+      <InternalPageContainer>
         <Meta title="Transaction" description="zkSharding for Ethereum" />
         <Transaction />
-      </div>
+      </InternalPageContainer>
     </Layout>
   );
 };