Merge pull request #336 from HackBeanpot/mainsite/feature/Navbar-adjustments

Mainsite/feature/navbar adjustments

Author: agonzalez22

apps/main/src/app/(landing)/Sections/FAQ.tsx

@@ -46,7 +46,6 @@ const appQuestions = [
   },
 ];
 
-
 const logisticsQuestions = [
   {
     question: "Will my travel be reimbursed?",

apps/main/src/app/lib/Components/NavBar.tsx

@@ -58,7 +58,7 @@ const NavBar = () => {
     <div className={outerDivStyles}>
       <div className={navBarStyles}>
         <LocalLink href={"/"}>
-          <Logo />
+          <Logo className="w-[10vw] min-w-[100px]" />
         </LocalLink>
 
         {!isDesktop && (
@@ -78,20 +78,26 @@ const NavBar = () => {
             <LocalLink
               key={item.pageName}
               href={item.link}
-              className="text-lg font-DMSans-Bold"
+              className="text-charcoalFog hover:text-charcoalFogLight text-[1vw] mobile:text-[4vw] mobile:text-white font-DMSans-Bold"
             >
               {item.pageName}
             </LocalLink>
           ))}
           <div className={buttonsStyles}>
             <LocalLink href={"/sponsor-us"}>
-              <Button textColor="white" text="Sponsor Us" size="medium" />
+              <Button
+                textColor="white"
+                text="Sponsor Us"
+                size="medium"
+                className="w-[5vw] min-w-[100px] text-[1vw]"
+              />
             </LocalLink>
             <Button
               textColor="white"
               text="Apply"
               color="firecrackerRedLight"
               size="medium"
+              className="w-[5vw] min-w-[100px] text-[1vw]"
               onClick={() => window.open("https://apply.hackbeanpot.com/")}
             />
           </div>

packages/ui/src/Button.tsx

@@ -9,6 +9,7 @@ interface ButtonProps {
   textColor?: string;
   size?: string;
   removePadding?: boolean;
+  className?: string;
 }
 
 const bgColorMap: Record<string, string> = {
@@ -40,12 +41,13 @@ const Button: React.FC<ButtonProps> = ({
   icon,
   size = "small",
   removePadding,
+  className,
 }) => {
   const bgClass = bgColorMap[color] || bgColorMap["mossGreen"];
   const textColorClass = textColorMap[textColor];
   const sizeClass = sizeMap[size] || sizeMap["small"];
 
-  const buttonClasses = `font-DMSans-Bold flex items-center justify-center gap-1 rounded-full w-auto h-auto ${text ? "px-4" : "px-2"} py-2 ${bgClass} shadow-[inset_2px_3px_0_rgba(0,0,0,0.10)] ${textColorClass} ${sizeClass} text-base whitespace-nowrap transition-transform duration-200 ease-in-out hover:scale-105`;
+  const buttonClasses = `font-DMSans-Bold flex items-center justify-center gap-1 rounded-full w-auto h-auto ${text ? "px-4" : "px-2"} py-2 ${bgClass} shadow-[inset_2px_3px_0_rgba(0,0,0,0.10)] ${textColorClass} ${sizeClass} text-base whitespace-nowrap transition-transform duration-200 ease-in-out hover:scale-105 ${className ?? ""}`;
 
   return (
     <button className={buttonClasses} onClick={onClick}>

packages/ui/src/Logos/HackBeanpotLogo.tsx

@@ -2,8 +2,6 @@ import * as React from "react";
 
 const Logo = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
-    width={163}
-    height={54}
     viewBox="0 0 163 54"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"