henry-search 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "henry-search",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Searches a typesense archive of musical performances",
   "main": "js/main.js",
   "scripts": {
@@ -28,7 +28,9 @@
     "@vitejs/plugin-vue-jsx": "^5.1.1",
     "@vueform/multiselect": "^2.6.11",
     "@vuepic/vue-datepicker": "^11.0.2",
+    "@vueuse/core": "^14.1.0",
     "instantsearch.js": "^4.80.0",
+    "lodash": "^4.17.21",
     "typesense": "^2.1.0",
     "typesense-instantsearch-adapter": "^2.9.0",
     "vue": "^3.5.21",

package/src/components/PAccordion.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, useTemplateRef } from 'vue'
+import { onMounted, useTemplateRef, watch } from 'vue'
 
 /**
  * PAccordion is a vue component for the <details> element. It uses the native <details> element
@@ -17,7 +17,8 @@ const props = defineProps({
   summary: { type: String, default: 'summary:first-of-type' },
   startOpen: { type: Boolean, default: true},
   openText: { type: String, default: null},
-  closedText: { type: String, default: null}
+  closedText: { type: String, default: null},
+  name: { type: String, default: null}
 })
 const details = useTemplateRef('details')
 const summaryText = null
@@ -82,7 +83,7 @@ const handleToggle = event => {
 </script>
 
 <template>
-  <details ref="details" class="accordion" @click="handleToggle">
+  <details ref="details" class="accordion" :name="props.name" @click="handleToggle">
     <slot />
   </details>
 </template>

package/src/components/Search.vue

@@ -37,6 +37,8 @@
         el.classList.remove("-open")
       })
     })
+
+
   })
 
   const mainRefinements = [

package/src/components/SearchDetail.vue

@@ -44,7 +44,6 @@ onMounted(() => {
     client.collections(props.indexName).documents(props.performanceId).retrieve().then(function (results) {
         performance.value = results
         document.title = `BSO HENRY | ${ formatDate(performance.value.performance_date) } Performance Detail`
-        console.log(results)
     }).catch((e) => {
         console.log(e)
         //document.location = '/404'
@@ -124,7 +123,7 @@ const createURL = (facet, value) => {
         <div class="breadCrumb"><a :href="searchHistory && searchHistory.length ? searchHistory[searchHistory.length - 1].link : '/'">Back to Search Results</a></div>
         <div class="performance__details">
             <div class="performance__header">
-                <h1>{{ formatDate(performance.performance_date, true) }} Performance Detail</h1>
+                <h1>{{ formatDate(performance.performance_date, 'detail') }} Performance Detail</h1>
                 <h2>{{ formatTime(performance.performance_date) }} | {{ formatLocation(performance.venue, performance.location) }}</h2>
             </div>
             <div class="headerLinks">

package/src/components/SearchHistory.vue

@@ -48,7 +48,7 @@ const filterHistory = (indexName) => {
                 <h4 v-if="index == 0">Performances</h4>
                 <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, true, false) }}
+                    {{ formatDate((new Date(item.date)).getTime() / 1000, 'history', false) }}
                 </div>
             </template>
         </div>
@@ -57,7 +57,7 @@ const filterHistory = (indexName) => {
                 <h4 v-if="index == 0">Artists</h4>
                 <div 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, true, false) }}
+                    {{ formatDate((new Date(item.date)).getTime() / 1000, 'history', false) }}
                 </div>
             </template>
         </div>
@@ -66,7 +66,7 @@ const filterHistory = (indexName) => {
                 <h4 v-if="index == 0">Works</h4>
                 <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, true, false) }}
+                    {{ formatDate((new Date(item.date)).getTime() / 1000, 'history', false) }}
                 </div>
             </template>
         </div>

package/src/components/SearchTab.vue

@@ -1,5 +1,7 @@
 <script setup>
-    import { ref } from 'vue'
+    import { ref, onMounted, useTemplateRef } from 'vue'
+    import { useDebounceFn } from '@vueuse/core'
+    import _ from 'lodash';
     import {
         AisClearRefinements,
         AisCurrentRefinements,
@@ -16,8 +18,8 @@
     import { history as historyRouter } from 'instantsearch.js/es/lib/routers'
     import { simple as simpleStateMapping } from 'instantsearch.js/es/lib/stateMappings'
     import VueDatePicker from '@vuepic/vue-datepicker'
-    import slugify from '../composables/slugify'
 
+    import slugify from '../composables/slugify'
     import PAccordion from './PAccordion.vue'
     import formatDate from '../composables/formatDate'
     import formatSearchTitle from '../composables/formatSearchTitle'
@@ -87,11 +89,29 @@
                 updateStateRefs(uiState)
                 
                 return uiState
-            }
+            },
+            createURL({ qsModule, location, routeState }) {
+                const { origin, pathname, hash } = location;
+                const indexState = routeState["instant_search"] || {};
+                const queryString = qsModule.stringify(routeState);
+
+                const uiState = qsModule.parse(location.search.slice(1))
+                
+                updateSearchHistory(uiState)
+
+                // if (!indexState.query) {
+                //     return `${origin}${pathname}${hash}`;
+                // }
+
+                return `${origin}${pathname}?${queryString}${hash}`;
+            },
         }),
+        
         stateMapping: simpleStateMapping()
     })
 
+    const mainRefinementList = ref({})
+
     const server = {
       connectionTimeoutSeconds: 20,
       apiKey:  props.searchKey, 
@@ -180,48 +200,61 @@
             showByWorks.value = Object.keys(workFilters.value).length !== 0
 
             // update search history
-            let searchHistory = sessionStorage.getItem('searchHistory') ? JSON.parse(sessionStorage.getItem('searchHistory')) : []
-            // if only pagination, don't add to search history
-            if (uiState[props.indexName].page && !uiState[props.indexName].query && !uiState[props.indexName].refinementList && !uiState[props.indexName].menu) {
-                return
-            }
-            searchHistory = searchHistory.map((item) => {
-                // make sure that all queries aren't entered into the history as a user types each letter
-                if (uiState[props.indexName].query?.includes(item.query) && uiState[props.indexName].query != item.query) {
-                    return {
-                        date: new Date(),
-                        uiState: uiState,
-                        query: uiState[props.indexName].query,
-                        link: document.location.href
-                    }
-                } else {
-                    return item
-                }
-            })
-
-            //make sure we're not just adding pagination
-            let addState = true
-            searchHistory.forEach((item) => {
-                if (item.link.replace(/\&page=\d*/, "") == document.location.href.replace(/\&page=\d*/, "")) {
-                    addState = false
-                    return
-                }
-            })
             
             
-            if (addState && !(searchHistory.map((a) => a.link)).includes(document.location.href) && 
-                    document.location.search != '') {
-                searchHistory.push({
+            updateTitle(uiState[props.indexName])
+            
+        }
+    }
+
+    const updateSearchHistory = (uiState) => {
+        let searchHistory = sessionStorage.getItem('searchHistory') ? JSON.parse(sessionStorage.getItem('searchHistory')) : []
+        // if only pagination, don't add to search history
+        if (!uiState[props.indexName]) {
+            return
+        }
+        if (uiState[props.indexName].page && !uiState[props.indexName].query && !uiState[props.indexName].refinementList && !uiState[props.indexName].menu) {
+            return
+        }
+        searchHistory = searchHistory.map((item) => {
+            // make sure that all queries aren't entered into the history as a user types each letter
+            if (uiState[props.indexName].query?.includes(item.query) && uiState[props.indexName].query != item.query) {
+                return {
                     date: new Date(),
                     uiState: uiState,
                     query: uiState[props.indexName].query,
                     link: document.location.href
-                })
+                }
+            } else {
+                return item
+            }
+        })
+
+        //make sure we're not just adding pagination
+        let addState = true
+        searchHistory.forEach((item) => {
+            if (item.link.replace(/\&page=\d*/, "") == document.location.href.replace(/\&page=\d*/, "")) {
+                addState = false
+                return
+            }
+            if (_.isEqual(item.uiState[props.indexName], uiState[props.indexName])) {
+                addState = false
+                return
             }
+        })
         
