henry-search 1.0.25 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "henry-search",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "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/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

@@ -486,7 +486,7 @@
                                 <template v-slot="{ currentRefinement, isSearchStalled, refine }">
                                     <label for="searchbox" class="label__hidden">{{ props.searchPlaceholder }}</label>
                                     <input
-                                        class="ais-SearchBox-input"
+                                        class="ais-SearchBox-input input"
                                         id="searchbox"
                                         type="search"
                                         :value="currentRefinement"
@@ -597,10 +597,10 @@
                             <template v-slot="{items, refine, searchForItems, isFromSearch}">
                                 
                                 <div class="accordion__content" v-if="items.length || isFromSearch">
-                                    <div class="ais-SearchBox searchBox -filter">
+                                    <!-- <div class="ais-SearchBox searchBox -filter"> -->
                                         <label class="label__hidden" :for="refinement.attribute">{{ refinement.placeholder }}</label>
                                         <form class="searchBox__form" @submit="$event.preventDefault()" @reset="searchForItems('')">
-                                            <input type="text" :id="refinement.attribute" @input="searchForItems($event.currentTarget.value)" :placeholder="refinement.placeholder" class="ais-SearchBox-input -filter"  v-if="!refinement.hideSearch">
+                                            <input type="text" :id="refinement.attribute" @input="searchForItems($event.currentTarget.value)" :placeholder="refinement.placeholder" class="ais-SearchBox-input -filter ais-SearchBox searchBox"  v-if="!refinement.hideSearch">
                                             <button v-if="isFromSearch"
                                                 class="ais-SearchBox-reset"
                                                 type="reset"
@@ -613,20 +613,16 @@
                                                 </svg>
                                             </button>
                                         </form>
-                                    </div>
+                                    <!-- </div> -->
                                     <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>
@@ -674,9 +670,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 +688,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 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" :sort-by="['name']">
                                            <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 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 v-for="item in items" :selected="item.isRefined" :key="item.value" :value="item.value">{{ item.label }}</option>
                                                 </select>
                                             </template>
                                         </ais-menu-select>
@@ -914,7 +908,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 +929,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

@@ -52,6 +52,10 @@
         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/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

@@ -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:active {
+  border: 3px solid red;
+}

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

@@ -114,9 +114,9 @@
                 //padding: 1rem 2rem 0 1rem;
                 
                 position: sticky;
-                bottom: 0;
+                //bottom: 0;
                 z-index: 3;
-                height: 100px;
+                height: 110px;
                 width: 100vw;
                 box-shadow: 0 -30px 30px var(--color-gray-100);
                 background-color: white;
@@ -160,7 +160,7 @@
                     background-color: var(--color-turquoise);
                     color: var(--color-dark-blue);
                     font-weight: 600;
-                    margin-right: 2rem;
+                    margin-right: 1rem;
                 }
                 
             }

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;

package/src/styles/templates/eventsSearch/index.scss

@@ -17,7 +17,21 @@
     }
   }
 
+  .ais-Stats {
+    width: 100%;
+    text-align: center;
+    @include at(md) {
+      width: auto;
+      text-align: left;
+    }
+  }
 
+  .ais-Pagination {
+    width: 100%;
+    @include at(md) {
+      width: auto;
+    }
+  }
 
   .button {
     padding: 0;