[DDW-811] Normalize checkbox tick offset

Author: renanvalentin

CHANGELOG.md

@@ -25,6 +25,7 @@
 
 ### Fixes
 
+- Fixed checkbox tick offset ([PR 2751](https://github.com/input-output-hk/daedalus/pull/2751))
 - Fixed the Delegation popover timeout ([PR 2722](https://github.com/input-output-hk/daedalus/pull/2722))
 - Fixed issues relating to minimum window size in Daedalus ([PR 2719](https://github.com/input-output-hk/daedalus/pull/2719))
 - Updated "Trezor T" image shown on the "Pair a hardware wallet device" dialog ([PR 2712](https://github.com/input-output-hk/daedalus/pull/2712))

source/renderer/app/components/appUpdate/AppUpdateOverlay.scss

@@ -141,7 +141,6 @@
 
           &:after {
             border-color: var(--theme-news-overlay-update-background-color);
-            margin: -3px 0 0;
           }
         }
 

source/renderer/app/components/voting/voting-info/RegisterToVote.js

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl';
 import { Button } from 'react-polymorph/lib/components/Button';
+import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import {
   VOTING_REGISTRATION_END_DATE,
   NEXT_VOTING_FUND_NUMBER,
@@ -13,7 +14,6 @@ import {
 import type { Locale } from '../../../../../common/types/locales.types';
 import type { Intl } from '../../../types/i18nTypes';
 import styles from './RegisterToVote.scss';
-import { PatchCheckbox } from '../widgets/PatchCheckbox';
 import { messages } from './RegisterToVote.messages';
 
 type Props = {
@@ -59,15 +59,15 @@ function RegisterToVote({
         {intl.formatMessage(messages.stepsTitle)}
       </span>
       <div className={styles.step}>
-        <PatchCheckbox
+        <Checkbox
           className={styles.checkbox}
           checked={step1}
           onChange={setStep1}
           label={intl.formatMessage(messages.step1CheckBoxLabel)}
         />
       </div>
       <div className={styles.step}>
-        <PatchCheckbox
+        <Checkbox
           className={styles.checkbox}
           checked={step2}
           label={intl.formatMessage(messages.step2CheckBoxLabel)}

source/renderer/app/components/voting/voting-registration-wizard-steps/VotingRegistrationStepsQrCode.js

@@ -4,9 +4,9 @@ import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import QRCode from 'qrcode.react';
 import { set } from 'lodash';
 import { observer } from 'mobx-react';
+import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import VotingRegistrationDialog from './widgets/VotingRegistrationDialog';
 import { NEXT_VOTING_FUND_NUMBER } from '../../../config/votingConfig';
-import { PatchCheckbox } from '../widgets/PatchCheckbox';
 import styles from './VotingRegistrationStepsQrCode.scss';
 
 const messages = defineMessages({
@@ -173,13 +173,13 @@ export default class VotingRegistrationStepsQrCode extends Component<
         </div>
         <hr className={styles.separator} />
         <div className={styles.checkboxes}>
-          <PatchCheckbox
+          <Checkbox
             label={checkbox1Label}
             onChange={() => this.toggleAcceptance('isCheckbox1Accepted')}
             className={styles.checkbox}
             checked={isCheckbox1Accepted}
           />
-          <PatchCheckbox
+          <Checkbox
             label={checkbox2Label}
             onChange={() => this.toggleAcceptance('isCheckbox2Accepted')}
             className={styles.checkbox}

source/renderer/app/components/voting/widgets/PatchCheckbox.js

@@ -1,12 +1,13 @@
 .root {
   .check {
+    border-radius: 3px;
     height: var(--rp-checkbox-size);
     width: var(--rp-checkbox-size);
 
     &::after {
       height: calc(22 / 2 * 1px);
       margin-left: 1px;
-      margin-top: var(--rp-checkbox-check-vertical-offset, -2px);
+      margin-top: var(--rp-checkbox-check-vertical-offset, -3px);
       width: calc(22 / 5 * 1px);
     }
   }