-            sessionStorage.setItem('searchHistory', JSON.stringify(searchHistory))
-            updateTitle(uiState[props.indexName])
+        
+        if (addState && !(searchHistory.map((a) => a.link)).includes(document.location.href) && 
+                document.location.search != '') {
+            searchHistory.push({
+                date: new Date(),
+                uiState: uiState,
+                query: uiState[props.indexName].query,
+                link: document.location.href
+            })
         }
+    
+        sessionStorage.setItem('searchHistory', JSON.stringify(searchHistory))
     }
 
     const getWorkFilters = (refinementList) => {
@@ -248,7 +281,12 @@
 
     const onStateChange = ({ uiState, setUiState }) => {
         updateStateRefs(uiState)
-        setUiState(uiState)    
+        setUiState(uiState)
+        
+        // console.log('before', new Date())
+
+        // setTimeout(() => , 3000)
+        // console.log('after', new Date())
     }
 
     const updateTitle = (state) => {
@@ -316,7 +354,7 @@
        
     }
 
-    const intersect = (filters, work) => {
+     const intersect = (filters, work) => {
         let intersectKeys = Object.keys(filters).filter(k => Object.hasOwn(work, k))
         let intersectArray = []
         intersectKeys.forEach((key) => {
@@ -375,8 +413,11 @@
         } else {
             return items
         }
-        
+    }
 
+    const refineAndScroll = (refine, params, scrollId) => {
+        refine(params)
+        document.getElementById(scrollId).scrollIntoView()
     }
 
     const toMinValue = (value, range) => {
@@ -395,6 +436,31 @@
       return typeof maxValue === "number" &&  maxValue !== null && maxValue !== maxRange ? maxValue : maxRange
     }
 
+    function debounce(func, params, delay) {
+        let timeout;
+        // return function (params) {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => {
+                func(params);
+            }, delay);
+        //};
+    }
+
+    const getHeadingStyle = (attribute) => {       
+        if (mainRefinementList.value && typeof(mainRefinementList.value[attribute]) !== 'undefined' && mainRefinementList.value[attribute]) {
+            try {
+                if (mainRefinementList.value[attribute] && typeof(mainRefinementList.value[attribute].items) !== 'undefined' && mainRefinementList.value[attribute].items.length) {
+                    return ''
+                } else {
+                    return '-gray'
+                }
+            } catch (e) {
+                return ''
+            }
+        }
+        return  ''
+    }
+
 </script>
 
 <template>
@@ -403,9 +469,8 @@
         :index-name="props.indexName"
         :routing="routing"
         :on-state-change="onStateChange"
-        
     >
-        <div :class="`tabs__content ${ filtersClosed ? 'closed' : 'open'}`" :id="`${props.indexName}_tabs__content`">
+            <div :class="`tabs__content ${ filtersClosed ? 'closed' : 'open'}`" :id="`${props.indexName}_tabs__content`">
             <!-- Header and Search Section -->
             <div class="eventsSearch__topSection">
                 <!-- Search Filters Section -->
@@ -413,10 +478,7 @@
                     <div class="filters__row">
                         <!-- Search Box -->
                         <div class="filters__filterGroup filters__search">
-                            <ais-search-box
-                                
-                                class="searchBox"
-                            >
+                            <ais-search-box class="searchBox" >
                                 <template v-slot="{ currentRefinement, isSearchStalled, refine }">
                                     <label for="searchbox" class="label__hidden">{{ props.searchPlaceholder }}</label>
                                     <input
@@ -517,17 +579,18 @@
                             </a>
                         </div>
                     </div>
-                    <ais-refinement-list v-for="refinement in mainRefinements" :attribute="refinement.attribute" operator="and">
-                        <template v-slot="{items, refine, searchForItems, isFromSearch}">
-                            <p-accordion :name="refinement.title" class="accordion" :start-open="true">
-                                <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>
-                                    </div>
-                                </summary>
+                    <p-accordion class="accordion" v-for="refinement in mainRefinements">
+                        <summary class="accordion__summary">
+                            <h6 :class="`accordion__heading ${ getHeadingStyle(refinement.attribute) }`">{{ refinement.title }}</h6>
+                            <div class="accordion__iconWrapper">
+                                <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>
+                        <ais-refinement-list :attribute="refinement.attribute" operator="and" :ref="(el) => {mainRefinementList[refinement.attribute] = el}">
+                            <template v-slot="{items, refine, searchForItems, isFromSearch}">
+                                
                                 <div class="accordion__content" v-if="items.length || isFromSearch">
                                     <div class="ais-SearchBox searchBox -filter">
                                         <label class="label__hidden" :for="refinement.attribute">{{ refinement.placeholder }}</label>
@@ -562,12 +625,13 @@
                                             <label :for="slugify(refinement.title + ' ' + item.value)">{{ item.value }}</label><span class="eventsSearch__refinementCount">{{ item.count }}</span>
                                         </label>
                                     </div>
-                                </div> 
-                            </p-accordion>
-                            <!-- <template v-else><div></div></template> -->
-                        </template>
-                    </ais-refinement-list>
-                    <p-accordion class="ais-RefinementList" v-if="props.addlRefinements" :start-open="false" open-text="Fewer Filters" closed-text="More Filters">
+                                </div>
+                            </template>
+                        </ais-refinement-list> 
+                    </p-accordion>
+                    <!-- <template v-else><div></div></template> -->
+                       
+                    <p-accordion class="ais-RefinementList" v-if="props.addlRefinements" name="more_filters" :start-open="false" open-text="Fewer Filters" closed-text="More Filters">
                         <summary class="accordion__summary">
                             <h6 class="accordion__heading -thin">More Filters</h6>
                         </summary>
@@ -608,7 +672,7 @@
                                                         <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>
-                                                        <label :for="slugify(refinement.title + ' ' + item.value)">{{ item.value }}</label><span class="itemCount">{{ item.count }}</span>
+                                                        <label :for="slugify(refinement.title + ' ' + item.value)">{{ item.value }}</label><span class="eventsSearch__refinementCount">{{ item.count }}</span>
                                                     </label>
                                                 </div>
                                             </div> 
@@ -660,9 +724,10 @@
                                 :href="createURL()"
                                 @click.prevent="refine"
                             >
-                                <button>Clear</button>
-                                <button @click="toggleFiltersMobile()" class="filterApply">Apply</button>
+                                <button @click="toggleFiltersMobile()" class="filterClear">Clear</button>
+                                
                             </a>
+                            <button @click="toggleFiltersMobile()" class="filterApply">Apply</button>
                         </template>
                     </ais-clear-refinements>
                     
@@ -698,7 +763,7 @@
                             </div>
                         </div>
                         <div class="eventsSearch__resultsHeader">
-                            <div class="eventsSearch__resultsTitle">
+                            <div class="eventsSearch__resultsTitle" id="resultsTitle">
                                 <svg width="24" height="24" viewBox="0 0 24 24" :id="`${props.indexName}_filterToggleOn`" :class="`filters__toggleOn ${filtersClosed ? 'closed' : ''}`" @click="toggleFilters()">
                                     <rect width="24" height="24" rx="4" fill="#01ABE6"/>
                                     <path d="M6 7.25H18.8864" stroke="white" stroke-linecap="round"/>
@@ -818,14 +883,14 @@
                         >
                             <ul class="resultsPagination__paginationComponent" v-if="pages.length > 1">
                                 <li v-if="!isFirstPage && nbPages > 5" class="arrow">
-                                    <a :href="createURL(0)" @click.prevent="refine(0)">
+                                    <a :href="createURL(0)" @click.prevent="refineAndScroll(refine, 0, 'resultsTitle')">
                                     ‹‹
                                     </a>
                                 </li>
                                 <li v-if="!isFirstPage && nbPages > 5" class="arrow">
                                     <a
                                     :href="createURL(currentRefinement - 1)"
-                                    @click.prevent="refine(currentRefinement - 1)"
+                                    @click.prevent="refineAndScroll(refine, currentRefinement - 1, 'resultsTitle')"
                                     >
                                     ‹
                                     </a>
@@ -835,32 +900,32 @@
                                         <a
                                         :href="createURL(page)"
                                         :style="{ fontWeight: page === currentRefinement ? 'bold' : '' }"
-                                        @click.prevent="refine(page)"
+                                        @click.prevent="refineAndScroll(refine, page, 'resultsTitle')"
                                         >
                                         {{ page + 1 }}
                                         </a>
                                     </li>
                                     <li v-if="pages.length > 5">...</li>
                                     <li v-if="pages.length > 5">
-                                        <a :href="createURL(nbPages - 1)">
+                                        <a :href="createURL(nbPages - 1)" @click.prevent="refineAndScroll(refine, nbPages - 1, 'resultsTitle')">
                                             {{ nbPages }}
                                         </a>
                                     </li>
                                 </template>
                                 <template v-else>
                                     <li>
-                                        <a :href="createURL(0)" @click.prevent="refine(0)" :style="{ fontWeight: currentRefinement === 0 ? 'bold' : '' }">
+                                        <a :href="createURL(0)" @click.prevent="refineAndScroll(refine, 0, 'resultsTitle')" :style="{ fontWeight: currentRefinement === 0 ? 'bold' : '' }">
                                         1
                                         </a>
                                     </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)" :style="{ fontWeight: nbPages - (5 - page) - 1 === currentRefinement ? 'bold' : '' }">
