Final locations updates

client/src/pages/locations/components/location.tsx

@@ -1,4 +1,4 @@
-import { Button, Input } from "antd";
+import { Button, Input, theme } from "antd";
 import type { Identifier, XYCoord } from "dnd-core";
 import { useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
@@ -10,6 +10,8 @@ import { DragItem, ItemTypes, SpoolDragItem } from "../dnd";
 import { EMPTYLOC } from "../functions";
 import { SpoolList } from "./spoolList";
 
+const { useToken } = theme;
+
 export function Location({
   index,
   title,
@@ -31,6 +33,7 @@ export function Location({
   locationSpoolOrder: number[];
   setLocationSpoolOrder: (spoolOrder: number[]) => void;
 }) {
+  const { token } = useToken();
   const t = useTranslate();
   const [editTitle, setEditTitle] = useState(false);
   const [newTitle, setNewTitle] = useState(title);
@@ -133,6 +136,10 @@ export function Location({
 
   const canEditTitle = title != EMPTYLOC;
 
+  const titleStyle = {
+    color: canEditTitle ? undefined : token.colorTextTertiary,
+  };
+
   return (
     <div
       className={"loc-container " + (title != EMPTYLOC ? "grabable" : "")}
@@ -161,6 +168,7 @@ export function Location({
               setNewTitle(title);
               setEditTitle(true);
             }}
+            style={titleStyle}
           >
             {displayTitle}
           </span>

client/src/pages/locations/components/locationContainer.tsx

@@ -176,19 +176,24 @@ export function LocationContainer() {
   };
 
   return (
-    <div className="loc-metacontainer">
-      {containers}
-      <div className="newLocContainer">
-        <Button
-          type="dashed"
-          shape="circle"
-          icon={<PlusOutlined />}
-          size="large"
-          style={{
-            margin: "1em",
-          }}
-          onClick={addNewLocation}
-        />
+    <div>
+      {!isLoading && spoolData.data.length == 0 && (
+        <div className="no-locations">{t("locations.no_locations_help")}</div>
+      )}
+      <div className="loc-metacontainer">
+        {containers}
+        <div className="newLocContainer">
+          <Button
+            type="dashed"
+            shape="circle"
+            icon={<PlusOutlined />}
+            size="large"
+            style={{
+              margin: "1em",
+            }}
+            onClick={addNewLocation}
+          />
+        </div>
       </div>
     </div>
   );

client/src/pages/locations/index.tsx

@@ -1,4 +1,4 @@
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
@@ -11,10 +11,14 @@ import "./locations.css";
 dayjs.extend(utc);
 
 export const Locations: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
   return (
-    <DndProvider backend={HTML5Backend}>
-      <LocationContainer />
-    </DndProvider>
+    <div>
+      <h1>{t("locations.locations")}</h1>
+      <DndProvider backend={HTML5Backend}>
+        <LocationContainer />
+      </DndProvider>
+    </div>
   );
 };