ui misc cosmetic issues

src/components/DebugPanel/DebugPanel.module.css

@@ -1,18 +1,30 @@
+@import "../../styles/colors.module.css";
+
 .debugContainer {
   margin-top: 1rem;
-  border-top: 1px solid #e1e8ed;
+  border-top: 1px solid var(--SIGNADOT-NEUTRAL100);
   padding: 1rem;
 }
 
 .debugPanel {
   margin-top: 0.5rem;
-  background-color: #f5f8fa;
+  background-color: var(--SIGNADOT-NEUTRAL50);
+  border-radius: 8px;
+  padding: 1rem;
+  transition: all 0.2s ease;
 }
 
 .toggleButton {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  color: var(--SIGNADOT-NEUTRAL600);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.toggleButton:hover {
+  color: var(--SIGNADOT-NEUTRAL800);
 }
 
 .stateList {
@@ -23,30 +35,36 @@
 }
 
 .stateItem {
-  border: 1px solid #e1e8ed;
-  border-radius: 3px;
-  padding: 0.5rem;
   background-color: white;
+  border-radius: 6px;
+  padding: 0.75rem;
+  transition: all 0.2s ease;
+}
+
+.stateItem:hover {
+  background-color: var(--SIGNADOT-NEUTRAL50);
 }
 
 .stateHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .stateKey {
-  font-weight: 600;
-  color: #182026;
+  font-weight: 500;
+  color: var(--SIGNADOT-NEUTRAL800);
+  font-size: 0.875rem;
 }
 
 .stateValue {
   margin: 0;
-  padding: 0.5rem;
-  background-color: #f5f8fa;
-  border-radius: 3px;
-  font-size: 12px;
+  padding: 0.75rem;
+  background-color: var(--SIGNADOT-NEUTRAL50);
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   max-height: 200px;
   overflow: auto;
 }

src/components/Footer/Footer.module.css

@@ -2,40 +2,56 @@
 
 .container {
   margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .footerContent {
+  width: 100%;
+  padding: 16px 16px 8px 16px;
+  border-top: 1px solid var(--SIGNADOT-BORDER-COLOR);
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 16px;
 }
 
 .links {
   display: flex;
-  justify-content: space-between;
+  gap: 24px;
+  justify-content: center;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--SIGNADOT-NEUTRAL600);
+  text-decoration: none;
+  font-size: 14px;
+  transition: color 0.2s ease;
+}
+
+.link:hover {
+  color: var(--SIGNADOT-BLUE400);
 }
 
 .userInfo {
   color: var(--SIGNADOT-NEUTRAL500);
   font-size: 13px;
   display: flex;
   align-items: center;
-  justify-content: center;
   gap: 4px;
-  padding-top: 8px;
-  border-top: 1px solid var(--SIGNADOT-BORDER-COLOR);
-  margin: 0 auto;
+  opacity: var(--SIGNADOT-OPACITY800);
 }
 
 .logoutLink {
   color: var(--SIGNADOT-NEUTRAL500);
   cursor: pointer;
   text-decoration: none;
-  opacity: var(--SIGNADOT-OPACITY800);
   transition: all 0.2s ease;
 }
 
 .logoutLink:hover {
-  opacity: 1;
-  color: var(--SIGNADOT-NEUTRAL900);
+  color: var(--SIGNADOT-BLUE400);
 }

src/components/Footer/Footer.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { AnchorButton, Section, SectionCard } from "@blueprintjs/core";
-import { FaGithub, FaSlack } from "react-icons/fa";
+import { FaGithub, FaSlack, FaBook } from "react-icons/fa";
 import styles from "./Footer.module.css";
 import { useAuth } from "../../contexts/AuthContext";
 import { useStorage } from "../../contexts/StorageContext/StorageContext";
@@ -15,46 +14,46 @@ const Footer: React.FC = () => {
   };
 
   return (
-    <Section icon="document" className={styles.container}>
-      <SectionCard>
-        <div className={styles.footerContent}>
-          <div className={styles.links}>
-            <AnchorButton
-              href="https://signadotcommunity.slack.com/join/shared_invite/zt-1estxm8pv-qfiaNfiFFCaW~eUlXsVoEQ"
-              target="_blank"
-              minimal
-              icon={<FaSlack />}
-              rel="noopener noreferrer"
-            >
-              Slack
-            </AnchorButton>
-            <AnchorButton
-              href="https://github.com/signadot"
-              target="_blank"
-              minimal
-              icon={<FaGithub />}
-              rel="noopener noreferrer"
-            >
-              GitHub
-            </AnchorButton>
-            <AnchorButton
-              href="https://www.signadot.com/docs/"
-              target="_blank"
-              minimal
-              icon="document"
-              rel="noopener noreferrer"
-            >
-              Documentation
-            </AnchorButton>
-          </div>
-          {authState?.user && (
-            <div className={styles.userInfo}>
-              {authState.user.email || ''} · <a onClick={handleLogout} className={styles.logoutLink}>Log out</a>
-            </div>
-          )}
+    <footer className={styles.container}>
+      <div className={styles.footerContent}>
+        <div className={styles.links}>
+          <a
+            href="https://signadotcommunity.slack.com/join/shared_invite/zt-1estxm8pv-qfiaNfiFFCaW~eUlXsVoEQ"
+            target="_blank"
+            className={styles.link}
+            rel="noopener noreferrer"
+          >
+            <FaSlack />
+            <span>Slack</span>
+          </a>
+          <a
+            href="https://github.com/signadot"
+            target="_blank"
+            className={styles.link}
+            rel="noopener noreferrer"
+          >
+            <FaGithub />
+            <span>GitHub</span>
+          </a>
+          <a
+            href="https://www.signadot.com/docs/"
+            target="_blank"
+            className={styles.link}
+            rel="noopener noreferrer"
+          >
+            <FaBook />
+            <span>Documentation</span>
+          </a>
         </div>
-      </SectionCard>
-    </Section>
+        {authState?.user && (
+          <div className={styles.userInfo}>
+            <span>{authState.user.email || ''}</span>
+            <span>·</span>
+            <a onClick={handleLogout} className={styles.logoutLink}>Log out</a>
+          </div>
+        )}
+      </div>
+    </footer>
   );
 };
 

