From 7b1e7317a90396da9187847a5e4b5026e211a183 Mon Sep 17 00:00:00 2001
From: Martin Mwiti <martin.mwiti.n@gmail.com>
Date: Tue, 1 Oct 2024 02:27:58 +0300
Subject: [PATCH] Add archived-project class for styling archived projects

Signed-off-by: Martin Mwiti <martin.mwiti.n@gmail.com>
---
 src/sections/Community/Handbook/Handbook.style.js | 6 ++++++
 src/sections/Community/Handbook/repository.js     | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/sections/Community/Handbook/Handbook.style.js b/src/sections/Community/Handbook/Handbook.style.js
index e1d641d76fe7..523f63b74252 100644
--- a/src/sections/Community/Handbook/Handbook.style.js
+++ b/src/sections/Community/Handbook/Handbook.style.js
@@ -166,6 +166,12 @@ export const HandbookWrapper = styled.div`
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
 
+    .archived-project {
+      opacity: 0.3;
+      background-color: #808080;
+      // pointer-events: none;
+    }
+
     .linkscol{
       text-align: center;
       width:8%;
diff --git a/src/sections/Community/Handbook/repository.js b/src/sections/Community/Handbook/repository.js
index 0ef3c168a5d7..af770b6a1af1 100644
--- a/src/sections/Community/Handbook/repository.js
+++ b/src/sections/Community/Handbook/repository.js
@@ -223,7 +223,7 @@ const Repository = () => {
                       const siteIconClasses = smpClass ? "site-icon inline smp-action" : "site-icon inline";
                       return (
                         <tbody key={project}>
-                          <tr>
+                          <tr className={accessRequired === "*archived" ? "archived-project" : ""}>
                             <td>
                               <img className={siteIconClasses} src={image} alt="project" />&nbsp;{project} </td>
                             <td>{language}</td>