add citizen perspective to layers component

frontend/src/components/layers.js

@@ -92,7 +92,7 @@ const Layers = ({ location }) => {
               </g>
 
               <g id="tech-layer-idle" 
-                className={`${mainLayer < 3 ? 'idle' : ''} ${mainLayer === 3 ? 'inactive' : ''} ${current !== "0" && mainLayer >= 1 && mainLayer < 3 ? "up" : ""}`} 
+                className={`${mainLayer !== 3 ? 'idle' : ''} ${mainLayer === 3 ? 'inactive' : ''} ${ mainLayer > 0 && mainLayer < 3 ? "up" : ""} ${ mainLayer > 3 ? "down" : ""}`} 
                 onClick={e => handleClick(e, "3")} role="button" aria-label="Learn more about the Tech Layer">
                 <polygon className="t-u" points="330.14 130.51 166.01 225.9 0.81 130.51 164.94 35.13 330.14 130.51" />
                 <polygon className="t-r" points="330.14 130.51 329.98 189.21 165.85 284.59 166.01 225.9 330.14 130.51" />
@@ -324,6 +324,38 @@ const Layers = ({ location }) => {
                   </text>
                 </g>
               </g>
+
+              <g id="citizen-perspective-idle" 
+                className={`clickable ${current === "4" ? 'inactive' : 'idle'} ${mainLayer > 0 && mainLayer < 4 ? 'up' : ''}`}
+                onClick={e => handleClick(e, "4")} role="button" aria-label="Learn more about the Citizen perspective"
+                >
+                <g id="shadow">
+                  <path className="t-r" d="M560.07,330.7a4,4,0,0,0-1.33-.5,4.78,4.78,0,0,0-1.08-.09,7.68,7.68,0,0,0-.93.09,7.25,7.25,0,0,0-.86.22,8.14,8.14,0,0,0-.86.31,8.64,8.64,0,0,0-.87.42l-.27.15h0l-23.1,13.34,10.57,6.14,23.1-13.33.27-.15c.3-.16.59-.3.87-.43s.58-.22.86-.31a6.87,6.87,0,0,1,.87-.21,5.88,5.88,0,0,1,.92-.1,6.21,6.21,0,0,1,1.08.09,4.26,4.26,0,0,1,1.33.5Z" transform="translate(-382.36 -297.45)" />
+                  <path className="t-r" d="M529.13,345.77a15.1,15.1,0,0,0-1.14,1,18.52,18.52,0,0,0-1.89,2.14,19.05,19.05,0,0,0-1.25,1.83,19.9,19.9,0,0,0-1.37,2.68c-.22.51-.41,1-.58,1.54s-.27.85-.37,1.27-.17.76-.24,1.13-.11.72-.14,1.07a9.2,9.2,0,0,0-.06,1v.22h0l.15,53.71,10.57,6.15-.15-53.72h0v-.21a9.24,9.24,0,0,1,.06-1.05c0-.35.08-.71.14-1.06s.15-.76.24-1.13.23-.85.37-1.28.36-1,.58-1.54a21.7,21.7,0,0,1,1.37-2.67,18,18,0,0,1,1.25-1.84,19.52,19.52,0,0,1,1.89-2.14c.37-.35.75-.69,1.14-1s.66-.5,1-.72.44-.28.65-.41l-10.57-6.14-.65.4C529.79,345.27,529.46,345.51,529.13,345.77Z" transform="translate(-382.36 -297.45)" />
+                  <path className="t-r" d="M552.08,300.24a7,7,0,0,0-2.12-.79,8,8,0,0,0-1.71-.14,9.64,9.64,0,0,0-1.48.15,10.66,10.66,0,0,0-1.38.34,11.91,11.91,0,0,0-1.36.5c-.45.19-.92.42-1.39.67l-.42.24c-.35.2-.69.41-1,.64-.53.35-1.06.74-1.57,1.15s-1.23,1-1.82,1.6a29,29,0,0,0-3,3.4,32.62,32.62,0,0,0-2,2.92,32.27,32.27,0,0,0-2.18,4.26c-.35.81-.66,1.63-.93,2.45s-.41,1.35-.58,2-.28,1.2-.38,1.8-.17,1.13-.23,1.7-.08,1.11-.09,1.66v.33c0,.46,0,.9.05,1.32a14.71,14.71,0,0,0,.23,1.71,11.11,11.11,0,0,0,.53,1.85,7.62,7.62,0,0,0,3.23,4L543,340.18a7.61,7.61,0,0,1-3.23-4,12.28,12.28,0,0,1-.53-1.86c-.1-.54-.18-1.11-.23-1.7,0-.43,0-.87,0-1.32V331c0-.55,0-1.1.09-1.66s.14-1.13.23-1.7.23-1.19.38-1.79.36-1.36.59-2,.57-1.64.92-2.45a33.53,33.53,0,0,1,2.18-4.26,32.62,32.62,0,0,1,2-2.92,29.83,29.83,0,0,1,3-3.4c.59-.57,1.2-1.1,1.82-1.6s1-.79,1.58-1.15c.34-.22.68-.44,1-.64l.43-.24a14.69,14.69,0,0,1,1.39-.67,14,14,0,0,1,1.35-.5,10.8,10.8,0,0,1,1.39-.34,9.52,9.52,0,0,1,1.47-.15,8.58,8.58,0,0,1,1.71.14,6.69,6.69,0,0,1,2.12.8Z" transform="translate(-382.36 -297.45)" />
+                </g>
+                <g id="highlight">
+                  <path className="t-u" d="M552.79,307.35c7.66-4.42,13.88-.87,13.91,7.93s-6.16,19.51-13.82,23.93-13.89.88-13.91-7.92S545.13,311.78,552.79,307.35Z" transform="translate(-382.36 -297.45)" />
+                  <path className="t-u" d="M564.44,337.45c4.81-2.78,8.73-.55,8.75,5l.15,53.72c-.14.42-2.82,8.35-18.88,18.24l-1.58.94c-14.09,8.14-19.77,4.41-20.07,4.22l-.15-53.72c0-5.53,3.87-12.27,8.68-15.05Z" transform="translate(-382.36 -297.45)" />
+                </g>
+                <path className="stroked" d="M784.22,356.07S722,371.75,586.68,365.33" transform="translate(-382.36 -297.45)" />
+                <text className="" transform="translate(413.07 62.16)">Citizen perspective</text>
+              </g>
+
+              <g id="citizen-perspective-active" className={`${current === "4" ? 'active' : 'inactive'}`}>
+                <g id="shadow-2" data-name="shadow">
+                  <path className="r-l" d="M560.05,330.63a4.69,4.69,0,0,0-1.34-.5,5.34,5.34,0,0,0-1.07-.08,5,5,0,0,0-.93.09,6.87,6.87,0,0,0-.87.21,7.35,7.35,0,0,0-.85.32c-.29.12-.58.26-.88.42l-.26.15,10.57,6.14.26-.15c.3-.16.59-.3.88-.42a8,8,0,0,1,.85-.31,6.16,6.16,0,0,1,.87-.22,7.68,7.68,0,0,1,.93-.09,4.69,4.69,0,0,1,1.07.09,4.16,4.16,0,0,1,1.34.5Z" transform="translate(-382.36 -297.45)" />
+                  <path className="r-l" d="M530.75,344.57h0l-.65.4c-.33.23-.66.47-1,.73a15.1,15.1,0,0,0-1.14,1,19.4,19.4,0,0,0-1.89,2.13,20.53,20.53,0,0,0-1.25,1.84,22.65,22.65,0,0,0-1.38,2.68c-.21.51-.41,1-.57,1.54s-.27.85-.37,1.28a11.38,11.38,0,0,0-.24,1.13c-.06.36-.11.71-.14,1.06a9.24,9.24,0,0,0-.06,1.05v.21l.15,53.72,10.57,6.14-.15-53.72v-.21a9.2,9.2,0,0,1,.06-1c0-.35.08-.71.14-1.07s.15-.75.24-1.13.23-.85.37-1.27.36-1,.58-1.54a21.13,21.13,0,0,1,1.37-2.68,22,22,0,0,1,1.25-1.84,19.52,19.52,0,0,1,1.89-2.14c.37-.35.75-.69,1.14-1s.66-.5,1-.72.43-.28.64-.4h0l23.1-13.34-10.57-6.14Z" transform="translate(-382.36 -297.45)" />
+                  <path className="r-l" d="M552.06,300.17a7,7,0,0,0-2.12-.79,8.71,8.71,0,0,0-1.71-.14,9.64,9.64,0,0,0-1.48.15,10.66,10.66,0,0,0-1.38.34,14.17,14.17,0,0,0-1.36.5c-.45.19-.92.42-1.39.67l-.42.24c-.35.2-.7.42-1,.64-.53.36-1.06.74-1.58,1.15s-1.22,1-1.81,1.6a29,29,0,0,0-3,3.4,32.62,32.62,0,0,0-2,2.92,33.53,33.53,0,0,0-2.18,4.26c-.35.81-.66,1.63-.93,2.45s-.41,1.35-.58,2-.28,1.21-.38,1.8-.17,1.14-.23,1.7-.08,1.12-.09,1.66c0,.12,0,.23,0,.34,0,.46,0,.9,0,1.32a14.54,14.54,0,0,0,.23,1.7,11.23,11.23,0,0,0,.53,1.86,7.6,7.6,0,0,0,3.23,4L543,340.11a7.56,7.56,0,0,1-3.23-4,12.15,12.15,0,0,1-.53-1.85,17.24,17.24,0,0,1-.23-1.71c0-.42,0-.86,0-1.31v-.34c0-.55,0-1.1.09-1.66s.13-1.13.23-1.7.23-1.2.38-1.8.36-1.35.59-2,.57-1.64.92-2.45a33.53,33.53,0,0,1,2.18-4.26,32.62,32.62,0,0,1,2-2.92,30.71,30.71,0,0,1,3-3.4c.59-.56,1.19-1.1,1.82-1.59a17.16,17.16,0,0,1,1.58-1.15c.34-.23.68-.44,1-.65l.42-.23c.47-.26.94-.48,1.39-.68s.92-.36,1.36-.5a12.22,12.22,0,0,1,1.39-.34,9.36,9.36,0,0,1,1.47-.14,7.41,7.41,0,0,1,1.71.14,6.77,6.77,0,0,1,2.12.79Z" transform="translate(-382.36 -297.45)" />
+                </g>
+                <g id="highlight-2" data-name="highlight">
+                  <path className="r-u" d="M552.77,307.28c7.65-4.42,13.88-.87,13.91,7.94s-6.16,19.51-13.82,23.93S539,340,539,331.23,545.11,311.71,552.77,307.28Z" transform="translate(-382.36 -297.45)" />
+                  <path className="r-u" d="M564.42,337.38c4.81-2.78,8.72-.54,8.74,5l.15,53.71c-.14.42-2.81,8.36-18.87,18.24-.54.33-1.07.65-1.59.95-14.08,8.13-19.76,4.4-20.06,4.21l-.15-53.72c0-5.52,3.87-12.27,8.68-15Z" transform="translate(-382.36 -297.45)" />
+                </g>
+                <path className="stroked" d="M784.22,356.07S722,371.75,586.68,365.33" transform="translate(-382.36 -297.45)" />
+                <text className="strong" transform="translate(413.07 62.16)">Citizen perspective</text>
+              </g>
+
             </g></svg>
           </div>
           <div className="column">

frontend/src/styles/_layers.scss

@@ -35,6 +35,7 @@
   text {
     font-size: 18px;
     pointer-events: auto;
+    user-select: none;
 
     &.strong {
       font-weight: 700;