diff --git a/src/components/SectionWithHeader/SectionWithHeader.res b/src/components/SectionWithHeader/SectionWithHeader.res index 4942fc2..e51a71c 100644 --- a/src/components/SectionWithHeader/SectionWithHeader.res +++ b/src/components/SectionWithHeader/SectionWithHeader.res @@ -2,12 +2,12 @@ type classesType = {emptyMessage: string, root: string} @module("./SectionWithHeader.module.css") external classes: classesType = "default" @react.component -let make = (~children, ~buttonsSlot, ~className=?, ~headerId, ~headerSlot) => { +let make = (~children, ~buttonsSlot, ~className=?, ~headerId, ~headerSlot, ~noBackground=?) => {
Option.getOr("")}`}>

{headerSlot}

{buttonsSlot}
-
{children}
+
Option.getOr(false) ? "" : Styles.box.base}> {children}
} diff --git a/src/pages/MyPlaces/MyPlaces.module.css b/src/pages/MyPlaces/MyPlaces.module.css index 6880df5..cbcb47d 100644 --- a/src/pages/MyPlaces/MyPlaces.module.css +++ b/src/pages/MyPlaces/MyPlaces.module.css @@ -4,10 +4,24 @@ text-align: right; } -.list li { +.list { + --breakout-hover-overlay: hsl( + var(--surface-warning-hs) var(--surface-warning-l) / 0.1 + ); display: flex; flex-direction: column; - gap: 0; + gap: 1rem; +} +.list > li { + background-color: var(--surface-2); + border-radius: var(--radius-2); + box-shadow: var(--shadow-2); + display: flex; + flex-direction: column; + font-size: 150%; + padding-inline: var(--padding-inline, 8px); + padding-block: 0.25rem; + position: relative; } .list li > span { diff --git a/src/pages/MyPlaces/MyPlaces.res b/src/pages/MyPlaces/MyPlaces.res index d3b6272..52a8c86 100644 --- a/src/pages/MyPlaces/MyPlaces.res +++ b/src/pages/MyPlaces/MyPlaces.res @@ -47,7 +47,8 @@ module Pure = { {React.string("Nové místo")} } headerId="my_places" - headerSlot={React.string("Moje místa")}> + headerSlot={React.string("Moje místa")} + noBackground={true}> {switch usersPlaces { | [] =>

@@ -60,7 +61,7 @@ module Pure = {

| places =>