Merge pull request #237 from UgnisSoftware/UGN-425

Fix SVG not accepting rem values

Author: masiulis

src/steps/MatchColumnsStep/components/MatchIcon.tsx

@@ -34,7 +34,7 @@ export const MatchIcon = (props: MatchIconProps) => {
     >
       {props.isChecked && (
         <MotionFlex {...animationConfig}>
-          <CgCheck size="1.5rem" />
+          <CgCheck size="24px" />
         </MotionFlex>
       )}
     </chakra.div>

src/steps/Steps.tsx

@@ -7,7 +7,7 @@ import { useRsi } from "../hooks/useRsi"
 import { useRef, useState } from "react"
 import { steps, stepTypeToStepIndex, stepIndexToStepType } from "../utils/steps"
 
-const CheckIcon = ({ color }: { color: string }) => <CgCheck size="2.25rem" color={color} />
+const CheckIcon = ({ color }: { color: string }) => <CgCheck size="36px" color={color} />
 
 export const Steps = () => {
   const { initialStepState, translations, isNavigationEnabled } = useRsi()

src/steps/UploadStep/components/columns.tsx

@@ -17,7 +17,7 @@ export const generateColumns = <T extends string>(fields: Fields<T>) =>
           {column.description && (
             <Tooltip placement="top" hasArrow label={column.description}>
               <Box flex={"0 0 auto"}>
-                <CgInfo size="1rem" />
+                <CgInfo size="16px" />
               </Box>
             </Tooltip>
           )}

src/steps/ValidationStep/components/columns.tsx

@@ -57,7 +57,7 @@ export const generateColumns = <T extends string>(fields: Fields<T>): Column<Dat
           {column.description && (
             <Tooltip placement="top" hasArrow label={column.description}>
               <Box flex={"0 0 auto"}>
-                <CgInfo size="1rem" />
+                <CgInfo size="16px" />
               </Box>
             </Tooltip>
           )}