fix: visually distinquish MyPlaces from Place

czabaj · Oct 31, 2024 · 965e7fb · 965e7fb
1 parent 4ede348
commit 965e7fb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git 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=?) => {
   <section ariaLabelledby=headerId className={`${classes.root} ${className->Option.getOr("")}`}>
     <header>
       <h3 id={headerId}> {headerSlot} </h3>
       {buttonsSlot}
     </header>
-    <div className={Styles.box.base}> {children} </div>
+    <div className={noBackground->Option.getOr(false) ? "" : Styles.box.base}> {children} </div>
   </section>
 }
diff --git 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
@@ -47,7 +47,8 @@ module Pure = {
             {React.string("Nové místo")}
           </button>}
           headerId="my_places"
-          headerSlot={React.string("Moje místa")}>
+          headerSlot={React.string("Moje místa")}
+          noBackground={true}>
           {switch usersPlaces {
           | [] =>
             <p className=SectionWithHeader.classes.emptyMessage>
@@ -60,7 +61,7 @@ module Pure = {
             </p>
           | places =>
             <nav>
-              <ul className={`${Styles.list.base} ${classes.list}`}>
+              <ul className={classes.list}>
                 {places
                 ->Array.map(place => {
                   let stringId = Db.getUid(place)