Prettier button to choose view

app/views/spaces/index/_filters.html.erb

@@ -12,11 +12,8 @@
     <div class="md:hidden w-16"></div>
   </header>
 
-  <main class="p-8 md:pt-11">
-    <div class="flex justify-center">
-      <button data-action="click->mapbox#setViewToMap" class="set-view-to-map-button button">Kart 🗺️</button>
-      <button data-action="click->mapbox#setViewToTable" class="set-view-to-table-button button">Tabell 📋</button>
-    </div>
+  <main class="p-8">
+    <%= render 'spaces/index/set_view_buttons' %>
     <%= render partial: "spaces/index/search_form" %>
   </main>
 

app/views/spaces/index/_set_view_buttons.html.erb

@@ -0,0 +1,49 @@
+<fieldset class="mb-8 flex flex-col items-center">
+  <legend class="text-center mb-1 text-xs uppercase text-gray-400 sr-only">
+    <%= t('space_filter.choose_view') %>
+  </legend>
+  <div class="flex justify-center shadow-lg h-fit w-fit rounded-lg">
+    <button
+      data-action="click->mapbox#setViewToMap"
+      aria-label="<%= t('space_filter.view_results_in_map') %>"
+      title="<%= t('space_filter.view_results_in_map') %>"
+      class="
+              cursor-pointer
+              bg-gray-100 text-gray-700
+              rounded-lg rounded-r-none border border-gray-100
+              hover:text-lnu-pink hover:border-lnu-pink
+              py-2 px-3
+              inline-flex gap-1 content-center items-center
+              [body.view-as-map_&]:bg-lnu-pink
+              [body.view-as-map_&]:border-lnu-pink
+              [body.view-as-map_&]:text-white
+              [body.view-as-map_&]:hover:text-white
+              [body.view-as-map_&]:hover:cursor-default
+            "
+    >
+      <%= inline_svg "place", class: 'h-4' %>
+      <%= t('space_filter.map') %>
+    </button>
+    <button
+      data-action="click->mapbox#setViewToTable"
+      aria-label="<%= t('space_filter.view_results_in_table') %>"
+      title="<%= t('space_filter.view_results_in_table') %>"
+      class="
+              cursor-pointer
+              bg-gray-100 text-gray-700
+              rounded-lg rounded-l-none border border-gray-100
+              hover:text-lnu-pink hover:border-lnu-pink
+              py-2 px-3
+              inline-flex gap-1 content-center items-center
+              [body.view-as-table_&]:bg-lnu-pink
+              [body.view-as-table_&]:border-lnu-pink
+              [body.view-as-table_&]:text-white
+              [body.view-as-table_&]:hover:text-white
+              [body.view-as-table_&]:hover:cursor-default
+            "
+    >
+      <%= t('space_filter.table') %>
+      <%= inline_svg "table", class: 'h-4' %>
+    </button>
+  </div>
+</fieldset>

config/locales/nb.yml

@@ -88,6 +88,11 @@ nb:
     title: 'Navn på lokalet'
     more_filters: 'Flere filtre'
     map_reload: 'Søk i området'
+    choose_view: 'Visning'
+    map: 'Kart'
+    table: 'Tabell'
+    view_results_in_table: 'Vis resultater i tabell'
+    view_results_in_map: 'Vis resultater i kart'
   admin:
     user: 'Bruker'
     field: 'Felt'