Merge pull request #513 from mlibrary/style-updates

Style Adjustments

src/index.js

@@ -1,4 +1,6 @@
 import './stylesheets/colors.css';
+import './stylesheets/base.css';
+import './stylesheets/typography.css';
 import './stylesheets/forms.css';
 import './stylesheets/main.css';
 import './stylesheets/spacing.css';
@@ -19,10 +21,10 @@ const App = () => {
   return (
     <Provider store={store}>
       <BrowserRouter>
+        <A11yLiveMessage />
+        <ScrollToTop />
+        <SearchHeader />
         <div className='site-wrapper'>
-          <A11yLiveMessage />
-          <ScrollToTop />
-          <SearchHeader />
           <Routes>
             <Route
               path='/'
@@ -47,8 +49,8 @@ const App = () => {
             <Route path=':datastoreSlug/*' element={<DatastoreRoute />} />
             <Route path='*' element={<NoMatch />} />
           </Routes>
-          <Footer />
         </div>
+        <Footer />
       </BrowserRouter>
     </Provider>
   );

src/modules/advanced/components/ActiveAdvancedFilters/styles.css

@@ -4,5 +4,4 @@
 
 .active-filter-list {
   font-size: 0.9rem;
-  margin-left: 2.5rem;
 }

src/modules/advanced/components/AdvancedSearchContainer/index.js

@@ -41,7 +41,7 @@ const AdvancedSearchContainer = () => {
         ]}
       />
 
-      <H1 className='heading-xlarge'>Advanced Search</H1>
+      <H1>Advanced Search</H1>
       <p className='font-lede'>Select a search category below for associated advanced search options.</p>
 
       <nav className='advanced-search-nav' aria-label='Advanced Search Datastores'>

src/modules/advanced/components/AdvancedSearchForm/index.js

@@ -85,7 +85,7 @@ const AdvancedSearchForm = ({ datastore }) => {
 
   return (
     <form className='y-spacing container__rounded page margin-top__none' onSubmit={handleSubmit}>
-      <h2 className='h1'>{name} Search</h2>
+      <h2>{name} Search</h2>
       {errors.map((error, index) => {
         return (
           <Alert type='error' key={index}>

src/modules/advanced/components/FiltersContainer/index.js

@@ -66,7 +66,7 @@ const FiltersContainer = ({ datastoreUid }) => {
   return (
     <>
       {activeFilters && <ActiveAdvancedFilters {...{ activeFilters, filters: filterGroups }} />}
-      <h2 className='heading-large'>Additional search options</h2>
+      <h3>Additional search options</h3>
       <div className='advanced-filters-inner-container'>
         {filterGroupings.map((filterGroup, groupIndex) => {
           return (
@@ -88,7 +88,7 @@ const FiltersContainer = ({ datastoreUid }) => {
                       ];
                       return (
                         <div key={index} className='advanced-filter-container'>
-                          <h2 className='advanced-filter-label-text'>{name}</h2>
+                          <h4 className='advanced-filter-label-text'>{name}</h4>
                           <div className='advanced-filter-inner-container'>
                             {type === 'multiple_select' && <Multiselect {...{ currentFilters, datastoreUid, filterGroupUid: uid, filters, name }} />}
                             {type === 'date_range_input' && <DateRangeInput {...{ currentFilter: currentURLFilters[0], datastoreUid, filterGroupUid: uid }} />}
@@ -100,7 +100,7 @@ const FiltersContainer = ({ datastoreUid }) => {
                   )
                 : (
                     <div className='advanced-filter-container'>
-                      <h2 className='advanced-filter-label-text'>{filterGroup}</h2>
+                      <h4 className='advanced-filter-label-text'>{filterGroup}</h4>
                       {advancedDatastoreFilters[filterGroup].map((advancedFilter, index) => {
                         return <AdvancedFilter key={index} {...{ advancedFilter, changeAdvancedFilter }} />;
                       })}

src/modules/browse/components/BrowseAtoZ/index.js

@@ -16,7 +16,7 @@ const BrowseAtoZ = () => {
 
   return (
     <section className='browse'>
-      <h2 className='heading-large margin-top__none'>Titles A-Z</h2>
+      <h2 className='margin-y__none'>Titles A-Z</h2>
       <ul className='browse-list'>
         {['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0-9', 'Other'].map((character, key) => {
           return (

src/modules/browse/components/BrowseByFilters/index.js

@@ -14,7 +14,7 @@ const NestedList = ({ browserFilterTo, filter }) => {
             </Anchor>
           )
         : (
-            <h3 className='heading-medium'>{filter.name}</h3>
+            <h3>{filter.name}</h3>
           )}
       {filter.children && (
         <ul>
@@ -50,8 +50,8 @@ const BrowseByFilters = ({ filters }) => {
     <>
       {Object.keys(filters).map((uid) => {
         return (
-          <section key={uid} className='browse u-margin-top-1'>
-            <h2 className='heading-large u-margin-top-none'>{filters[uid].name}</h2>
+          <section key={uid} className='browse margin-top__m'>
+            <h2 className='margin-y__none'>{filters[uid].name}</h2>
             <ul className='nested-list'>
               {filters[uid].filters.map((filter) => {
                 return (

src/modules/browse/components/BrowsePage/index.js

@@ -18,14 +18,14 @@ const BrowsePage = () => {
   });
 
   return (
-    <div className='container container-narrow u-margin-top-1'>
+    <div className='container container-narrow margin-top__m'>
       <Breadcrumb
         items={[
           { text: `${datastore.name}`, to: `/${datastore.slug}${document.location.search}` },
           { text: 'Browse' }
         ]}
       />
-      <H1 className='heading-xlarge'>Browse all {datastore.name}</H1>
+      <H1>Browse all {datastore.name}</H1>
       <p className='font-lede'>When you&apos;re stuck looking for specific {datastore.name.toLowerCase()} or just want to see what&apos;s out there, the browse page makes finding the right {datastore.name.toLowerCase()} easy. Browse all {datastore.name.toLowerCase()} titles alphabetically or by academic discipline.</p>
       <BrowseAtoZ />
       <BrowseByFilters filters={browse} />

src/modules/browse/components/ShelfBrowse/index.js

@@ -90,7 +90,7 @@ const ShelfBrowse = () => {
   return (
     <section className='shelf-browse container__rounded'>
       <header className='flex__responsive'>
-        <h2 className='margin-y__none heading-medium'>Shelf browse</h2>
+        <h2 className='margin-y__none h4'>Shelf browse</h2>
         <BrowseLink value={callNumber}>
           <Icon icon='list' size='24' className='margin-right__xs' />Browse in call number list
         </BrowseLink>

src/modules/core/components/Footer/index.js

@@ -1,3 +1,4 @@
+import './styles.css';
 import { Anchor, Icon } from '../../../reusable';
 import React from 'react';
 
@@ -23,7 +24,7 @@ const Footer = () => {
         role='contentinfo'
       >
         <div className='container container-medium'>
-          <ul className='site-footer-nav-list'>
+          <ul className='site-footer-nav-list list__unstyled'>
             <li>
               <Anchor to='/everything'>
                 Home

src/modules/core/components/Footer/styles.css

@@ -0,0 +1,26 @@
+.site-footer {
+  background: white;
+  border-top: 2px solid var(--search-color-grey-300);
+  padding-bottom: 3.5rem;
+  padding-top: 1.5rem;
+  text-align: center;
+}
+
+.site-footer,
+.site-footer a {
+  color: var(--search-color-grey-600);
+}
+
+.site-footer-nav-list {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.5rem;
+  justify-content: center;
+}
+
+@media (min-width: 980px) {
+  .site-footer-nav-list {
+    flex-direction: row;
+  }
+}

src/modules/datastores/components/DatastoreNavigation/index.js

@@ -6,7 +6,7 @@ import { stringifySearch } from '../../../search';
 const DatastoreNavigation = ({ activeFilters, activeInstitution, currentDatastore, datastores, page, query, sort }) => {
   return (
     <nav className='datastore-nav' aria-label='Datastores'>
-      <ol>
+      <ol className='list__unstyled'>
         {datastores.map((datastore) => {
           const { isMultisearch, name, slug, uid } = datastore;
           const queryString = stringifySearch({

src/modules/datastores/components/DatastoreNavigation/styles.css

@@ -7,8 +7,6 @@
 .datastore-nav ol {
   display: flex;
   flex-direction: column;
-  list-style: none;
-  margin: 0;
   justify-content: center;
 }
 
@@ -32,6 +30,7 @@
   align-items: center;
   border-color: transparent;
   border-style: solid;
+  border-width: 0;
   border-left-width: 3px;
   display: flex;
   height: 100%;

src/modules/datastores/components/Landing/index.js

@@ -60,7 +60,7 @@ const Landing = ({ activeDatastore, defaultInstitution, options }) => {
       {uid === 'mirlyn' && (
         <div className='container container-narrow'>
           <div className='institution-select-landing-container center-text'>
-            <h2 className='heading-large'>
+            <h2>
               To find materials closest to you, please choose a library
             </h2>
             <p className='flex flex__responsive'>

src/modules/getthis/components/GetThisPage/index.js

@@ -31,7 +31,7 @@ const GetThisPage = () => {
           ]}
         />
       </div>
-      <H1 className='heading-xlarge'>Get This</H1>
+      <H1>Get This</H1>
       {record?.fields?.length === 0 && record?.names?.length === 0
         ? (
             <section className='container__rounded page'>

src/modules/lists/components/List/index.js

@@ -31,7 +31,7 @@ const List = ({ activeDatastore, currentDatastore }) => {
       />
 
       <div className='lists-header'>
-        <H1 className='heading-xlarge'>My Temporary {name} List</H1>
+        <H1>My Temporary {name} List</H1>
         <div className='lists-header-info'>
           {Boolean(listLength) && (
             <button

src/modules/pages/components/AboutLibrarySearch/index.js

@@ -11,7 +11,7 @@ const AboutLibrarySearch = () => {
   return (
     <div className='container container-narrow'>
       <main className='container__rounded page'>
-        <H1 className='u-margin-top-none'>About Library Search</H1>
+        <H1>About Library Search</H1>
         <p>Library Search is the University of Michigan Library&apos;s discovery interface. Launched in July 2018, it is designed to provide a consistent user experience across the physical and electronic resources the library provides. The Everything view displays a few results matching a user&apos;s keyword search under separate panels for each of the five categories of information: Catalog, Articles, Databases, Online Journals, and Guides & More. Each of these categories has an in-depth view that enables users to drill down into those materials to find what best meets their needs.</p>
         <h2>Overview</h2>
         <p>Although the user interface is intentionally similar across search categories, it contains a variety of information sources where each kind of data are managed:</p>

src/modules/pages/components/AccessibilityPage/index.js

@@ -10,7 +10,7 @@ const AccessibilityPage = () => {
   return (
     <div className='container container-narrow'>
       <main className='container__rounded page'>
-        <H1 className='u-margin-top-none'>Accessibility</H1>
+        <H1>Accessibility</H1>
         <p>We are dedicated to creating inclusive services and products for all users. We are constantly working to make Library Search as accessible and usable as possible.</p>
         <p>We aim to meet <Anchor href='https://www.w3.org/TR/WCAG21/'>WCAG 2.1 AA standards</Anchor></p>
         <h2>Compatibility with tools</h2>

src/modules/pages/components/NoMatch/index.js

@@ -8,27 +8,25 @@ const NoMatch = () => {
   }, []);
 
   return (
-    <div className='container container-narrow'>
-      <main className='page-not-found-container'>
-        <H1 className='heading-xlarge'>Page not found - 404</H1>
-        <p className='font-lede'>We can&apos;t find the page you&apos;re looking for.</p>
-        <h2 className='heading-medium'>Try these options instead</h2>
-        <ul className='margin-left-2 feedback-form-fieldset'>
-          <li>
-            Start over from <Anchor to='/everything'>the homepage</Anchor>.
-          </li>
-          <li className='u-margin-top-1'>
-            The link to the resource you&apos;re looking for may have changed, please search for the title or related keyword to check for current access.
-          </li>
-          <li className='u-margin-top-1'>
-            <Anchor to='/databases/browse'>Browse all Databases</Anchor> or <Anchor to='/onlinejournals/browse'>Browse all Online Journals</Anchor> to view comprehensive lists of current library resources.
-          </li>
-          <li className='u-margin-top-1'>
-            <Anchor href='https://www.lib.umich.edu/ask-librarian'>Ask a librarian</Anchor> and we&apos;ll help you find what you&apos;re looking for!
-          </li>
-        </ul>
-      </main>
-    </div>
+    <main className='container container-narrow padding-top__m'>
+      <H1>Page not found - 404</H1>
+      <p className='font-lede'>We can&apos;t find the page you&apos;re looking for.</p>
+      <h2>Try these options instead</h2>
+      <ul>
+        <li>
+          Start over from <Anchor to='/everything'>the homepage</Anchor>.
+        </li>
+        <li>
+          The link to the resource you&apos;re looking for may have changed, please search for the title or related keyword to check for current access.
+        </li>
+        <li>
+          <Anchor to='/databases/browse'>Browse all Databases</Anchor> or <Anchor to='/onlinejournals/browse'>Browse all Online Journals</Anchor> to view comprehensive lists of current library resources.
+        </li>
+        <li>
+          <Anchor href='https://www.lib.umich.edu/ask-librarian'>Ask a librarian</Anchor> and we&apos;ll help you find what you&apos;re looking for!
+        </li>
+      </ul>
+    </main>
   );
 };
 

src/modules/records/components/BentoboxList/index.js

@@ -47,7 +47,7 @@ const BentoboxList = () => {
             {index === 2 && <Specialists show={2} />}
             <section className={`container__rounded bentobox bentobox-${uid}`}>
               <Anchor className='flex padding-x__m padding-y__xs bentobox-heading' to={`/${slug}${searchQuery}`}>
-                <h2 className='h4 margin__none'>{name}</h2>
+                <h2 className='size__inherit strong margin__none'>{name}</h2>
                 <small>
                   {typeof totalResults === 'number'
                     ? `${totalResults.toLocaleString()} Result${totalResults === 1 ? '' : 's'}`

src/modules/records/components/Metadata/styles.css

@@ -20,6 +20,11 @@
   }
 }
 
+.record-preview .metadata-list {
+  margin: 0;
+  margin-top: 0.5rem;
+}
+
 .metadata-list-item > dd > ol.list__unstyled > li {
   display: inline-block;
 }

src/modules/records/components/Record/index.js

@@ -15,7 +15,7 @@ const Header = ({ datastoreUid, record }) => {
   const datastoreSlug = getDatastoreSlugByUid(datastoreUid);
   const pictureField = getField(record.fields, 'picture');
   let recordTitleLink = `/${datastoreSlug}/record/${recordUid}${location.search}`;
-  let recordHeaderClassName = 'record-title';
+  let recordHeaderClassName = 'record-title margin__none';
 
   // Special Library Website case
   if (datastoreUid === 'website') {

src/modules/records/components/RecordList/index.js

@@ -78,8 +78,8 @@ const RecordList = () => {
         ? (
             <>
               <KeywordSwitch {...{ datastore, query }} />
-              <div className='no-results-suggestions'>
-                <h2 className='heading-small margin-top__none'>Other suggestions</h2>
+              <div className='container__rounded no-shadow padding__m margin-top__m'>
+                <h3 className='margin-y__none'>Other suggestions</h3>
                 <ul className='margin-bottom__none'>
                   <li>Try looking at the other search categories linked below the search box.</li>
                   <li><ILLRequestMessage /></li>

src/modules/records/components/RecordPreview/index.js

@@ -21,7 +21,7 @@ const Header = ({ datastoreUid, record, searchQuery }) => {
 
   return (
     <>
-      <h3 className='record-preview-heading'>
+      <h3 className='size__inherit strong margin__none'>
         {[].concat(record.names).map((title, index) => {
           if (index > 0) {
             return (
@@ -48,7 +48,7 @@ const Header = ({ datastoreUid, record, searchQuery }) => {
               key={index}
             >
               <TrimString string={title} />
-              <Icon icon='open_in_new' className='icon' size='1.125rem' />
+              <Icon icon='open_in_new' className='icon margin-left__2xs text-grey' size='1.125rem' />
             </Anchor>
           );
         })}

src/modules/specialists/components/Specialists/index.js

@@ -27,7 +27,7 @@ const Specialists = ({ show = 3 }) => {
   return (
     <section className='container__rounded specialists'>
       <div className='flex flex__responsive padding__m padding-y__s specialists-heading'>
-        <h2 className='h4 margin__none'>Talk to a Library Specialist</h2>
+        <h2 className='size__inherit strong margin__none'>Talk to a Library Specialist</h2>
         <Anchor href='https://www.lib.umich.edu/research-and-scholarship/help-research/find-specialist'>
           Find more specialists
           <Icon icon='open_in_new' size='18' className='icon' />
@@ -41,7 +41,7 @@ const Specialists = ({ show = 3 }) => {
               <li className='padding__m specialist' key={`specialist-${index}`}>
                 <img src={picture} alt='' className='specialist__picture' />
                 <section>
-                  <h3 className='h4 margin__none'>
+                  <h3 className='size__inherit strong margin__none'>
                     <Anchor href={url}>
                       {name}
                       <Icon icon='open_in_new' size='18' className='icon' />