fix(client): tick icon on ios devices

packages/client/src/elements/animations/Checkmark/Checkmark.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import React, { useState } from 'react';
 
 import Checkmark from '.';
+import { CheckmarkProps } from './Checkmark.types';
 
 export default {
   title: 'Elements/animations/Checkmark',

packages/client/src/elements/animations/Checkmark/Checkmark.types.d.ts

@@ -1,3 +1,9 @@
+import { SVGProps } from 'react';
+
 interface CheckmarkProps {
   visible: boolean;
 }
+
+interface TickIconProps extends SVGProps<SVGSVGElement> {
+  isVisible?: boolean;
+}

packages/client/src/elements/animations/Checkmark/index.tsx

@@ -2,6 +2,8 @@ import anime, { AnimeInstance } from 'animejs';
 import React, { useLayoutEffect, useRef } from 'react';
 import { TickIcon } from 'src/icons';
 
+import { CheckmarkProps } from './Checkmark.types';
+
 const Checkmark = ({ visible = false }: CheckmarkProps) => {
   const tick = useRef<SVGPathElement>(null);
   const animationRefShow = useRef<AnimeInstance>();
@@ -38,7 +40,7 @@ const Checkmark = ({ visible = false }: CheckmarkProps) => {
     animationRefHide.current?.play();
   }, [visible]);
 
-  return <TickIcon ref={tick} />;
+  return <TickIcon isVisible={visible} ref={tick} />;
 };
 
 Checkmark.displayName = 'Checkmark';

packages/client/src/elements/animations/ThemeTypeIndicator/ThemeTypeIndicator.stories.tsx

@@ -9,7 +9,7 @@ export default {
   component: ThemeTypeIndicator,
 } as Meta;
 
-const Template: Story<CheckmarkProps> = () => {
+const Template: Story = () => {
   const [themeType, setThemeType] = useState<ThemeType>(ThemeType.dark);
 
   const showDark = () => {

packages/client/src/icons/TickIcon.tsx

@@ -1,22 +1,25 @@
-import React, { forwardRef, memo, Ref, SVGProps } from 'react';
+import React, { forwardRef, memo, Ref } from 'react';
 
-const TickIcon = (props: SVGProps<SVGSVGElement>, svgRef?: Ref<SVGPathElement>) => (
+import { TickIconProps } from '../elements/animations/Checkmark/Checkmark.types';
+
+const TickIcon = ({ isVisible = true, ...rest }: TickIconProps, svgRef?: Ref<SVGPathElement>) => (
   <svg
     width="100%"
     height="100%"
     viewBox="0 0 8 7"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
+    {...rest}
   >
     <path
       ref={svgRef}
       d="M1 3l2.143 2.5L7 1"
       stroke="currentColor"
       strokeWidth={2}
+      strokeDashoffset={0}
       strokeMiterlimit={10}
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      strokeLinecap={isVisible ? 'round' : undefined}
+      strokeLinejoin={isVisible ? 'round' : undefined}
     />
   </svg>
 );