feat: Update logic graph styling

editor.planx.uk/src/@planx/components/ui.tsx

@@ -7,6 +7,7 @@ import ContactPage from "@mui/icons-material/ContactPage";
 import CopyAll from "@mui/icons-material/CopyAll";
 import Create from "@mui/icons-material/Create";
 import Event from "@mui/icons-material/Event";
+import FilterAltOutlined from "@mui/icons-material/FilterAltOutlined";
 import FunctionsIcon from "@mui/icons-material/Functions";
 import Home from "@mui/icons-material/Home";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
@@ -17,13 +18,12 @@ import PaymentOutlined from "@mui/icons-material/PaymentOutlined";
 import Pin from "@mui/icons-material/Pin";
 import PlaylistAdd from "@mui/icons-material/PlaylistAdd";
 import PlaylistAddCheck from "@mui/icons-material/PlaylistAddCheck";
-import RateReview from "@mui/icons-material/RateReview";
+import RateReviewOutlined from "@mui/icons-material/RateReviewOutlined";
 import ReportProblemOutlined from "@mui/icons-material/ReportProblemOutlined";
 import SearchOutlined from "@mui/icons-material/SearchOutlined";
 import Send from "@mui/icons-material/Send";
 import SquareFoot from "@mui/icons-material/SquareFoot";
 import TextFields from "@mui/icons-material/TextFields";
-import ViewAgenda from "@mui/icons-material/ViewAgenda";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { Store } from "pages/FlowEditor/lib/store";
 import type { handleSubmit } from "pages/Preview/Node";
