feat(insights): responsive layouts and components

apps/insights/.env.development

@@ -0,0 +1 @@
+DISABLE_ACCESSIBILITY_REPORTING=true

apps/insights/.gitignore

@@ -1 +1,2 @@
 .env*.local
+.env*.development

apps/insights/src/components/CardTitle/index.module.scss

@@ -0,0 +1,25 @@
+@use "@pythnetwork/component-library/theme";
+
+.cardTitle {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: theme.spacing(3);
+    align-items: center;
+    justify-content: flex-start;
+    .title {
+        color: theme.color("heading");
+        display: flex;
+        flex-flow: row nowrap;
+        gap: theme.spacing(3);
+        align-items: center;
+        @include theme.text("base", "semibold");
+        @include theme.breakpoint("md") {
+            @include theme.text("lg", "semibold");
+        }
+    }
+    .icon {
+        font-size: theme.spacing(6);
+        height: theme.spacing(6);
+        color: theme.color("button", "primary", "background", "normal");
+    }
+}

apps/insights/src/components/CardTitle/index.tsx

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import type { ComponentProps, ReactNode } from "react";
+
+import styles from "./index.module.scss";
+
+type CardTitleProps = {
+    children: ReactNode;
+    icon?: ReactNode | undefined;
+    badge?: ReactNode;
+} & ComponentProps<"div">;
+
+export const CardTitle = ({ children, icon, badge, ...props }: CardTitleProps) => {
+    return (
+        <div className={clsx(styles.cardTitle, props.className)} {...props}>
+            {icon && <div className={styles.icon}>{icon}</div>}
+            <h2 className={styles.title}>{children}</h2>
+            {badge}
+        </div>
+    )
+}

apps/insights/src/components/CopyButton/index.tsx

