style(ui): terms of use checkbox ui (#815)

terms of use checkbox ui

packages/ui/src/assets/icons/check-box.svg

@@ -0,0 +1,20 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <symbol width="20" height="20" viewBox="0 0 20 20" id="checked">
+    <rect x="1" y="1" width="18" height="18" rx="4" fill="currentColor" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.31476 13.858L5.13295 10.441C4.95568 10.253 4.95568 9.947 5.13295 9.757L5.77568 9.074C5.95295 8.886 6.24113 8.886 6.4184 9.074L8.63657 11.466L13.5811 6.141C13.7584 5.953 14.0465 5.953 14.2238 6.141L14.8665 6.825C15.0438 7.013 15.0438 7.32 14.8665 7.507L8.95748 13.858C8.78021 14.046 8.49203 14.046 8.31476 13.858Z"
+      fill="white"
+    />
+  </symbol>
+  <symbol width="20" height="20" viewBox="0 0 20 20" fill="none" id="unchecked">
+    <rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="2" />
+  </symbol>
+</svg>

packages/ui/src/assets/icons/radio-button.svg

@@ -3,7 +3,7 @@
       <circle cx="9" cy="9" r="8" stroke="#D8D8D8" stroke-width="2" fill="transparent" />
   </symbol>
   <symbol width="18" height="18" viewBox="0 0 18 18" id="checked">
-    <circle cx="9" cy="9" r="9" fill="#6139F6"/>
+    <circle cx="9" cy="9" r="9" fill="currentColor"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M4.75691 7.99955C4.36639 8.39008 4.36639 9.02324 4.75691 9.41377L7.58534 12.2422C7.97586 12.6327 8.60903 12.6327 8.99955 12.2422L13.2422 7.99955C13.6327 7.60903 13.6327 6.97586 13.2422 6.58534C12.8517 6.19481 12.2185 6.19481 11.828 6.58534L8.29245 10.1209L6.17112 7.99955C5.7806 7.60903 5.14744 7.60903 4.75691 7.99955Z" fill="white"/>
   </symbol>
 </svg>

packages/ui/src/components/Checkbox/index.module.scss

@@ -0,0 +1,51 @@
+@use '@/scss/underscore' as _;
+
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    margin-right: _.unit(2);
+
+    > svg {
+      display: none;
+      color: var(--color-text-disabled);
+
+      &:first-child {
+        color: var(--color-primary);
+      }
+    }
+  }
+
+  input {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: 0;
+    top: 0;
+    margin: 0;
+    opacity: 0%;
+  }
+
+  input:checked:not(:disabled) ~ .icon > svg:nth-child(1),
+  input:not(:checked):not(:disabled) ~ .icon > svg:nth-child(2) {
+    display: block;
+  }
+}
+
+:global(body.desktop) {
+  .checkbox {
+    .icon {
+      width: 18px;
+      height: 18px;
+    }
+
+    input {
+      width: 18px;
+      height: 18px;
+    }
+  }
+}

packages/ui/src/components/Checkbox/index.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef, InputHTMLAttributes, Ref } from 'react';
+
+import { CheckBoxIcon } from '../Icons';
+import * as styles from './index.module.scss';
+
+type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+const Checkbox = ({ disabled, ...rest }: Props, ref: Ref<HTMLInputElement>) => {
+  return (
+    <div className={styles.checkbox}>
+      <input type="checkbox" disabled={disabled} {...rest} ref={ref} />
+      <CheckBoxIcon className={styles.icon} />
+    </div>
+  );
+};
+
+export default forwardRef<HTMLInputElement, Props>(Checkbox);

packages/ui/src/components/Icons/CheckBoxIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { isMobile } from 'react-device-detect';
+
+import _CheckBoxIcon from '@/assets/icons/check-box.svg';
+import RadioButtonIcon from '@/assets/icons/radio-button.svg';
+
+type Props = {
+  className?: string;
+};
+
+const CheckBoxIcon = ({ className }: Props) => (
+  <span className={className}>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <use href={`${isMobile ? RadioButtonIcon : _CheckBoxIcon}#checked`} />
+    </svg>
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <use href={`${isMobile ? RadioButtonIcon : _CheckBoxIcon}#unchecked`} />
+    </svg>
+  </span>
+);
+
+export default CheckBoxIcon;

packages/ui/src/components/Icons/RadioButtonIcon.tsx

@@ -1,16 +0,0 @@
-import React, { SVGProps } from 'react';
-
-import RadioButton from '@/assets/icons/radio-button.svg';
-
-const RadioButtonIcon = ({
-  checked,
-  ...props
-}: SVGProps<SVGSVGElement> & { checked?: boolean }) => {
-  return (
-    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <use href={`${RadioButton}#${checked ? 'checked' : 'unchecked'}`} />
-    </svg>
-  );
-};
-
-export default RadioButtonIcon;

packages/ui/src/components/Icons/index.ts

@@ -4,6 +4,6 @@ export { default as PrivacyIcon } from './PrivacyIcon';
 export { default as DownArrowIcon } from './DownArrowIcon';
 export { default as LoadingIcon } from './LoadingIcon';
 export { default as NavArrowIcon } from './NavArrowIcon';
-export { default as RadioButtonIcon } from './RadioButtonIcon';
 export { default as ExpandMoreIcon } from './ExpandMoreIcon';
 export { default as ErrorIcon } from './ErrorIcon';
+export { default as CheckBoxIcon } from './CheckBoxIcon';

packages/ui/src/components/TermsOfUse/index.module.scss

@@ -3,17 +3,10 @@
 .terms {
   @include _.flex-row;
   width: 100%;
-
+  user-select: none;
-  input[type='checkbox'] {
-    appearance: none;
-    position: absolute;
-    margin: 0;
-    width: 0;
-    height: 0;
-  }
 }
 
-.radioButton {
+.checkBox {
   margin-right: _.unit(2);
   fill: var(--color-icon);
 }

packages/ui/src/components/TermsOfUse/index.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { RadioButtonIcon } from '@/components/Icons';
+import Checkbox from '@/components/Checkbox';
 import TextLink from '@/components/TextLink';
 
 import * as styles from './index.module.scss';
@@ -27,8 +27,7 @@ const TermsOfUse = ({ name, className, termsUrl, isChecked, onChange }: Props) =
         onChange(!isChecked);
       }}
     >
-      <input disabled readOnly name={name} type="checkbox" checked={isChecked} />
+      <Checkbox name={name} checked={isChecked} className={styles.checkBox} />
-      <RadioButtonIcon checked={isChecked} className={styles.radioButton} />
       <div className={styles.content}>
         {prefix}
         <TextLink