Improve save button styles

app/components/icon.gjs

@@ -1,6 +1,8 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 
+import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
+import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
 import clock from 'feather-icons/dist/icons/clock.svg?raw';
 import globe from 'feather-icons/dist/icons/globe.svg?raw';
 import home from 'feather-icons/dist/icons/home.svg?raw';
@@ -8,22 +10,22 @@ import map from 'feather-icons/dist/icons/map.svg?raw';
 import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
 import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
 import phone from 'feather-icons/dist/icons/phone.svg?raw';
-import user from 'feather-icons/dist/icons/user.svg?raw';
 import settings from 'feather-icons/dist/icons/settings.svg?raw';
-import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
+import user from 'feather-icons/dist/icons/user.svg?raw';
 import x from 'feather-icons/dist/icons/x.svg?raw';
 
 const ICONS = {
+  'arrow-left': arrowLeft,
+  bookmark,
   clock,
   globe,
   home,
   map,
-  mapPin,
+  'map-pin': mapPin,
   navigation,
   phone,
-  user,
   settings,
-  'arrow-left': arrowLeft,
+  user,
   x
 };
 

app/components/place-details.gjs

@@ -130,10 +130,11 @@ export default class PlaceDetails extends Component {
       <div class="actions">
         <button
           type="button"
-          class={{if this.place.createdAt "btn-secondary" "btn-primary"}}
+          class={{if this.place.createdAt "btn btn-secondary" "btn btn-outline"}}
           {{on "click" (fn @onToggleSave this.place)}}
         >
-          {{if this.place.createdAt "Saved ✓" "Save"}}
+          <Icon @name="bookmark" @color={{if this.place.createdAt "currentColor" "#007bff"}} />
+          {{if this.place.createdAt "Saved" "Save"}}
         </button>
       </div>
 
@@ -185,7 +186,7 @@ export default class PlaceDetails extends Component {
         {{/if}}
 
         <p class="content-with-icon">
-          <Icon @name="mapPin" @title="Geo link" />
+          <Icon @name="map-pin" @title="Geo link" />
           <span>
             <a href={{this.geoLink}} target="_blank" rel="noopener noreferrer">
               {{this.visibleGeoLink}}

app/services/osm.js

@@ -100,7 +100,8 @@ out center;
       `.trim();
     }
 
-    const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(
+    const url = `https://overpass.bke.ro/api/interpreter?data=${encodeURIComponent(
+    // const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(
       query
     )}`;
     const res = await this.fetchWithRetry(url);

app/styles/app.css

@@ -105,23 +105,63 @@ body {
 
 .place-details .actions {
   padding-bottom: 0.3rem;
+  /* display: flex; */
+  /* flex-direction: row; */
+  /* gap: 1rem; */
 }
 
-.btn-primary {
-  background: #007bff;
-  color: white;
-  border: none;
+.btn {
   padding: 0.75rem 1.5rem;
   border-radius: 4px;
   cursor: pointer;
-  width: 100%;
+  /* width: 50%; */
   font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 }
 
-.btn-primary:hover {
+.btn-outline {
+  background: transparent;
+  color: #333;
+  border: 1px solid #ccc;
+}
+
+.btn-outline:hover {
+   border: 1px solid #898989;
+}
+
+.btn-secondary {
+  color: #333;
+  border: 1px solid rgba(255, 204, 51, 0.2);
+  background: rgba(255, 204, 51, 0.2);
+}
+
+.btn-secondary:hover {
+ border: 1px solid #898989;
+}
+
+.btn-blue {
+  background: #007bff;
+  color: white;
+  border: none;
+}
+
+.btn-blue:hover {
   background: #0056b3;
 }
 
+.btn-green {
+  background: #198754;
+  color: white;
+  border: none;
+}
+
+.btn-green:hover {
+  background: #157347;
+}
+
 .places-list {
   list-style: none;
   padding: 0;