scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-09-07 08:26:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated the hexagon icons in legend to be uniform along with their border

Browse source
This commit is contained in:
Vidya Rupak 2025-12-21 15:11:00 -07:00
parent 278dda3132
commit ef59792f7b
1 changed files with 53 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
packages/memory-graph/src/components/legend.css.ts
View file

@ -213,10 +213,6 @@ export const legendText = style({
/**
* Shape styles
*/
export const hexagon = style({
clipPath: "polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)",
})
export const documentNode = style({
width: "1rem",
height: "0.75rem",
@ -226,35 +222,57 @@ export const documentNode = style({
flexShrink: 0,
})
export const memoryNode = style([
hexagon,
{
width: "0.75rem",
height: "0.75rem",
background: "rgba(147, 197, 253, 0.21)",
border: "1px solid rgba(147, 196, 253, 0.6)",
flexShrink: 0,
},
])
// Hexagon shapes using SVG background (matching graph's flat-top hexagon)
// Points calculated: angle = (i * 2π / 6) - π/2, center (6,6), radius 4.5
const hexagonPoints = "6,1.5 10.4,3.75 10.4,8.25 6,10.5 1.6,8.25 1.6,3.75"
export const memoryNodeOlder = style([
memoryNode,
{
opacity: 0.4,
},
])
export const memoryNode = style({
width: "1rem",
height: "1rem",
flexShrink: 0,
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='${hexagonPoints}' fill='rgba(147,197,253,0.21)' stroke='rgba(147,196,253,0.6)' stroke-width='1'/%3E%3C/svg%3E")`,
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
})
export const forgottenNode = style([
hexagon,
{
width: "0.75rem",
height: "0.75rem",
background: "rgba(239, 68, 68, 0.3)",
border: "1px solid rgba(239, 68, 68, 0.8)",
position: "relative",
flexShrink: 0,
},
])
export const memoryNodeOlder = style({
opacity: 0.4,
width: "1rem",
height: "1rem",
flexShrink: 0,
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='${hexagonPoints}' fill='rgba(147,197,253,0.21)' stroke='rgba(147,196,253,0.6)' stroke-width='1'/%3E%3C/svg%3E")`,
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
})
export const forgottenNode = style({
width: "1rem",
height: "1rem",
flexShrink: 0,
position: "relative",
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='${hexagonPoints}' fill='rgba(239,68,68,0.3)' stroke='rgba(239,68,68,0.8)' stroke-width='1'/%3E%3C/svg%3E")`,
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
})
export const expiringNode = style({
width: "1rem",
height: "1rem",
flexShrink: 0,
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='${hexagonPoints}' fill='rgba(147,197,253,0.1)' stroke='rgb(245,158,11)' stroke-width='1.5'/%3E%3C/svg%3E")`,
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
})
export const newNode = style({
width: "1rem",
height: "1rem",
flexShrink: 0,
position: "relative",
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='${hexagonPoints}' fill='rgba(147,197,253,0.1)' stroke='rgb(16,185,129)' stroke-width='1.5'/%3E%3C/svg%3E")`,
backgroundSize: "contain",
backgroundRepeat: "no-repeat",
})
export const forgottenIcon = style({
position: "absolute",
@ -265,31 +283,9 @@ export const forgottenIcon = style({
color: "rgb(248, 113, 113)",
fontSize: themeContract.typography.fontSize.xs,
lineHeight: "1",
pointerEvents: "none",
})
export const expiringNode = style([
hexagon,
{
width: "0.75rem",
height: "0.75rem",
background: "rgba(147, 197, 253, 0.1)",
border: "2px solid rgb(245, 158, 11)",
flexShrink: 0,
},
])
export const newNode = style([
hexagon,
{
width: "0.75rem",
height: "0.75rem",
background: "rgba(147, 197, 253, 0.1)",
border: "2px solid rgb(16, 185, 129)",
position: "relative",
flexShrink: 0,
},
])
export const newBadge = style({
position: "absolute",
top: "-0.25rem",
@ -310,7 +306,7 @@ export const connectionLine = style({
export const similarityLine = style({
width: "1rem",
height: 0,
borderTop: "2px dashed rgba(79, 255, 226, 0.4)",
borderTop: "2px dashed rgba(79, 255, 226, 0.5)",
flexShrink: 0,
})
@ -325,7 +321,7 @@ export const weakSimilarity = style({
width: "0.75rem",
height: "0.75rem",
borderRadius: themeContract.radii.full,
background: "rgba(148, 163, 184, 0.2)",
background: "rgba(79, 255, 226, 0.3)",
flexShrink: 0,
})
@ -333,7 +329,7 @@ export const strongSimilarity = style({
width: "0.75rem",
height: "0.75rem",
borderRadius: themeContract.radii.full,
background: "rgba(148, 163, 184, 0.6)",
background: "rgba(79, 255, 226, 0.7)",
flexShrink: 0,
})