disclaimers & styling

src/components/accordions/StopAccordions.tsx

@@ -118,7 +118,9 @@ export function ETAButton(props: {
   return (
     <Link
       to={link}
-      title={props.name ? props.name : t("buttons.busIcon") ?? "View stop ETA"}
+      title={
+        props.name ? props.name : (t("buttons.busIcon") ?? "View stop ETA")
+      }
     >
       <Button
         icon={props.name ? undefined : <VehicleBus16Filled />}

src/components/bookmarks/BookmarkButton.tsx

@@ -34,8 +34,8 @@ export function BookmarkButton(props: StopBookmark) {
     <Button
       title={
         isBookmarked()
-          ? t("buttons.bookmarkDelete") ?? "Remove bookmark"
-          : t("buttons.bookmarkAdd") ?? "Add to bookmark"
+          ? (t("buttons.bookmarkDelete") ?? "Remove bookmark")
+          : (t("buttons.bookmarkAdd") ?? "Add to bookmark")
       }
       icon={isBookmarked() ? <BookmarkOff24Filled /> : <BookmarkAdd24Regular />}
       onClick={checkBookmarkStatus}

src/components/bookmarks/BookmarkCard.tsx

@@ -21,8 +21,8 @@ export function BookmarkCard(props: { id: number }) {
 
   const name =
     item.type === "ttc-subway" && id
-      ? subwayDbSelectors.selectById(store.getState().subwayDb, id)?.stop
-          ?.name ?? item.name
+      ? (subwayDbSelectors.selectById(store.getState().subwayDb, id)?.stop
+          ?.name ?? item.name)
       : item.name;
   return (
     <EtaCard

src/components/eta/BookmarkCardEta.tsx

@@ -25,10 +25,10 @@ export function BookmarkCardEta(props: { item: LineStopEta }) {
 
   const name =
     item.type === "ttc-subway" && props.item.stopTag
-      ? subwayDbSelectors.selectById(
+      ? (subwayDbSelectors.selectById(
           store.getState().subwayDb,
           props.item.stopTag
-        )?.stop?.name ?? props.item.routeName
+        )?.stop?.name ?? props.item.routeName)
       : Array.isArray(props.item.line)
         ? props.item.stopName
         : `${props.item.routeName}

src/components/eta/FavouriteEta.tsx

@@ -111,8 +111,8 @@ export default function FavouriteEta() {
 
         const name =
           item.type === "ttc-subway" && id
-            ? subwayDbSelectors.selectById(store.getState().subwayDb, id)?.stop
-                ?.name ?? item.name
+            ? (subwayDbSelectors.selectById(store.getState().subwayDb, id)?.stop
+                ?.name ?? item.name)
             : item.name;
 
         EtaCards.push(

src/components/nearby/Nearby.tsx

@@ -1,4 +1,5 @@
-import { Button, Spinner, Switch } from "@fluentui/react-components";
+import { Button, Spinner, Switch, Tooltip } from "@fluentui/react-components";
+import { Info16Regular } from "@fluentui/react-icons";
 import { useCallback, useEffect, useState } from "react";
 
 import { store, useAppDispatch } from "../../store/index.js";
@@ -118,6 +119,24 @@ export default function Nearby() {
           onChange={locationModeChange}
           label="Provide my locations on load"
         />
+        <Tooltip
+          content={{
+            children: (
+              <p>
+                Even though we do not send your location to the internet, you
+                still have a choice to only use your location when you want.
+                <br />
+                For convenience, you can provide your location automatically
+                when you load TOBus.ca.
+              </p>
+            ),
+          }}
+          relationship={"label"}
+          mountNode={document.querySelector("#root .fui-FluentProvider")}
+          withArrow
+        >
+          <Info16Regular />
+        </Tooltip>
       </div>
       <NearbyList coordinate={coordinate} />
     </div>

src/index.css

@@ -1,5 +1,11 @@
 @import url("https://fonts.googleapis.com/css2?family=PT+Mono&display=swap");
 
+#root {
+  > div {
+    height: 100%;
+  }
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

src/routes/Home.module.css

@@ -1,3 +1,9 @@
 .hidden {
   display: none;
 }
+
+.button-with-badge span {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+}

src/routes/Home.tsx

@@ -1,4 +1,5 @@
 import {
+  Badge,
   Button,
   SelectTabData,
   SelectTabEvent,
@@ -52,7 +53,9 @@ export default function Home() {
         className="directon-buttons"
         onTabSelect={handleTabClick}
       >
-        <Tab value={"nearby"}>Nearby</Tab>
+        <Tab value={"nearby"} className={style["button-with-badge"]}>
+          Nearby<Badge>Beta</Badge>
+        </Tab>
         <Tab value={"favourites"}>Favourites</Tab>
       </TabList>
       <div className={enabledTab === "nearby" ? "" : style.hidden}>

src/styles/FluentTheme.tsx

@@ -5,13 +5,10 @@ import {
 } from "@fluentui/react-components";
 import { useState } from "react";
 
-import { fluentStyles } from "./fluent";
-
 const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
 export function FluentTheme({ children }: { children: JSX.Element }) {
   const [isDark, setIsDark] = useState(prefersDark);
-  const fluentStyle = fluentStyles();
 
   const toggleTheme = () => {
     setIsDark(!isDark);
@@ -23,10 +20,7 @@ export function FluentTheme({ children }: { children: JSX.Element }) {
     });
 
   return (
-    <FluentProvider
-      className={fluentStyle.fluentProvider}
-      theme={isDark ? webDarkTheme : webLightTheme}
-    >
+    <FluentProvider theme={isDark ? webDarkTheme : webLightTheme}>
       {children}
     </FluentProvider>
   );

src/styles/fluent.ts

@@ -1,9 +1,6 @@
-import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import { makeStyles, shorthands } from "@fluentui/react-components";
 
 export const fluentStyles = makeStyles({
-  fluentProvider: {
-    height: "100%",
-  },
   accordionHeader: {
     ...shorthands.margin("0px", "0px"),
 
@@ -12,9 +9,6 @@ export const fluentStyles = makeStyles({
       paddingLeft: "0px",
     },
   },
-  bottomNav: {
-    backgroundColor: tokens.colorNeutralBackground1,
-  },
   bottomNavButton: {
     flexDirection: "column",
     marginLeft: "auto",
@@ -40,9 +34,6 @@ export const fluentStyles = makeStyles({
       boxShadow: "0px 0px 0px 0px transparent !important",
     },
   },
-  flexGrowContent: {
-    flexGrow: 1,
-  },
   smallRoundNavButton: {
     width: "48px",
     height: "48px",