style(contrast results): adjust styles of contrast levels

AlexGarrixen · Jan 16, 2024 · 587a95a · 587a95a
1 parent c232b78
commit 587a95a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/components/contrast-results/constrast-results.styled.ts b/src/components/contrast-results/constrast-results.styled.ts
@@ -12,7 +12,7 @@ export default {
   levels: css({
     display: "grid",
     rowGap: "5",
-    columnGap: "10",
+    columnGap: "8",
     md: { flex: 1 },
     sm: {
       gridTemplateColumns: "repeat(2, 1fr)",

diff --git a/src/components/contrast-results/contrast-level.styled.ts b/src/components/contrast-results/contrast-level.styled.ts
@@ -1,7 +1,7 @@
 import { css } from "@root/styled-system/css";
 
 export default {
-  root: css({
+  levelContainer: css({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",

diff --git a/src/components/contrast-results/contrast-level.tsx b/src/components/contrast-results/contrast-level.tsx
@@ -10,16 +10,16 @@ interface Iprops {
 
 export function ContrastLevel({ textType, contrast, pass }: Iprops) {
   return (
-    <li className={classes.root}>
-      <div>
-        <span className={classes.textType}>{textType.toUpperCase()} TEXT</span>
+    <li>
+      <span className={classes.textType}>{textType.toUpperCase()} TEXT</span>
+      <div className={classes.levelContainer}>
         <p className={classes.contrast}>{contrast}</p>
+        {pass ? (
+          <CheckFill aria-label="check" className={classes.checkIcon} />
+        ) : (
+          <CloseFill aria-label="close" className={classes.closeIcon} />
+        )}
       </div>
-      {pass ? (
-        <CheckFill aria-label="check" className={classes.checkIcon} />
-      ) : (
-        <CloseFill aria-label="close" className={classes.closeIcon} />
-      )}
     </li>
   );
 }