From d65e78cc92fa03578d050634de0cf2ec0026e35e Mon Sep 17 00:00:00 2001
From: Eka <ekachxaidze2@gmail.com>
Date: Mon, 18 Dec 2023 18:10:27 +0400
Subject: [PATCH 1/5] CORE-4742: add linking

---
 modules/dropdown/index.jsx                | 123 ++++++++++++++++------
 modules/dropdown/styles.module.css        |  62 +++++++++--
 pages/outputs/[id].jsx                    |   2 +-
 public/static/images/redirect.svg         |   5 +
 templates/output/card-dropdown.jsx        |  33 +++---
 templates/output/card-dropdown.module.css |   8 +-
 templates/output/index.jsx                |  69 +++++++++++-
 templates/output/other-versions.jsx       |   9 +-
 templates/output/styles.module.css        |  36 ++++++-
 templates/output/thumbnail-card.jsx       |   4 +
 10 files changed, 280 insertions(+), 71 deletions(-)
 create mode 100644 public/static/images/redirect.svg

diff --git a/modules/dropdown/index.jsx b/modules/dropdown/index.jsx
index 1495c223..954f1019 100644
--- a/modules/dropdown/index.jsx
+++ b/modules/dropdown/index.jsx
@@ -3,17 +3,17 @@ import {
   Button,
   Card,
   DataProviderLogo,
-  Icon,
   Link,
 } from '@oacore/design/lib/elements'
 import classNames from '@oacore/design/lib/utils/class-names'
+import { Popover } from '@oacore/design/lib/modules'
 
