fix(BCHEP-572, BCHEP-568): Button colors for Ready for training and Mark Ineligible, Enter button now works on home screen boxes, bottom of Program resources box is not truncated

Author: jtwatts

app/frontend/components/domains/contractor-management/contractor-program-resources-screen.tsx

@@ -296,13 +296,14 @@ export const ContractorProgramResourcesScreen = observer(function ContractorProg
             as="aside"
             w={{ base: '100%', lg: '280px' }}
             flexShrink={0}
+            overflow="visible"
             role="navigation"
             aria-label="Resource categories"
             id="main-content"
             tabIndex={-1}
             bg="greys.white"
           >
-            <VStack align="stretch" spacing={0} role="tablist">
+            <VStack align="stretch" spacing={0} role="tablist" overflow="visible">
               {SIDEBAR_CATEGORIES.map((category) => (
                 <Box
                   key={category.key}
@@ -332,6 +333,8 @@ export const ContractorProgramResourcesScreen = observer(function ContractorProg
                     outline: '3px solid',
                     outlineColor: 'theme.blue',
                     outlineOffset: '2px',
+                    zIndex: 1,
+                    position: 'relative',
                   }}
                   _first={{
                     borderTop: 'none',

app/frontend/components/domains/energy-savings-application/review-permit-application-screen.tsx

@@ -512,7 +512,8 @@ export const ReviewPermitApplicationScreen = observer(() => {
                             variant="calloutInverse"
                             px={14}
                             onClick={onTrainingPending}
-                            borderColor="green"
+                            borderColor="theme.darkGreen"
+                            bg="theme.lightGreen"
                             isDisabled={
                               hasUnsavedEdits ||
                               currentPermitApplication?.status === EPermitApplicationStatus.ineligible ||
@@ -578,7 +579,8 @@ export const ReviewPermitApplicationScreen = observer(() => {
                             leftIcon={!isEditContractor && <ProhibitIcon />}
                             px={14}
                             onClick={onIneligibleOpen}
-                            borderColor="red"
+                            borderColor="semantic.errorDark"
+                            bg="theme.softRose"
                           >
                             {!isEditContractor
                               ? t('energySavingsApplication.show.inEligible')

app/frontend/components/domains/home/home-screen-box.tsx

@@ -57,6 +57,13 @@ export const HomeScreenBox = observer(
           backgroundColor: 'theme.BlueLight',
           cursor: isDisabled ? 'not-allowed' : 'pointer',
         }}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            const link = e.currentTarget.querySelector('a, button') as HTMLElement;
+            link?.click();
+          }
+        }}
         {...rest}
       >
         {isMarked && <SandboxHeader />}