Merge branch 'header_branch' into sebbe-pre-dev_branch

Played around with padding settings in header and body, think it looks a bit better but not sure.
ScilifelabDataCentre · Jan 30, 2024 · 84d1afc · 84d1afc
2 parents 1729b6e + 55d39c4
commit 84d1afc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/react-app/src/components/HeaderComponent.tsx b/react-app/src/components/HeaderComponent.tsx
@@ -18,14 +18,14 @@ export default function HeaderComponent() {
 
     return (
         // use bg-zinc-200 instead? similar to daisyUI light-theme footer
-        <div className="navbar h-[8rem] bg-base-100">
+        <div className="navbar bg-base-100 px-8">
             <div className="navbar-start">
                 <Link to="/">
-                    <img className="w-[340px] h-[82px]" src="/images/SciLifeLab logo/NEG/Digital/SciLifeLab_Logotype_NEG.png" alt="SciLifeLab Logo" />
+                    <img className="h-auto w-80" src="/images/SciLifeLab logo/NEG/Digital/SciLifeLab_Logotype_NEG.png" alt="SciLifeLab Logo" />
                 </Link>
             </div>
-            <div className="navbar-center hidden lg:flex">
-                <ul className="menu menu-horizontal px-1">
+            <div className="navbar-center lg:flex">
+                <ul className="menu menu-horizontal">
                 {Object.keys(links).map( key => (
                     <li>{<NavLink className={links[key].classes} to={links[key].link}>{links[key].text}</NavLink>}</li>
                 ))}

diff --git a/react-app/src/constants.ts b/react-app/src/constants.ts
@@ -1,11 +1,11 @@
 // reused tailwind classes
 export const HEADER_ONE: string = "text-left text-black text-[40px] font-semibold";
 
-export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold py-8";
+export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold p-6";
 
 export const BUTTON_TYPE_ONE: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
 export const BUTTON_TYPE_TWO: string = 'btn bg-gray-950 text-white hover:bg-gray-800 active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-300';
 
-export const BODY_CLASSES: string = "bg-white space-y-6 p-14";
+export const BODY_CLASSES: string = "bg-white space-y-4 py-4 px-12";
 
 export const LINK_CLASSES: string = 'link link-hover';