+import redirect from '../../public/static/images/redirect.svg'
 import styles from './styles.module.css'
 import { capitalizeFirstLetter } from '../../utils/titleCase'
 
 const DropDown = ({
   title,
-  subtitle,
   renderOAI,
   children,
   className,
@@ -25,15 +25,18 @@ const DropDown = ({
   makeVisible,
   dataProviderId,
   disableRedirect,
+  outputRedirect,
+  metadata,
+  coreDownloadUrl,
+  sourceFulltextUrls,
+  sourceFulltextUrlsUpd,
+  id,
+  oai,
+  doi,
+  useOtherVersions,
 }) => {
-  const [activeDropdown, setActiveDropdown] = useState(!useExpandButton)
   const [logoFetched, setLogoFetched] = useState('')
 
-  const onToggleDropdown = (e) => {
-    e.stopPropagation()
-    setActiveDropdown(!activeDropdown)
-  }
-
   const Tag = href ? Link : 'div'
 
   // eslint-disable-next-line consistent-return
@@ -43,6 +46,10 @@ const DropDown = ({
     window.location.href = href
   }
 
+  const redirectToProviders = () => {
+    window.location.href = metadata.hrefDataProvider
+  }
+
   const getLogoLink = () => {
     useEffect(() => {
       async function fetchData() {
@@ -64,30 +71,36 @@ const DropDown = ({
 
   return (
     <>
-      {checkBillingType && !makeVisible ? (
-        <div className={styles.placement}>
-          <a href="/membership" className={styles.memberType}>
-            {capitalizeFirstLetter(memberType?.billing_type)} member
-          </a>
-        </div>
-      ) : (
-        <></>
-      )}
       <div
         className={classNames
-          .use(styles.dropdown, {
+          .use({
             [styles.activeClass]: checkBillingType && !makeVisible,
+            [styles.cardItem]: useOtherVersions,
           })
           .join(className)}
       >
+        {checkBillingType && !makeVisible ? (
+          <div className={styles.placement}>
+            <a
+              href="https://core.ac.uk/membership"
+              className={styles.memberType}
+            >
+              {capitalizeFirstLetter(memberType?.billing_type)} member
+            </a>
+          </div>
+        ) : (
+          <></>
+        )}
         <div className={styles.header}>
-          <Tag className={styles.content} onClick={redirectOnClick}>
+          <Tag className={styles.content}>
             <div
               className={classNames.use(styles.headerWrapper, {
                 [styles.headerWrapperClickable]: useExpandButton,
               })}
             >
-              <div className={styles.itemWrapper}>
+              {/* eslint-disable-next-line max-len */}
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+              <div className={styles.itemWrapper} onClick={redirectToProviders}>
                 <DataProviderLogo
                   imageSrc={checkBillingType ? getLogoLink() : ''}
                   useDefault
@@ -103,21 +116,13 @@ const DropDown = ({
                   >
                     {title}
                   </Card.Title>
-                  <Card.Description className={styles.subtitle} tag="span">
-                    {subtitle}
-                  </Card.Description>
                 </div>
+                <img
+                  className={styles.redirectImg}
+                  src={redirect}
+                  alt="redirect"
+                />
               </div>
-              {useExpandButton && (
-                <Button type="button" onClick={onToggleDropdown}>
-                  <Icon
-                    src="#menu-down"
-                    className={classNames.use(styles.iconMenu, {
-                      [styles.iconMenuActive]: activeDropdown,
-                    })}
-                  />
-                </Button>
-              )}
             </div>
             <Card.Description
               className={classNames.use(styles.subtitle, {
@@ -125,11 +130,61 @@ const DropDown = ({
               })}
               tag="span"
             >
+              {outputRedirect && (
+                <Button
+                  onClick={redirectOnClick}
+                  className={styles.actionButton}
+                  variant="outlined"
+                >
+                  See this paper in CORE
+                </Button>
+              )}
+              {oai ? (
+                <a
+                  className={styles.ellipsis}
+                  href={`https://api.core.ac.uk/oai/${oai}`}
+                >
+                  <Button className={styles.actionButton} variant="outlined">
+                    Go to the repository landing page
+                  </Button>
+                </a>
+              ) : (
+                <a className={styles.ellipsis} href={`https://doi.org/${doi}`}>
+                  <Button className={styles.actionButton} variant="outlined">
+                    Go to the repository landing page
+                  </Button>
+                </a>
+              )}
+              {coreDownloadUrl &&
+              coreDownloadUrl.match(/core.ac.uk/gm) &&
+              sourceFulltextUrls ? (
+                <a
+                  href={sourceFulltextUrlsUpd}
+                  aria-labelledby={`${id}-downloaded-from-title`}
+                  aria-describedby={`${id}-downloaded-from-body`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <Button className={styles.actionButton} variant="outlined">
+                    Download from data provider
+                  </Button>
+                </a>
+              ) : (
+                <Popover
+                  placement="right"
+                  content="We don't have a full text link from this data provider"
+                  className={styles.popover}
+                >
+                  <Button className={styles.disabledButton} variant="outlined">
+                    Download from data provider
+                  </Button>
+                </Popover>
+              )}
               {renderOAI}
             </Card.Description>
           </Tag>
         </div>
-        {activeDropdown && children}
+        {children}
       </div>
     </>
   )
diff --git a/modules/dropdown/styles.module.css b/modules/dropdown/styles.module.css
index ecce52ee..ee72a705 100644
--- a/modules/dropdown/styles.module.css
+++ b/modules/dropdown/styles.module.css
@@ -23,6 +23,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  cursor: pointer;
 }
 
 .header-wrapper-clickable {
@@ -45,7 +48,11 @@
 }
 
 .title-colored {
-  color: var(--primary);
+  color: var(--gray-900);
+}
+
+.redirect-img {
+  margin-left: 1rem;
 }
 
 .subtitle {
@@ -53,17 +60,57 @@
   padding-bottom: 0.3rem;
   margin-top: 0.3rem;
   color: var(--gray-700);
+  padding-top: 10px;
+}
+
+.action-button {
+  width: 100%;
+  margin-bottom: 14px;
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.175px;
+  text-transform: initial;
+}
+
+.disabled-button {
+  width: 100%;
+  border: 1px solid #9E9E9E;
+  color: #9E9E9E;
+  cursor: not-allowed;
+  margin-bottom: 14px;
+  letter-spacing: 0.175px;
+  text-transform: initial;
+}
+
+.popover {
+  padding: 4px;
+  width: 160px;
+  color: #FFF;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 12px;
+  letter-spacing: 0.048px;
+}
+
+.disabled-button:hover {
+  background: unset;
 }
 
 .oai-title {
-  border-top: 1px solid #e0e0e0;
   padding-top: 10px;
 }
 
-.activeClass {
-  border: 1px solid #B75400;
+.card-item {
   background: #F5F5F5;
-  padding: 0.5rem;
+  padding: 0.5rem 1rem 1rem;
+}
+
+.activeClass {
+  padding: 0 1rem 1rem;
   cursor: pointer;
   transition: all 0.5s ease-in-out;
 }
@@ -77,13 +124,14 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-bottom: -1rem;
+  margin-bottom: 0.5rem;
+  margin-right: -1rem;
 }
 
 .memberType {
   min-width: 113px;
   width: max-content;
-  background: #B75400;
+  background: #8BC34A;
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
diff --git a/pages/outputs/[id].jsx b/pages/outputs/[id].jsx
index cac74f09..1b16397e 100644
--- a/pages/outputs/[id].jsx
+++ b/pages/outputs/[id].jsx
@@ -4,7 +4,7 @@ import { Header } from '@oacore/design'
 import { useRouter } from 'next/router'
 
 import { checkLogo, checkMembership } from 'utils/data-providers-transform'
-import { fetchMetadata, fetchCitations, fetchDataProvider } from 'api/outputs'
+import { fetchCitations, fetchDataProvider, fetchMetadata } from 'api/outputs'
 import { useStore } from 'store'
 import Meta from 'modules/meta'
 import Template from 'templates/output'
diff --git a/public/static/images/redirect.svg b/public/static/images/redirect.svg
new file mode 100644
index 00000000..0a6e6078
--- /dev/null
+++ b/public/static/images/redirect.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<g id="open-in-new">
+<path id="Vector" d="M14 3V5H17.59L7.76 14.83L9.17 16.24L19 6.41V10H21V3H14ZM19 19H5V5H12V3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V12H19V19Z" fill="#B75400"/>
+</g>
+</svg>
diff --git a/templates/output/card-dropdown.jsx b/templates/output/card-dropdown.jsx
index 10fcf87a..078c8102 100644
--- a/templates/output/card-dropdown.jsx
+++ b/templates/output/card-dropdown.jsx
@@ -34,6 +34,10 @@ const CardDropdown = ({
   dataProviderId,
   makeVisible,
   worksOai,
+  outputRedirect,
+  metadata,
+  doi,
+  useOtherVersions,
 }) => {
   const [copyUrlStatus, copyUrl] = useCopyToClipboard(oai)
   const [isTooltipVisible, setIsTooltipVisible] = useState(false)
@@ -128,6 +132,15 @@ const CardDropdown = ({
       memberType={memberType}
       checkBillingType={checkBillingType}
       makeVisible={makeVisible}
+      outputRedirect={outputRedirect}
+      metadata={metadata}
+      coreDownloadUrl={coreDownloadUrl}
+      sourceFulltextUrls={sourceFulltextUrls}
+      sourceFulltextUrlsUpd={sourceFulltextUrlsUpd}
+      id={id}
+      oai={oai}
+      doi={doi}
+      useOtherVersions={useOtherVersions}
     >
       <div className={styles.dropdownContent}>
         {!worksOai && oai && (
@@ -161,23 +174,11 @@ const CardDropdown = ({
             Last time updated on {formatDate(updatedDate || createdDate)}
           </Card.Description>
         )}
-        {coreDownloadUrl &&
-          coreDownloadUrl.match(/core.ac.uk/gm) &&
-          sourceFulltextUrls && (
-            <Card.Description className={styles.descriptionLink} tag="span">
-              <a
-                href={sourceFulltextUrlsUpd}
-                aria-labelledby={`${id}-downloaded-from-title`}
-                aria-describedby={`${id}-downloaded-from-body`}
-                target="_blank"
-                rel="noreferrer"
-              >
-                View original full text link
-              </a>
-            </Card.Description>
-          )}
         {checkBillingType && makeVisible ? (
-          <a href="/membership" className={styles.memberHighlight}>
+          <a
+            href="https://core.ac.uk/membership"
+            className={styles.memberHighlight}
+          >
             Provided by our {capitalizeFirstLetter(memberType?.billing_type)}{' '}
             member
           </a>
diff --git a/templates/output/card-dropdown.module.css b/templates/output/card-dropdown.module.css
index 5095eff3..86cf0fbf 100644
--- a/templates/output/card-dropdown.module.css
+++ b/templates/output/card-dropdown.module.css
@@ -6,12 +6,6 @@
   margin-bottom: 1rem;
 }
 
-.dropdown-content {
-  padding-top: 0.5rem;
-  margin-bottom: 1rem;
-  border-top: 1px solid var(--gray-100);
-}
-
 .identifier {
   position: relative;
   display: flex;
@@ -91,7 +85,7 @@
   font-weight: 400;
   color: #fff;
   letter-spacing: 0.004em;
-  background: #b75400;
+  background: #8BC34A;
   border-radius: 2px;
 }
 
diff --git a/templates/output/index.jsx b/templates/output/index.jsx
index 4644dc2f..d14f70a2 100644
--- a/templates/output/index.jsx
+++ b/templates/output/index.jsx
@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Button, Icon, MathMarkdown } from '@oacore/design/lib/elements'
+import { useRouter } from 'next/router'
 
 import SimilarWorks from './similar-works'
 import RelatedSearch from './related-search'
@@ -42,7 +43,22 @@ const ScientificOutputTemplate = ({
   useOtherVersions = false,
   ...passProps
 }) => {
+  const router = useRouter()
+
+  const includeOai = router.asPath.includes('source=oai')
   const [uniqueDoiArray, setUiqueDoiArray] = useState([])
+  const [oaiModal, setOaiModal] = useState(includeOai)
+
+  const modalRef = useRef(null)
+
+  const closeModal = () => {
+    setOaiModal(false)
+  }
+
+  const handleClickOutside = (event) => {
+    if (modalRef.current && !modalRef.current.contains(event.target))
+      closeModal()
+  }
 
   useEffect(() => {
     const doiArray = [doi]
@@ -52,8 +68,47 @@ const ScientificOutputTemplate = ({
     setUiqueDoiArray([...new Set(doiArray)])
   }, [])
 
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
   return (
     <Search {...passProps} className={styles.outputContainer}>
+      {oaiModal && !useOtherVersions && (
+        <div ref={modalRef} className={styles.oaiModal}>
+          <h3 className={styles.oaiModalTitle}>Repository landing page</h3>
+          <div className={styles.oaiModalText}>
+            We are not able to resolve this{' '}
+            <a href="https://oai.core.ac.uk">OAI</a> Identifier to the
+            repository landing page. If you are the repository manager for this
+            record, please head to the{' '}
+            <a href="https://core.ac.uk/services/repository-dashboard">
+              Dashboard
+            </a>{' '}
+            and adjust the settings.
+          </div>
+          <div className={styles.oaiModalButtons}>
+            <Button
+              onClick={() => {
+                window.open(
+                  'https://core.ac.uk/services/repository-dashboard',
+                  '_blank'
+                )
+              }}
+              variant="contained"
+            >
+              Go to the Dashboard
+            </Button>
+            <Button onClick={closeModal} variant="text">
+              Close
+            </Button>
+          </div>
+        </div>
+      )}
       <Search.Main>
         <div className={styles.background}>
           <div className={styles.info}>
@@ -127,6 +182,7 @@ const ScientificOutputTemplate = ({
           href={readerUrl}
           src={thumbnailLargeUrl || `//core.ac.uk/image/${id}/large`}
           alt="thumbnail-image"
+          doi={doi}
           data={{
             title: !useOtherVersions ? dataProvider.name : null,
             dataProviderLogo: dataProvider.logo,
@@ -137,13 +193,22 @@ const ScientificOutputTemplate = ({
             oai,
             download,
           }}
+          metadata={{
+            hrefDataProvider: `//core.ac.uk/data-providers/${dataProvider.id}`,
+          }}
           providerId={dataProvider.id}
           tag={fulltextStatus === 'disabled' ? 'div' : 'a'}
           useOtherVersions={useOtherVersions}
           memberType={memberType}
         />
         {useOtherVersions && outputs.length > 0 && (
-          <OtherVersions outputs={outputs} />
+          <OtherVersions
+            useOtherVersions={useOtherVersions}
+            outputs={outputs}
+            metadata={{
+              hrefDataProvider: `//core.ac.uk/data-providers/${dataProvider.id}`,
+            }}
+          />
         )}
         {!useOtherVersions && (
           <MapCard
diff --git a/templates/output/other-versions.jsx b/templates/output/other-versions.jsx
index ec7a1992..6da00a09 100644
--- a/templates/output/other-versions.jsx
+++ b/templates/output/other-versions.jsx
@@ -4,9 +4,11 @@ import { Card } from '@oacore/design/lib/elements'
 import styles from './styles.module.css'
 import CardDropdown from './card-dropdown'
 
-const OtherVersions = ({ outputs }) => (
+const OtherVersions = ({ outputs, metadata, useOtherVersions }) => (
   <Card className={styles.boxes} variant="outlined">
-    <Card.Title tag="h3">Available Versions</Card.Title>
+    <Card.Title className={styles.versionTitle} tag="h3">
+      Available Versions
+    </Card.Title>
     {outputs.map((output) => (
       <CardDropdown
         {...output}
@@ -16,7 +18,10 @@ const OtherVersions = ({ outputs }) => (
         href={output.display}
         oai={output.identifiers.oai}
         key={output.id}
+        useOtherVersions={useOtherVersions}
         worksOai
+        outputRedirect
+        metadata={metadata}
       />
     ))}
   </Card>
diff --git a/templates/output/styles.module.css b/templates/output/styles.module.css
index 8fc00cb0..9373de93 100644
--- a/templates/output/styles.module.css
+++ b/templates/output/styles.module.css
@@ -120,6 +120,29 @@
     1fr !important;
 }
 
+.oai-modal {
+  background: #fff;
+  position: fixed;
+  width: 456px;
+  top: 15px;
+  right: 6%;
+  z-index: 10001;
+  padding: 1rem;
+  border-radius: 2px;
+  border: 1px solid #b75400;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
+}
+
+.oai-modal-text {
+  margin: 24px 0;
+}
+
+.oai-modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
 .container-sidebar {
   padding-top: var(--page-padding-y);
 }
@@ -132,8 +155,7 @@
 
 .background {
   width: calc(100vw - 1rem);
-  padding: var(--page-padding-y) var(--page-padding-x) 1.5rem
-    var(--page-padding-x);
+  padding: var(--page-padding-y) var(--page-padding-x) 1.5rem var(--page-padding-x);
   background-color: var(--gray-100);
 }
 
@@ -187,6 +209,16 @@
 
 .boxes {
   margin-top: 1rem;
+  padding: 0;
+  box-shadow: unset;
+}
+
+.version-title {
+  padding: 1rem 1rem 0 0;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%;
 }
 
 .action-bar {
diff --git a/templates/output/thumbnail-card.jsx b/templates/output/thumbnail-card.jsx
index 0cd7481e..a3535dcd 100644
--- a/templates/output/thumbnail-card.jsx
+++ b/templates/output/thumbnail-card.jsx
@@ -14,10 +14,12 @@ const FullTextThumbnail = ({
   src,
   alt,
   href,
+  doi,
   className,
   tag: Tag = 'a',
   useOtherVersions,
   providerId,
+  metadata,
   ...passProps
 }) => {
   const downloadPDF = () => {
@@ -87,6 +89,8 @@ const FullTextThumbnail = ({
             activeArticle
             dataProviderId={providerId}
             makeVisible
+            doi={doi}
+            metadata={metadata}
             {...data}
             useExpandButton={false}
           />

From a053867e807b9cc92a2e193fd5e90dd4cb969efb Mon Sep 17 00:00:00 2001
From: Eka <ekachxaidze2@gmail.com>
Date: Mon, 18 Dec 2023 18:18:33 +0400
Subject: [PATCH 2/5] CORE-4742: fix styles

---
 templates/output/card-dropdown.module.css | 2 +-
 templates/output/styles.module.css        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/output/card-dropdown.module.css b/templates/output/card-dropdown.module.css
index 86cf0fbf..07da1d7a 100644
--- a/templates/output/card-dropdown.module.css
+++ b/templates/output/card-dropdown.module.css
@@ -85,7 +85,7 @@
   font-weight: 400;
   color: #fff;
   letter-spacing: 0.004em;
-  background: #8BC34A;
+  background: #8bc34a;
   border-radius: 2px;
 }
 
diff --git a/templates/output/styles.module.css b/templates/output/styles.module.css
index 9373de93..20d25435 100644
--- a/templates/output/styles.module.css
+++ b/templates/output/styles.module.css
@@ -130,7 +130,7 @@
   padding: 1rem;
   border-radius: 2px;
   border: 1px solid #b75400;
-  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
 }
 
 .oai-modal-text {

From 88d9d5cb9c1f5c69278339a568c6643358dad1bd Mon Sep 17 00:00:00 2001
From: Eka <ekachxaidze2@gmail.com>
Date: Mon, 18 Dec 2023 18:22:14 +0400
Subject: [PATCH 3/5] CORE-4742: styles

---
 templates/output/styles.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/output/styles.module.css b/templates/output/styles.module.css
index 20d25435..aba018a8 100644
--- a/templates/output/styles.module.css
+++ b/templates/output/styles.module.css
@@ -121,11 +121,11 @@
 }
 
 .oai-modal {
-  background: #fff;
   position: fixed;
-  width: 456px;
   top: 15px;
   right: 6%;
+  background: #fff;
+  width: 456px;
   z-index: 10001;
   padding: 1rem;
   border-radius: 2px;
@@ -208,8 +208,8 @@
 }
 
 .boxes {
-  margin-top: 1rem;
   padding: 0;
+  margin-top: 1rem;
   box-shadow: unset;
 }
 

From 5584ed2f97897ca934b9614c4442ae6793e75ff8 Mon Sep 17 00:00:00 2001
From: Eka <ekachxaidze2@gmail.com>
Date: Mon, 18 Dec 2023 18:27:33 +0400
Subject: [PATCH 4/5] CORE-4742: styling

---
 templates/output/styles.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/output/styles.module.css b/templates/output/styles.module.css
index aba018a8..9ca6d967 100644
--- a/templates/output/styles.module.css
+++ b/templates/output/styles.module.css
@@ -124,12 +124,12 @@
   position: fixed;
   top: 15px;
   right: 6%;
-  background: #fff;
-  width: 456px;
   z-index: 10001;
+  width: 456px;
+  background: #fff;
   padding: 1rem;
-  border-radius: 2px;
   border: 1px solid #b75400;
+  border-radius: 2px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
 }
 

From 3067465f2e66495925e1b902f60bb2ace859024c Mon Sep 17 00:00:00 2001
From: Eka <ekachxaidze2@gmail.com>
Date: Mon, 18 Dec 2023 18:46:12 +0400
Subject: [PATCH 5/5] lint issue

---
 templates/output/styles.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/output/styles.module.css b/templates/output/styles.module.css
index 9ca6d967..8858315c 100644
--- a/templates/output/styles.module.css
+++ b/templates/output/styles.module.css
@@ -126,8 +126,8 @@
   right: 6%;
   z-index: 10001;
   width: 456px;
-  background: #fff;
   padding: 1rem;
+  background: #fff;
   border: 1px solid #b75400;
   border-radius: 2px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
@@ -155,7 +155,7 @@
 
 .background {
   width: calc(100vw - 1rem);
-  padding: var(--page-padding-y) var(--page-padding-x) 1.5rem var(--page-padding-x);
+  padding: var(--page-padding-y) var(--page-padding-x) 1.5rem;
   background-color: var(--gray-100);
 }