Rotate the map key icons

We’ve had some feedback that the map key icons look a bit like
checkboxes, and that this might have confused a user during the
research.

So we need a way of making them look different to checkboxes. We don’t
want to change the border thickness because it matches what’s on the
map. A different approach is changing the shape.

Shapes that might still be confusing:
- circles (look like radio buttons)
- triangles (look like a warning)

So this commit changes the shape to a diamond, which is easy to acheive
by rotating the square 45 degrees.

app/assets/stylesheets/components/area-list.scss

@@ -94,12 +94,13 @@
     content: "";
     display: block;
     position: absolute;
-    top: 0;
-    left: 0;
-    width: govuk-spacing(7);
-    height: govuk-spacing(7);
+    top: 4px;
+    left: govuk-spacing(1);
+    width: govuk-spacing(6);
+    height: govuk-spacing(6);
     box-sizing: border-box;
     margin-right: govuk-spacing(1);
+    transform: rotate(45deg);
   }
 
   &--certain {