FarmBot · roryaronson · Sep 19, 2025 · Sep 17, 2025 · Sep 17, 2025 · Sep 17, 2025
diff --git a/app/views/dashboard/_common_assets.html.erb b/app/views/dashboard/_common_assets.html.erb
@@ -18,5 +18,3 @@ window.process = {
 <%= render "addons" %>
 <%= javascript_include_tag *@js_assets %>
 <meta content="width=device-width, initial-scale=1" name="viewport">
-<link href="https://fonts.googleapis.com/css?family=Cabin:300,300i,400,400i,700,700i" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua:300,300i,400,400i,700,700i" rel="stylesheet">
diff --git a/app/views/dashboard/demo.html.erb b/app/views/dashboard/demo.html.erb
@@ -38,7 +38,7 @@
 	bottom: 60px;
 	box-shadow: 0 0 15px rgba(0,0,0,0.4);
 	color: #fff;
-	font-family: "Cabin", sans-serif;
+	font-family: "Cabin", "Cabin Fallback", sans-serif;
 	font-size: 25px;
 	font-weight: bold;
 	padding: 15px 30px;

diff --git a/app/views/layouts/dashboard.html.erb b/app/views/layouts/dashboard.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="<%= I18n.locale %>">
   <head>
     <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
     <meta content="width=device-width, initial-scale=1" name="viewport">
@@ -18,8 +18,6 @@
       text-align: center; width: 100%; padding-top: 10%; color: #434343; }
     </style>
     <%= stylesheet_link_tag *@css_assets %>
-    <link href="https://fonts.googleapis.com/css?family=Cabin:300,300i,400,400i,700,700i" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua:300,300i,400,400i,700,700i" rel="stylesheet">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <link rel="apple-touch-icon" href="/images/favicon.png" type="image/png">
     <% manifest_file =

diff --git a/app/views/layouts/mailer.html.erb b/app/views/layouts/mailer.html.erb
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="<%= I18n.locale %>">
   <head>
     <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
   </head>
   <body>
     <%= yield %>
   </body>
-</html>
+</html>
diff --git a/frontend/app.tsx b/frontend/app.tsx
@@ -213,12 +213,14 @@ export class RawApp extends React.Component<AppProps, {}> {
         appState={this.props.appState}
         menuOpen={this.props.menuOpen}
         pings={this.props.pings} />}
-      {syncLoaded && this.props.children}
-      <ErrorBoundary>
-        <React.Suspense>
-          {syncLoaded && <Outlet />}
-        </React.Suspense>
-      </ErrorBoundary>
+      <main id="main-content" tabIndex={-1}>
+        {syncLoaded && this.props.children}
+        <ErrorBoundary>
+          <React.Suspense>
+            {syncLoaded && <Outlet />}
+          </React.Suspense>
+        </ErrorBoundary>
+      </main>
       <div className={"toast-container"}>
         <TourStepContainer
           key={JSON.stringify(this.props.helpState)}

diff --git a/frontend/constants.ts b/frontend/constants.ts
@@ -1491,10 +1491,6 @@ export namespace TourContent {
     same button to UNLOCK the device before resuming execution of any
     commands.`);
 
-  export const ACCOUNT_MENU =
-    trim(`This is the account menu, providing you with links to other pages
-    in the app, and for logging out.`);
-
   export const GETTING_STARTED_END =
     trim(`Thanks for taking the Getting Started Tour! You're now ready to
     dive into the details of each panel and begin planting your first

diff --git a/frontend/css/app/navbar.scss b/frontend/css/app/navbar.scss
@@ -10,8 +10,11 @@
   background: linear-gradient(0deg, transparent, $translucent3 60%, $translucent5), linear-gradient(0deg, transparent 30%, $translucent3);
 }
 
+.skip-nav-link {
+  display: none;
+}
+
 nav {
-  margin-top: 3rem;
   button {
     margin: 1.8rem 1.8rem 0 0;
     font-size: 1.3rem !important;
@@ -177,21 +180,24 @@ nav {
   .nav-coordinates,
   .jobs-button,
   .setup-button,
-  .connectivity-button,
-  .nav-name {
+  .connectivity-button {
+    margin: 0;
     display: flex;
     position: relative;
     gap: 0.5rem;
     align-items: center;
     height: 2.9rem;
     overflow: hidden;
     border-radius: 5px;
+    border: none;
+    cursor: pointer;
+    font-weight: bold;
     padding-left: 0.8rem;
     padding-right: 0.8rem;
     font-weight: bold;
     font-size: 1.1rem;
     line-height: 3rem;
-    color: $light_gray;
+    color: $off_white;
     background: $medium_gray;
     user-select: none;
     &:hover {
@@ -255,6 +261,7 @@ nav {
   .connectivity-button {
     p {
       font-weight: bold;
+      max-width: 17rem;
     }
   }
   .connection-status-popover {
@@ -273,81 +280,13 @@ nav {
   }
 }
 
-.menu-popover {
-  .bp6-popover-content {
-    position: relative;
-    width: 22rem;
-    padding: 0;
-    font-size: 1.2rem;
-    letter-spacing: 1.2px;
-    color: var(--text-color);
-    i {
-      margin-right: 0.8rem;
-    }
-    a:not(.app-version) {
-      display: inline-block;
-      width: 100%;
-      text-transform: uppercase;
-      padding: 0.5rem 1rem;
-    }
-    img {
-      margin-right: 0.8rem;
-    }
-    .app-version {
-      padding: 0.5rem 1rem 0;
-      margin-top: 0.5rem;
-      border-top: 1px solid var(--border-color);
-      label {
-        font-weight: normal;
-      }
-      a {
-        text-align: right;
-        border-radius: 0.5rem;
-      }
-    }
-    .dark-mode-toggle {
-      padding: 0.5rem 1rem;
-      line-height: 1.8rem;
-      label {
-        font-weight: normal;
-      }
-      .fb-button {
-        margin: 0;
-      }
-    }
-  }
-  .bp6-popover-arrow {
-    visibility: hidden;
-  }
-  .fa-user {
-    width: 2.75rem;
-    height: 2.75rem;
-    padding: 0.75rem;
-    border-radius: 5px;
-    &:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-  }
-}
-
-body:has(.app.dark) {
-  .menu-popover {
-    .bp6-popover-content {
-      img {
-        filter: invert(0.75);
-      }
-    }
-  }
-}
-
 body:has(.app.light) {
   .nav-right {
     .time-travel-button,
     .nav-coordinates,
     .jobs-button,
     .setup-button,
-    .connectivity-button,
-    .nav-name {
+    .connectivity-button {
       &.hover {
         background: var(--main-bg);
         color: var(--text-color);
@@ -410,13 +349,6 @@ body:has(.app.light) {
   }
 }
 
-.nav-additional-menu {
-  padding: 0.5rem 0;
-  a:hover {
-    background: var(--secondary-bg);
-  }
-}
-
 .read-only-icon {
   .fa-ban {
     color: $red;

diff --git a/frontend/css/app/static_pages.scss b/frontend/css/app/static_pages.scss
@@ -1,5 +1,6 @@
 @use "../variables" as *;
 @use "sass:color";
+@use "../global/fonts" as *;
 
 .static-page {
   min-height: 100vh;
@@ -9,13 +10,13 @@
   padding: 8rem 2rem;
   h1,
   h2 {
-    font-family: "Cabin", Arial, Helvetica, sans-serif !important;
+    font-family: $cabin !important;
     font-weight: 100 !important;
     color: $white;
     text-shadow: 0 0 25px rgba(0, 0, 0, 0.1), 0 0 25px rgba(0, 0, 0, 0.1);
   }
   h1 {
-    font-family: "Inknut Antiqua" !important;
+    font-family: $inknut !important;
     font-weight: bold !important;
     font-size: 3.4rem;
     line-height: 3.6rem;
@@ -242,7 +243,7 @@
           background: $cyan;
           border-radius: 5px 5px 0 0;
           .btn-title {
-            font-family: "Inknut Antiqua";
+            font-family: $inknut;
             font-weight: bold;
             margin-bottom: 0.5rem !important;
             padding-top: 0.75rem;
@@ -329,7 +330,7 @@
     }
     h1 {
       margin: 0;
-      font-family: "Inknut Antiqua" !important;
+      font-family: $inknut !important;
       font-weight: 600 !important;
     }
   }

diff --git a/frontend/css/app/status_ticker.scss b/frontend/css/app/status_ticker.scss
@@ -2,10 +2,6 @@
 @use "sass:color";
 
 .ticker-list {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
   z-index: 3;
   background: var(--main-bg);
   backdrop-filter: var(--blur);
@@ -98,8 +94,8 @@
 
 // background: linear-gradient(to top, black 0%, transparent 30%);
 .status-ticker-message {
-  display: inline;
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.05rem;
+  overflow: hidden;
   span {
     -webkit-animation: flash 1.5s ease-in;
     animation: flash 1.5s ease-in;

diff --git a/frontend/css/app/toastr.scss b/frontend/css/app/toastr.scss
@@ -1,5 +1,6 @@
 @use "../variables" as *;
 @use "sass:color";
+@use "../global/fonts" as *;
 
 .toast-container {
   display: flex;
@@ -95,7 +96,7 @@
   pointer-events: none;
   font-size: 1.6rem;
   font-weight: bold;
-  font-family: 'Inknut Antiqua', serif;
+  font-family: $inknut;
 }
 
 .toast-message {

diff --git a/frontend/css/farm_designer/farm_designer.scss b/frontend/css/farm_designer/farm_designer.scss
@@ -14,7 +14,7 @@
       }
       &.panel-closed-mobile,
       &.panel-closed {
-        top: 15rem;
+        top: 13rem;
       }
     }
   }
@@ -535,8 +535,8 @@
 }
 
 .garden-map-legend {
-  position: fixed;
-  top: 8rem;
+  position: absolute;
+  top: 7.5rem;
   right: -155px;
   z-index: 3;
   transition: all 0.3s ease;
@@ -628,7 +628,6 @@
     }
     button {
       margin: 0;
-      width: 5rem;
     }
   }
   .move-to-mode {

diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -1,8 +1,9 @@
 @use "../variables" as *;
 @use "sass:color";
+@use "../global/fonts" as *;
 
 .farm-designer-panels {
-  position: fixed;
+  position: absolute;
   top: 7.5rem;
   width: 45rem;
   margin: 1rem;
@@ -305,7 +306,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     width: calc(100% - 75px);
-    font-family: "Cabin", sans-serif;
+    font-family: $cabin;
   }
   .saving-indicator {
     position: absolute;

diff --git a/frontend/css/farm_designer/three_d_garden.scss b/frontend/css/farm_designer/three_d_garden.scss
@@ -1,5 +1,6 @@
 @use "../variables" as *;
 @use "sass:color";
+@use "../global/fonts" as *;
 
 .three-d-garden-loading-container,
 .promo-loading-container {
@@ -26,7 +27,7 @@
 
 .three-d-garden-loading-text,
 .promo-loading-text {
-  font-family: 'Inknut Antiqua', sans-serif;
+  font-family: $inknut;
   font-size: 2rem;
   font-weight: bold;
   color: $off_white;
@@ -131,7 +132,7 @@
 
       .setting-title {
         color: $off_white;
-        font-family: 'Inknut Antiqua';
+        font-family: $inknut;
         text-shadow: 0 0 10px black;
         line-height: 1.8rem;
         text-align: center;
@@ -371,7 +372,7 @@
 
     .title {
       margin: 0;
-      font-family: 'Inknut Antiqua';
+      font-family: $inknut;
       font-size: 3.5rem;
       line-height: 5rem;
       font-weight: bold;
@@ -477,7 +478,7 @@
       font-size: 1rem;
       h2 {
         margin: 0;
-        font-family: 'Inknut Antiqua';
+        font-family: $inknut;
         line-height: 100%;
         font-weight: bold;
       }