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("")}`}>
- {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 =>