src/components/Frame/Frame.module.css

@@ -52,6 +52,26 @@
   flex: 1;
 }
 
-.pinned {
+.selectedEntity {
   margin-top: 1rem;
+  min-height: 120px;
+}
+
+.selectedEntityLabel {
+  color: var(--SIGNADOT-NEUTRAL600);
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+.noSelectedContainer {
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.noSelectedMessage {
+  color: var(--SIGNADOT-NEUTRAL600);
+  font-size: 0.875rem;
+  text-align: center;
 }

src/components/Frame/Frame.tsx

@@ -4,7 +4,6 @@ import { RoutingEntity } from "../ListRouteEntries/types";
 import ListRouteEntries from "../ListRouteEntries";
 import { useFetchRoutingEntries } from "../ListRouteEntries/hooks";
 import PinnedRouteGroup from "../PinnedRouteGroup";
-import { Section, SectionCard } from "@blueprintjs/core";
 import Footer from "../Footer";
 import Settings from "../Settings/Settings";
 import { useAuth } from "../../contexts/AuthContext";
@@ -44,14 +43,27 @@ const Home = () => {
 
   return (
     <>
-      {pinnedRoutingEntityData && (
-        <PinnedRouteGroup routingEntity={pinnedRoutingEntityData} onRemove={() => setCurrentRoutingKey(undefined)} />
-      )}
       <ListRouteEntries
         routingEntities={routingEntities}
         setUserSelectedRoutingEntity={(e) => setCurrentRoutingKey(e.routingKey)}
         orgName={authState?.org.name}
       />
+      <div className={styles.selectedEntity}>
+        {pinnedRoutingEntityData ? (
+          <PinnedRouteGroup
+            routingEntity={pinnedRoutingEntityData}
+            onRemove={() => {
+              setCurrentRoutingKey(undefined);
+            }}
+          />
+        ) : (
+          <div className={styles.noSelectedContainer}>
+            <div className={styles.noSelectedMessage}>
+              No Sandbox or RouteGroup selected
+            </div>
+          </div>
+        )}
+      </div>
       <Footer />
     </>
   );