From f17f8ca17b17a2ccabe04ecdcc393e8f70b39c03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Fri, 23 Jan 2026 15:49:59 +0700
Subject: [PATCH] Use feather icons in sidebar header

---
 app/components/icon.gjs           |  6 +++++-
 app/components/places-sidebar.gjs |  5 +++--
 app/styles/app.css                | 26 ++++++++++++++++----------
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/components/icon.gjs b/app/components/icon.gjs
index b87559e..cf772dd 100644
--- a/app/components/icon.gjs
+++ b/app/components/icon.gjs
@@ -10,6 +10,8 @@ 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 x from 'feather-icons/dist/icons/x.svg?raw';
 
 const ICONS = {
   clock,
@@ -20,7 +22,9 @@ const ICONS = {
   navigation,
   phone,
   user,
-  settings
+  settings,
+  'arrow-left': arrowLeft,
+  x
 };
 
 export default class IconComponent extends Component {
diff --git a/app/components/places-sidebar.gjs b/app/components/places-sidebar.gjs
index 029cdb0..f431928 100644
--- a/app/components/places-sidebar.gjs
+++ b/app/components/places-sidebar.gjs
@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import or from 'ember-truth-helpers/helpers/or';
 import PlaceDetails from './place-details';
+import Icon from './icon';
 
 export default class PlacesSidebar extends Component {
   @service storage;
@@ -123,7 +124,7 @@ export default class PlacesSidebar extends Component {
             type="button"
             class="back-btn"
             {{on "click" this.clearSelection}}
-          >←</button>
+          ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
           <h2>Nearby Places</h2>
         {{/if}}
@@ -131,7 +132,7 @@ export default class PlacesSidebar extends Component {
           type="button"
           class="close-btn"
           {{on "click" @onClose}}
-        >×</button>
+        ><Icon @name="x" @size={{20}} @color="#333" /></button>
       </div>
 
       <div class="sidebar-content">
diff --git a/app/styles/app.css b/app/styles/app.css
index a22e89c..d1da790 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -62,20 +62,26 @@ body {
   padding: 1rem;
 }
 
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  padding: 0 0.5rem;
-}
-
 .back-btn {
   background: none;
   border: none;
-  font-size: 1.2rem;
   cursor: pointer;
-  margin-right: 0.5rem;
+  padding: 0 0.5rem;
+  margin-left: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0.5rem;
+  margin-right: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .place-details {