chore: update examples (#64)

examples/algolia/src/components/Spinner.tsx

@@ -12,7 +12,7 @@ const Spinner = (props: IProps) => {
         props.width
       } ${
         props.height
-      } animate-spin fill-blue-800 text-gray-200 dark:text-gray-600`}
+      } animate-spin fill-brand-primary text-gray-200 dark:text-gray-600`}
       viewBox="0 0 100 101"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

examples/algolia/src/components/breadcrumb.tsx

@@ -15,7 +15,7 @@ export default function Breadcrumb({ entries }: IBreadcrumb): JSX.Element {
               <span className="font-bold">{entry.label}</span>
             ) : (
               <Link href={`/search/${entry.breadcrumb}`} passHref>
-                <a className="text-gray-500 hover:text-blue-800">
+                <a className="text-gray-500 hover:text-brand-primary">
                   {entry.label}
                 </a>
               </Link>

examples/algolia/src/components/footer/Footer.tsx

@@ -40,7 +40,7 @@ const Footer = (): JSX.Element => (
             <a>
               {" "}
               <GithubIcon
-                className="hover:fill-blue-800"
+                className="hover:fill-brand-primary"
                 width={22}
                 height={22}
               />
@@ -54,7 +54,7 @@ const Footer = (): JSX.Element => (
             <a>
               {" "}
               <InformationCircleIcon
-                className="hover:fill-blue-800"
+                className="hover:fill-brand-primary"
                 width={25}
                 height={25}
               />
@@ -67,7 +67,7 @@ const Footer = (): JSX.Element => (
           >
             <a>
               <PhoneIcon
-                className="hover:fill-blue-800"
+                className="hover:fill-brand-primary"
                 width={25}
                 height={25}
               />

examples/algolia/src/components/header/cart/CartMenu.tsx

@@ -28,11 +28,11 @@ export default function CartMenu(): JSX.Element {
       <Popover className="relative">
         {({ close }) => (
           <>
-            <Popover.Button className="nav-button-container relative text-sm font-medium text-black hover:underline focus:text-blue-800 active:text-blue-800">
+            <Popover.Button className="nav-button-container relative text-sm font-medium text-black hover:underline focus:text-brand-primary active:text-brand-primary">
               <span
                 className={`${
                   stateItems ? "flex" : "hidden"
-                } absolute right-0 top-0 h-5 w-5 items-center justify-center rounded-full bg-blue-800 p-[0.1rem] text-[0.6rem] text-white`}
+                } absolute right-0 top-0 h-5 w-5 items-center justify-center rounded-full bg-brand-primary p-[0.1rem] text-[0.6rem] text-white`}
               >
                 {stateItems?.length}
               </span>

examples/algolia/src/components/header/cart/CartUpdatingSpinner.tsx

@@ -1,7 +1,7 @@
 export default function CartUpdatingSpinner(): JSX.Element {
   return (
     <svg
-      className="animate-spin h-4 w-4 text-blue-800"
+      className="animate-spin h-4 w-4 text-brand-primary"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"

examples/algolia/src/components/header/cart/ModalCartItem.tsx

@@ -64,7 +64,7 @@ function ModalCartItem({
           {removing ? (
             <svg
               aria-hidden="true"
-              className="absolute right-0 top-0 h-4 w-4 animate-spin fill-blue-800 text-gray-200 dark:text-gray-600"
+              className="absolute right-0 top-0 h-4 w-4 animate-spin fill-brand-primary text-gray-200 dark:text-gray-600"
               viewBox="0 0 100 101"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
@@ -129,7 +129,7 @@ export default function ModalCartItems({
         {/* Turn this spinner into a component with size props */}
         <svg
           aria-hidden="true"
-          className="absolute right-0 top-0 h-24 w-24 animate-spin fill-blue-800 text-gray-200 dark:text-gray-600"
+          className="absolute right-0 top-0 h-24 w-24 animate-spin fill-brand-primary text-gray-200 dark:text-gray-600"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

examples/algolia/src/components/header/navigation/NavBar.tsx

@@ -17,7 +17,7 @@ const NavBar = ({ nav }: INavBar): JSX.Element => {
             <Popover key={index} className="relative">
               {({ close }) => (
                 <>
-                  <Popover.Button className="ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 mr-4 text-sm font-medium text-black hover:underline focus:text-blue-800 focus:outline-none active:text-blue-800">
+                  <Popover.Button className="ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 mr-4 text-sm font-medium text-black hover:underline focus:text-brand-primary focus:outline-none active:text-brand-primary">
                     <span>{item.name}</span>
                   </Popover.Button>
 

examples/algolia/src/components/header/navigation/NavMenu.tsx

@@ -81,15 +81,15 @@ const NavMenu = (props: IProps) => {
                           <Disclosure.Button
                             aria-label="panel"
                             className={`${
-                              open ? "text-blue-800" : "text-black"
+                              open ? "text-brand-primary" : "text-black"
                             } flex w-full justify-between bg-transparent px-4 py-2 text-left text-base font-bold hover:bg-gray-100`}
                             onClick={() => handleDisclosureChange(index)}
                           >
                             {item.name}
                             <ChevronUpIcon
                               className={`${
                                 open ? "rotate-180 transform" : ""
-                              } text- h-5 w-5 text-blue-800`}
+                              } text- h-5 w-5 text-brand-primary`}
                             />
                           </Disclosure.Button>
                           <Disclosure.Panel className="z-50 flex flex-col bg-white px-4 pb-2 pt-4">

examples/algolia/src/styles/globals.css

@@ -8,15 +8,15 @@
   }
 
   .link-hover {
-    @apply hover:text-blue-800 hover:underline;
+    @apply hover:text-brand-primary hover:underline;
   }
 
   .primary-btn {
-    @apply flex w-full items-center justify-center rounded-md bg-blue-800 px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-blue-800/90;
+    @apply flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight;
   }
 
   .secondary-btn {
-    @apply flex w-full items-center justify-center rounded-md border border-black bg-transparent px-4 py-2 font-semibold text-black transition-all duration-200 hover:border-blue-800 hover:text-blue-800;
+    @apply flex w-full items-center justify-center rounded-md border border-black bg-transparent px-4 py-2 font-semibold text-black transition-all duration-200 hover:border-brand-highlight hover:text-brand-primary;
   }
 }
 

examples/algolia/tailwind.config.ts

@@ -9,9 +9,9 @@ export default {
       },
       colors: {
         brand: {
-          primary: "#0033CC",
-          secondary: "#091740",
-          highlight: "#1E40AF",
+          primary: "#2BCC7E",
+          secondary: "#144E31",
+          highlight: "#56DC9B",
           primaryAlt: "#EA7317",
           secondaryAlt: "#ffcb47",
         },