fix: address review feedback (logo update, chrome button bg, social icon spacing)

Author: aadya284

app/[slug]/page.tsx

@@ -26,6 +26,7 @@ import { useTheme } from "@/app/contexts/themeContext";
 const Page = ({ params: { slug } }: { params: { slug: string } }) => {
   const [browser, setBrowser] = useState("chrome");
   const { isLightTheme } = useTheme();
+  const logoSrc = isLightTheme ? "/images/bb-logo-light.svg" : "/images/bb-logo.svg";
 
   useEffect(() => {
     setBrowser(detectBrowser());
@@ -67,7 +68,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                 {/* Left Section */}
                 <div className="text-left flex-1">
                   <Image
-                    src="/images/bb-logo.svg"
+                    src={logoSrc}
                     alt="BetterBugs Logo"
                     className="mb-8"
                     width={200}
@@ -88,7 +89,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                   </p>
                   <div className="flex items-center gap-3 mt-6 mb-4">
                     <Link target="_blank" href={Extension_URL}>
-                      <Button className="btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4">
+                      <Button
+                        className={`btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4 ${DevelopmentToolsStyles.addToChromeButton}`}
+                      >
                         {browser === "edge" ? (
                           <EdgeIcon className="w-7 h-7" />
                         ) : (
@@ -891,7 +894,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                   {/* Left Section */}
                   <div className="text-left flex-1">
                     <Image
-                      src="/images/bb-logo.svg"
+                      src={logoSrc}
                       alt="BetterBugs Logo"
                       className="mb-8"
                       width={200}
@@ -912,7 +915,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                     </p>
                     <div className="flex items-center gap-3 mt-6 mb-4">
                       <Link target="_blank" href={Extension_URL}>
-                        <Button className="btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4">
+                        <Button
+                          className={`btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4 ${DevelopmentToolsStyles.addToChromeButton}`}
+                        >
                           {browser === "edge" ? (
                             <EdgeIcon className="w-7 h-7" />
                           ) : (

app/components/layout/footer/footerComponent.tsx

@@ -118,6 +118,18 @@ const FooterComponent = () => {
     },
   ];
 
+  const socialIconWrapperClass = isLightTheme
+    ? 'w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer bg-transparent border-none'
+    : 'w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon';
+
+  const socialIconWrapperWideClass = isLightTheme
+    ? 'w-10 h-10 p-2 rounded-xl flex items-center justify-center cursor-pointer bg-transparent border-none'
+    : 'w-10 h-10 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon';
+
+  const socialIconClass = isLightTheme
+    ? 'text-[#6b7280] hover:text-[#10b981]'
+    : 'text-white/60 hover:text-white';
+
   // const PartnershipMenu = [
   //   { label: "For agencies", url: "/" },
   //   { label: "For enterprise", url: "/" },
@@ -269,50 +281,50 @@ const FooterComponent = () => {
                   priority
                 />
               </Link>
-              <div className="flex mt-1 lg:mt-5">
+              <div className="flex mt-1 lg:mt-5 gap-3">
                 <Link
                   href="https://www.linkedin.com/company/betterbugs/"
                   target="_blank"
                   aria-label="LinkedIn"
                 >
-                  <div className="w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
-                    <LinkedinIcon className="text-white/60 hover:text-white" />
+                  <div className={socialIconWrapperClass}>
+                    <LinkedinIcon className={socialIconClass} />
                   </div>
                 </Link>
                 <Link
                   href="https://twitter.com/BetterBugs"
                   target="_blank"
                   aria-label="Twitter"
                 >
-                  <div className="w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
-                    <TwitterIcon className="text-white/60 hover:text-white" />
+                  <div className={socialIconWrapperClass}>
+                    <TwitterIcon className={socialIconClass} />
                   </div>
                 </Link>
                 <Link
                   href="https://www.instagram.com/betterbugshq/"
                   target="_blank"
                   aria-label="Instagram"
                 >
-                  <div className="w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
-                    <InstagramIcon className="text-white/60 hover:text-white" />
+                  <div className={socialIconWrapperClass}>
+                    <InstagramIcon className={socialIconClass} />
                   </div>
                 </Link>
                 <Link
                   href="https://www.youtube.com/@betterbugshq"
                   target="_blank"
                   aria-label="LinkedIn"
                 >
-                  <div className="w-10 h-10 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
-                    <YouTubeIcon className="text-white/60 hover:text-white !w-12 !h-12" />
+                  <div className={socialIconWrapperWideClass}>
+                    <YouTubeIcon className={`${socialIconClass} !w-12 !h-12`} />
                   </div>
                 </Link>
                 <Link
                   href="https://discord.com/invite/HF8XjwVtPh"
                   target="_blank"
                   aria-label="Discord"
                 >
-                  <div className="w-10 h-10 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
-                    <DiscordIcon className="text-white/60 hover:text-white !w-12 !h-12" />
+                  <div className={socialIconWrapperWideClass}>
+                    <DiscordIcon className={`${socialIconClass} !w-12 !h-12`} />
                   </div>
                 </Link>
               </div>

app/developmentToolsStyles.module.scss

@@ -244,6 +244,11 @@
   background: #00d0ff9a;
 }
 
+.addToChromeButton {
+  background: #000000;
+  color: #ffffff;
+}
+
 /* Webkit custom scrollbar styles */
 .scrollbar {
   overflow: auto;