henry-search 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "henry-search",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Searches a typesense archive of musical performances",
   "main": "js/main.js",
   "scripts": {

package/src/components/AudioLinks.vue

@@ -13,13 +13,13 @@ const props = defineProps({
     <div class="audioLinks__box">
         <div class="audioLinks__links">                            
             <span class="audioLinks__label -first">Public</span>
-                <a href="https://forms.office.com/pages/responsepage.aspx?id=OdIW0TyQrUiHfXYXUGXf-OBndBFJDdZNtXXrOlwA-shUNVBBNjZNQkozSEw2SUs3SFU1Q1I2R1VQTCQlQCN0PWcu&fswReload=1&fswNavStart=1674745526953" target="_blank" class="audioLinks__link -first">Request Form<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <a href="https://forms.office.com/pages/responsepage.aspx?id=OdIW0TyQrUiHfXYXUGXf-OBndBFJDdZNtXXrOlwA-shUNVBBNjZNQkozSEw2SUs3SFU1Q1I2R1VQTCQlQCN0PWcu&fswReload=1&fswNavStart=1674745526953" target="_blank" class="audioLinks__link -first">Request Form<svg class="audioLinks__arrow" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M2.82893 8.48571L8.48553 2.82911" stroke="#01ABE6" stroke-width="1.5"/>
                 <path d="M2.8288 2.82799L8.48553 2.82812L8.48566 8.48485" stroke="#01ABE6" stroke-width="1.5"/>
                 </svg>
             </a>
             <span class="audioLinks__label">BSO Staff</span>
-            <a :href="`https://bso.netx.net/app/#search/exact/${ props.audioId }-A`" target="_blank" class="audioLinks__link">Login<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <a :href="`https://bso.netx.net/app/#search/exact/${ props.audioId }-A`" target="_blank" class="audioLinks__link">Login<svg class="audioLinks__arrow" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M2.82893 8.48571L8.48553 2.82911" stroke="#01ABE6" stroke-width="1.5"/>
                 <path d="M2.8288 2.82799L8.48553 2.82812L8.48566 8.48485" stroke="#01ABE6" stroke-width="1.5"/>
                 </svg>

package/src/components/EventLinks.vue

@@ -24,6 +24,15 @@ const showAudioLinks = (event) => {
     audioLinkBox.classList.toggle("-open")
 }
 
+const copyUrl = () => {
+    navigator.clipboard.writeText(window.location.href)
+    const htmlHolder = document.querySelector('#copy_link').innerHTML
+    document.querySelector('#copy_link').innerHTML = "URL Copied!"
+    setTimeout(() => {
+        document.querySelector('#copy_link').innerHTML = htmlHolder
+    }, 1000)
+}
+
 
 </script>
 
@@ -32,10 +41,10 @@ const showAudioLinks = (event) => {
         <div class="headerLinks__media">
             <template v-if="props.item.program_book_link">
                 <a :href="props.item.program_book_link" target="_blank">
-                    <svg class="headerLinks__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="12" cy="12" r="12" fill="#01ABE6"/>
-                        <path d="M8.30469 16.0947L15.8468 8.55259" stroke="white" stroke-width="2"/>
-                        <path d="M8.30469 8.55127L15.847 8.55144L15.8472 16.0937" stroke="white" stroke-width="2"/>
+                    <svg class="headerLinks__icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="12" cy="12" r="12" />
+                        <path d="M8.30469 16.0947L15.8468 8.55259" stroke-width="2"/>
+                        <path d="M8.30469 8.55127L15.847 8.55144L15.8472 16.0937" stroke-width="2"/>
                     </svg>
                     View Program Book
                 </a>
@@ -43,45 +52,49 @@ const showAudioLinks = (event) => {
             <template v-if="props.item.media && props.item.media.includes('audio') && props.item.bso_audio_id">
                 <a @click="showAudioLinks">
                     <svg class="headerLinks__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="12" cy="12" r="12" fill="#01ABE6"/>
-                        <path d="M13.081 6.66675L9.23961 9.73985H6.1665V14.3495H9.23961L13.081 17.4226V6.66675Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                        <path d="M16.5688 9.32495C17.289 10.0453 17.6936 11.0222 17.6936 12.0408C17.6936 13.0594 17.289 14.0363 16.5688 14.7567" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <circle cx="12" cy="12" r="12"/>
+                        <path d="M13.081 6.66675L9.23961 9.73985H6.1665V14.3495H9.23961L13.081 17.4226V6.66675Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M16.5688 9.32495C17.289 10.0453 17.6936 11.0222 17.6936 12.0408C17.6936 13.0594 17.289 14.0363 16.5688 14.7567" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                     Access Audio</a>
                 <audio-links :audio-id="props.item.bso_audio_id" />
                 
             </template>
         </div>
-        <a onclick="navigator.clipboard.writeText(window.location.href);">
+        <a @click="copyUrl()" id="copy_link">
             <svg class="headerLinks__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="12" cy="12" r="11.25" fill="white" stroke="#01ABE6" stroke-width="1.5"/>
-                <path d="M11.0835 12.6969C11.3142 13.0223 11.6086 13.2915 11.9466 13.4864C12.2846 13.6812 12.6584 13.797 13.0427 13.8261C13.4269 13.8551 13.8125 13.7966 14.1734 13.6546C14.5343 13.5126 14.862 13.2903 15.1343 13.0029L16.7461 11.3026C17.2354 10.7681 17.5062 10.0523 17.5 9.30925C17.4939 8.56622 17.2114 7.85545 16.7134 7.33002C16.2153 6.8046 15.5416 6.50656 14.8372 6.50011C14.1329 6.49365 13.4544 6.77929 12.9477 7.2955L12.0237 8.26469" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M13.8333 11.3032C13.5696 10.9778 13.2332 10.7085 12.8469 10.5137C12.4606 10.3189 12.0334 10.203 11.5943 10.174C11.1552 10.145 10.7145 10.2034 10.302 10.3455C9.88955 10.4875 9.515 10.7097 9.20377 10.9971L7.36178 12.6975C6.80256 13.2319 6.49312 13.9478 6.50012 14.6908C6.50711 15.4338 6.82998 16.1446 7.39918 16.67C7.96838 17.1955 8.73837 17.4935 9.54331 17.5C10.3483 17.5064 11.1237 17.2208 11.7027 16.7046L12.7527 15.7354" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle cx="12" cy="12" r="11.25" stroke-width="1.5"/>
+                <path d="M11.0835 12.6969C11.3142 13.0223 11.6086 13.2915 11.9466 13.4864C12.2846 13.6812 12.6584 13.797 13.0427 13.8261C13.4269 13.8551 13.8125 13.7966 14.1734 13.6546C14.5343 13.5126 14.862 13.2903 15.1343 13.0029L16.7461 11.3026C17.2354 10.7681 17.5062 10.0523 17.5 9.30925C17.4939 8.56622 17.2114 7.85545 16.7134 7.33002C16.2153 6.8046 15.5416 6.50656 14.8372 6.50011C14.1329 6.49365 13.4544 6.77929 12.9477 7.2955L12.0237 8.26469" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M13.8333 11.3032C13.5696 10.9778 13.2332 10.7085 12.8469 10.5137C12.4606 10.3189 12.0334 10.203 11.5943 10.174C11.1552 10.145 10.7145 10.2034 10.302 10.3455C9.88955 10.4875 9.515 10.7097 9.20377 10.9971L7.36178 12.6975C6.80256 13.2319 6.49312 13.9478 6.50012 14.6908C6.50711 15.4338 6.82998 16.1446 7.39918 16.67C7.96838 17.1955 8.73837 17.4935 9.54331 17.5C10.3483 17.5064 11.1237 17.2208 11.7027 16.7046L12.7527 15.7354" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             Copy URL
         </a>
     </template>
     <template v-else>
         <div :class="`eventLinks ${ props.extraClasses }`">
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="9" cy="9" r="8.5" vector-effect="non-scaling-stroke"/>
-                <path d="M5 9H13" stroke-width="1.5" vector-effect="non-scaling-stroke"/>
-                <path d="M9 5L13 9L9 13" stroke-width="1.5" vector-effect="non-scaling-stroke"/>
-            </svg>
-            <a class="eventLinks__details" :href="`/details?performanceId=${props.item.id}`" :title="formatDate(item.performance_date) + ' Details'">Details</a>
+            <a class="eventLinks__details" :href="`/details?performanceId=${props.item.id}`" :title="formatDate(item.performance_date) + ' Details'">
+                <svg class="eventLinks__icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="9" cy="9" r="8.5" vector-effect="non-scaling-stroke"/>
+                    <path d="M5 9H13" stroke-width="1.5" vector-effect="non-scaling-stroke"/>
+                    <path d="M9 5L13 9L9 13" stroke-width="1.5" vector-effect="non-scaling-stroke"/>
+                </svg>
+                Details
+            </a>
         </div>
         <div v-if="props.item.program_book_link" :class="`eventLinks ${ props.extraClasses }`">
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="9" cy="9" r="9" />
-            <path d="M6.22876 12.0714L11.8854 6.41475" stroke-width="1.5"/>
-            <path d="M6.22864 6.41376L11.8854 6.41388L11.8855 12.0706" stroke-width="1.5"/>
-        </svg>
+            <a class="eventLinks__details" target="_blank" :href="props.item.program_book_link" :title="formatDate(item.performance_date) + ' Details'">
+                <svg class="eventLinks__icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="9" cy="9" r="9" />
+                    <path d="M6.22876 12.0714L11.8854 6.41475" stroke-width="1.5"/>
+                    <path d="M6.22864 6.41376L11.8854 6.41388L11.8855 12.0706" stroke-width="1.5"/>
+                </svg>
 
-        <a class="eventLinks__details" target="_blank" :href="props.item.program_book_link" :title="formatDate(item.performance_date) + ' Details'">Program</a>
+                Program
+            </a>
         </div>
         <div v-if="props.item.media && props.item.media.includes('audio') && props.item.bso_audio_id" :class="`eventLinks ${ props.extraClasses }`">
             <button class="eventLinks__details" @click="showAudioLinks"  :title="formatDate(item.performance_date) + ' Audio'">
-                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <svg class="eventLinks__icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <circle cx="9" cy="9" r="9" />
                     <path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                     <path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>

package/src/components/Search.vue

@@ -377,7 +377,7 @@
                     { facet: 'works.artists.role', value: item.artist_role },
                     { facet: 'works.title', value: item.work_title }
                   ])">
-                    <span class="resultsGrid__lightLink">{{ item.num_performances }} Performances</span>
+                    {{ item.num_performances }} Performances
                     
                   </a>                  
                 </div>
@@ -436,7 +436,7 @@
                   <a :href="createURL([{ facet: 'works.composers', value: item.composers},
                     { facet: 'works.title', value: item.title}
                   ])">
-                    <span class="resultsGrid__lightLink">{{ item.num_performances }} Performances</span>
+                    {{ item.num_performances }} Performances
                   </a>
                 </div>
               </template>

package/src/components/SearchHistory.vue

@@ -45,7 +45,7 @@ const filterHistory = (indexName) => {
     <div v-if="searchHistory" class="history__grid">
         <div class="history__performances" v-if="filterHistory(props.performanceIndex).length">
             <template v-for="item, index in filterHistory(props.performanceIndex)">
-                <h4 v-if="index == 0">Performances</h4>
+                <h2 v-if="index == 0">Performances</h2>
                 <div class="history__item"  v-if="formatSearchTitle(item?.uiState[props.performanceIndex]).length">
                     <a :href="item.link">{{ formatSearchTitle(item?.uiState[props.performanceIndex]) }}</a><br/>
                     {{ formatDate((new Date(item.date)).getTime() / 1000, 'history', false) }}
@@ -53,9 +53,9 @@ const filterHistory = (indexName) => {
             </template>
         </div>
         <div class="history__artists" v-if="filterHistory(props.artistIndex).length">
-            <template class="history__item" v-for="item, index in filterHistory(props.artistIndex)">
-                <h4 v-if="index == 0">Artists</h4>
-                <div v-if="formatSearchTitle(item?.uiState[props.artistIndex]).length">
+            <template v-for="item, index in filterHistory(props.artistIndex)">
+                <h2 v-if="index == 0">Artists</h2>
+                <div class="history__item" v-if="formatSearchTitle(item?.uiState[props.artistIndex]).length">
                     <a :href="item.link">{{ formatSearchTitle(item?.uiState[props.artistIndex]) }}</a><br/>
                     {{ formatDate((new Date(item.date)).getTime() / 1000, 'history', false) }}
                 </div>
@@ -63,7 +63,7 @@ const filterHistory = (indexName) => {
         </div>
         <div class="history__works" v-if="filterHistory(props.workIndex).length">
             <template v-for="item, index in filterHistory(props.workIndex)">
-                <h4 v-if="index == 0">Works</h4>
+                <h2 v-if="index == 0">Works</h2>
                 <div class="history__item" v-if="formatSearchTitle(item?.uiState[props.workIndex]).length">
                     <a :href="item.link">{{ formatSearchTitle(item?.uiState[props.workIndex]) }}</a><br/>
                     {{ formatDate((new Date(item.date)).getTime() / 1000, 'history', false) }}
@@ -71,8 +71,12 @@ const filterHistory = (indexName) => {
             </template>
         </div>
     </div>
-    <div v-else>
-        <h4>No current search history</h4>
+    <div v-else class="history__grid">
+        <div class="history__noResults">
+            <h2>No Searches</h2>
+            <p>Your searches for performances, artists, and works will display on this page.</p>
+        </div>
+        
     </div>
 
 </template>

package/src/components/SearchTab.vue

@@ -485,16 +485,17 @@
                             <ais-search-box class="searchBox" >
                                 <template v-slot="{ currentRefinement, isSearchStalled, refine }">
                                     <label for="searchbox" class="label__hidden">{{ props.searchPlaceholder }}</label>
+                                    <button type="submit" title="Submit the search query" class="ais-SearchBox-submit"><svg aria-hidden="true" width="10" height="10" viewBox="0 0 40 40" class="ais-SearchBox-submitIcon"><path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path></svg>
+                                    </button>
                                     <input
-                                        class="ais-SearchBox-input"
+                                        class="ais-SearchBox-input input"
                                         id="searchbox"
                                         type="search"
                                         :value="currentRefinement"
                                         @input="refine($event.currentTarget.value)"
                                         :placeholder="props.searchPlaceholder"
                                         >
-                                    <button type="submit" title="Submit the search query" class="ais-SearchBox-submit"><svg aria-hidden="true" width="10" height="10" viewBox="0 0 40 40" class="ais-SearchBox-submitIcon"><path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path></svg>
-                                    </button>
+                                    
                                     <span :hidden="!isSearchStalled">Loading...</span>
                                 </template>
                             </ais-search-box>
@@ -617,16 +618,12 @@
                                     <div class="checkBoxes">
                                         <span class="checkBoxes__alert" v-if="!items.length"><span class="checkBoxes__alertIcon">!</span>No matches found</span>
                                         <label v-for="item in items" class="checkBoxes__boxLabel" :for="slugify(refinement.title + ' ' + item.value)">
-                                            <div class="eventSearch__checkBox">
-                                                <input :class="`checkbox ${item.isRefined ? '-boxChecked' : ''}`" 
-                                                    type="checkbox" 
-                                                    :id="slugify(refinement.title + ' ' + item.value)"  
-                                                    :value="item.value" 
-                                                    :checked="item.isRefined" 
-                                                    @click="refine(item.value)" />
-                                                    
-                                            </div>
-                                            
+                                            <input :class="`checkbox ${item.isRefined ? '-boxChecked' : ''}`" 
+                                                type="checkbox" 
+                                                :id="slugify(refinement.title + ' ' + item.value)"  
+                                                :value="item.value" 
+                                                :checked="item.isRefined" 
+                                                @click="refine(item.value)" />
                                             <label :for="slugify(refinement.title + ' ' + item.value)">{{ item.value }}</label><span class="eventsSearch__refinementCount">{{ item.count }}</span>
                                         </label>
                                     </div>
@@ -648,9 +645,9 @@
                                             <summary class="accordion__summary">
                                                 <h6 :class="`accordion__heading ${ !(items.length || isFromSearch) ? '-gray' : ''}`">{{ refinement.title }}</h6>
                                                 <div class="accordion__iconWrapper" v-if="items.length">
-                                                <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation"  viewBox="0 0 18 18" fill="none">
-                                                    <path d="M7 17L15 9L7 1" stroke="var(--icon-color, currentColor)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                                                </svg>
+                                                    <svg class="accordion__icon icon icon--chevron-right" aria-hidden="true" role="presentation"  viewBox="0 0 18 18" fill="none">
+                                                        <path d="M7 17L15 9L7 1" stroke="var(--icon-color, currentColor)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                                    </svg>
                                                 </div>
                                             </summary>
                                             <div class="accordion__content" v-if="items.length || isFromSearch">
@@ -674,9 +671,7 @@
                                                 <div class="checkBoxes">
                                                     <span class="checkBoxes__alert" v-if="!items.length"><span class="checkBoxes__alertIcon">!</span>No matches found</span>
                                                     <label v-for="item in items" class="checkBoxes__boxLabel" :for="slugify(refinement.title + ' ' + item.value)">
-                                                        <div class="eventSearch__checkBox">
-                                                            <input :class="`checkbox ${item.isRefined ? '-boxChecked' : ''}`" type="checkbox" :id="slugify(refinement.title + ' ' + item.value)"  :value="item.value" :checked="item.isRefined" @click="refine(item.value)">
-                                                        </div>
+                                                        <input :class="`checkbox ${item.isRefined ? '-boxChecked' : ''}`" type="checkbox" :id="slugify(refinement.title + ' ' + item.value)"  :value="item.value" :checked="item.isRefined" @click="refine(item.value)">
                                                         <label :for="slugify(refinement.title + ' ' + item.value)">{{ item.value }}</label><span class="eventsSearch__refinementCount">{{ item.count }}</span>
                                                     </label>
                                                 </div>
@@ -694,27 +689,27 @@
                                         </div>
                                     </summary>
                                     <div class="accordion__content">
-                                        <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.country'" operator="and">
+                                        <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.country'" operator="and" limit="100" >
                                             <template v-slot="{ items, refine }">
                                                 <select @change="refine($event.currentTarget.value)">
-                                                    <option>Select Country</option>
-                                                    <option v-for="item in items" :value="item.value">{{ item.label }}</option>
+                                                    <option value="">Select Country</option>
+                                                    <option v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
                                                 </select>
                                             </template>
                                         </ais-menu-select>
-                                        <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.state'" operator="and">
+                                        <ais-menu-select v-if="refinement.type == 'location'" :attribute="'location.state'" operator="and" limit="100">
                                            <template v-slot="{ items, refine }">
                                                 <select @change="refine($event.currentTarget.value)">
-                                                    <option>Select State</option>
-                                                    <option v-for="item in items" :value="item.value">{{ item.label }}</option>
+                                                    <option value="">Select State</option>
+                                                    <option v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
                                                 </select>
                                             </template>
                                         </ais-menu-select>
-                                        <ais-menu-select placeholder="Select City" v-if="refinement.type == 'location'" :attribute="'location.city'" operator="and">
+                                        <ais-menu-select placeholder="Select City" v-if="refinement.type == 'location'" :attribute="'location.city'" operator="and"  limit="100">
                                             <template v-slot="{ items, refine }">
                                                 <select @change="refine($event.currentTarget.value)">
-                                                    <option>Select City</option>
-                                                    <option v-for="item in items" :value="item.value">{{ item.label }}</option>
+                                                    <option value="">Select City</option>
+                                                    <option v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
                                                 </select>
                                             </template>
                                         </ais-menu-select>
@@ -914,7 +909,7 @@
                                     <li v-for="page in pages.slice(0, 5)" :key="page">
                                         <a
                                         :href="createURL(page)"
-                                        :style="{ fontWeight: page === currentRefinement ? 'bold' : '' }"
+                                        :class="`${page === currentRefinement ? 'resultsPagination__currentPage' : '' }`"
                                         @click.prevent="refineAndScroll(refine, page, 'resultsTitle')"
                                         >
                                         {{ page + 1 }}
@@ -935,7 +930,8 @@
                                     </li>
                                     <li v-if="pages.length > 5">...</li>
                                     <li  v-for="page in 5" :key="page" v-if="nbPages > 5">
-                                        <a :href="createURL(nbPages - (5 - page) - 1)" @click.prevent="refineAndScroll(refine, nbPages - (5 - page) - 1, 'resultsTitle')" :style="{ fontWeight: nbPages - (5 - page) - 1 === currentRefinement ? 'bold' : '' }">
+                                        <a :href="createURL(nbPages - (5 - page) - 1)" @click.prevent="refineAndScroll(refine, nbPages - (5 - page) - 1, 'resultsTitle')" 
+                                         :class="`${nbPages - (5 - page) - 1 === currentRefinement ? 'resultsPagination__currentPage' : '' }`">
                                             {{ nbPages - (5 - page) }}
                                         </a>
                                     </li>

package/src/styles/atoms/audioLinks/index.scss

@@ -1,5 +1,10 @@
 .audioLinks {
 
+    svg.audioLinks__arrow {
+        fill: var(--color-white) !important;
+        //border: 1px solid red;
+    }
+
     &__box {
         display:none;
         &.-open {
@@ -19,6 +24,7 @@
         &.-first {
             border-bottom: thin solid var(--color-gray-100);
         }
+        
     }
 
     &__link {
@@ -36,6 +42,10 @@
         }
     }
 
+    &__link:hover {
+        text-decoration: underline;
+    }
+
     &__links {
         background-color: white;
         display: grid;

package/src/styles/atoms/breadCrumb/index.scss

@@ -3,6 +3,13 @@
 .breadCrumb {
     background-color: var(--color-light-gold);
     padding: 0.5rem 1.5rem;
+    a {
+        color: var(--color-dark-blue);
+    }
+    a:hover {
+        text-decoration: underline;
+        color: var(--color-dark-blue);
+    }
     @include at(md) {
         padding: 0.5rem 2rem 0.5rem 4rem;
     }

package/src/styles/atoms/checkBoxes/index.scss

@@ -4,7 +4,6 @@
     min-height: 1.8rem;
     overflow-y: auto;
     padding-bottom: 0.5rem;
-    padding-left: 0.5rem;
     input[type=checkbox] {
       border: thin solid var(--color-gray-100);
       background-color: var(--color-white);
@@ -48,10 +47,14 @@
       background-color: var(--color-turquoise);
       border: thin solid var(--color-turquoise);
       &::before {
-        display: block;
+        //display: block;
         background: var(--color-gray-200);
       }
     }
+    .checkbox {
+      position: relative;
+      top: 0.2rem;
+    }
 }
 
   

package/src/styles/atoms/eventLinks/index.scss

@@ -14,15 +14,16 @@
   &__details {
     display: flex;
     background-color: inherit;
-    padding: 0 0.5rem 0 0.25rem;
+    padding-right: 0.5rem;
     border: none;
     color: var(--color-dark-blue);
     font-weight: bold;
+    gap: 0.2rem;
   }
 
-  // button:hover {
-  //   background-color: var(--color-dark-blue);
-  // }
+  button:hover {
+    background-color: none;
+  }
   button.eventLinks__details {
     display: flex;
     gap: .35rem;
@@ -31,19 +32,20 @@
     padding-left: 0;
     padding-top: 0.1rem;
   }
-  svg {
+  svg.eventLinks__icon {
     fill: var(--color-dark-blue);
     stroke: var(--color-white);
     height: 18px;
     min-width: 18px;
   }
 }
-.eventLinks:hover svg {
-    stroke: var(--color-dark-blue);
-    outline: var(--color-dark-blue);
-    fill: var(--color-white);
+
+.eventLinks__details:hover svg {
+  stroke: var(--color-dark-blue);
+  outline: var(--color-dark-blue);
+  fill: var(--color-white);
 }
-.eventLinks:hover a, .eventLinks:hover button {
+a.eventLinks__link:hover, .eventLinks:hover button, a.eventLinks__details:hover, .eventLinks__details:hover button {
   text-decoration: underline;
   fill: none;
 }

package/src/styles/molecules/accordion/index.scss

@@ -36,6 +36,9 @@
             font-weight: 100;
             color: var(--color-mid-gray);
         }
+        &.-thin:hover {
+            text-decoration: underline;
+        }
     }
     
     &__iconWrapper {

package/src/styles/molecules/dateRange/index.scss

@@ -36,6 +36,9 @@
             padding: 0 2.75rem !important;
         }
     }
+    .dp__input:focus {
+        border: 1px solid var(--color-turquoise);
+    }
 
     .dp__input_icon {
         margin-left: 8px !important;

package/src/styles/molecules/headerLinks/index.scss

@@ -21,26 +21,48 @@
         .audioLinks__links {
             width: 18rem;
         }
+
+        .audioLinks__link {
+            color: var(--color-dark-blue);
+            font-weight: normal;
+            font-size: 1.1rem;
+        }
     }
     &__media {
         display: flex;
         justify-content: left;
         background-color: white;
+        color: var(--color-dark-blue);
         margin-bottom: 0;
         flex-wrap: wrap;
         gap: 1rem;
+        a, a:hover {
+            color: var(--color-dark-blue);
+        }
         @include at(lg) {
             gap: 2rem;
         }
     }
     a {
-            font-size: 1.25rem;
-            font-weight: 600;
-            gap: 0.2rem;
-            cursor: pointer;
+        color: var(--color-dark-blue);
+        font-size: 1.25rem;
+        font-weight: 600;
+        gap: 0.2rem;
+        cursor: pointer;
+    }
+    a:hover 
+    {
+        color: var(--color-dark-blue);
+        text-decoration: underline;
+        svg {
+            stroke: var(--color-dark-blue);
+            fill: var(--color-white);
         }
+    }
     &__icon {
         height: 1.5rem;
         width: 1.5rem;
+        fill: var(--color-dark-blue);
+        stroke: var(--color-white);
     }
 }

package/src/styles/molecules/pagination/index.scss

@@ -4,18 +4,28 @@
     display: flex;
     justify-content: space-between;
     padding: 1rem 1.5rem;
+    flex-wrap: wrap;
     @include at(lg) {
-        padding: 2rem  0;
+      padding: 2rem  0;
     }
 
-    &__paginationComponent {
+    &__currentPage{
+      font-weight: bold;
+      border-bottom: 2px solid var(--color-turquoise);
+    }
 
+    &__paginationComponent {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       list-style: none;
       margin: 0;
-      padding: 0;
+      padding: 1rem 0 0 0;
+      justify-content: center;
+      @include at(md) {
+        justify-content: left;
+        padding-top: 0;
+      }
 
       li {
         padding: 0 .2rem;
@@ -26,7 +36,7 @@
       }
 
       li:hover {
-        border-bottom: 2px solid var(--color-turquoise);
+        font-weight: bold;
       }
 
       a {

package/src/styles/molecules/searchBox/index.scss

@@ -7,7 +7,7 @@
      background-color: #FDF9F7;
      @include at (md) {
       padding: .5rem;
-      margin: .5rem .5rem .5rem 0;
+      margin: .5rem 0;
      }
 
      height: 40px;
@@ -44,12 +44,15 @@
        font-weight: 100;
        width: 100%;
        height: 100%;
-       background-color: #FDF9F7;
+       background-color: var(--color-white);
        border: none;
        outline: none;
        &::placeholder {
         color: var(--color-mid-gray);
        }
+       &:focus {
+        outline: var(--color-turquoise);
+       }
        &.-filter {
           background-color:#ffffff;
           border: none;
@@ -70,7 +73,7 @@
      .ais-SearchBox-reset, .ais-SearchBox-submit {
        align-self: center !important;
        border: none;
-       background-color: #FDF9F7;
+       background-color: var(--color-white);
        display: flex;
        align-items: center !important;
        justify-content: center !important;
@@ -85,6 +88,6 @@
      }
   }
 
-// .searchBox:active {
-//   border: 3px solid red;
-// }
+.searchBox:has(input:focus) {
+  border: 1px solid var(--color-turquoise);
+}

package/src/styles/organisms/performanceGrid/index.scss

@@ -22,6 +22,10 @@
         a{
             color: var(--color-dark-blue);
         }
+        a:hover {
+            color: var(--color-dark-blue);
+            text-decoration: underline;
+        }
 
         &.-artist {
             grid-column: auto;