Merge pull request #739 from RockefellerArchiveCenter/issue-730

Update stylesheet and footer contents

backstop_data/engine_scripts/mock_request.js

@@ -37,7 +37,7 @@ module.exports = async (page, scenario, vp, isReference) => {
         });
       }
     } else {
-      if (req.url().includes('api.rockarch.org') || req.url().includes('rac-vch')) {
+      if (req.url().includes('api.rockarch.org') || req.url().includes('request-broker')) {
         console.log(fixturePath)
       }
       req.continue();

package.json

@@ -41,7 +41,8 @@
     "@blueprintjs/core": "^4.17.6",
     "@blueprintjs/icons": "^4.14.3",
     "@lingui/cli": "^4.5.0",
-    "babel-plugin-macros": "^3.1.0"
+    "babel-plugin-macros": "^3.1.0",
+    "backstopjs": "^6.3.23"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -28,7 +28,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link rel='stylesheet' href='https://assets.rockarch.org/v0.8/main.min.css'>
+    <link rel='stylesheet' href='https://assets.rockarch.org/v0.12.0/main.min.css'>
     <title>DIMES: Online Collections and Catalog of Rockefeller Archive Center</title>
 <!-- Matomo Tag Manager -->
 <script>

src/components/Card/index.js

@@ -44,7 +44,7 @@ const CardList = ({ items, params, cardClassName, className }) => {
       date={item.dates?.length ? item.dates.map(d => d.expression).join(', ') : null} />
   )
   return (
-    <ul className={classnames('card-list list--unstyled mt-40 mb-32', className)}>
+    <ul className={classnames('card-list mt-40 mb-32', className)}>
       {listItems}
     </ul>
   )

src/components/Footer/index.js

@@ -48,7 +48,7 @@ const Footer = () => (
             <p className='footer-primary__text'>
               <Trans comment='Reading Room Actual Hours'>
                 Monday-Friday<br />
-                9:00 a.m. to 5:00 p.m.<br />
+                9:30 a.m. to 5:00 p.m.<br />
               </Trans>
               <PrimaryLinkAccessMaterials />
             </p>

src/components/Header/index.js

@@ -12,11 +12,11 @@ const Header = ({ myListCount }) => (
               dimes.rockarch.org
             </Trans>
           </a>
-          <p className='header__brand-subtitle'>
+          <div className='header__brand-subtitle'>
             <Trans comment='Subtitle displayed within the Header'>
               The Online Collection and Catalog of Rockefeller Archive Center
             </Trans>
-          </p>
+          </div>
         </div>
         <Nav ariaLabel='Main'>
           <NavItem id='raccess' icon='arrow_right_alt'

src/components/LoadingSkeleton/index.js

@@ -3,7 +3,7 @@ import Skeleton from 'react-loading-skeleton'
 import 'react-loading-skeleton/dist/skeleton.css'
 
 export const SearchSkeleton = () => (
-  <ul className='card-list list--unstyled mt-40 mb-32'>
+  <ul className='card-list mt-40 mb-32'>
     {Array(8)
       .fill()
       .map((item, index) => (
@@ -79,7 +79,7 @@ export const AgentRelatedCollectionsSkeleton = () => (
     <h2 className='agent__section-title pb-12'>
       <Skeleton />
     </h2>
-    <ul className='card-list list--unstyled card--related-collections mt-40 mb-32'>
+    <ul className='card-list card--related-collections mt-40 mb-32'>
       {Array(6)
         .fill()
         .map((item, index) => (

src/components/SocialIcons/index.js

@@ -4,17 +4,6 @@ import { Trans, t } from '@lingui/macro'
 const SocialIcons = () => (
   <Trans comment='Social Icons Titles'>
     <div className='social-icons'>
-      <a href={t({
-        comment: 'Twitter account link',
-        message: 'https://twitter.com/rockarch_org'
-      })} aria-label='Twitter'>
-        <span className='social-icons__icon'>
-          <svg aria-hidden='true' focusable='false' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
-            <title>Twitter Logo</title>
-            <path fill='#192E49' d='M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z' />
-          </svg>
-        </span>
-      </a>
       <a href={t({
         comment: 'Facebook account link',
         message: 'https://www.facebook.com/RockefellerArchiveCenter'
@@ -37,6 +26,18 @@ const SocialIcons = () => (
           </svg>
         </span>
       </a>
+      <a href={t({
+        comment: 'LinkedIn account link',
+        message: 'https://www.linkedin.com/company/rockefeller-archive-center'
+      })} aria-label='LinkedIn'>
+        <span className='social-icons__icon'>
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <title>LinkedIn Logo</title>
+            <path transform="scale(1.5)" fill="#192E49"
+              d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
+          </svg>
+        </span>
+      </a>
       <a href={t({
         comment: 'Youtube account link',
         message: 'https://www.youtube.com/channel/UCks9ctz4OF9tMNOTrRkWIZg'
@@ -48,24 +49,6 @@ const SocialIcons = () => (
           </svg>
         </span>
       </a>
-      <a href={t({
-        comment: 'Flickr account link',
-        message: 'https://www.flickr.com/photos/147074352@N05/'
-      })} aria-label='Flickr'>
-        <span className='social-icons__icon'>
-          <svg aria-hidden='true' focusable='false' width='18px' height='24px' viewBox='0 0 18 8' version='1.1' xmlns='http://www.w3.org/2000/svg'>
-            <title>Flickr Logo</title>
-            <g id='Style-Guide' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
-              <g id='Style-Guide-/-Navigation' transform='translate(-1553.000000, -319.000000)' fill='#192E49'>
-                <g id='Group-2' transform='translate(1552.999996, 318.500000)'>
-                  <circle id='Oval' cx='3.9374999' cy='4.41964274' r='3.9374999' />
-                  <circle id='Oval-Copy-5' cx='14.0624996' cy='4.41964274' r='3.9374999' />
-                </g>
-              </g>
-            </g>
-          </svg>
-        </span>
-      </a>
     </div>
   </Trans>
 )