Minor styling fixes

- Updated Dialog max-width to be either 40em or 80%
- Updated TrackHoverInfo icons to change color depending on theme
- Updated text-color-secondary and text-color-disabled white theme colors

src/components/Themes.css

@@ -31,7 +31,7 @@
 .light-mode {
     --background-color: #f8f8f8;
     --text-color: #222;
-    --text-color-secondary: #444;
+    --text-color-secondary: #333;
     --layer-color: #0002;
     --half-layer-color: #0001;
     --layer-color-hover: #0003;
@@ -39,7 +39,7 @@
     --layer-color-non-transparent: #ddd;
     --layer-color-non-transparent-hover: #ccc;
     --layer-color-non-transparent-disabled: #888;
-    --text-color-disabled: #666;
+    --text-color-disabled: #444;
     --border-color: #888;
     --text-color-inverted: #eee;
     --icon-color: #222;

src/components/dialog/Dialog.css

@@ -20,7 +20,7 @@
     padding: 1em;
     position: relative;
     min-width: 15em;
-    max-width: 80%;
+    max-width: min(40em, 80%);
 }
 
 .dialog.wide {

src/components/map/track-hover-info/TrackHoverInfo.css

@@ -17,6 +17,12 @@
     height: 1.2em;
 }
 
+.track-hover-info-popup-table svg path,
+.track-hover-info-popup-table svg g {
+    stroke: var(--text-color-disabled);
+    fill: var(--text-color-disabled);
+}
+
 .track-hover-info-popup-table {
     border-spacing: 2px;
 }

src/icons/track-hover-info/hash.jsx

@@ -1,6 +1,6 @@
 export const HashIcon = ({color = '#aaa', strokeWidth = 3}) => (
     <svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
-        <g stroke={color} strokeLinecap="round" strokeWidth={strokeWidth}>
+        <g stroke={color} fillOpacity={0} strokeLinecap="round" strokeWidth={strokeWidth}>
             <path d="m6.35 8.4667h15.875"/>
             <path d="m4.2333 17.992h15.875"/>
             <path d="m11.112 4.2333-4.2333 17.992"/>

src/icons/track-hover-info/lightning.jsx

@@ -1,7 +1,7 @@
 export const LightningIcon = ({color = '#aaa', strokeWidth = 3}) => (
     <svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
         <g strokeLinecap="round" strokeLinejoin="round">
-            <path d="m16.377 3.064-6.7273 9.5424 7.1597 0.04677-5.8532 8.1012" fill="none" stroke={color} strokeWidth={strokeWidth}/>
+            <path d="m16.377 3.064-6.7273 9.5424 7.1597 0.04677-5.8532 8.1012" fill="none" fillOpacity={0} stroke={color} strokeWidth={strokeWidth}/>
             <path d="m8.8716 18.291c-0.22686 0.1146-0.38025 0.33628-0.40753 0.58897l-0.62437 5.8411c-0.069133 0.63371 0.63369 1.0593 1.1632 0.70442l4.9448-3.304c0.45953-0.30723 0.44017-0.98907-0.03604-1.2697l-4.3225-2.5389c-0.21996-0.12871-0.49022-0.13693-0.71759-0.021836z" fill={color}/>
         </g>
     </svg>

src/icons/track-hover-info/question-mark.jsx

@@ -1,5 +1,5 @@
 export const QuestionMarkIcon = ({color = '#aaa', strokeWidth = 3}) => (
     <svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
-        <path d="m12.715 4.6602c1.6393 1e-7 2.8139 0.388 3.6543 1.0996l0.0039 0.00391 2e-3 0.00195c0.85746 0.71341 1.2441 1.5491 1.2441 2.7559 0 0.70837-0.12471 1.3057-0.35742 1.8184-2.41e-4 5.3e-4 2.41e-4 0.0014 0 2e-3 -0.24973 0.54115-0.57292 1.0128-0.97461 1.4297-0.4207 0.42821-0.90971 0.83512-1.4727 1.2207-0.58361 0.39973-1.2056 0.78991-1.8652 1.168l-0.42774 0.24414v2.4336h-0.51953v-2.4414c0.42324-0.24294 0.84668-0.4881 1.3164-0.76367 0.66542-0.38563 1.2263-0.78504 1.6836-1.2129 0.52804-0.47491 0.9591-0.9798 1.2754-1.5234l2e-3 -2e-3v-0.0039c0.35758-0.62576 0.50977-1.3651 0.50976-2.1816 0-1.1248-0.44975-2.1542-1.3066-2.7695-0.80104-0.5883-1.8121-0.85938-2.9414-0.85938-0.98217 0-1.9293 0.15701-2.8242 0.4707h-0.00195c-0.35427 0.12547-0.57509 0.26783-0.875 0.39844v-0.625c0.44446-0.14128 0.88216-0.28544 1.5077-0.40821h0.0059c0.84466-0.17207 1.6325-0.25586 2.3613-0.25586zm-0.82422 16.223h0.83008v0.91602h-0.83008z" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth}/>
+        <path d="m12.715 4.6602c1.6393 1e-7 2.8139 0.388 3.6543 1.0996l0.0039 0.00391 2e-3 0.00195c0.85746 0.71341 1.2441 1.5491 1.2441 2.7559 0 0.70837-0.12471 1.3057-0.35742 1.8184-2.41e-4 5.3e-4 2.41e-4 0.0014 0 2e-3 -0.24973 0.54115-0.57292 1.0128-0.97461 1.4297-0.4207 0.42821-0.90971 0.83512-1.4727 1.2207-0.58361 0.39973-1.2056 0.78991-1.8652 1.168l-0.42774 0.24414v2.4336h-0.51953v-2.4414c0.42324-0.24294 0.84668-0.4881 1.3164-0.76367 0.66542-0.38563 1.2263-0.78504 1.6836-1.2129 0.52804-0.47491 0.9591-0.9798 1.2754-1.5234l2e-3 -2e-3v-0.0039c0.35758-0.62576 0.50977-1.3651 0.50976-2.1816 0-1.1248-0.44975-2.1542-1.3066-2.7695-0.80104-0.5883-1.8121-0.85938-2.9414-0.85938-0.98217 0-1.9293 0.15701-2.8242 0.4707h-0.00195c-0.35427 0.12547-0.57509 0.26783-0.875 0.39844v-0.625c0.44446-0.14128 0.88216-0.28544 1.5077-0.40821h0.0059c0.84466-0.17207 1.6325-0.25586 2.3613-0.25586zm-0.82422 16.223h0.83008v0.91602h-0.83008z" fillOpacity={0} stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth}/>
     </svg>
 );

