From 8279fe18769f06f17e407d3c03ebd009f6ce943a Mon Sep 17 00:00:00 2001
From: Paulo Gomes da Cruz Junior <paulo.cruz@gov.bc.ca>
Date: Wed, 30 Oct 2024 14:57:19 -0700
Subject: [PATCH] fix(SILVA-494): disabling home buttons

disabled some of the home buttons as they're not required right now
---
 .../src/components/FavouriteCard/index.tsx    | 19 ++++++++++---------
 .../src/components/FavouriteCard/styles.scss  |  6 ++++++
 frontend/src/screens/Opening/index.tsx        |  9 ++++++---
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/FavouriteCard/index.tsx b/frontend/src/components/FavouriteCard/index.tsx
index cdccce9d..412f54c0 100644
--- a/frontend/src/components/FavouriteCard/index.tsx
+++ b/frontend/src/components/FavouriteCard/index.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Tile } from '@carbon/react';
+import { ClickableTile } from '@carbon/react';
 import * as Icons from '@carbon/icons-react';
 import './styles.scss';
 
@@ -9,7 +7,8 @@ interface FavouriteCardProps {
   title: string,
   link: string,
   icon: string,
-  description:String
+  description:string
+  disabled?: boolean
 }
 
 /**
@@ -28,16 +27,18 @@ function FavouriteCard ({
   title,
   link,
   icon,
-  description
+  description,
+  disabled = false
 }: FavouriteCardProps): JSX.Element {
   const Icon = Icons[String(icon)];
-  const navigate = useNavigate();
 
   return (
-    <Tile
+    <ClickableTile
+      id={`fav-card-${index}`}
       className={'fav-card-main' }
       tabIndex={index}
-      onClick={() => navigate(link)}
+      href={link}
+      disabled={disabled}
     >
       <div className="fav-card-header">
         <Icon className="fav-card-icon" />
@@ -49,7 +50,7 @@ function FavouriteCard ({
         <p className="fav-card-title-large">{title}</p>
         <p className="fav-card-content-description">{description}</p>
       </div>
-    </Tile>
+    </ClickableTile>
   );
 };
 
diff --git a/frontend/src/components/FavouriteCard/styles.scss b/frontend/src/components/FavouriteCard/styles.scss
index 0f7509a1..32858307 100644
--- a/frontend/src/components/FavouriteCard/styles.scss
+++ b/frontend/src/components/FavouriteCard/styles.scss
@@ -116,6 +116,12 @@ p.fav-card-title-small {
   display: none;
 }
 
+.bx--tile--clickable.bx--link--disabled, .bx--tile--clickable:hover.bx--link--disabled {
+  display: flex;
+  margin: 0.5rem;
+  padding: 1.25rem 1rem;
+}
+
 @media only screen and (max-width: 671px) {
   .fav-card-main,
   .fav-card-main-highlighted {
diff --git a/frontend/src/screens/Opening/index.tsx b/frontend/src/screens/Opening/index.tsx
index 08bdd018..ef2971fd 100644
--- a/frontend/src/screens/Opening/index.tsx
+++ b/frontend/src/screens/Opening/index.tsx
@@ -53,29 +53,32 @@ const Opening: React.FC = () => {
             </div>
             <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
               <FavouriteCard
-                index={1}
+                index={2}
                 title={'Create an opening'}
                 link="#"
                 icon={'MapBoundary'}
                 description={'Create different opening types to track silviculture activities, treatments and generate their identifier (ID)'}
+                disabled
               />
             </div>
             <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
               <FavouriteCard
-                index={1}
+                index={3}
                 title={'Reports'}
                 link="#"
                 icon={'ReportData'}
                 description={'Consult and manage opening reports'}
+                disabled
               />
             </div>
             <div className="col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3">
               <FavouriteCard
-                index={1}
+                index={4}
                 title={'Upcoming activities'}
                 link="#"
                 icon={'Activity'}
                 description={'Track opening activities and milestones'}
+                disabled
               />
             </div>
           </div>