[docs] PageTitle: refactor code in attempt to improve search (expo#22923

)
crummy · Jun 16, 2023 · c414858 · c414858
1 parent 47d6260
commit c414858
Showing 1 changed file with 12 additions and 21 deletions.
diff --git a/docs/ui/components/PageTitle/PageTitle.tsx b/docs/ui/components/PageTitle/PageTitle.tsx
@@ -12,10 +12,12 @@ type Props = {
 };
 
 export const PageTitle = ({ title, packageName, iconUrl, sourceCodeUrl }: Props) => (
-  <H1 crawlable={false}>
-    {iconUrl && <img src={iconUrl} css={titleIconStyle} alt={`Expo ${title} icon`} />}
-    {packageName && packageName.startsWith('expo-') && 'Expo '}
-    <span data-heading="true">{title}</span>
+  <div className="flex my-2 items-center justify-between max-xl-gutters:flex-col max-xl-gutters:items-start">
+    <H1 className="!my-0">
+      {iconUrl && <img src={iconUrl} css={titleIconStyle} alt={`Expo ${title} icon`} />}
+      {packageName && packageName.startsWith('expo-') && 'Expo '}
+      {title}
+    </H1>
     {packageName && (
       <span css={linksContainerStyle}>
         {sourceCodeUrl && (
@@ -40,36 +42,25 @@ export const PageTitle = ({ title, packageName, iconUrl, sourceCodeUrl }: Props)
         </A>
       </span>
     )}
-  </H1>
+  </div>
 );
 
 const titleIconStyle = css({
   float: 'left',
   marginRight: spacing[3.5],
   position: 'relative',
-  top: -5,
-  width: 48,
-  height: 48,
-
-  [`@media screen and (max-width: ${breakpoints.medium}px)`]: {
-    width: 42,
-    height: 42,
-    top: -4,
-  },
+  top: -2,
+  width: 42,
+  height: 42,
 });
 
 const linksContainerStyle = css({
   display: 'flex',
-  float: 'right',
   gap: spacing[6],
-  marginTop: -spacing[0.5],
 
   [`@media screen and (max-width: ${breakpoints.large}px)`]: {
-    float: 'none',
-    clear: 'left',
-    paddingTop: spacing[3],
-    paddingBottom: spacing[1],
-    marginTop: 0,
+    marginTop: spacing[3],
+    marginBottom: spacing[1],
   },
 });