replace first-child usage

chanzuckerberg · Jan 18, 2024 · 5ce5bfe · 5ce5bfe
1 parent b0c26a8
commit 5ce5bfe
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 21 deletions.
diff --git a/frontend/src/components/BottomBanner/style.ts b/frontend/src/components/BottomBanner/style.ts
@@ -31,7 +31,7 @@ export const StyledBanner = styled(Banner)`
   color: black;
 
   /* Hide default svg icon in the Banner as it is not in figma */
-  :first-child > div:first-child > div:first-child {
+  :first-of-type > div:first-of-type > div:first-of-type {
     display: none;
   }
 

diff --git a/frontend/src/components/MobileFriendlyHeader/index.tsx b/frontend/src/components/MobileFriendlyHeader/index.tsx
@@ -1,4 +1,3 @@
-import { AnchorButton } from "@blueprintjs/core";
 import { useRouter } from "next/router";
 import { FC, useRef, useState } from "react";
 import { track } from "src/common/analytics";
@@ -79,18 +78,17 @@ const LandingHeader: FC<Props> = ({ title = "", homeUrl, labelUrl }) => {
               <Nav pathname={pathname} />
             </Left>
             <Right>
-              <LinkWrapper>
-                <AnchorButton
+              <LinkWrapper isActive={isRouteActive(pathname, ROUTES.DOCS)}>
+                <a
                   onClick={() => {
                     track(EVENTS.DOCUMENTATION_CLICK_NAV);
                   }}
-                  active={isRouteActive(pathname, ROUTES.DOCS)}
                   href={ROUTES.DOCS}
                   rel="noopener"
                   target="_blank"
-                  minimal
-                  text="Help & Documentation"
-                />
+                >
+                  Help & Documentation
+                </a>
               </LinkWrapper>
               <AuthButtons />
             </Right>

diff --git a/frontend/src/global.scss b/frontend/src/global.scss
@@ -120,8 +120,8 @@ $pt-font-size-small: $pt-grid-size * 1.5 !default;
 table.bp5-html-table.bp5-html-table-bordered {
   tbody tr td,
   th,
-  tbody tr td:not(:first-child),
-  th:not(:first-child) {
+  tbody tr td:not(:first-of-type),
+  th:not(:first-of-type) {
     box-shadow: none;
   }
 }
diff --git a/frontend/src/layout.css b/frontend/src/layout.css
@@ -565,12 +565,12 @@ th {
   padding-top: 0.725rem;
   padding-bottom: calc(0.725rem - 1px);
 }
-th:first-child,
-td:first-child {
+th:first-of-type,
+td:first-of-type {
   padding-left: 0;
 }
-th:last-child,
-td:last-child {
+th:last-of-type,
+td:last-of-type {
   padding-right: 0;
 }
 tt,

diff --git a/frontend/src/pages/docs/[...slug].tsx b/frontend/src/pages/docs/[...slug].tsx
@@ -394,7 +394,7 @@ const ImageContainer = styled.div`
 const DocsImage = ({ src }: ImageProps) => {
   return (
     <ImageContainer>
-      <StyledImage alt="image" src={src} layout={"fill"} />
+      <StyledImage alt="image" src={src} fill />
     </ImageContainer>
   );
 };

diff --git a/frontend/src/views/Landing/index.module.scss b/frontend/src/views/Landing/index.module.scss
@@ -318,15 +318,15 @@
         position: relative;
 
         svg {
-          &:first-child {
+          &:first-of-type {
             opacity: 0;
             transition: opacity 0.4s;
             position: absolute;
             top: 0;
             left: 0;
           }
 
-          &:last-child {
+          &:last-of-type {
             opacity: 1;
           }
         }
@@ -351,11 +351,11 @@
       }
 
       svg {
-        &:first-child {
+        &:first-of-type {
           opacity: 1;
         }
 
-        &:last-child {
+        &:last-of-type {
           opacity: 0;
         }
       }
@@ -388,7 +388,7 @@
         display: flex;
         flex-direction: column;
 
-        & > *:not(:first-child) {
+        & > *:not(:first-of-type) {
           margin-top: 17px;
         }
 

diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SaveExport/style.ts b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SaveExport/style.ts
@@ -21,7 +21,7 @@ export const DownloadButton = styled(Button)`
 
 export const StyledModal = styled(Modal)`
   /* Overriding some styles for the modal to match figma */
-  div:first-child {
+  div:first-of-type {
     padding: 0;
   }
   min-width: ${DOWNLOAD_MODAL_WIDTH_PX}px !important;