fix footer links

uc-cdis · Dec 9, 2024 · 627d2ac · 627d2ac
1 parent 4cd57b0
commit 627d2ac
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 22 deletions.
diff --git a/packages/frontend/src/features/Navigation/Footer/FooterColumn.tsx b/packages/frontend/src/features/Navigation/Footer/FooterColumn.tsx
@@ -9,7 +9,10 @@ import {
   FooterLinks,
   FooterSectionProps,
 } from './types';
-import { mergeDefaultTailwindClassnames } from '../../../utils/mergeDefaultTailwindClassnames';
+import {
+  mergeDefaultTailwindClassnames,
+  mergeTailwindClassnameWithDefault,
+} from '../../../utils/mergeDefaultTailwindClassnames';
 import { extractClassName } from '../utils';
 import { extractObjectKey } from '../../../utils/values';
 
@@ -53,8 +56,13 @@ const FooterRowComponent: React.FC<FooterRowComponentProps> = ({
 
     case 'Links': {
       const links = item[itemType] as FooterLinks;
+      const mergedClassname = mergeTailwindClassnameWithDefault(
+        className,
+        'flex flex-no-wrap space-x-1',
+      );
+
       return (
-        <div className={`flex flex-no-wrap space-x-4 ${className ?? ''}`}>
+        <div className={mergedClassname}>
           {links?.links.map((link, i) => {
             return (
               <React.Fragment key={link.href}>

diff --git a/packages/frontend/src/features/Navigation/NavigationBarButton.tsx b/packages/frontend/src/features/Navigation/NavigationBarButton.tsx
@@ -33,8 +33,6 @@ const NavigationBarButton = ({
     ...TooltipStyle,
   };
 
-  console.log('hasNoBasePath: ', noBasePath);
-
   const mergedClassnames = mergeDefaultTailwindClassnames(
     classNamesDefaults,
     classNames,
@@ -43,6 +41,7 @@ const NavigationBarButton = ({
     <React.Fragment>
       <Tooltip
         label={tooltip}
+        disabled={!tooltip}
         multiline
         position="bottom"
         arrowSize={8}
@@ -51,18 +50,20 @@ const NavigationBarButton = ({
         w={220}
       >
         {noBasePath ? (
-          <a
-            className={extractClassName('root', mergedClassnames)}
-            href={`${href}`}
-          >
-            <Icon
-              height={iconHeight}
-              icon={icon}
-              className={extractClassName('icon', mergedClassnames)}
-            />
-            <p className={extractClassName('label', mergedClassnames)}>
-              {name}
-            </p>
+          <a href={`${href}`}>
+            <div
+              className={extractClassName('root', mergedClassnames)}
+              role="navigation"
+            >
+              <Icon
+                height={iconHeight}
+                icon={icon}
+                className={extractClassName('icon', mergedClassnames)}
+              />
+              <p className={extractClassName('label', mergedClassnames)}>
+                {name}
+              </p>
+            </div>
           </a>
         ) : (
           <Link

diff --git a/packages/frontend/src/features/Navigation/NavigationLogo.tsx b/packages/frontend/src/features/Navigation/NavigationLogo.tsx
@@ -16,7 +16,7 @@ const NavigationLogo = ({
   classNames = {},
 }: NavigationBarLogo) => {
   const classNamesDefaults = {
-    root: 'relative flex py-2 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]',
+    root: 'relative flex py-0 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]',
     link: 'relative object-contain',
     logo: 'px-3',
     title: 'border-solid border-base-darker ml-1 mr-3',

diff --git a/packages/frontend/src/utils/mergeDefaultTailwindClassnames.ts b/packages/frontend/src/utils/mergeDefaultTailwindClassnames.ts
@@ -36,3 +36,8 @@ export const mergeDefaultTailwindClassnames = (
 
   return mergedValues;
 };
+
+export const mergeTailwindClassnameWithDefault = (
+  userValues: string | undefined,
+  defaultValues: string,
+): string => (userValues ? twMerge(defaultValues, userValues) : defaultValues);
diff --git a/packages/sampleCommons/.env.development b/packages/sampleCommons/.env.development
@@ -1,4 +1,4 @@
-GEN3_COMMONS_NAME=gen3
+GEN3_COMMONS_NAME=biodata
 NEXT_PUBLIC_GEN3_API=https://localhost:3010
 
 ## For more fine grain control over the API uncomment the relevant lines

diff --git a/packages/sampleCommons/config/gen3/footer.json b/packages/sampleCommons/config/gen3/footer.json
@@ -1,6 +1,6 @@
 {
   "classNames": {
-    "root": "bg-base-darker",
+    "root": "bg-base-min",
     "layout": "flex items-center justify-end"
   },
   "rightSection": {

diff --git a/packages/sampleCommons/config/gen3/themeColors.json b/packages/sampleCommons/config/gen3/themeColors.json
@@ -216,7 +216,7 @@
     "min": "#fefefe"
   },
   "navigation": {
-    "footer": "#373A3C",
+    "footer": "#000000",
     "topbar_hover": "#FFFFFF",
     "light": "#111111",
     "DEFAULT": "#111111",

diff --git a/packages/sampleCommons/tailwind.config.js b/packages/sampleCommons/tailwind.config.js
@@ -63,6 +63,8 @@ module.exports = {
         content: themeFonts.content,
       },
       fontSize: {
+        xxxs: '0.4rem',
+        xxs: '0.5rem',
         tiny: '0.625rem',
       },
       borderWidth: {
@@ -168,6 +170,6 @@ module.exports = {
       });
     }),
   ],
-  // Add any colors used in a json config file here
-  safelist: [],
+  // Add any colors. fontSize, height used in a json config file here
+  safelist: ['text-tiny', 'text-xxs', 'text-xxxs', 'h-20'],
 };