Moving/replacing inline styles.

mlibrary · Jul 25, 2024 · 48387ce · 48387ce
1 parent ca0db3e
commit 48387ce
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 71 deletions.
diff --git a/src/modules/advanced/components/AdvancedSearchForm/index.js b/src/modules/advanced/components/AdvancedSearchForm/index.js
@@ -1,3 +1,4 @@
+import './styles.css';
 import {
   addFieldedSearch,
   removeFieldedSearch,
@@ -113,14 +114,11 @@ const AdvancedSearchForm = ({ datastore }) => {
 
   return (
     <form className='y-spacing' onSubmit={handleSubmit}>
-      <h2 style={{ fontSize: '1.87rem' }}>{datastore.name} Search</h2>
+      <h2 className='h1'>{datastore.name} Search</h2>
       {errors.map((error, index) => {
         return (
           <Alert type='error' key={index}>
-            <div
-              className='x-spacing'
-              style={{ fontSize: '1rem' }}
-            >
+            <div className='x-spacing h4'>
               <Icon icon='error' size={20} />
               <span>{error}</span>
             </div>
@@ -145,20 +143,13 @@ const AdvancedSearchForm = ({ datastore }) => {
           />
         );
       })}
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-around'
-        }}
+      <button
+        className='btn btn--small btn--secondary add-another-field'
+        onClick={handleAddAnotherFieldedSearch}
+        type='button'
       >
-        <button
-          className='btn btn--small btn--secondary'
-          onClick={handleAddAnotherFieldedSearch}
-          type='button'
-        >
-          Add another field
-        </button>
-      </div>
+        Add another field
+      </button>
 
       <button
         className='btn btn--primary margin-top__m'

diff --git a/src/modules/advanced/components/AdvancedSearchForm/styles.css b/src/modules/advanced/components/AdvancedSearchForm/styles.css
@@ -0,0 +1,5 @@
+.add-another-field {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/src/modules/advanced/components/FiltersContainer/index.js b/src/modules/advanced/components/FiltersContainer/index.js
@@ -1,3 +1,4 @@
+import './styles.css';
 import { useDispatch, useSelector } from 'react-redux';
 import AdvancedFilter from '../AdvancedFilter';
 import getFilters from './getFilters';
@@ -51,36 +52,22 @@ const ActiveAdvancedFilters = (datastore) => {
 
   return (
     <section aria-label='active-filters'>
-      <div
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '0.25em'
-        }}
+      <h2
+        id='active-filters'
+        className='u-margin-top-none margin-bottom__xs h4'
       >
-        <h2
-          id='active-filters'
-          className='u-margin-top-none margin-bottom__xs'
-          style={{ fontSize: '1rem' }}
-        >
-          Active filters
-        </h2>
+        Active filters
+        {' '}
         <span className='text-grey__light padding-right__xs'>
           ({items.length})
         </span>
-      </div>
+      </h2>
 
       <p className='font-small u-margin-top-none'>
         Unselect active filters through the options below.
       </p>
 
-      <ul
-        style={{
-          fontSize: '0.9rem',
-          marginLeft: '2.5rem',
-          marginTop: '0'
-        }}
-      >
+      <ul className='margin-top__none active-filter-list'>
         {items.map((item, index) => {
           return (
             <li key={index + item.group + item.value}>
@@ -201,8 +188,7 @@ const FiltersContainer = ({ datastore }) => {
         })}
       </div>
       <button
-        style={{ marginTop: '1rem' }}
-        className='btn btn--primary'
+        className='btn btn--primary margin-top__m'
         type='submit'
       >
         <Icon icon='search' size={24} /> Advanced Search

diff --git a/src/modules/advanced/components/FiltersContainer/styles.css b/src/modules/advanced/components/FiltersContainer/styles.css
@@ -0,0 +1,8 @@
+#active-filters > .text-grey__light {
+  font-weight: 400;
+}
+
+.active-filter-list {
+  font-size: 0.9rem;
+  margin-left: 2.5rem;
+}
diff --git a/src/modules/lists/components/ActionsList/index.js b/src/modules/lists/components/ActionsList/index.js
@@ -77,9 +77,7 @@ const ActionsList = (props) => {
                     }}
                     aria-pressed={Boolean(isActive)}
                   >
-                    <span style={{ opacity: '0.75' }}>
-                      <Icon size={20} icon={action.icon} />
-                    </span>
+                    <Icon size={20} icon={action.icon} className={isActive ? null : 'text-grey'} />
                     {action.name}
                   </button>
                 </li>

diff --git a/src/modules/lists/components/CitationAction/index.js b/src/modules/lists/components/CitationAction/index.js
@@ -1,3 +1,4 @@
+import './styles.css';
 import React, { useEffect, useState } from 'react';
 import { Tab, TabPanel, Tabs } from '../../../reusable';
 import { cite } from '../../../citations';
@@ -107,12 +108,6 @@ const CitationAction = ({ datastore, list, record, setActive, setAlert, viewType
                     </label>
                     <div
                       id={`citation-text-${citationOption.id}`}
-                      style={{
-                        border: 'solid 1px var(--search-color-grey-400)',
-                        boxShadow: 'none',
-                        maxHeight: '40vh',
-                        overflowY: 'auto'
-                      }}
                       className='y-spacing copy-citation padding-y__xs padding-x__s container__rounded'
                       contentEditable
                       aria-describedby={`${citationOption.id}-disclaimer`}

diff --git a/src/modules/lists/components/CitationAction/styles.css b/src/modules/lists/components/CitationAction/styles.css
@@ -0,0 +1,6 @@
+.copy-citation {
+  border: solid 1px var(--search-color-grey-400);
+  box-shadow: none;
+  max-height: 40vh;
+  overflow-y: auto;
+}
diff --git a/src/modules/records/components/KeywordSwitch/index.js b/src/modules/records/components/KeywordSwitch/index.js
@@ -1,3 +1,4 @@
+import './styles.css';
 import { Anchor, Icon } from '../../../reusable';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -22,31 +23,17 @@ const KeywordSwitch = ({ datastore, query }) => {
   };
 
   return (
-    <div
-      className={briefView ? 'record-preview' : 'container__rounded record'}
-      style={{
-        borderLeft: '4px solid var(--ds-color-maize-400)',
-        display: 'flex',
-        gap: '0.75rem',
-        padding: '1rem',
-        paddingLeft: '0.75rem'
-      }}
-    >
+    <div className={`flex padding__m padding-left__s ${briefView ? 'record-preview' : 'container__rounded record'} keyword-switch`}>
       <Icon
         d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'
         size={24}
-        style={{
-          color: 'var(--ds-color-maize-500)',
-          flexShrink: '0'
-        }}
       />
       <div>
         <p className='no-margin'>
           {!briefView && isContainsSearch ? 'Seeing less precise results than you expected?' : 'Not seeing the results you expected?'}
-          <Anchor
-            to={`?query=${querySearch}`}
-            style={{ display: 'block' }}
-          >
+        </p>
+        <p className='no-margin'>
+          <Anchor to={`?query=${querySearch}`}>
             {linkText()}
           </Anchor>
         </p>

diff --git a/src/modules/records/components/KeywordSwitch/styles.css b/src/modules/records/components/KeywordSwitch/styles.css
@@ -0,0 +1,9 @@
+.keyword-switch {
+  border-left: 4px solid var(--ds-color-maize-400);
+  gap: 0.75rem;
+}
+
+.keyword-switch > svg {
+  color: var(--ds-color-maize-500);
+  flex-shrink: 0;
+}
diff --git a/src/modules/records/components/RecordFull/index.js b/src/modules/records/components/RecordFull/index.js
@@ -166,7 +166,8 @@ const FullRecord = () => {
               {' '}
               anonymously if you encounter harmful or problematic language in catalog records or finding aids. More information about our policies and practices is available at
               {' '}
-              <Anchor href='https://www.lib.umich.edu/about-us/policies/remediation-harmful-language-library-metadata?utm_source=library-search'>Remediation of Harmful Language</Anchor>.
+              <Anchor href='https://www.lib.umich.edu/about-us/policies/remediation-harmful-language-library-metadata?utm_source=library-search'>Remediation of Harmful Language</Anchor>
+              .
             </p>
           )}
         </div>

diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
@@ -122,7 +122,8 @@ body {
 /*
   Headings
 */
-h1 {
+h1,
+.h1 {
   font-size: 1.87rem;
 }
 
@@ -140,7 +141,8 @@ h3 {
   font-size: 1.25rem;
 }
 
-h4 {
+h4,
+.h4 {
   font-size: 1rem;
 }