Revert "chore: Fix React :nth-child warnings (#3768)"

This reverts commit 3262ef8.
theopensystemslab · Oct 8, 2024 · f4e0146 · f4e0146
1 parent 854de63
commit f4e0146
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Content/Public.tsx b/editor.planx.uk/src/@planx/components/Content/Public.tsx
@@ -30,7 +30,7 @@ const Content = styled(Box, {
   "& a": {
     color: getContrastTextColor(color || "#fff", theme.palette.link.main),
   },
-  "& *:nth-of-type(1)": {
+  "& *:nth-child(1)": {
     marginTop: 0,
   },
 }));

diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
@@ -169,7 +169,7 @@ $fontMonospace: "Source Code Pro", monospace;
       opacity: 0.6;
     }
 
-    > span:not(:first-child) {
+    > span:not(:nth-child(1)) {
       margin-left: 6px;
     }
   }
@@ -477,7 +477,7 @@ $fontMonospace: "Source Code Pro", monospace;
           $lineWidth;
         background-repeat: no-repeat, repeat-x, repeat-x;
 
-        &:nth-of-type(1) {
+        &:nth-child(1) {
           background-position:
             top center,
             top right,
@@ -517,7 +517,7 @@ $fontMonospace: "Source Code Pro", monospace;
           $lineWidth 100%,
           2px 100%;
 
-        &:nth-of-type(1) {
+        &:nth-child(1) {
           background-position:
             left center,
             left bottom,

diff --git a/editor.planx.uk/src/ui/editor/RichTextInput.tsx b/editor.planx.uk/src/ui/editor/RichTextInput.tsx
@@ -97,7 +97,7 @@ export const RichContentContainer = styled(Box)(({ theme }) => ({
       },
     },
     // Styles for placeholder text, to match ui/Input.tsx
-    "& p.is-editor-empty:first-child::before": {
+    "& p.is-editor-empty:nth-child(1)::before": {
       color: theme.palette.text.placeholder,
       opacity: 1,
       content: `attr(data-placeholder)`,

diff --git a/editor.planx.uk/src/ui/shared/InputRow.tsx b/editor.planx.uk/src/ui/shared/InputRow.tsx
@@ -13,7 +13,7 @@ const Root = styled(Box, {
   "& > *": {
     flexGrow: 1,
     marginRight: 5,
-    "&:first:child": {
+    "&:nth-child(1)": {
       marginLeft: 0,
     },
     "&:last-child": {

diff --git a/editor.planx.uk/src/ui/shared/InputRowLabel.tsx b/editor.planx.uk/src/ui/shared/InputRowLabel.tsx
@@ -7,6 +7,9 @@ const Label = styled(Typography)(({ theme }) => ({
   flexGrow: 0,
   paddingRight: theme.spacing(2),
   alignSelf: "center",
+  "&:not(:nth-child(1))": {
+    paddingLeft: theme.spacing(2),
+  },
 })) as typeof Typography;
 
 export default function InputRowLabel({ children }: { children: ReactNode }) {