Remove custom border-radius from buttons

oasisprotocol · Jul 30, 2022 · 96c1ddb · 96c1ddb
1 parent e94f8c4
commit 96c1ddb
Show file tree

Hide file tree

Showing 21 changed files with 24 additions and 94 deletions.
diff --git a/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
@@ -223,7 +223,6 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
     />
     <button
       class="c5"
-      style="border-radius: 4px;"
       type="submit"
     >
       account.addEscrow.delegate

diff --git a/src/app/components/AddEscrowForm/index.tsx b/src/app/components/AddEscrowForm/index.tsx
@@ -95,12 +95,7 @@ export const AddEscrowForm = memo((props: Props) => {
                 required
               />
             </Box>
-            <Button
-              label={t('account.addEscrow.delegate', 'Delegate')}
-              type="submit"
-              primary
-              style={{ borderRadius: '4px' }}
-            />
+            <Button label={t('account.addEscrow.delegate', 'Delegate')} type="submit" primary />
           </Box>
           <TransactionStatus error={error} success={success} />
         </Form>

diff --git a/src/app/components/FatalErrorHandler/index.tsx b/src/app/components/FatalErrorHandler/index.tsx
@@ -64,7 +64,6 @@ export function FatalErrorHandler(props: Props) {
                 ? t('fatalError.copy', 'Copy error to clipboard')
                 : t('fatalError.copied', 'Error copied to clipboard')
             }
-            style={{ borderRadius: '4px' }}
           />
         </Box>
       </Box>

diff --git a/src/app/components/MnemonicValidation/index.tsx b/src/app/components/MnemonicValidation/index.tsx
@@ -79,17 +79,11 @@ export function MnemonicValidation(props: Props) {
               <Button
                 type="submit"
                 label={t('openWallet.mnemonic.import', 'Import my wallet')}
-                style={{ borderRadius: '4px' }}
                 primary
                 onClick={onSubmit}
               />
               {props.abortHandler && (
-                <Button
-                  label={t('common.cancel', 'Cancel')}
-                  style={{ borderRadius: '4px' }}
-                  secondary
-                  onClick={props.abortHandler}
-                />
+                <Button label={t('common.cancel', 'Cancel')} secondary onClick={props.abortHandler} />
               )}
             </Box>
           </Form>

diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
@@ -43,7 +43,6 @@ const ModalContainer = ({ modal, closeModal }: ModalContainerProps) => {
             label={t('common.cancel', 'Cancel')}
             onClick={closeModal}
             secondary
-            style={{ borderRadius: '4px' }}
             icon={<Close size="18px" />}
           />
           <Button
@@ -52,7 +51,6 @@ const ModalContainer = ({ modal, closeModal }: ModalContainerProps) => {
             disabled={modal.isDangerous}
             primary={modal.isDangerous}
             color={modal.isDangerous ? 'status-error' : ''}
-            style={{ borderRadius: '4px' }}
             icon={modal.isDangerous ? <Alert size="18px" /> : <Checkmark size="18px" />}
           />
         </Box>

diff --git a/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap
@@ -314,7 +314,6 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
     />
     <button
       class="c6"
-      style="border-radius: 4px;"
       type="submit"
     >
       account.reclaimEscrow.reclaim
@@ -324,7 +323,6 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
     />
     <button
       class="c7"
-      style="border-radius: 4px;"
       type="button"
     >
       account.reclaimEscrow.reclaimAll

diff --git a/src/app/components/ReclaimEscrowForm/index.tsx b/src/app/components/ReclaimEscrowForm/index.tsx
@@ -87,17 +87,8 @@ export const ReclaimEscrowForm = memo((props: Props) => {
             />
           </Box>
         </Box>
-        <Button
-          label={t('account.reclaimEscrow.reclaim', 'Reclaim')}
-          type="submit"
-          primary
-          style={{ borderRadius: '4px' }}
-        />
-        <Button
-          label={t('account.reclaimEscrow.reclaimAll', 'Reclaim all')}
-          onClick={reclaimAll}
-          style={{ borderRadius: '4px' }}
-        />
+        <Button label={t('account.reclaimEscrow.reclaim', 'Reclaim')} type="submit" primary />
+        <Button label={t('account.reclaimEscrow.reclaimAll', 'Reclaim all')} onClick={reclaimAll} />
       </Box>
       {shares > 0 && (
         <Text size="small" data-testid="numberOfShares">

diff --git a/...p/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap b/...p/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap
@@ -174,14 +174,14 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
   overflow: visible;
   text-transform: none;
   border: 2px solid #0092f6;
-  border-radius: 18px;
+  border-radius: 4px;
   color: #444444;
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
   background-color: #0092f6;
   color: #f8f8f8;
-  border-radius: 18px;
+  border-radius: 4px;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
   -webkit-transition-duration: 0.1s;
@@ -508,7 +508,6 @@ exports[`<AccountSelector  /> should match snapshot 1`] = `
               >
                 <button
                   class="c16"
-                  style="border-radius: 4px;"
                   type="button"
                 >
                   toolbar.wallets.close

diff --git a/src/app/components/Toolbar/Features/AccountSelector/index.tsx b/src/app/components/Toolbar/Features/AccountSelector/index.tsx
@@ -131,12 +131,7 @@ export const AccountSelector = memo((props: Props) => {
           {accounts}
         </Box>
         <Box align="end" pad={{ top: 'medium' }}>
-          <Button
-            primary
-            style={{ borderRadius: '4px' }}
-            label={t('toolbar.wallets.close', 'Close')}
-            onClick={props.closeHandler}
-          />
+          <Button primary label={t('toolbar.wallets.close', 'Close')} onClick={props.closeHandler} />
         </Box>
       </Box>
     </ResponsiveLayer>

diff --git a/src/app/components/TransactionModal/index.tsx b/src/app/components/TransactionModal/index.tsx
@@ -68,7 +68,6 @@ export function TransactionModal() {
               <Button
                 secondary
                 label={t('transaction.abort', 'Abort')}
-                style={{ borderRadius: '4px' }}
                 icon={<Close size="18px" />}
                 onClick={abortTransaction}
               />
@@ -77,7 +76,6 @@ export function TransactionModal() {
                 label={t('transaction.confirm', 'Confirm')}
                 onClick={confirmTransaction}
                 icon={<Checkmark size="18px" />}
-                style={{ borderRadius: '4px' }}
                 alignSelf="end"
               />
             </Box>

diff --git a/src/app/pages/AccountPage/Features/SendTransaction/index.tsx b/src/app/pages/AccountPage/Features/SendTransaction/index.tsx
@@ -102,7 +102,6 @@ export function SendTransaction(props: SendTransactionProps) {
             <Button
               type="submit"
               label={t('account.sendTransaction.send', 'Send')}
-              style={{ borderRadius: '4px' }}
               onClick={onSubmit}
               primary
             />

diff --git a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
@@ -482,14 +482,14 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
   overflow: visible;
   text-transform: none;
   border: 2px solid #0092f6;
-  border-radius: 18px;
+  border-radius: 4px;
   color: #444444;
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
   background-color: #0092f6;
   color: #f8f8f8;
-  border-radius: 18px;
+  border-radius: 4px;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
   -webkit-transition-duration: 0.1s;
@@ -1125,7 +1125,6 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                   >
                     <button
                       class="c29"
-                      style="border-radius: 4px;"
                       type="submit"
                     >
                       Send

diff --git a/src/app/pages/CreateWalletPage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/CreateWalletPage/__tests__/__snapshots__/index.test.tsx.snap
@@ -341,14 +341,14 @@ exports[`<CreateWalletPage  /> should match snapshot 1`] = `
   overflow: visible;
   text-transform: none;
   border: 2px solid #0092f6;
-  border-radius: 18px;
+  border-radius: 4px;
   color: #444444;
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
   background-color: #0092f6;
   color: #f8f8f8;
-  border-radius: 18px;
+  border-radius: 4px;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
   -webkit-transition-duration: 0.1s;
@@ -414,14 +414,14 @@ exports[`<CreateWalletPage  /> should match snapshot 1`] = `
   overflow: visible;
   text-transform: none;
   border: 2px solid #0092f6;
-  border-radius: 18px;
+  border-radius: 4px;
   color: #444444;
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
   background-color: #0092f6;
   color: #f8f8f8;
-  border-radius: 18px;
+  border-radius: 4px;
   opacity: 0.3;
   cursor: default;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
@@ -1427,7 +1427,6 @@ exports[`<CreateWalletPage  /> should match snapshot 1`] = `
         >
           <button
             class="c10"
-            style="border-radius: 4px;"
             type="button"
           >
             <div
@@ -1512,7 +1511,6 @@ exports[`<CreateWalletPage  /> should match snapshot 1`] = `
           <button
             class="c27"
             disabled=""
-            style="border-radius: 4px;"
             type="submit"
           >
             openWallet.mnemonic.import

diff --git a/src/app/pages/CreateWalletPage/index.tsx b/src/app/pages/CreateWalletPage/index.tsx
@@ -101,7 +101,6 @@ export function CreateWalletPage(props: CreateWalletProps) {
               <Button
                 icon={<Refresh />}
                 label={t('createWallet.newMnemonic', 'Generate a new mnemonic')}
-                style={{ borderRadius: '4px' }}
                 primary
                 onClick={regenerateMnemonic}
               />
@@ -140,7 +139,6 @@ export function CreateWalletPage(props: CreateWalletProps) {
               <Button
                 type="submit"
                 label={t('openWallet.mnemonic.import', 'Import my wallet')}
-                style={{ borderRadius: '4px' }}
                 primary
                 disabled={!checked}
                 onClick={() => {

diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
@@ -28,7 +28,6 @@ export function HomePage() {
               <Button
                 type="submit"
                 label={t('home.existing.button', 'Open wallet')}
-                style={{ borderRadius: '4px' }}
                 primary
                 icon={<Unlock />}
               />
@@ -50,13 +49,7 @@ export function HomePage() {
           </Paragraph>
           <Box direction="row" justify="between" margin={{ top: 'medium' }}>
             <NavLink to="/create-wallet">
-              <Button
-                type="submit"
-                label={t('home.create.button', 'Create wallet')}
-                style={{ borderRadius: '4px' }}
-                primary
-                icon={<Add />}
-              />
+              <Button type="submit" label={t('home.create.button', 'Create wallet')} primary icon={<Add />} />
             </NavLink>
           </Box>
         </Box>

diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/OpenWalletPage/Features/FromLedger/__tests__/__snapshots__/index.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`<FromLedgerModal  /> should match snapshot 1`] = `
   overflow: visible;
   text-transform: none;
   border: 2px solid #0092f6;
-  border-radius: 18px;
+  border-radius: 4px;
   color: #444444;
   padding: 4px 22px;
   font-size: 18px;
@@ -128,14 +128,14 @@ exports[`<FromLedgerModal  /> should match snapshot 1`] = `
   -ms-flex-item-align: end;
   align-self: flex-end;
   border: 2px solid #0092f6;
-  border-radius: 18px;
+  border-radius: 4px;
   color: #444444;
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
   background-color: #0092f6;
   color: #f8f8f8;
-  border-radius: 18px;
+  border-radius: 4px;
   opacity: 0.3;
   cursor: default;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
@@ -380,7 +380,6 @@ exports[`<FromLedgerModal  /> should match snapshot 1`] = `
                 <button
                   class="c8"
                   disabled=""
-                  style="border-radius: 4px;"
                   type="button"
                 >
                   openWallet.ledger.cancel
@@ -392,7 +391,6 @@ exports[`<FromLedgerModal  /> should match snapshot 1`] = `
                   class="c10"
                   data-testid="ledger-open-accounts"
                   disabled=""
-                  style="border-radius: 4px;"
                   type="button"
                 >
                   openWallet.ledger.openWallets

diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
@@ -76,7 +76,6 @@ export function FromLedger(props: FromLedgerProps) {
         <Button
           type="submit"
           label={t('openWallet.ledger.selectWallets', 'Select accounts to open')}
-          style={{ borderRadius: '4px' }}
           onClick={() => {
             showLedgerModal(true)
           }}
@@ -148,7 +147,6 @@ export function FromLedgerModal(props: FromLedgerModalProps) {
           <Button
             secondary
             label={t('openWallet.ledger.cancel', 'Cancel')}
-            style={{ borderRadius: '4px' }}
             onClick={props.abort}
             disabled={cancelDisabled}
           />
@@ -157,7 +155,6 @@ export function FromLedgerModal(props: FromLedgerModalProps) {
             data-testid="ledger-open-accounts"
             label={t('openWallet.ledger.openWallets', 'Open')}
             onClick={openAccounts}
-            style={{ borderRadius: '4px' }}
             alignSelf="end"
             disabled={confirmDisabled}
           />

diff --git a/...pp/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap b/...pp/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap
@@ -163,14 +163,14 @@ exports[`<FromMnemonic/> should match snapshot 1`] = `
   overflow: visible;
   text-transform: none;
   border: 2px solid #0092f6;
-  border-radius: 18px;
+  border-radius: 4px;
   color: #444444;
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
   background-color: #0092f6;
   color: #f8f8f8;
-  border-radius: 18px;
+  border-radius: 4px;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
   -webkit-transition-duration: 0.1s;
@@ -485,7 +485,6 @@ exports[`<FromMnemonic/> should match snapshot 1`] = `
           >
             <button
               class="c11"
-              style="border-radius: 4px;"
               type="submit"
             >
               openWallet.mnemonic.import

diff --git a/.../pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap b/.../pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap
@@ -212,14 +212,14 @@ exports[`<FromPrivateKey  /> should match snapshot 1`] = `
   overflow: visible;
   text-transform: none;
   border: 2px solid #0092f6;
-  border-radius: 18px;
+  border-radius: 4px;
   color: #444444;
   padding: 4px 22px;
   font-size: 18px;
   line-height: 24px;
   background-color: #0092f6;
   color: #f8f8f8;
-  border-radius: 18px;
+  border-radius: 4px;
   -webkit-transition-property: color,background-color,border-color,box-shadow;
   transition-property: color,background-color,border-color,box-shadow;
   -webkit-transition-duration: 0.1s;
@@ -504,7 +504,6 @@ exports[`<FromPrivateKey  /> should match snapshot 1`] = `
         >
           <button
             class="c13"
-            style="border-radius: 4px;"
             type="submit"
           >
             openWallet.mnemonic.import
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,7 +64,6 @@ export function FatalErrorHandler(props: Props) { @@
                     ? t('fatalError.copy', 'Copy error to clipboard')
                     : t('fatalError.copied', 'Error copied to clipboard')
                 }
-                style={{ borderRadius: '4px' }}
               />
             </Box>
           </Box>
@@ Expand Down @@