Add archived-project class for styling archived projects

Signed-off-by: Martin Mwiti <[email protected]>
rajasurya-rjs · Sep 30, 2024 · 7b1e731 · 7b1e731
1 parent ca9fc9c
commit 7b1e731
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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>