+                                        <a :href="createURL(nbPages - (5 - page) - 1)" @click.prevent="refineAndScroll(refine, nbPages - (5 - page) - 1, 'resultsTitle')" :style="{ fontWeight: nbPages - (5 - page) - 1 === currentRefinement ? 'bold' : '' }">
                                             {{ nbPages - (5 - page) }}
                                         </a>
                                     </li>
                                     <li v-for="page in nbPages - 1" v-if="nbPages <= 5">
-                                        <a :href="createURL(page)" :style="{ fontWeight: page === currentRefinement ? 'bold' : '' }">
+                                        <a :href="createURL(page)" @click.prevent="refineAndScroll(refine, page, 'resultsTitle')" :style="{ fontWeight: page === currentRefinement ? 'bold' : '' }">
                                             {{ page + 1 }}
                                         </a>
                                     </li>
@@ -868,20 +933,20 @@
                                 <li v-if="!isLastPage && nbPages > 5" class="arrow">
                                     <a
                                     :href="createURL(currentRefinement + 1)"
-                                    @click.prevent="refine(currentRefinement + 1)"
+                                    @click.prevent="refineAndScroll(refine, currentRefinement + 1, 'resultsTitle')"
                                     >
                                     ›
                                     </a>
                                 </li>
                                 <li v-if="!isLastPage && nbPages > 5" class="arrow">
