[UGN-353] Fix icon highlight style

Author: masiulis

src/steps/MatchColumnsStep/components/MatchIcon.tsx

@@ -19,6 +19,8 @@ type MatchIconProps = {
 
 export const MatchIcon = (props: MatchIconProps) => {
   const style = useStyleConfig("MatchIcon", props)
+
+  console.log(props.isChecked)
   return (
     <chakra.div
       __css={style}

src/theme.ts

@@ -36,12 +36,19 @@ const StepsComponent: typeof StepsTheme = {
 const MatchIconTheme: any = {
   baseStyle: (props: any) => {
     return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
       borderRadius: "50%",
       borderWidth: "2px",
       bg: "background",
       borderColor: "yellow.500",
       color: "background",
       transitionDuration: "ultra-fast",
+      _highlighted: {
+        bg: "green.500",
+        borderColor: "green.500",
+      },
     }
   },
   defaultProps: {