Ruler markers outine + snapline outline (#6698)

**Problem:** 1. The ruler markers used to have a white outline, but it's gone 2. The snapline labels should have a white outline around their text **Fix:** | What | Img | |---|------| | Markers | <img width="427" alt="Screenshot 2024-12-05 at 10 51 06" src="https://github.com/user-attachments/assets/94a54c19-d3dc-4a77-ae54-82554129abf6"> | | Labels | <img width="711" alt="Screenshot 2024-12-05 at 10 53 18" src="https://github.com/user-attachments/assets/6b12be2e-c8ad-44a2-a5c0-0b95dd0b0268"> | Fixes #6697
concrete-utopia · Dec 13, 2024 · 08ba147 · 08ba147
1 parent 1599d11
commit 08ba147
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx b/editor/src/components/canvas/controls/grid-controls-ruler-markers.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import type { UtopiColor } from '../../../uuiui'
+import { colorTheme, type UtopiColor } from '../../../uuiui'
 import { RulerMarkerIconSize } from './grid-controls'
 
 export type RulerMarkerType = 'span-start' | 'span-end' | 'auto' | 'auto-short' | 'pinned'
@@ -29,6 +29,7 @@ function upFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNode
           RulerMarkerIconSize / 2
         },0 ${RulerMarkerIconSize},${RulerMarkerIconSize} 0,${RulerMarkerIconSize}`}
         fill={fillColor.value}
+        stroke={colorTheme.white.value}
       />
     </MarkerSVG>
   )
@@ -40,6 +41,7 @@ function rightFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactN
       <polygon
         points={`${RulerMarkerIconSize},${RulerMarkerIconSize / 2} 0,0 0,${RulerMarkerIconSize}`}
         fill={fillColor.value}
+        stroke={colorTheme.white.value}
       />
     </MarkerSVG>
   )
@@ -51,6 +53,7 @@ function downFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNo
       <polygon
         points={`${RulerMarkerIconSize / 2},${RulerMarkerIconSize} 0,0 ${RulerMarkerIconSize},0`}
         fill={fillColor.value}
+        stroke={colorTheme.white.value}
       />
     </MarkerSVG>
   )
@@ -64,6 +67,7 @@ function leftFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNo
           RulerMarkerIconSize / 2
         } ${RulerMarkerIconSize},0 ${RulerMarkerIconSize},${RulerMarkerIconSize}`}
         fill={fillColor.value}
+        stroke={colorTheme.white.value}
       />
     </MarkerSVG>
   )
@@ -72,31 +76,59 @@ function leftFacingTriangle(fillColor: UtopiColor, scale: number): React.ReactNo
 function regularVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
   return (
     <MarkerSVG scale={scale}>
-      <rect x='4' y='0' width='3' height={`${RulerMarkerIconSize}`} fill={fillColor.value} />
+      <rect
+        x='4'
+        y='0'
+        width='3'
+        height={`${RulerMarkerIconSize}`}
+        fill={fillColor.value}
+        stroke={colorTheme.white.value}
+      />
     </MarkerSVG>
   )
 }
 
 function regularHorizontalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
   return (
     <MarkerSVG scale={scale}>
-      <rect x='0' y='4' width={`${RulerMarkerIconSize}`} height='3' fill={fillColor.value} />
+      <rect
+        x='0'
+        y='4'
+        width={`${RulerMarkerIconSize}`}
+        height='3'
+        fill={fillColor.value}
+        stroke={colorTheme.white.value}
+      />
     </MarkerSVG>
   )
 }
 
 function shortVerticalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
   return (
     <MarkerSVG scale={scale}>
-      <rect x='4' y='2' width='3' height='9' fill={fillColor.value} />
+      <rect
+        x='4'
+        y='2'
+        width='3'
+        height='9'
+        fill={fillColor.value}
+        stroke={colorTheme.white.value}
+      />
     </MarkerSVG>
   )
 }
 
 function shortHorizontalPipe(fillColor: UtopiColor, scale: number): React.ReactNode {
   return (
     <MarkerSVG scale={scale}>
-      <rect x='2' y='4' width='9' height='3' fill={fillColor.value} />
+      <rect
+        x='2'
+        y='4'
+        width='9'
+        height='3'
+        fill={fillColor.value}
+        stroke={colorTheme.white.value}
+      />
     </MarkerSVG>
   )
 }

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -2697,7 +2697,7 @@ const SnapLine = React.memo(
             style={{
               position: 'absolute',
               top: axis === 'column' ? -labelHeight - RulerMarkerIconSize - 5 : -10,
-              left: axis === 'row' ? -(labelWidth - RulerMarkerIconSize + 30) : 0,
+              left: axis === 'row' ? -(labelWidth - RulerMarkerIconSize + 30) : -7,
               color: colorTheme.brandNeonPink.value,
               fontWeight: 700,
               textAlign: axis === 'row' ? 'right' : undefined,
@@ -2706,7 +2706,16 @@ const SnapLine = React.memo(
               zoom: 1 / canvasScale,
             }}
           >
-            {printPin(props.gridTemplate, targetMarker.position, axis)}
+            <span
+              style={{
+                backgroundColor: 'white',
+                padding: '2px 4px',
+                borderRadius: 2,
+                fontSize: 11 / canvasScale,
+              }}
+            >
+              {printPin(props.gridTemplate, targetMarker.position, axis)}
+            </span>
           </div>,
         )}
       </div>