-                                    <a :href="createURL(nbPages)" @click.prevent="refine(nbPages)">
+                                    <a :href="createURL(nbPages)" @click.prevent="refineAndScroll(refine, currentRefinement + 1, 'resultsTitle')">
                                     ››
                                     </a>
                                 </li>
                             </ul>
                             <div v-else></div>
                         </template>
-
+ 
                     </ais-pagination>
                 </nav>
             </section> 

package/src/composables/formatDate.js

@@ -1,4 +1,4 @@
-export default function formatDate(unix_timestamp, detail = false, showTimezone = true) {
+export default function formatDate(unix_timestamp, type = null, showTimezone = true) {
     // multiplied by 1000 so that the argument is in milliseconds, not seconds
     const date = new Date(unix_timestamp * 1000)
     const days = ["Sun", "Mon", "Tues", "Weds", "Thurs", "Fri", "Sat"]
@@ -7,7 +7,9 @@ export default function formatDate(unix_timestamp, detail = false, showTimezone
     const amPm = date.getHours() + 1 > 12 ? "pm" : "am"
     const minutes = "0" + date.getMinutes()
 
-    if (detail) {
+    if (type == 'detail') {
+        return `${days[date.getDay()]}, ${(months[date.getMonth()]).substring(0, 3)} ${date.getDate()}, ${date.getFullYear()}`
+    } else if (type == 'history') {
         return `${days[date.getDay()]}, ${(months[date.getMonth()]).substring(0, 3)} ${date.getDate()}, ${hour}:${minutes.substr(-2)}${amPm}${ showTimezone ? ' EDT' : '' }`
     } else {
         return `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`

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

@@ -7,6 +7,6 @@
         padding: 0.5rem 2rem 0.5rem 4rem;
     }
     @include at(lg) {
-        padding: 0.5rem 4rem 0.5rem 8rem;
+        padding: 0.5rem 4rem 0.5rem 6.25rem;
     }
 }

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

@@ -3,9 +3,18 @@
     max-height: 10rem;
     min-height: 1.8rem;
     overflow-y: auto;
+    padding-bottom: 0.5rem;
     input[type=checkbox] {
-      border: thin solid var(--color-dark-blue);
-      // background-color: var(--color-white);
+      border: thin solid var(--color-gray-100);
+      background-color: var(--color-white);
+      border-radius: 0;
+      height: 1rem;
+      width: 1rem;
+      
+    }
+    input[type=checkbox]:checked {
+      border: thin solid var(--color-gray-100);
+      background-color: var(--color-turquoise);
       border-radius: 0;
       height: 1rem;
       width: 1rem;

package/src/styles/config/index.scss

@@ -31,10 +31,10 @@
    * a default neutral color scale.
    */
   --color-gray-50:  #f2f2f2;
-  --color-gray-100: #e5e5e5;
-  --color-gray-200: #cccccc;
+  --color-gray-100: #d7d7d7;
+  --color-gray-200: #d3d0cd;
   --color-gray-300: #b3b3b3;
-  --color-gray-400: #999999;
+  --color-gray-400: #9A9FA1;
   --color-gray-500: #808080;
   --color-gray-600: #666666;
   --color-gray-700: #4c4c4c;
@@ -50,12 +50,11 @@
   --color-blue-700: #003D99;
   --color-aqua: #00CCCC;
   --color-aqua-700: #009999;
-  --color-dark-blue: #14284E;
+  --color-dark-blue: #14294E;
   --color-white: #ffffff;
   --color-mid-blue: #12305A;
   --color-light-gray: #F5F5F5;
-  --color-light-gold: #FBF4EF;
-  --color-dark-gray: #686F73;
+  --color-light-gold: #fcf3ec;
   --color-turquoise: #01ABE6;
   --color-black:#000000;
   --color-mid-gray:  #686F73;

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

@@ -10,7 +10,8 @@
     height: var(--accordion-height-closed);
     overflow: hidden;
     transition: height var(--root-duration-moderate) var(--root-ease-out);
-    border-top: thin solid var(--color-gray-300);
+    border-top: thin solid var(--color-gray-200);
+    padding-bottom: 0.4rem;
 
     &__summary {
         align-items: center;
@@ -20,7 +21,7 @@
         justify-items: start;
         list-style: none;
         outline-offset: -2px;
-        padding: .5rem 0;
+        padding: .5rem 0 0 0;
         user-select: none;
 
         &::-webkit-details-marker {
@@ -53,7 +54,7 @@
     }
     
     &__content {
-        padding: 0 .5rem 1.5rem 0;
+        padding: 0 .5rem 0 0;
     }
     
     &[open]:not(&.-closing) {

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

@@ -12,6 +12,7 @@
 
 .ais-CurrentRefinements--noRefinement {
     border: none;
+    height: 0;
 }
 
 .ais-RefinementList {

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

@@ -24,7 +24,7 @@
         align-items: center !important;
 
         &::placeholder {
-            color: #666;
+            color: #686F73;
         }
 
         @media screen and (min-width: 1070px) {

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

@@ -29,6 +29,9 @@
         font-size: 1.1rem;
         margin-right: .5rem;
         display: flex;
+        select {
+          margin: 0 0 0.2rem 0;
+        }
         //align-items: center;
         // select {
         //   margin-bottom: 0;

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

@@ -43,7 +43,7 @@
        border: none;
        outline: none;
        &::placeholder {
-        color: var(--color-gray-100);
+        color: var(--color-mid-gray);
        }
        &.-filter {
           background-color:#ffffff;
@@ -53,7 +53,7 @@
           width: 100%;
        }
        &.-filter::placeholder {
-        color: var(--color-gray-100);
+        color: var(--color-mid-gray);
        }
      }