search bar spacing styles

src/components/EDSLink.tsx

@@ -1,13 +1,15 @@
 import { Box, Text, Link as DSLink } from "@nypl/design-system-react-components"
 import React from "react"
 
+import styles from "../../styles/components/Search.module.scss"
+
 /**
  * Renders a simple link to log out the user out from the Catalog.
  */
 const EDSLink = () => {
   return (
-    <Box mt="0" mb="0">
-      <Text size="body1" className="eds-link">
+    <Box className={styles.edsLink} mt="0" mb="0">
+      <Text size="body2" className="eds-link">
         <span style={{ color: "var(--nypl-colors-ui-success-primary)" }}>
           New!
         </span>{" "}

src/components/RCLink/RCLink.tsx

@@ -6,17 +6,26 @@ interface RCLinkProps {
   active?: boolean
   href: string
   children: ReactNode
+  className?: string
 }
 
 /**
  * The RCLink component is a utility that wraps the design system Link component with
  * Next's Link component to allow for correct navigation in Next per the design system's
  * docs. It also includes an 'active' prop used for styling the SubNav component.
  */
-const RCLink = ({ href, children, active = false, ...rest }: RCLinkProps) => {
+const RCLink = ({
+  className,
+  href,
+  children,
+  active = false,
+  ...rest
+}: RCLinkProps) => {
   return (
     <Link href={href} passHref {...rest}>
-      <DSLink fontWeight={active && "bold"}>{children}</DSLink>
+      <DSLink className={className} fontWeight={active && "bold"}>
+        {children}
+      </DSLink>
     </Link>
   )
 }

src/components/SearchForm/SearchForm.tsx

@@ -81,7 +81,9 @@ const SearchForm = () => {
         </div>
         <div className={styles.auxSearchContainer}>
           <EDSLink />
-          <RCLink href={"/search/advanced"}>Advanced Search</RCLink>
+          <RCLink className={styles.advancedSearch} href={"/search/advanced"}>
+            Advanced Search
+          </RCLink>
         </div>
       </div>
     </div>

styles/components/Search.module.scss

@@ -13,13 +13,19 @@
 .auxSearchContainer {
   display: flex;
   justify-content: space-between;
+  margin: var(--nypl-space-xs) 0;
   @media (max-width: 400px) {
     flex-direction: column-reverse;
     bottom-padding: var(--nypl-space-s);
     align-items: flex-end;
   }
-  a {
-    margin-top: var(--nypl-space-xs);
-    margin-bottom: var(--nypl-space-s);
-  }
+}
+
+.advancedSearch {
+  min-width: 127px;
+  margin-bottom: var(--nypl-space-s);
+}
+
+.edsLink {
+  padding-right: var(--nypl-space-xl);
 }