fix(fe): remove padding in the main page

andrewinci · Nov 4, 2022 · 7066e7f · 7066e7f
1 parent 4ef8911
commit 7066e7f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 36 deletions.
diff --git a/src/components/text.tsx b/src/components/text.tsx
@@ -1,15 +1,29 @@
 import styled from "@emotion/styled";
-import { Stack, Title, Text } from "@mantine/core";
+import { Stack, Title, Text, Group, Divider } from "@mantine/core";
 
 export const SingleLineTitle = styled(Title)`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
 
-export const PageHeader = ({ title, subtitle }: { title: string; subtitle: string }) => (
-  <Stack spacing={0}>
-    <SingleLineTitle size={19}>{title}</SingleLineTitle>
-    <Text size={13}>{subtitle}</Text>
-  </Stack>
+export const PageHeader = ({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  children?: React.ReactNode;
+}) => (
+  <>
+    <Group mt={13} align={"center"} position={"apart"} noWrap>
+      <Stack spacing={0}>
+        <SingleLineTitle size={19}>{title}</SingleLineTitle>
+        <Text size={13}>{subtitle}</Text>
+      </Stack>
+      {children}
+    </Group>
+    <Divider my={13} />
+  </>
 );
diff --git a/src/main.tsx b/src/main.tsx
@@ -35,8 +35,8 @@ const App = () => {
                 main: {
                   backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0],
                   paddingRight: 0,
-                  // paddingTop: 0 //todo
-                  //paddingBottom: 0,
+                  paddingTop: 0,
+                  paddingBottom: 0,
                 },
               })}>
               <Routing />

diff --git a/src/pages/common/item-list.tsx b/src/pages/common/item-list.tsx
@@ -1,17 +1,4 @@
-import {
-  Container,
-  Divider,
-  Group,
-  NavLink,
-  Loader,
-  Center,
-  ActionIcon,
-  Tooltip,
-  Text,
-  Tabs,
-  Badge,
-  Grid,
-} from "@mantine/core";
+import { Container, Group, NavLink, Loader, Center, ActionIcon, Tooltip, Text, Tabs, Badge, Grid } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 import { IconChevronRight, IconClock, IconList, IconPlus, IconRefresh, IconStar } from "@tabler/icons";
 import { useEffect, useMemo, useState } from "react";
@@ -146,8 +133,7 @@ export const ItemList = (props: ItemListProps) => {
 
   return (
     <Container>
-      <Group align={"center"} position={"apart"}>
-        <PageHeader title={title} subtitle={`Total: ${props.items.length}`} />
+      <PageHeader title={title} subtitle={`Total: ${props.items.length}`}>
         <SearchInput
           placeholder={userSettings.useRegex ? "Search (regex)" : "Search"}
           value={state.search}
@@ -165,8 +151,7 @@ export const ItemList = (props: ItemListProps) => {
             </ActionIcon>
           </Tooltip>
         </Group>
-      </Group>
-      <Divider mt={10} />
+      </PageHeader>
       <Tabs mt={10} variant="pills" defaultValue="all">
         <Tabs.List grow>
           <TabHeader title="All" icon="all" count={props.items.length} filtered={filteredItems.all.length} />

diff --git a/src/pages/topics/topic.tsx b/src/pages/topics/topic.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Button, Center, Container, Divider, Group, Loader, Tooltip, Text } from "@mantine/core";
+import { ActionIcon, Badge, Button, Center, Container, Group, Loader, Tooltip, Text } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons";
 import { RecordsList } from "./record-list";
 import { getConsumerState, stopConsumer } from "../../tauri/consumer";
@@ -45,20 +45,17 @@ export const Topic = ({ clusterId, topicName }: { clusterId: string; topicName:
       <Allotment vertical>
         <Allotment.Pane minSize={300}>
           <Container style={{ maxWidth: "100%" }}>
-            <Group noWrap style={{ maxHeight: 50 }} position={"apart"}>
-              <PageHeader
-                title={topicName}
-                subtitle={`Estimated Records: ${estimatedRecord ?? "..."}, Cleanup policy: ${
-                  topicInfo?.cleanupPolicy ?? "..."
-                }, Partitions: ${topicInfo?.partitionCount ?? "..."}`}
-              />
+            <PageHeader
+              title={topicName}
+              subtitle={`Estimated Records: ${estimatedRecord ?? "..."}, Cleanup policy: ${
+                topicInfo?.cleanupPolicy ?? "..."
+              }, Partitions: ${topicInfo?.partitionCount ?? "..."}`}>
               <Tooltip position="bottom" label="Topic info">
                 <ActionIcon>
                   <IconInfoCircle />
                 </ActionIcon>
               </Tooltip>
-            </Group>
-            <Divider my={10} />
+            </PageHeader>
             {isLoading && (
               <Center mt={10}>
                 <Loader />