Update button style and text formating

Slight changes to the button style made.
Formatting of the text updated.

Author: surelybassy

app/src/index.html

@@ -167,19 +167,24 @@
       width: 50%;
       text-align: center;
       z-index: 1;
-      background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%);
-      background-size: 200% auto;
+      background-image: linear-gradient(45deg, #DA22FF, #9733EE, #DA22FF);
+      background-size: 400% 400%;
       color: white;
-      box-shadow: 0 0 5px 3px #eee;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       margin: 0;
       border: none;
-      border-radius: 3px;
-      padding: 5px 5px;
+      border-radius: 25px;
+      padding: 10px 20px;
+      font-size: 16px;
+      font-weight: bold;
       cursor: pointer;
+      transition: all 0.4s ease;
     }
 
     .spin-button:hover {
-      background-position: right center;
+      background-position: 100% 0;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+      transform: translate(-50%) scale(1.05);
       color: #fff;
       text-decoration: none;
     }
@@ -194,19 +199,24 @@
       width: 50%;
       text-align: center;
       z-index: 1;
-      background-image: linear-gradient(to right, #DA22FF 0%, #9733EE 51%, #DA22FF 100%);
-      background-size: 200% auto;
+      background-image: linear-gradient(45deg, #DA22FF, #9733EE, #DA22FF);
+      background-size: 400% 400%;
       color: white;
-      box-shadow: 0 0 5px 3px #eee;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       margin: 0;
       border: none;
-      border-radius: 3px;
-      padding: 5px 5px;
+      border-radius: 25px;
+      padding: 10px 20px;
+      font-size: 16px;
+      font-weight: bold;
       cursor: pointer;
+      transition: all 0.4s ease;
     }
 
     .reveal-button:hover {
-      background-position: right center;
+      background-position: 100% 0;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+      transform: translate(-50%) scale(1.05);
       color: #fff;
       text-decoration: none;
     }

app/src/ui.ts

@@ -307,6 +307,9 @@ export function showResults(feature: Feature<Geometry, GeoJsonProperties>) {
   }
   if (featureType) {
     featureEmoji = emojiMap[featureType];
+    featureType = featureType.split('_')
+                             .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                             .join(' ');
   }
   console.log(featureProperties)
   const featureWebsite = featureProperties.website;
@@ -321,7 +324,7 @@ export function showResults(feature: Feature<Geometry, GeoJsonProperties>) {
     + (featureOpeningHours ? `<p>${icon({ prefix: 'fas', iconName: 'clock' }).html} ${featureOpeningHours}</p>` : "")
     + (featureWebsite ? `<p>${icon({ prefix: 'fas', iconName: 'globe' }).html} <a href="${featureWebsite}" target="_blank">${featureWebsite}</a></p>` : "")
     + `
-    <p>${icon({ prefix: 'fas', iconName: 'link' }).html} <a href="https://www.openstreetmap.org/${featureId}" target="_blank">https://www.openstreetmap.org/${featureId}</a></p>
+    <p>${icon({ prefix: 'fas', iconName: 'link' }).html} <a href="https://www.openstreetmap.org/${featureId}" target="_blank">Open with OpenStreetMap</a></p>
   `;
   resultsContainer.appendChild(featureDetails);