src/icons/track-hover-info/radius.jsx

@@ -1,6 +1,6 @@
-export const RadiusIcon = ({color = '#000', strokeWidth = 3}) => (
+export const RadiusIcon = ({color = '#aaa', strokeWidth = 3}) => (
     <svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth}>
+        <g fill="none" fillOpacity={0} stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth}>
             <path d="m5.447 21.439c8.7852 0 16.375-4.9776 16.454-15.457"/>
             <path d="m6.0139 6.4035 4.6883 10.447"/>
         </g>

src/icons/track-hover-info/slope.jsx

@@ -1,6 +1,6 @@
-export const SlopeIcon = ({color = '#000', strokeWidth = 3}) => (
+export const SlopeIcon = ({color = '#aaa', strokeWidth = 3}) => (
     <svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round">
+        <g fill="none" fillOpacity={0} stroke={color} strokeLinecap="round" strokeLinejoin="round">
             <path d="m3.5064 21.443c6.758-0.83913 13.438-0.58929 19.6-6.9228" strokeWidth={strokeWidth}/>
             <path d="m7.6444 10.614c0.37591 0.7323 0.50003 1.3563 0.37238 1.8721-0.12439 0.51409-0.47754 0.92049-1.0595 1.2192-0.595 0.30542-1.136 0.358-1.6229 0.15772-0.48696-0.20028-0.91755-0.66493-1.2918-1.394-0.37591-0.7323-0.50003-1.3563-0.37238-1.8721 0.12766-0.51577 0.48244-0.92301 1.0644-1.2217 0.59173-0.30375 1.1319-0.35385 1.6205-0.1503 0.48863 0.20354 0.91839 0.66657 1.2893 1.3891zm2.9965 5.7856 0.07682-9.2652zm6.5407-5.967c0.37591 0.7323 0.50003 1.3563 0.37238 1.8721-0.12766 0.51577-0.48244 0.92301-1.0644 1.2217-0.59173 0.30375-1.1319 0.35385-1.6205 0.1503-0.48863-0.20354-0.91839-0.66656-1.2893-1.3891-0.37591-0.7323-0.50167-1.3555-0.37728-1.8696 0.12766-0.51577 0.48244-0.92301 1.0644-1.2217 0.595-0.30542 1.136-0.358 1.6229-0.15772 0.48696 0.20028 0.91755 0.66493 1.2918 1.394zm5.5951-2.9148c0.37591 0.7323 0.50003 1.3563 0.37238 1.8721-0.12766 0.51577-0.48244 0.92301-1.0644 1.2217-0.59173 0.30375-1.1319 0.35385-1.6205 0.1503-0.48863-0.20354-0.91839-0.66656-1.2893-1.3891-0.37591-0.7323-0.50167-1.3555-0.37728-1.8696 0.12766-0.51577 0.48244-0.92301 1.0644-1.2217 0.595-0.30542 1.136-0.358 1.6229-0.15772 0.48696 0.20028 0.91755 0.66493 1.2918 1.394z" strokeWidth={strokeWidth * 0.7}/>
         </g>

src/icons/track-hover-info/speed.jsx

@@ -1,6 +1,6 @@
 export const SpeedIcon = ({color = '#aaa', strokeWidth = 3}) => (
     <svg version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" stroke={color} strokeLinecap="round">
+        <g fill="none" fillOpacity={0} stroke={color} strokeLinecap="round">
             <circle cx="13.112" cy="13.112" r="8.9958" strokeWidth={strokeWidth}/>
             <path d="m13.229 13.229 4.2063-3.3844" strokeWidth={strokeWidth}/>
         </g>