Added ability to set colours for entities

Author: stefanwittwer

Diff for: src/Widget.tsx

@@ -14,6 +14,7 @@ const {
 const Widget = () => {
   const [title, setTitle] = useSyncedState("title", "")
   const [description, setDescription] = useSyncedState("description", "")
+  const [colour, setColour] = useSyncedState<string>("colour", EntityColours.None)
 
   const [propertyIds, setPropertyIds] = useSyncedState<string[]>("propertyKeys", [])
   const properties = useSyncedMap<Property>("properties")
@@ -41,6 +42,19 @@ const Widget = () => {
 
   usePropertyMenu(
     [
+      {
+        itemType: "color-selector",
+        tooltip: "Entity colour",
+        options: Object.keys(EntityColours).map((colourOption) => ({
+          option: EntityColours[colourOption],
+          tooltip: colourOption,
+        })),
+        propertyName: "entity-colour",
+        selectedOption: colour,
+      },
+      {
+        itemType: "separator",
+      },
       {
         itemType: "dropdown",
         propertyName: "property-type",
@@ -63,12 +77,14 @@ const Widget = () => {
         addProperty()
       } else if (event.propertyName === "property-type" && event.propertyValue) {
         setTypeToAdd(event.propertyValue as PropertyType)
+      } else if (event.propertyName === "entity-colour" && event.propertyValue) {
+        setColour(event.propertyValue)
       }
     },
   )
 
   return (
-    <WidgetContainer>
+    <WidgetContainer keyColour={colour}>
       <EnitityDetails
         title={title}
         description={description}

Diff for: src/components/WidgetContainer.tsx

@@ -1,13 +1,12 @@
 interface WidgetContainerProps {
   children?: FigmaDeclarativeNode | FigmaDeclarativeNode[]
+  keyColour?: string
 }
 
 const WidgetContainer = (props: WidgetContainerProps) => (
   <AutoLayout
     direction="vertical"
     verticalAlignItems="center"
-    spacing={16}
-    padding={16}
     cornerRadius={8}
     fill="#FFFFFF"
     effect={[
@@ -25,6 +24,9 @@ const WidgetContainer = (props: WidgetContainerProps) => (
       },
     ]}
   >
-    {props.children}
+    <AutoLayout width="fill-parent" height={4} fill={props.keyColour || EntityColours.None} />
+    <AutoLayout spacing={16} padding={16} direction="vertical">
+      {props.children}
+    </AutoLayout>
   </AutoLayout>
 )

Diff for: src/types/EntityColours.ts

@@ -0,0 +1,12 @@
+const EntityColours = {
+  None: "#FFF",
+  Red: "#FA2626",
+  Yellow: "#FFC000",
+  Green: "#04A740",
+  Blue: "#0463A7",
+  Purple: "#620CE2",
+  Magenta: "#E20CAA",
+  Concrete: "#91A0AC",
+} as const
+
+type EntityColourName = keyof typeof EntityColours