@@ -68,7 +68,7 @@ export const ICONS: {
   [TYPES.ExternalPortal]: CopyAll,
   [TYPES.FileUpload]: CloudUpload,
   [TYPES.FileUploadAndLabel]: CloudUpload,
-  [TYPES.Filter]: undefined,
+  [TYPES.Filter]: FilterAltOutlined,
   [TYPES.FindProperty]: SearchOutlined,
   [TYPES.Flow]: undefined,
   [TYPES.InternalPortal]: undefined,
@@ -80,8 +80,8 @@ export const ICONS: {
   [TYPES.PropertyInformation]: LocationOnOutlined,
   [TYPES.Answer]: undefined,
   [TYPES.Result]: PlaylistAddCheck,
-  [TYPES.Review]: RateReview,
-  [TYPES.Section]: ViewAgenda,
+  [TYPES.Review]: RateReviewOutlined,
+  [TYPES.Section]: List,
   [TYPES.Send]: Send,
   [TYPES.SetValue]: PlaylistAdd,
   [TYPES.Question]: CallSplit,

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx

@@ -73,7 +73,7 @@ const Checklist: React.FC<Props> = React.memo((props) => {
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
       <li
-        className={classNames("card", "decision", {
+        className={classNames("card", "decision", "question", {
           isDragging,
           isClone: isClone(props.id),
           isNote: childNodes.length === 0,

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Option.tsx

@@ -12,7 +12,7 @@ const Option: React.FC<any> = (props) => {
 
   const href = "";
 
-  let background = "#AEAEAE"; // no flag color
+  let background = "#F9F8F8"; // no flag color
   let color = "#000";
   try {
     const flag = flatFlags.find(({ value }) =>
@@ -26,13 +26,9 @@ const Option: React.FC<any> = (props) => {
     <li
       className={classNames("card", "option", { wasVisited: props.wasVisited })}
     >
-      <Link
-        href={href}
-        prefetch={false}
-        onClick={(e) => e.preventDefault()}
-        style={{ background, color }}
-      >
-        <span>{props.data.text}</span>
+      <Link href={href} prefetch={false} onClick={(e) => e.preventDefault()}>
+        <div className="band" style={{ background, color }}></div>
+        <div className="text">{props.data.text}</div>
       </Link>
       <ol className="decisions">
         {childNodes.map((child: any) => (

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx

@@ -84,7 +84,7 @@ const ExternalPortal: React.FC<any> = (props) => {
         <Link href={`/${href}`} prefetch={false} ref={drag}>
           <span>{href}</span>
         </Link>
-        <Link href={editHref} prefetch={false}>
+        <Link href={editHref} prefetch={false} className="portalMenu">
           <MoreVert titleAccess="Edit Portal" />
         </Link>
       </li>
@@ -134,7 +134,7 @@ const InternalPortal: React.FC<any> = (props) => {
         >
           <span>{props.data.text}</span>
         </Link>
-        <Link href={editHref} prefetch={false}>
+        <Link href={editHref} prefetch={false} className="portalMenu">
           <MoreVert titleAccess="Edit Portal" />
         </Link>
       </li>

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx

@@ -57,7 +57,7 @@ const Question: React.FC<Props> = React.memo((props) => {
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
       <li
-        className={classNames("card", "decision", {
+        className={classNames("card", "decision", "type" + props.type, {
           isDragging,
           isClone: isClone(props.id),
           isNote: childNodes.length === 0,

editor.planx.uk/src/pages/FlowEditor/floweditor.scss

@@ -1,11 +1,16 @@
 $background: #f2f2f2;
-$black: #2c2c2c;
-$endpointRadius: 45px;
-$hangerRadius: 14px;
+$black: #0b0c0c;
 $lineColor: #cacaca;
-$lineWidth: 1px;
-$padding: 7px;
-$pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNc8B8AAkUBofXwZpQAAAAASUVORK5CYII=);
+$nodeBorder: #0b0c0c;
+$optionBorder: #b1b4b6;
+$focus: #ffdd00;
+
+$endpointWidth: 50px;
+$hangerWidth: 16px;
+$lineWidth: 2px;
+$padding: 10px;
+$editorPadding: 30px;
+$pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAADElEQVQImWO4cOECAATkAnFXdNPtAAAAAElFTkSuQmCC);
 
 // Import custom typeface for data inputs
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400&display=swap");
@@ -72,13 +77,19 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 #editor {
   flex: 1;
   overflow: auto;
-  padding: 20px;
+  padding: $editorPadding;
 
   ol,
   li {
     list-style: none;
     padding: 0;
     margin: 0;
+
+    > a:focus,
+    > a:active {
+      outline: 4px solid $focus;
+      outline-offset: 0;
+    }
   }
 
   ol:empty {
@@ -115,6 +126,9 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 // ------------------------------------------------
 
 .card {
+  position: relative;
+  width: 100%;
+
   &.isDragging {
     opacity: 0.3;
     & + .hanger {
@@ -135,7 +149,8 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     span {
       opacity: 1;
     }
-    border: 2px solid limegreen;
+    outline: 4px solid #8cc485;
+    outline-offset: 0;
   }
 
   &.isClone > a {
@@ -153,7 +168,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     text-decoration: none;
     cursor: pointer;
     color: $black;
-    border: 1px solid $lineColor;
+    border: 1px solid $nodeBorder;
     background: white;
     user-select: none;
     padding: 6px 12px;
@@ -169,15 +184,49 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 
     > svg {
       margin-left: -6px;
+      margin-top: 0.5px;
       width: 16px;
       height: 16px;
-      opacity: 0.3;
+      opacity: 0.6;
     }
 
     > span:not(:nth-child(1)) {
       margin-left: 6px;
     }
   }
+
+  &.type360::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    height: 2px;
+    margin-top: -1px;
+    width: calc(100% + ($editorPadding * 2));
+    z-index: -1;
+    background-image: linear-gradient(
+      90deg,
+      $optionBorder,
+      $optionBorder 50%,
+      transparent 50%,
+      transparent 100%
+    );
+    background-size: 12px 2px;
+    border: none;
+    [data-layout="left-right"] & {
+      top: unset;
+      width: 2px;
+      height: 100vh;
+      left: 50%;
+      background-image: linear-gradient(
+        0deg,
+        $optionBorder,
+        $optionBorder 50%,
+        transparent 50%,
+        transparent 100%
+      );
+      background-size: 2px 12px;
+    }
+  }
 }
 
 .page {
@@ -193,20 +242,38 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 }
 
 .endpoint > a {
-  @include circle($endpointRadius);
+  @include circle($endpointWidth);
   display: block;
-  line-height: $endpointRadius;
+  line-height: $endpointWidth;
   color: white;
   background: $black;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
 }
 
+.option {
+  > a {
+    border-color: $optionBorder;
+    flex-direction: column;
+    padding: 0;
+  }
+  .band {
+    width: 100%;
+    height: 12px;
+    border-bottom: 1px solid $optionBorder;
+  }
+  .text {
+    margin: 0;
+    padding: 6px 12px;
+  }
+}
+
 .hanger {
   align-self: center;
   background-image: $pixel;
   background-size: $lineWidth;
+  line-height: 0;
 
   [data-layout="left-right"] & {
     background-position: left center;
@@ -231,18 +298,19 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
   }
 
   > a {
-    $size: 14px;
+    $size: $hangerWidth;
     display: inline-block;
     // width: $size;
     text-decoration: none;
-    border: 1px solid #a0a0a0;
+    border: 1px solid $nodeBorder;
     min-width: $size;
     max-width: 200px;
     min-height: $size;
     border-radius: $size;
     color: $black;
     padding: 5px;
     background: $background;
+    line-height: 1.5;
 
     margin: $padding;
 
@@ -252,7 +320,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     transition: transform 0.2s;
 
     &:empty:hover {
-      background-color: yellow;
+      background-color: $focus;
       transform: scale(1.7);
     }
 
@@ -276,6 +344,19 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
       margin: 5px 0;
     }
   }
+  .portalMenu {
+    border-left: 1px solid #aaa;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2px 6px;
+    svg {
+      opacity: 1;
+      margin: 0;
+      width: 16px;
+      height: 16px;
+    }
+  }
 }
 
 .portal,
@@ -306,9 +387,9 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
   }
   align-items: center;
 
-  &.isNote {
+  &.question.isNote {
     > a {
-      background: yellow !important;
+      background: #fffdb0 !important;
     }
   }
 
@@ -321,10 +402,10 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
 
     [data-layout="top-down"] & {
       flex-direction: row;
-      padding-top: 5px !important;
+      padding-top: $padding !important;
 
       background-position: center top;
-      background-size: $lineWidth 5px;
+      background-size: $lineWidth $padding;
     }
 
     [data-layout="left-right"] & {
@@ -342,15 +423,15 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     > li {
       background-image: $pixel, $pixel, $pixel;
       [data-layout="top-down"] & {
-        padding: 5px 5px 0 5px !important;
+        padding: $padding 5px 0 5px !important;
         flex-direction: column;
 
         background-position:
           top center,
           top center,
           bottom center;
         background-size:
-          $lineWidth 5px,
+          $lineWidth $padding,
           $lineWidth,
           $lineWidth;
         background-repeat: no-repeat, repeat-x, repeat-x;
@@ -361,7 +442,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
             top right,
             bottom right;
           background-size:
-            $lineWidth 5px,
+            $lineWidth $padding,
             50% $lineWidth,
             50% $lineWidth;
           background-repeat: no-repeat, no-repeat, no-repeat;
@@ -373,7 +454,7 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
             top left,
             bottom left;
           background-size:
-            $lineWidth 5px,
+            $lineWidth $padding,
             50% $lineWidth,
             50% $lineWidth;
           background-repeat: no-repeat, no-repeat, no-repeat;