Merge branch 'main' into lighthouse-CI

Signed-off-by: StarLight <[email protected]>

Author: shivambisen

package-lock.json

@@ -29,7 +29,7 @@
     "babel-loader": "^9.2.1",
     "classnames": "^2.5.1",
     "framer-motion": "^12.12.1",
-    "gatsby": "^5.14.3",
+    "gatsby": "^5.14.6",
     "gatsby-adapter-netlify": "^1.2.1",
     "gatsby-plugin-algolia-search": "^0.5.7",
     "gatsby-plugin-canonical-urls": "^5.14.0",

package.json

@@ -104,7 +104,7 @@ const spaceXClassNames = {
 };
 
 const Logos = ({ title, items, spaceXSize, id }) => (
-  <section className="pt-10 md:pt-20 lg:pt-28 xl:pt-32" id={id}>
+  <section className="pt-10 md:pt-20 lg:pt-28 xl:pt-32 dark:text-white" id={id}>
     <Container size="md">
       <Link className="text-center" to={`#${id}`}>
         <Heading tag="h2">{title}</Heading>

src/components/pages/adopters/logos/logos.jsx

@@ -9,7 +9,6 @@ import LightChevronIcon from 'icons/light-chevron.inline.svg';
 
 import Checkbox from './checkbox';
 
-
 const DropdownSelect = ({ name, items, values, onSelect, isSelected, className }) => {
   const dropdownRef = useRef(null);
   const buttonRef = useRef(null);
@@ -33,7 +32,7 @@ const DropdownSelect = ({ name, items, values, onSelect, isSelected, className }
 
   useClickOutside([dropdownRef, buttonRef], handleDropdownOutsideClick);
 
-  const isDarkMode = useDarkMode();
+  const {isDarkMode} = useDarkMode();
 
   const iconClass = classNames(
     'text-gray-40 mt-1 h-auto w-2 shrink-0 transition-[transform,color] duration-200 group-hover:text-black',

src/components/pages/events/events-board/filters/dropdown-select/dropdown-select.jsx

@@ -87,7 +87,7 @@ const Cards = () => {
               {links.map(({ title, url, target }, index) => (
                 <Button
                   className="lg:text-base"
-                  theme={title === 'Explore Archive' ? 'primary-1' : 'outline-gray'}
+                  theme="primary-1"
                   size="md"
                   key={index}
                   to={url}

src/components/pages/newsletter/cards/cards.jsx

@@ -10,13 +10,12 @@ import backgroundSvg from './images/background.svg';
 import darkThemeBackgroundSvg from './images/dark-theme-background.svg';
 import RSSIcon from './images/rss.inline.svg';
 
-
 const title = 'Subscribe to bi-weekly eCHO News';
 const description =
   'eCHO news is your bi-weekly wrap up of all things eBPF and Cilium. If you want to keep up on the latest in cloud native networking, observability, and security this is your source';
 
 const Hero = () => {
-  const isDarkMode = useDarkMode();
+  const {isDarkMode} = useDarkMode();
 
   return (
     <section className="relative pt-10 md:pt-20 bg-gray-4 dark:bg-gray-900 ">

src/components/pages/newsletter/hero/hero.jsx

@@ -21,11 +21,27 @@ const FORM_STATES = {
 };
 
 const validationSchema = yup.object().shape({
+  firstName: yup
+    .string()
+    .trim()
+    .required('Name is a required field'),
   email: yup
     .string()
     .trim()
     .email('Please provide a valid email')
     .required('Email is a required field'),
+  ciliumSlackUsername: yup
+    .string()
+    .trim()
+    .required('Cilium Slack Username is a required field'),
+  howAreYouUsingCilium: yup
+    .string()
+    .trim()
+    .required('It is a required field'),
+  message: yup
+    .string()
+    .trim()
+    .required('Message is a required field'),
 });
 
 const Form = ({ formClassName }) => {
@@ -81,6 +97,7 @@ const Form = ({ formClassName }) => {
                 type="text"
                 id="firstName"
                 name="name"
+                error={errors?.firstName?.message}
                 autoComplete="given-name"
                 {...register('firstName')}
               />
@@ -100,13 +117,15 @@ const Form = ({ formClassName }) => {
                 type="text"
                 id="ciliumSlackUsername"
                 name="ciliumSlackUsername"
+                error={errors?.ciliumSlackUsername?.message}
                 {...register('ciliumSlackUsername')}
               />
               <Field
                 fieldName="How are you using Cilium?"
                 type="text"
                 id="howAreYouUsingCilium"
                 name="howAreYouUsingCilium"
+                error={errors?.howAreYouUsingCilium?.message}
                 {...register('howAreYouUsingCilium')}
               />
             </div>
@@ -116,10 +135,13 @@ const Form = ({ formClassName }) => {
               fieldName="Message"
               id="message"
               name="message"
+              error={errors?.message?.message}
               {...register('message')}
             />
-            <div className="border-b border-gray-4 pb-4">
-              <span className="text-sm font-semibold">What do you need help with?</span>
+            <div className="border-b border-gray-4 dark:border-gray-7 pb-4">
+              <span className="text-sm font-semibold text-black dark:text-white">
+                What do you need help with?
+              </span>
               <div className="mt-5 grid gap-x-8 gap-y-4 md:grid-cols-[repeat(2,minmax(45%,max-content))]">
                 <Checkbox
                   id="reviewAbstract"

src/components/pages/telling-story/hero/form/form.jsx

@@ -14,15 +14,15 @@ const descriptionParagraphSecond =
   ' Not a native speaker and/or not confident about your writing skills? No worries. Bring the story and we’ll help you tell it in an engaging way.';
 
 const Hero = () => (
-  <section className="overflow-x-hidden bg-gray-4 py-10 pb-44 lg:pt-16">
+  <section className="overflow-x-hidden bg-gray-4 dark:bg-gray-900 py-10 pb-44 lg:pt-16">
     <Container className="grid grid-cols-12 gap-y-14 sm:gap-y-20 md:gap-y-24 lg:items-stretch lg:gap-y-0 lg:gap-x-8">
       <div className="col-span-full lg:col-span-5 lg:pt-10 xl:col-span-4">
-        <Heading size="lg" tag="h1">
+        <Heading size="lg" tag="h1" className="text-black dark:text-white">
           {title}
         </Heading>
 
-        <p className="text-md mt-5">{descriptionParagraphFirst}</p>
-        <p className="text-md mt-2.5">{descriptionParagraphSecond}</p>
+        <p className="text-md mt-5 dark:text-gray-2 text-black">{descriptionParagraphFirst}</p>
+        <p className="text-md mt-2.5 dark:text-gray-2 text-black">{descriptionParagraphSecond}</p>
       </div>
 
       <div className="relative col-span-full lg:col-span-7 xl:col-span-8">
@@ -42,7 +42,7 @@ const Hero = () => (
           alt=""
           aria-hidden
         />
-        <Form formClassName="relative rounded-xl bg-white w-full shadow-card p-4 md:p-8" />
+        <Form formClassName="relative rounded-xl bg-white dark:bg-[#0F1D3E] w-full shadow-card p-4 md:p-8" />
       </div>
     </Container>
   </section>

src/components/pages/telling-story/hero/hero.jsx

@@ -40,7 +40,7 @@ const Cards = ({ className, title, items, buttonType, textSize, cardSize }) => {
     <div className={classNames(className, 'bg-gray-4 dark:bg-gray-900')}>
       <Container>
         {title && (
-          <Heading className="mb-6 xs:text-center md:mb-10 lg:mb-14" tag="h2">
+          <Heading className="mb-6 xs:text-center md:mb-10 lg:mb-14 dark:text-white" tag="h2">
             {title}
           </Heading>
         )}

src/components/shared/cards/cards.jsx

@@ -8,14 +8,18 @@ const Checkbox = React.forwardRef((props, ref) => {
   return (
     <div className={classNames('checkbox', className)}>
       <input
-        className="checkbox__input"
+        className="checkbox__input bg-white dark:bg-[#A7B1BE]"
         type="checkbox"
         id={id}
         defaultChecked={defaultChecked}
         ref={ref}
         {...otherProps}
       />
-      <label className="checkbox__label" htmlFor={id}>
+      <label
+        className="checkbox__label dark:text-[#dfe5ed] text-black"
+        htmlFor={id}
+        aria-label={label}
+      >
         <span dangerouslySetInnerHTML={{ __html: label }} />
       </label>
     </div>