Styling

src/components/gpx/GpxViewer.tsx

@@ -21,7 +21,10 @@ const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
     <Tree
       title={
         <>
+          <span>
+            {' '}
             <GpxIcon /> {title()}
+          </span>
         </>
       }
       content={undefined}

src/components/rte/RteViewer.tsx

@@ -29,7 +29,9 @@ const RteViewer: Component<Props> = ({ rteId }) => {
     <Tree
       title={
         <>
+          <span>
             <RteIcon fill='black' width='24' height='24' /> {title()}
+          </span>
         </>
       }
       content={

src/components/tree/Tree.module.css

@@ -0,0 +1,12 @@
+.title {
+  background-color: rgba(14, 116, 144, 0.7);
+  color: white;
+  justify-content: space-between;
+  display: flex;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.title > div {
+  display: inline-block;
+}

src/components/tree/Tree.tsx

@@ -1,6 +1,7 @@
 import { Paper, Stack } from '@suid/material';
 import styled from '@suid/material/styles/styled';
 import { Component, JSXElement, Show } from 'solid-js';
+import style from './Tree.module.css';
 
 interface Props {
   title: string | JSXElement;
@@ -24,7 +25,7 @@ const Tree: Component<Props> = ({ title, content, subTree }) => {
       sx={{ width: 'calc(100% - 5px)' }}
     >
       <Item sx={{ width: 'calc(100% - 1px)' }}>
-        <div>{title}</div>
+        <div class={style.title}>{title}</div>
         <Show when={content !== undefined}>
           <div>{content}</div>
         </Show>

src/components/trk/TrkViewer.tsx

@@ -1,9 +1,8 @@
-import { Component, For, from } from 'solid-js';
+import { Component, For } from 'solid-js';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import Tree from '../tree';
 import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid';
 import { TrksegViewer } from '../trkseg';
-import { findAddress } from '../../lib/osm';
 
 interface Props {
   trkId: string;
@@ -21,14 +20,15 @@ const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
     <Tree
       title={
         <>
-          <TrkIcon width='24' height='24' /> {title()}
+          <div>
+            <span>
+              <TrkIcon fill='white' width='24' height='24' /> {title()}
+            </span>
+          </div>
+          <div>x</div>
         </>
       }
-      content={
+      content={<div></div>}
-        <div>
-            
-        </div>
-      }
       subTree={
         <For
           each={Object.keys(restrictToHierarchy).filter((key: string) =>

src/components/trkseg/TrksegViewer.tsx

@@ -32,7 +32,9 @@ const TrksegViewer: Component<Props> = ({ trksegId }) => {
     <Tree
       title={
         <>
-          <TrkIcon fill='grey' width='16' height='16' /> {title()}
+          <span>
+            <TrkIcon fill='white' width='16' height='16' /> {title()}
+          </span>
         </>
       }
       content={