make crosses style/style more similar

Author: karussell

src/App.module.css

@@ -241,13 +241,18 @@
 
     color: lightgray !important; /* unsure why !important is necessary here but not in ErrorMessage.module.css for same <Cross/> */
 
-    height: 10px;
-    width: 10px;
+    height: 15px;
+    width: 15px;
 
     right: 7px;
     top: 6px;
 }
 
+.sidebarCloseButton svg {
+    width: 100%;
+    height: 100%;
+}
+
 .sidebarCloseButton:hover {
     color: black !important;
 }

src/pathDetails/elevationWidget/ElevationWidget.module.css

@@ -84,19 +84,42 @@
     border-radius: 4px;
     background: #f8f8f9;
     cursor: pointer;
-    font-size: 9px;
-    color: #666;
+    font-size: 13px;
+    color: #555;
     flex-shrink: 0;
     padding: 0 0 0 1px;
 }
 
 .expandButton:hover {
     background: #e8e8e8;
-    color: #333;
+}
+
+.closeButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: #f8f8f9;
+    cursor: pointer;
+    color: #555;
+    flex-shrink: 0;
+}
+
+.closeButton svg {
+    width: 13px;
+    height: 13px;
+}
+
+.closeButton:hover {
+    background: #e8e8e8;
 }
 
 @media (max-width: 44rem) {
-    .expandButton {
+    .expandButton,
+    .closeButton {
         display: none;
     }
 

src/pathDetails/elevationWidget/ElevationWidget.tsx

@@ -6,6 +6,7 @@ import { INCLINE_CATEGORIES, computeInclineCategoryDistances } from './colors'
 import { ElevationPoint } from './types'
 import DetailSelector from './DetailSelector'
 import Legend from './Legend'
+import Cross from '@/sidebar/times-solid.svg'
 
 // Slope colors are also computed in ChartRenderer.drawElevationArea. Duplicate calculation here to keep the
 // legend independent of the renderer's draw cycle.
@@ -237,8 +238,8 @@ export default function ElevationWidget({
                         {isExpanded ? '\u25C0' : '\u25B6'}
                     </button>
                     {isExpanded && onClose && (
-                        <button className={styles.expandButton} onClick={onClose} title="Close">
-                            {'\u2715'}
+                        <button className={styles.closeButton} onClick={onClose} title="Close">
+                            <Cross />
                         </button>
                     )}
                 </div>