chore(rxPage): fix layout

libremesh · Mar 25, 2024 · 2675efc · 2675efc
1 parent 9e93ec0
commit 2675efc
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 59 deletions.
diff --git a/plugins/lime-plugin-rx/src/rxPage.tsx b/plugins/lime-plugin-rx/src/rxPage.tsx
@@ -10,7 +10,7 @@ const Page = ({}) => {
         <Fragment>
             <div
                 className={
-                    "my-0 flex flex-col justify-between items-center -translate-y-6 container container-padded"
+                    "flex flex-col items-center -translate-y-6 w-full max-w-screen-md mx-auto"
                 }
             >
                 <InternetPath />

diff --git a/plugins/lime-plugin-rx/src/sections/alignment.tsx b/plugins/lime-plugin-rx/src/sections/alignment.tsx
@@ -19,10 +19,11 @@ function stripIface(hostIface) {
 }
 
 export const AlignmentCard = ({ status }: { status: StatusResponse }) => {
+    const hasMostActive = !!status.most_active?.iface;
     const { data: bathost } = useBatHost(
         status.most_active && status.most_active.station_mac,
         status.most_active && status.most_active.iface,
-        { enabled: !!status.most_active }
+        { enabled: hasMostActive }
     );
 
     const traffic = Math.round(
@@ -31,51 +32,61 @@ export const AlignmentCard = ({ status }: { status: StatusResponse }) => {
             1024
     );
     return (
-        <div className={"flex flex-row mt-6"}>
-            <div className={"flex-1 text-7xl text-center text-primary"}>
-                <SignalColor
-                    className={"font-bold"}
-                    signal={+status.most_active.signal}
-                />
-                <div className={"text-3xl"}>
-                    {status.most_active?.chains &&
-                        status.most_active.chains.map((chain, i) => (
-                            <span key={i}>
-                                <SignalColor
-                                    className={"font-bold"}
-                                    signal={chain}
-                                />
-                                {i !== status.most_active.chains.length - 1 &&
-                                    " / "}
+        <div className={"flex flex-row mt-6 justify-between md:px-8"}>
+            {hasMostActive && (
+                <>
+                    <div className={"flex-1 text-7xl text-center text-primary"}>
+                        <SignalColor
+                            className={"font-bold"}
+                            signal={+status.most_active.signal}
+                        />
+                        <div className={"text-3xl"}>
+                            {status.most_active?.chains &&
+                                status.most_active.chains.map((chain, i) => (
+                                    <span key={i}>
+                                        <SignalColor
+                                            className={"font-bold"}
+                                            signal={chain}
+                                        />
+                                        {i !==
+                                            status.most_active.chains.length -
+                                                1 && " / "}
+                                    </span>
+                                ))}
+                        </div>
+                    </div>
+                    <div className={"flex-1 flex flex-col text-xl "}>
+                        <div className={"font-bold"}>
+                            <Trans>Most active link</Trans>
+                        </div>
+                        <div className={"text-primary font-bold"}>
+                            {bathost && bathost.hostname ? (
+                                <span>{stripIface(bathost.hostname)}</span>
+                            ) : (
+                                <span className="withLoadingEllipsis">
+                                    <Trans>Fetching name</Trans>
+                                </span>
+                            )}
+                        </div>
+                        <div className={""}>
+                            <Trans>Interface: </Trans>
+                            <span className={"font-bold"}>
+                                {status.most_active.iface}
                             </span>
-                        ))}
+                        </div>
+                        <div className={""}>
+                            <Trans>Traffic: </Trans>
+                            <span className={"font-bold"}> {traffic}MB/s</span>
+                        </div>
+                    </div>
+                </>
+            )}
+            {!hasMostActive && (
+                <div className={"flex-1 flex justify-center"}>
+                    No most active iface
                 </div>
-            </div>
-            <div className={"flex-1 flex flex-col text-xl "}>
-                <div className={"font-bold"}>
-                    <Trans>Most active link</Trans>
-                </div>
-                <div className={"text-primary font-bold"}>
-                    {bathost && bathost.hostname ? (
-                        <span>{stripIface(bathost.hostname)}</span>
-                    ) : (
-                        <span className="withLoadingEllipsis">
-                            <Trans>Fetching name</Trans>
-                        </span>
-                    )}
-                </div>
-                <div className={""}>
-                    <Trans>Interface: </Trans>
-                    <span className={"font-bold"}>
-                        {status.most_active.iface}
-                    </span>
-                </div>
-                <div className={""}>
-                    <Trans>Traffic: </Trans>
-                    <span className={"font-bold"}> {traffic}MB/s</span>
-                </div>
-            </div>
-            <div className={"flex-1 flex justify-center"}>
+            )}
+            <div className={"flex justify-center"}>
                 <Button size={"lg"} color={"secondary"} href={"#/align"}>
                     <Trans>
                         Check
@@ -98,18 +109,16 @@ export const Alignment = () => {
             }
         >
             <Section>
-                <div>
-                    <SectionTitle
-                        icon={<AlignIcon className={IconsClassName} />}
-                    >
-                        <Trans>Your Alignment</Trans>
-                    </SectionTitle>
-                    {isLoading ? (
-                        <span>Loading...</span>
-                    ) : (
-                        <AlignmentCard status={status} />
-                    )}
-                </div>
+                <SectionTitle icon={<AlignIcon className={IconsClassName} />}>
+                    <Trans>Your Alignment</Trans>
+                </SectionTitle>
+                {isLoading ? (
+                    <div className={"flex-1 flex justify-center"}>
+                        Loading...
+                    </div>
+                ) : (
+                    <AlignmentCard status={status} />
+                )}
             </Section>
         </div>
     );

diff --git a/plugins/lime-plugin-rx/src/sections/internetPath.tsx b/plugins/lime-plugin-rx/src/sections/internetPath.tsx
@@ -76,7 +76,7 @@ export const InternetPath = () => {
     let pathComponent = (
         <div
             className={
-                "flex-1 full flex flex-column text-center text-lg text-disabled justify-content-center align-items-center mt-5 gap-4"
+                "flex-1 flex flex-column text-center text-lg text-disabled justify-content-center align-items-center mt-5 gap-4"
             }
         >
             <Loading />
@@ -90,7 +90,7 @@ export const InternetPath = () => {
         pathComponent = (
             <div
                 className={
-                    "flex-1 full flex flex-column text-center text-lg text-disabled justify-content-center align-items-center mt-5 gap-4"
+                    "flex-1 flex flex-column text-center text-lg text-disabled justify-content-center align-items-center mt-5 gap-4"
                 }
             >
                 <GlobeIcon