Moving/replacing inline styles.

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

@@ -17,7 +17,7 @@ const AdvancedSearchContainer = () => {
   const activeDatastore = datastores[activeDatastoreIndex];
 
   return (
-    <div className='container container-narrow' style={{ marginTop: 'var(--search-spacing-m)' }}>
+    <div className='container container-narrow margin-top__m'>
       <Breadcrumb
         items={[
           { text: `${activeDatastore.name}`, to: `/${activeDatastore.slug}${document.location.search}` },

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

@@ -10,13 +10,11 @@ const Footer = () => {
           target='_blank'
           rel='noopener noreferrer'
           aria-label='Give feedback about this page - Opens in new window'
-          style={{ padding: '.15em' }}
         >
           Give feedback about this page
           <Icon
             icon='open_in_new'
-            size={22}
-            style={{ paddingLeft: '.25em' }}
+            className='margin-left__2xs'
           />
         </Anchor>
       </aside>

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

@@ -22,14 +22,7 @@ const FlintAlerts = ({ datastore, profile }) => {
 
   return (
     <Alert type='warning'>
-      <div
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          gap: '1rem',
-          justifyContent: 'center'
-        }}
-      >
+      <div className='flex alert--flint'>
         <span>{messages[datastore]}</span>
         <button
           className='btn btn--small btn--secondary no-background'

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

@@ -21,7 +21,6 @@ const Cell = ({ href, html, icon, text }) => {
         <Icon
           icon={icon}
           className='margin-right__2xs'
-          style={{ marginTop: '-2px' }}
         />
       )}
       {href && <Anchor href={href}>{text}</Anchor>}

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

@@ -24,7 +24,7 @@ const GetThisOption = ({ option }) => {
                   <GetThisForm label={option.label} form={option.form} />
                 </>
               )
-            : option.label === 'Find it in the library' && <GetThisFindIt />}
+            : option.label === 'Get it off the shelves' && <GetThisFindIt />}
         </div>
 
         {option.description && (

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

@@ -39,12 +39,7 @@ const GetThisRecord = ({ barcode }) => {
       </div>
 
       {holding && (
-        <div
-          className='get-this-resource-access-container'
-          style={{
-            borderBottom: 'solid 1px var(--ds-color-neutral-100)'
-          }}
-        >
+        <div className='get-this-resource-access-container record-holders-container'>
           <h3 className='visually-hidden'>Available at</h3>
           <ResourceAccess record={{
             resourceAccess: [].concat({

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

@@ -42,9 +42,8 @@ const EmailAction = ({ action, datastore, emailAddress, prejudice, setActive })
           <button
             className='btn btn--primary'
             type='submit'
-            style={{ whiteSpace: 'nowrap' }}
           >
-            Send email
+            Send&nbsp;email
           </button>
         </form>
       )}

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

@@ -48,7 +48,7 @@ const List = (props) => {
           <p className='lists-count-tag'><span className='strong'>{listLength}</span> in list</p>
         </div>
       </div>
-      <p className='font-lede' style={{ marginTop: '0' }}>Items in this list are stored temporarily (within a single session).</p>
+      <p className='font-lede margin-top__none'>Items in this list are stored temporarily (within a single session).</p>
       {listLength
         ? (
             <>

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

@@ -45,9 +45,8 @@ const TextAction = ({ action, datastore, phoneNumber, prejudice, setActive }) =>
           <button
             className='btn btn--primary'
             type='submit'
-            style={{ whiteSpace: 'nowrap' }}
           >
-            Send text
+            Send&nbsp;text
           </button>
         </form>
       )}

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

@@ -26,7 +26,7 @@ const AboutLibrarySearch = () => {
           <li><em>Pride</em>, which handles searches</li>
           <li><em>Prejudice</em>, which handles integrations with the campus directory for authentication and other services</li>
         </ul>
-        <p><img src={schematicImage} alt='' style={{ height: 'auto', maxWidth: '100%' }} /></p>
+        <p><img src={schematicImage} alt='' /></p>
         <h2>Flexibility</h2>
         <p>Library Search is designed to separate the user experience from the particular system that provides or manages the data. This allowed us, in summer 2021, to switch library management systems and article discovery systems from Aleph and Summon to Alma and Primo with minimal need for changes to the user experience. This approach brings several other benefits, as well:</p>
         <ul>

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

@@ -16,7 +16,7 @@ const TechnicalOverview = () => {
         <p>Library Search is built in three main layers to allow for flexibility in the front end and back end data repositories. A different front end application should not require rewriting the search queries, while conversely changes to one or more back-end search indexes or repositories would not require updates to the user interface. The middle layer acts as translator between the front and back ends.</p>
         <p>For more information about Library Search, please contact <Anchor href='mailto:library-search-feedback@umich.edu'>library-search-feedback@umich.edu</Anchor>.</p>
         <h2>High-Level Schematic</h2>
-        <p><img src={schematicImage} alt='' style={{ height: 'auto', maxWidth: '100%' }} /></p>
+        <p><img src={schematicImage} alt='' /></p>
         <h2>Front-End / User Interface</h2>
         <p>The user interface for Library Search, shown at the top of the above schematic, is a Single Page Application built with <Anchor href='https://reactjs.org/'>React</Anchor> (JavaScript library for building UIs) and developed in-house. It aims to meet the latest <Anchor href='https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1'>WCAG AA Standards</Anchor> and is responsive. Its role is to display the search interface to the user, pass user search queries or other interactions to the Pride and Prejudice middleware components as JSON objects, and format data returned from Pride and Prejudice into what the user sees and interacts with.</p>
         <h3>Middleware</h3>

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

@@ -80,20 +80,15 @@ const Record = ({ datastoreUid, list, record }) => {
   return (
     <article className={`container__rounded record ${(isInList(list, record.uid) ? ' record--highlight' : '')}`}>
       <div className='record-container record-medium-container'>
-        <div className='record-title-and-actions-container '>
+        <div className='record-title-and-actions-container'>
           <Header {...{ datastoreUid, record }} />
           <AddToListButton item={record} />
         </div>
         <Zotero {...{ record }} />
         <RecordMetadata {...{ record }} />
       </div>
 
-      <div
-        className='record-holders-container'
-        style={{
-          borderBottom: 'solid 1px var(--ds-color-neutral-100)'
-        }}
-      >
+      <div className='record-holders-container'>
         <h4 className='visually-hidden'>{record.names[0]} is available at:</h4>
         <ResourceAccess {...{ record }} />
       </div>

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

@@ -171,10 +171,7 @@ const FullRecord = () => {
           )}
         </div>
         <section aria-labelledby='available-at'>
-          <div
-            className='record-container'
-            style={{ paddingBottom: '0.25rem' }}
-          >
+          <div className='record-container padding-bottom__2xs'>
             <h2 className='full-record__record-info' id='available-at'>
               Available at:
             </h2>
@@ -204,8 +201,8 @@ const FullRecord = () => {
           return null;
         }
         return (
-          <p style={{ color: 'var(--search-color-grey-600)', marginTop: 0, order: 3 }}>
-            <span style={{ fontWeight: 600 }}>{indexingDate.name}:</span> {indexingDate.value}
+          <p className='margin-top__none text-grey full-record__date-last-indexed'>
+            <span className='strong'>{indexingDate.name}:</span> {indexingDate.value}
           </p>
         );
       })()}

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

@@ -76,10 +76,7 @@ const Footer = ({ datastoreUid, record }) => {
   return (
     <>
       {outage && (
-        <p
-          className='margin-bottom__none margin-top__xs'
-          style={{ color: 'var(--search-color-red-300)' }}
-        >
+        <p className='margin-bottom__none margin-top__xs intent__error'>
           <Icon icon='warning' /> {outage}
         </p>
       )}

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

@@ -47,7 +47,7 @@ const Sorts = ({ activeDatastore }) => {
 
   return (
     <div>
-      <label className='sorts-label sorts-label-text' htmlFor='sort-by' style={{ display: 'inline-block' }}>
+      <label className='sorts-label sorts-label-text' htmlFor='sort-by'>
         Sort by
       </label>
       <select

src/modules/resource-acccess/components/Holder/index.js

@@ -44,7 +44,7 @@ const Holder = ({ captionLink, headings, notes, preExpanded, rows, ...rest }) =>
     <div {...rest}>
       {captionLink && (
         <p className='margin__none'>
-          <Anchor href={captionLink.href} style={{ color: 'var(--ds-color-neutral-400)' }}>
+          <Anchor href={captionLink.href} className='btn--tertiary'>
             {captionLink.text}
           </Anchor>
         </p>
@@ -79,10 +79,7 @@ const Holder = ({ captionLink, headings, notes, preExpanded, rows, ...rest }) =>
                 </ExpandableChildren>
                 {isExpandable && (
                   <tr>
-                    <td
-                      colSpan={`${rows[0].length}`}
-                      style={{ wordBreak: 'break-word' }}
-                    >
+                    <td colSpan={`${rows[0].length}`}>
                       <ExpandableButton count={rows.length} />
                     </td>
                   </tr>

src/modules/resource-acccess/components/Holding/index.js

@@ -8,10 +8,7 @@ const Cell = ({ cell }) => {
       {cell.icon && (
         <Icon
           icon={cell.icon}
-          style={{
-            marginRight: '0.25rem',
-            marginTop: '-2px'
-          }}
+          className='margin-right__2xs'
         />
       )}
 

src/modules/reusable/components/Alert/styles.css

@@ -23,6 +23,11 @@
   color: var(--search-color-orange-300);
 }
 
+.alert--flint {
+  align-items: center;
+  justify-content: center;
+}
+
 .alert a {
   color: inherit;
 }

src/modules/search/components/SearchResultsMessage/index.js

@@ -25,14 +25,7 @@ export default function SearchResultsMessage () {
       <p className='font-small margin__none'>
         You searched for: <span className='strong'>{original}</span>
       </p>
-      <span
-        className='flex parser-message font-small'
-        style={{
-          alignItems: 'baseline',
-          color: '#AA5600',
-          gap: '0.5rem'
-        }}
-      >
+      <span className='flex parser-message font-small intent__warning'>
         <div><Icon icon='warning' size={15} /></div>
         <p
           className='details-message'

src/stylesheets/main.css

@@ -793,6 +793,11 @@ details[open] > summary svg.expand_more {
   flex-grow: 1;
 }
 
+.parser-message {
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
 .parser-message p,
 .results-message p {
   margin: .25em 0;
@@ -1964,6 +1969,7 @@ body {
 }
 
 .sorts-label-text {
+  display: inline-block;
   padding-right: 0.5rem;
 }
 
@@ -2538,6 +2544,10 @@ input.get-this-field-input-year {
   }
 }
 
+.record-holders-container {
+  border-bottom: solid 1px var(--ds-color-neutral-100);
+}
+
 .lists-link-container {
   outline: solid 2px rgba(18, 109, 193, 0.6);
   z-index: 99;
@@ -2770,6 +2780,10 @@ input.get-this-field-input-year {
   margin-top: 0.5rem;
 }
 
+.full-record__date-last-indexed {
+  order: 3;
+}
+
 .lists-actions__heading-tag {
   display: block;
   font-weight: 400;