From ca0db3eca0c4becd33c9d4f299b717e6488ac640 Mon Sep 17 00:00:00 2001
From: "Erin E. Sullivan" <sulliv.erin@gmail.com>
Date: Tue, 23 Jul 2024 16:32:02 -0400
Subject: [PATCH] Moving/replacing inline styles.

---
 .../components/AdvancedSearchContainer/index.js    |  2 +-
 src/modules/core/components/Footer/index.js        |  4 +---
 .../datastores/components/FlintAlerts/index.js     |  9 +--------
 .../getthis/components/GetThisFindIt/index.js      |  1 -
 .../getthis/components/GetThisOption/index.js      |  2 +-
 .../getthis/components/GetThisRecord/index.js      |  7 +------
 src/modules/lists/components/EmailAction/index.js  |  3 +--
 src/modules/lists/components/List/index.js         |  2 +-
 src/modules/lists/components/TextAction/index.js   |  3 +--
 .../pages/components/AboutLibrarySearch/index.js   |  2 +-
 .../pages/components/TechnicalOverview/index.js    |  2 +-
 src/modules/records/components/Record/index.js     |  9 ++-------
 src/modules/records/components/RecordFull/index.js |  9 +++------
 .../records/components/RecordPreview/index.js      |  5 +----
 src/modules/records/components/Sorts/index.js      |  2 +-
 .../resource-acccess/components/Holder/index.js    |  7 ++-----
 .../resource-acccess/components/Holding/index.js   |  5 +----
 src/modules/reusable/components/Alert/styles.css   |  5 +++++
 .../components/SearchResultsMessage/index.js       |  9 +--------
 src/stylesheets/main.css                           | 14 ++++++++++++++
 20 files changed, 40 insertions(+), 62 deletions(-)

diff --git a/src/modules/advanced/components/AdvancedSearchContainer/index.js b/src/modules/advanced/components/AdvancedSearchContainer/index.js
index d76164c5e..0b58f0503 100644
--- a/src/modules/advanced/components/AdvancedSearchContainer/index.js
+++ b/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}` },
diff --git a/src/modules/core/components/Footer/index.js b/src/modules/core/components/Footer/index.js
index 12389a3c1..eee6610ed 100644
--- a/src/modules/core/components/Footer/index.js
+++ b/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>
diff --git a/src/modules/datastores/components/FlintAlerts/index.js b/src/modules/datastores/components/FlintAlerts/index.js
index fde6ac73f..5d52c17d5 100644
--- a/src/modules/datastores/components/FlintAlerts/index.js
+++ b/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'
diff --git a/src/modules/getthis/components/GetThisFindIt/index.js b/src/modules/getthis/components/GetThisFindIt/index.js
index ef6166846..21b0c968a 100644
--- a/src/modules/getthis/components/GetThisFindIt/index.js
+++ b/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>}
diff --git a/src/modules/getthis/components/GetThisOption/index.js b/src/modules/getthis/components/GetThisOption/index.js
index 1bd21e31e..4131bff94 100644
--- a/src/modules/getthis/components/GetThisOption/index.js
+++ b/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 && (
diff --git a/src/modules/getthis/components/GetThisRecord/index.js b/src/modules/getthis/components/GetThisRecord/index.js
index 2e6e3d60a..1c88125e8 100644
--- a/src/modules/getthis/components/GetThisRecord/index.js
+++ b/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({
diff --git a/src/modules/lists/components/EmailAction/index.js b/src/modules/lists/components/EmailAction/index.js
index 599660c56..10d322196 100644
--- a/src/modules/lists/components/EmailAction/index.js
+++ b/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>
       )}
diff --git a/src/modules/lists/components/List/index.js b/src/modules/lists/components/List/index.js
index 033e40013..dba1b56ee 100644
--- a/src/modules/lists/components/List/index.js
+++ b/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
         ? (
             <>
diff --git a/src/modules/lists/components/TextAction/index.js b/src/modules/lists/components/TextAction/index.js
index fab7d584b..2c8c160ee 100644
--- a/src/modules/lists/components/TextAction/index.js
+++ b/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>
       )}
diff --git a/src/modules/pages/components/AboutLibrarySearch/index.js b/src/modules/pages/components/AboutLibrarySearch/index.js
index 359e5fbbf..f2eda2d80 100644
--- a/src/modules/pages/components/AboutLibrarySearch/index.js
+++ b/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>
diff --git a/src/modules/pages/components/TechnicalOverview/index.js b/src/modules/pages/components/TechnicalOverview/index.js
index b74c98293..7ed731547 100644
--- a/src/modules/pages/components/TechnicalOverview/index.js
+++ b/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>
diff --git a/src/modules/records/components/Record/index.js b/src/modules/records/components/Record/index.js
index 9e7f39f30..536e97f87 100644
--- a/src/modules/records/components/Record/index.js
+++ b/src/modules/records/components/Record/index.js
@@ -80,7 +80,7 @@ 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>
@@ -88,12 +88,7 @@ const Record = ({ datastoreUid, list, 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>
diff --git a/src/modules/records/components/RecordFull/index.js b/src/modules/records/components/RecordFull/index.js
index 729841742..b3a21d7d3 100644
--- a/src/modules/records/components/RecordFull/index.js
+++ b/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>
         );
       })()}
diff --git a/src/modules/records/components/RecordPreview/index.js b/src/modules/records/components/RecordPreview/index.js
index af9d249be..87f9598bc 100644
--- a/src/modules/records/components/RecordPreview/index.js
+++ b/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>
       )}
diff --git a/src/modules/records/components/Sorts/index.js b/src/modules/records/components/Sorts/index.js
index 5481dfab3..b3ee8514e 100644
--- a/src/modules/records/components/Sorts/index.js
+++ b/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
diff --git a/src/modules/resource-acccess/components/Holder/index.js b/src/modules/resource-acccess/components/Holder/index.js
index 4e4d5e291..9611434f3 100644
--- a/src/modules/resource-acccess/components/Holder/index.js
+++ b/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>
diff --git a/src/modules/resource-acccess/components/Holding/index.js b/src/modules/resource-acccess/components/Holding/index.js
index 6d7da35a3..12bacdd2b 100644
--- a/src/modules/resource-acccess/components/Holding/index.js
+++ b/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'
         />
       )}
 
diff --git a/src/modules/reusable/components/Alert/styles.css b/src/modules/reusable/components/Alert/styles.css
index 619b0a2c0..8604c7824 100644
--- a/src/modules/reusable/components/Alert/styles.css
+++ b/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;
 }
diff --git a/src/modules/search/components/SearchResultsMessage/index.js b/src/modules/search/components/SearchResultsMessage/index.js
index 01ed6def8..b1f7ad006 100644
--- a/src/modules/search/components/SearchResultsMessage/index.js
+++ b/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'
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 07e9ea17b..ec8f6c3d4 100644
--- a/src/stylesheets/main.css
+++ b/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;