From ea42a74ee694d3e1d5b38f478191574b471430eb Mon Sep 17 00:00:00 2001
From: Shawn O'Connor <shawnoconnor@uchicago.edu>
Date: Fri, 25 Oct 2024 15:58:46 -0500
Subject: [PATCH 1/2] VADC-1439: add link to access denied page

---
 src/components/AccessDenied.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/AccessDenied.jsx b/src/components/AccessDenied.jsx
index 524f9965f..c38ea50fa 100644
--- a/src/components/AccessDenied.jsx
+++ b/src/components/AccessDenied.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import './NotFound.less';
 import { userAccessToSite } from '../configs';
+import { logoutAPI } from '../actions';
 
 class AccessDenied extends React.Component {
   render() {
@@ -17,6 +19,7 @@ class AccessDenied extends React.Component {
     return (
       <div className='error-placeholder__error-msg'>
         <h1>{userAccessToSite.noAccessMessage ? convertEmailsToLink(userAccessToSite.noAccessMessage) : 'Access to this site requires special permission.'}</h1>
+        <p><h2><Link to='#' onClick={logoutAPI()}>Logout and Return to Homepage</Link></h2></p>
       </div>
     );
   }

From b193b1661a160515189cd9cbdb026dcb16a395f3 Mon Sep 17 00:00:00 2001
From: Shawn O'Connor <shawnoconnor@uchicago.edu>
Date: Wed, 30 Oct 2024 15:53:37 -0500
Subject: [PATCH 2/2] VADC-1439: update to new design

---
 src/components/AccessDenied.jsx  | 39 +++++++++++++++++++++++++---
 src/components/AccessDenied.less | 44 ++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 src/components/AccessDenied.less

diff --git a/src/components/AccessDenied.jsx b/src/components/AccessDenied.jsx
index c38ea50fa..e8e9c3caa 100644
--- a/src/components/AccessDenied.jsx
+++ b/src/components/AccessDenied.jsx
@@ -1,11 +1,23 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import Button from '@gen3/ui-component/dist/components/Button';
 import './NotFound.less';
 import { userAccessToSite } from '../configs';
 import { logoutAPI } from '../actions';
+import './AccessDenied.less';
+import { components } from '../params';
 
 class AccessDenied extends React.Component {
   render() {
+    let customImage = 'gene';
+    let displaySideBoxImages = true;
+    if (components.login && components.login.image !== undefined) {
+      if (components.login.image !== '') {
+        customImage = components.login.image;
+      } else {
+        displaySideBoxImages = false;
+      }
+    }
+    const customImageStyle = { backgroundImage: `url(/src/img/icons/${customImage}.svg)` };
     const convertEmailsToLink = (str) => {
       // can only handle one email address
       // eslint-disable-next-line
@@ -17,9 +29,28 @@ class AccessDenied extends React.Component {
       return (<React.Fragment>{str}</React.Fragment>);
     };
     return (
-      <div className='error-placeholder__error-msg'>
-        <h1>{userAccessToSite.noAccessMessage ? convertEmailsToLink(userAccessToSite.noAccessMessage) : 'Access to this site requires special permission.'}</h1>
-        <p><h2><Link to='#' onClick={logoutAPI()}>Logout and Return to Homepage</Link></h2></p>
+      <div className='access-denied'>
+        {
+          (displaySideBoxImages)
+            ? <div className='access-denied__side-box access-denied__side-box--left' style={customImageStyle} />
+            : null
+        }
+        <div className='access-denied__central-content'>
+          <h1 className='h1_heading'>Access Denied</h1>
+          <p>{userAccessToSite.noAccessMessage ? convertEmailsToLink(userAccessToSite.noAccessMessage) : 'Access to this site requires special permission.'}</p>
+          <Button
+            className='logoutBtn'
+            onClick={logoutAPI()}
+            buttonType='primary'
+            label='Logout and Return to Homepage'
+            to='#'
+          />
+        </div>
+        {
+          (displaySideBoxImages)
+            ? <div className='access-denied__side-box access-denied__side-box--left' style={customImageStyle} />
+            : null
+        }
       </div>
     );
   }
diff --git a/src/components/AccessDenied.less b/src/components/AccessDenied.less
new file mode 100644
index 000000000..ceb589a8d
--- /dev/null
+++ b/src/components/AccessDenied.less
@@ -0,0 +1,44 @@
+.access-denied {
+  display: flex;
+  justify-content: space-around;
+  height: 100%;
+}
+@media screen and (max-width: 820px) {
+  .access-denied {
+    justify-content: center;
+  }
+}
+
+.access-denied__side-box {
+  width: 200px;
+  min-height: ~"calc(100vh - 221px)";
+  background-size: 200px;
+}
+
+.access-denied__central-content {
+  text-align: center;
+  flex-basis: 50%;
+  color: #000000;
+  align-self: center;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.logoutBtn {
+  margin: 40px;
+}
+
+@media screen and (max-width: 820px) {
+  .access-denied__central-content {
+    padding: 40px 10px;
+  }
+  .access-denied__side-box {
+    display: none;
+  }
+}
+
+.h1_heading {
+  text-transform: uppercase;
+}