Merge pull request #274 from rcarteraz/add-footer

src/App.tsx

@@ -5,6 +5,7 @@ import { DeviceSelector } from "@components/DeviceSelector.js";
 import { DialogManager } from "@components/Dialog/DialogManager.js";
 import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.js";
 import { Toaster } from "@components/Toaster.js";
+import Footer from "@components/UI/Footer.js";
 import { ThemeController } from "@components/generic/ThemeController.js";
 import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
@@ -40,7 +41,10 @@ export const App = (): JSX.Element => {
                     <PageRouter />
                   </div>
                 ) : (
+                  <>
                     <Dashboard />
+                    <Footer />
+                  </>
                 )}
               </div>
             </div>

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -68,7 +68,7 @@ export const ChannelChat = ({
           )}
         </div>
       </div>
-      <div className="p-3">
+      <div className="pl-3 pr-3 pt-3 pb-1">
         <MessageInput to={to} channel={channel} />
       </div>
     </div>

src/components/PageLayout.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@app/core/utils/cn.js";
 import { AlignLeftIcon, type LucideIcon } from "lucide-react";
+import Footer from "./UI/Footer";
 
 export interface PageLayoutProps {
   label: string;
@@ -18,6 +19,7 @@ export const PageLayout = ({
   children,
 }: PageLayoutProps): JSX.Element => {
   return (
+    <>
       <div className="relative flex h-full w-full flex-col">
         <div className="flex h-14 shrink-0 border-b-[0.5px] border-slate-300 dark:border-slate-700 md:h-16 md:px-4">
           <button
@@ -47,11 +49,13 @@ export const PageLayout = ({
         <div
           className={cn(
             "flex h-full w-full flex-col overflow-y-auto",
-          !noPadding && "p-3",
+            !noPadding && "pl-3 pr-3 ",
           )}
         >
           {children}
+          <Footer />
         </div>
       </div>
+    </>
   );
 };

src/components/UI/Footer.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
+
+const Footer = React.forwardRef<HTMLElement, FooterProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <footer
+        className={`flex flex- justify-center p-2 ${className}`}
+        style={{
+          backgroundColor: "var(--backgroundPrimary)",
+          color: "var(--textPrimary)",
+        }}
+      >
+        <p>
+          <a
+            href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss"
+            className="hover:underline"
+            style={{ color: "var(--link)" }}
+          >
+            Powered by ▲ Vercel
+          </a>{" "}
+          | Meshtastic® is a registered trademark of Meshtastic LLC. |{" "}
+          <a
+            href="https://meshtastic.org/docs/legal"
+            className="hover:underline"
+            style={{ color: "var(--link)" }}
+          >
+            Legal Information
+          </a>
+        </p>
+      </footer>
+    );
+  },
+);
+
+export default Footer;

src/components/UI/Tabs.tsx

@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
+      "inline-flex flex-wrap items-center rounded-md bg-slate-100 p-1 mt-2 dark:bg-slate-800",
       className,
     )}
     {...props}

src/pages/Dashboard/index.tsx

@@ -21,6 +21,7 @@ export const Dashboard = () => {
   const devices = useMemo(() => getDevices(), [getDevices]);
 
   return (
+    <>
       <div className="flex flex-col gap-3 p-3">
         <div className="flex items-center justify-between">
           <div className="space-y-1">
@@ -95,5 +96,6 @@ export const Dashboard = () => {
           )}
         </div>
       </div>
+    </>
   );
 };

src/pages/Map.tsx

@@ -87,6 +87,7 @@ export const MapPage = (): JSX.Element => {
           ))}
         </SidebarSection>
       </Sidebar>
+      <div className="flex flex-col flex-grow">
         <PageLayout
           label="Map"
           noPadding={true}
@@ -189,6 +190,7 @@ export const MapPage = (): JSX.Element => {
             })}
           </MapGl>
         </PageLayout>
+      </div>
     </>
   );
 };

src/pages/Messages.tsx

@@ -67,6 +67,7 @@ export const MessagesPage = (): JSX.Element => {
           ))}
         </SidebarSection>
       </Sidebar>
+      <div className="flex flex-col flex-grow">
         <PageLayout
           label={`Messages: ${
             chatType === "broadcast" && currentChannel
@@ -121,6 +122,7 @@ export const MessagesPage = (): JSX.Element => {
               ),
           )}
         </PageLayout>
+      </div>
     </>
   );
 };

src/pages/Nodes.tsx

@@ -1,3 +1,4 @@
+import Footer from "@app/components/UI/Footer";
 import { useAppStore } from "@app/core/stores/appStore";
 import { Sidebar } from "@components/Sidebar.js";
 import { Button } from "@components/UI/Button.js";
@@ -27,7 +28,8 @@ export const NodesPage = (): JSX.Element => {
   return (
     <>
       <Sidebar />
-      <div className="w-full overflow-y-auto">
+      <div className="flex flex-col w-full">
+        <div className="overflow-y-auto h-full">
           <Table
             headings={[
               { title: "", type: "blank", sortable: false },
@@ -95,6 +97,8 @@ export const NodesPage = (): JSX.Element => {
             ])}
           />
         </div>
+        <Footer />
+      </div>
     </>
   );
 };