From a2149f9a435f32252c5786a2226b6cf59223ee4b Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sun, 8 Jan 2023 20:04:08 +0100
Subject: [PATCH] Styling

---
 src/components/gpx/GpxViewer.tsx       |  5 ++++-
 src/components/rte/RteViewer.tsx       |  4 +++-
 src/components/tree/Tree.module.css    | 12 ++++++++++++
 src/components/tree/Tree.tsx           |  3 ++-
 src/components/trk/TrkViewer.tsx       | 16 ++++++++--------
 src/components/trkseg/TrksegViewer.tsx |  4 +++-
 6 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 src/components/tree/Tree.module.css

diff --git a/src/components/gpx/GpxViewer.tsx b/src/components/gpx/GpxViewer.tsx
index 9bacd31..5a7d458 100644
--- a/src/components/gpx/GpxViewer.tsx
+++ b/src/components/gpx/GpxViewer.tsx
@@ -21,7 +21,10 @@ const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
     <Tree
       title={
         <>
-          <GpxIcon /> {title()}
+          <span>
+            {' '}
+            <GpxIcon /> {title()}
+          </span>
         </>
       }
       content={undefined}
diff --git a/src/components/rte/RteViewer.tsx b/src/components/rte/RteViewer.tsx
index 92067bf..05fa4af 100644
--- a/src/components/rte/RteViewer.tsx
+++ b/src/components/rte/RteViewer.tsx
@@ -29,7 +29,9 @@ const RteViewer: Component<Props> = ({ rteId }) => {
     <Tree
       title={
         <>
-          <RteIcon fill='black' width='24' height='24' /> {title()}
+          <span>
+            <RteIcon fill='black' width='24' height='24' /> {title()}
+          </span>
         </>
       }
       content={
diff --git a/src/components/tree/Tree.module.css b/src/components/tree/Tree.module.css
new file mode 100644
index 0000000..7915a6d
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/tree/Tree.tsx b/src/components/tree/Tree.tsx
index 9c9cc64..418d5d3 100644
--- a/src/components/tree/Tree.tsx
+++ b/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>
diff --git a/src/components/trk/TrkViewer.tsx b/src/components/trk/TrkViewer.tsx
index ebd9c57..7c7db67 100644
--- a/src/components/trk/TrkViewer.tsx
+++ b/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={
-        <div>
-            
-        </div>
-      }
+      content={<div></div>}
       subTree={
         <For
           each={Object.keys(restrictToHierarchy).filter((key: string) =>
diff --git a/src/components/trkseg/TrksegViewer.tsx b/src/components/trkseg/TrksegViewer.tsx
index 2778a3a..fbd4c6d 100644
--- a/src/components/trkseg/TrksegViewer.tsx
+++ b/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={