@@ -27,7 +27,6 @@ export const CopyButton = ({ text, children, className, ...props }: Props) => {
   const [isCopied, setIsCopied] = useState(false);
   const logger = useLogger();
   const copy = useCallback(() => {
-    // eslint-disable-next-line n/no-unsupported-features/node-builtins
     navigator.clipboard
       .writeText(text)
       .then(() => {

apps/insights/src/components/MobileMenu/mobile-menu.module.scss

@@ -0,0 +1,54 @@
+@use "@pythnetwork/component-library/theme";
+
+.mobileMenuTrigger {
+  display: block;
+
+  @include theme.breakpoint("md") {
+    display: none;
+  }
+}
+
+.mobileMenuOverlay {
+  background: rgb(0 0 0 / 40%);
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+}
+
+.mobileMenuContainer {
+  border-top-left-radius: theme.border-radius("2xl");
+  border-top-right-radius: theme.border-radius("2xl");
+  background: theme.color("background", "modal");
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: theme.spacing(4);
+}
+
+.mobileMenuHandle {
+  background: theme.color("background", "secondary");
+  width: 33%;
+  height: 6px;
+  border-radius: theme.border-radius("full");
+  align-self: center;
+}
+
+.mobileThemeSwitcher {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mobileThemeSwitcherFeedback {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: theme.spacing(3);
+  text-transform: capitalize;
+  font-weight: theme.font-weight("medium");
+}

apps/insights/src/components/MobileMenu/mobile-menu.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { List } from "@phosphor-icons/react/dist/ssr/List";
+import { Button } from "@pythnetwork/component-library/Button";
+import clsx from "clsx";
+import { useState, type ComponentProps } from "react";
+
+import styles from "./mobile-menu.module.scss";
+
+export const MobileMenu = ({ className, ...props }: ComponentProps<"div">) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className={clsx(styles.mobileMenuTrigger, className)} {...props}>
+      <Button
+        variant="ghost"
+        size="sm"
+        afterIcon={List}
+        rounded
+        onPress={toggleMenu}
+      >
+        Menu
+      </Button>
+    </div>
+  );
+};

apps/insights/src/components/MobileNavigation/mobile-navigation.module.scss

@@ -0,0 +1,12 @@
+@use "@pythnetwork/component-library/theme";
+
+.mobileNavigation {
+  display: block;
+  padding: theme.spacing(2);
+  background: theme.color("background", "primary");
+  border-top: 1px solid theme.color("background", "secondary");
+
+  @include theme.breakpoint("md") {
+    display: none;
+  }
+}

apps/insights/src/components/MobileNavigation/mobile-navigation.tsx

@@ -0,0 +1,9 @@
+import styles from "./mobile-navigation.module.scss";
+import { MainNavTabs } from "../Root/tabs";
+export const MobileNavigation = () => {
+  return (
+    <div className={styles.mobileNavigation}>
+      <MainNavTabs />
+    </div>
+  );
+};

apps/insights/src/components/Overview/index.tsx

@@ -1,7 +1,9 @@
-import styles from "./index.module.scss";
+import { Card } from "@pythnetwork/component-library/Card";
+
+import { PageLayout } from "../PageLayout/page-layout";
 
 export const Overview = () => (
-  <div className={styles.overview}>
-    <h1 className={styles.header}>Overview</h1>
-  </div>
+  <PageLayout title={"Overview"}>
+    <Card title="Overview"></Card>
+  </PageLayout>
 );

apps/insights/src/components/PageLayout/page-layout.module.scss

@@ -0,0 +1,24 @@
+@use "@pythnetwork/component-library/theme";
+
+.pageLayout {
+    @include theme.max-width;
+    display: flex;
+    gap: theme.spacing(6);
+    flex-direction: column;
+
+    .pageTitleContainer {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: theme.spacing(3);
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+
+        .pageTitle {
+            @include theme.h3;
+            color: theme.color("heading");
+            font-weight: theme.font-weight("semibold");
+            flex-grow: 1;
+        }
+    }
+}

apps/insights/src/components/PageLayout/page-layout.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+import styles from "./page-layout.module.scss";
+
+export const PageLayout = ({ children, title, actions }: { children: ReactNode; title: ReactNode, actions?: ReactNode }) => {
+    return (
+        <div className={styles.pageLayout}>
+            <div className={styles.pageTitleContainer}>
+                <h1 className={styles.pageTitle}>{title}</h1>
+                {actions && <div className={styles.actions}>{actions}</div>}
+            </div>
+            {children}
+        </div>
+    )
+}

apps/insights/src/components/PriceFeedTag/index.module.scss

@@ -1,8 +1,8 @@
 @use "@pythnetwork/component-library/theme";
 
 .priceFeedTag {
-  display: flex;
-  flex-flow: row nowrap;
+  display: grid;
+  grid-template-columns: theme.spacing(10) 1fr;
   gap: theme.spacing(3);
   align-items: center;
 
@@ -13,6 +13,8 @@
   }
 
   .nameAndDescription {
+    width: 100%;
+    position: relative;
     display: flex;
     flex-flow: column nowrap;
     gap: theme.spacing(1.5);
@@ -52,6 +54,8 @@
       color: theme.color("muted");
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap; // Add this line
+      width: 100%;
 
       @include theme.text("xs", "medium");
     }

apps/insights/src/components/PriceFeeds/index.module.scss

@@ -1,66 +1,53 @@
 @use "@pythnetwork/component-library/theme";
 
-.priceFeeds {
-  @include theme.max-width;
+.toolbarContainer {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: theme.spacing(2);
+}
+
+.feedKey {
+  margin: 0 -#{theme.button-padding("xs", true)};
+}
 
-  .header {
-    @include theme.h3;
+.featuredFeeds {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
 
-    color: theme.color("heading");
-    font-weight: theme.font-weight("semibold");
+  @include theme.breakpoint("md") {
+    flex-flow: row nowrap;
+
+    & > * {
+      flex: 1 1 0px;
+      width: 0;
+    }
   }
+}
+
+.featuredFeeds {
+  gap: theme.spacing(1);
 
-  .body {
+  .feedCardContents {
     display: flex;
     flex-flow: column nowrap;
+    justify-content: space-between;
+    align-items: stretch;
+    padding: theme.spacing(3);
     gap: theme.spacing(6);
-    margin-top: theme.spacing(6);
-
-    .feedKey {
-      margin: 0 -#{theme.button-padding("xs", true)};
-    }
 
-    .featuredFeeds,
-    .stats {
+    .prices {
       display: flex;
       flex-flow: row nowrap;
+      justify-content: space-between;
       align-items: center;
+      color: theme.color("heading");
+      font-weight: theme.font-weight("medium");
+      line-height: 1;
+      font-size: theme.font-size("base");
 
-      & > * {
-        flex: 1 1 0px;
-        width: 0;
-      }
-    }
-
-    .stats {
-      gap: theme.spacing(6);
-    }
-
-    .featuredFeeds {
-      gap: theme.spacing(1);
-
-      .feedCardContents {
-        display: flex;
-        flex-flow: column nowrap;
-        justify-content: space-between;
-        align-items: stretch;
-        padding: theme.spacing(3);
-        gap: theme.spacing(6);
-
-        .prices {
-          display: flex;
-          flex-flow: row nowrap;
-          justify-content: space-between;
-          align-items: center;
-          color: theme.color("heading");
-          font-weight: theme.font-weight("medium");
-          line-height: 1;
-          font-size: theme.font-size("base");
-
-          .changePercent {
-            font-size: theme.font-size("sm");
-          }
-        }
+      .changePercent {
+        font-size: theme.font-size("sm");
       }
     }
   }