Skip to content

Commit

Permalink
Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@razvantomegea
razvantomegea committed Jun 19, 2024
1 parent c8d9084 commit 507ce13
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 38 deletions.
2 changes: 1 addition & 1 deletion src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { PropsWithChildren, MouseEvent } from 'react';
import { WithClassnameType } from 'types';

interface ButtonType extends WithClassnameType, PropsWithChildren {
onClick: (e: MouseEvent) => void;
onClick?: (e: MouseEvent) => void;
disabled?: boolean;
dataTestId?: string;
dataCy?: string;
Expand Down
40 changes: 20 additions & 20 deletions src/pages/Send/Send.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import BigNumber from 'bignumber.js';

import { useSearchParams } from 'react-router-dom';
import Select from 'react-select';
import { MxLink } from 'components';
import { Button, MxLink } from 'components';
import { getEgldLabel, computeTokenDataField } from 'lib';
import {
calculateGasLimit,
Expand Down Expand Up @@ -142,10 +142,10 @@ export const Send = () => {
]);

return (
<div className='flex flex-col p-6 max-w-2xl w-full bg-white shadow-md rounded'>
<h2 className='text-3xl font-bold mb-4'>Send</h2>
<div className='flex flex-col p-6 max-w-2xl w-full bg-white shadow-md rounded h-full'>
<h2 className='text-3xl font-bold p-2 mb-2 text-center'>Send</h2>
<form onSubmit={formik.handleSubmit}>
<div className='flex flex-col gap-4'>
<div className='flex flex-col gap-4 h-full'>
<div className='flex flex-col'>
<label
htmlFor={FormFieldsEnum.receiver}
Expand Down Expand Up @@ -347,22 +347,22 @@ export const Send = () => {
value={formik.values[FormFieldsEnum.data]}
/>
</div>
<div>
<button
className='w-full mt-4 rounded-lg bg-blue-500 px-4 py-2 text-sm text-white'
data-testid={DataTestIdsEnum.sendBtn}
type='submit'
>
Send
</button>
<MxLink
className='block w-full mt-2 px-4 py-2 text-sm text-center'
data-testid={DataTestIdsEnum.cancelBtn}
to={routeNames.dashboard}
>
Cancel
</MxLink>
</div>
</div>
<div className='mt-4 flex flex-col align-middle'>
<Button
className='mt-4 mx-auto rounded-lg bg-blue-500 px-4 py-2 text-sm text-white'
dataTestId={DataTestIdsEnum.sendBtn}
type='submit'
>
Send
</Button>
<MxLink
className='block w-full mt-2 px-4 py-2 text-sm text-center text-blue-600'
data-testid={DataTestIdsEnum.cancelBtn}
to={routeNames.dashboard}
>
Cancel
</MxLink>
</div>
</form>
</div>
Expand Down
34 changes: 24 additions & 10 deletions src/pages/Unlock/components/Keystore/components/KeystoreModal/KeystoreModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,11 @@ export const KeystoreModal = ({ handleClose, show }: UseModalReturnType) => {

if (walletFileV5andPassword) {
return (
<ModalContainer onClose={handleModalClose} visible={show}>
<ModalContainer
className='login-modal'
onClose={handleModalClose}
visible={show}
>
<PageState
icon={faFileAlt}
iconSize='3x'
Expand All @@ -129,7 +133,11 @@ export const KeystoreModal = ({ handleClose, show }: UseModalReturnType) => {
}

return (
<ModalContainer onClose={handleModalClose} visible={show}>
<ModalContainer
className='login-modal'
onClose={handleModalClose}
visible={show}
>
<PageState
icon={faFileAlt}
iconSize='3x'
Expand All @@ -153,13 +161,16 @@ export const KeystoreModal = ({ handleClose, show }: UseModalReturnType) => {
const disabled = Boolean(initialFile);

return (
<div className='flex flex-col mx-auto items-center'>
<label htmlFor={WALLET_FILE} className='mb-2'>
<div className='flex flex-col mx-auto items-center pt-6'>
<label
htmlFor={WALLET_FILE}
className='block text-gray-700 text-sm font-bold mb-2'
>
Keystore file
</label>
{disabled ? (
<input
className='border border-dotted border-gray-500 hover:border-solid hover:border-gray-800 mb-4 p-1'
className='w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'
type='text'
disabled
id={WALLET_FILE}
Expand All @@ -168,7 +179,7 @@ export const KeystoreModal = ({ handleClose, show }: UseModalReturnType) => {
) : (
<input
accept='.json'
className='border border-dotted border-gray-500 hover:border-solid hover:border-gray-800 mb-4 p-1'
className='w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'
data-testid={DataTestIdsEnum.walletFile}
id={WALLET_FILE}
name={WALLET_FILE}
Expand All @@ -184,11 +195,14 @@ export const KeystoreModal = ({ handleClose, show }: UseModalReturnType) => {
type='file'
/>
)}
<label htmlFor={ACCESS_PASS} className='mb-2'>
<label
htmlFor={ACCESS_PASS}
className='block text-gray-700 text-sm font-bold mb-2 mt-4'
>
Password
</label>
<input
className='border border-dotted border-gray-500 hover:border-solid hover:border-gray-800 mb-4 p-1'
className='w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'
type='password'
required
id={ACCESS_PASS}
Expand All @@ -205,7 +219,7 @@ export const KeystoreModal = ({ handleClose, show }: UseModalReturnType) => {
{touched.accessPass && errors.accessPass && (
<div className='text-red-600 mb-4'>{errors.accessPass}</div>
)}
<div className='flex flex-col mx-auto items-center gap-2 mt-4'>
<div className='flex flex-col mx-auto items-center gap-2 mt-8'>
<Button
data-testid={DataTestIdsEnum.submitButton}
type='submit'
Expand All @@ -215,7 +229,7 @@ export const KeystoreModal = ({ handleClose, show }: UseModalReturnType) => {
Submit
</Button>
<button
className='mt-2'
className='mt-2 text-blue-600'
data-testid={DataTestIdsEnum.closeButton}
id={DataTestIdsEnum.closeButton}
onClick={handleModalClose}
Expand Down
21 changes: 14 additions & 7 deletions src/pages/Unlock/components/Pem/components/PemModal/PemModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,11 @@ export const PemModal = ({ handleClose, show }: UseModalReturnType) => {
};

return (
<ModalContainer onClose={handleModalClose} visible={show}>
<ModalContainer
className='login-modal'
onClose={handleModalClose}
visible={show}
>
<PageState
icon={faFileAlt}
iconSize='3x'
Expand Down Expand Up @@ -109,13 +113,16 @@ export const PemModal = ({ handleClose, show }: UseModalReturnType) => {
formikProps;

return (
<div className='flex flex-col mx-auto items-center'>
<label htmlFor='pem' className='mb-2'>
Select file
<div className='flex flex-col mx-auto items-center pt-6'>
<label
className='block text-gray-700 text-sm font-bold mb-2'
htmlFor='pem'
>
Choose File
</label>
<input
accept='.pem'
className='border border-dotted border-gray-500 hover:border-solid hover:border-gray-800 mb-4 p-1'
className='w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'
data-testid={DataTestIdsEnum.walletFile}
id='pem'
name='pem'
Expand All @@ -131,7 +138,7 @@ export const PemModal = ({ handleClose, show }: UseModalReturnType) => {
{errors.pem && (
<div className='text-red-600 mb-4'>{errors.pem}</div>
)}
<div className='flex flex-col mx-auto items-center gap-2 mt-4'>
<div className='flex flex-col mx-auto items-center gap-2 mt-8'>
<Button
data-testid={DataTestIdsEnum.submitButton}
disabled={!isValid}
Expand All @@ -141,7 +148,7 @@ export const PemModal = ({ handleClose, show }: UseModalReturnType) => {
Submit
</Button>
<button
className='mt-2'
className='mt-2 text-blue-600'
data-testid={DataTestIdsEnum.closeButton}
id={DataTestIdsEnum.closeButton}
onClick={handleModalClose}
Expand Down
66 changes: 66 additions & 0 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,75 @@
}

.dapp-core-component__dappModalStyles__dappModalContent {
max-width: 600px !important;
}

.dapp-core-component__dappModalStyles__dappModalBody, .dapp-core-component__dappModalStyles__dappModalContent, .dapp-core-component__dappModalStyles__dappModal {
border-radius: 12px !important;
}

.login-modal .dapp-core-component__dappModalStyles__dappModalContent {
max-width: 800px !important;
}

.login-modal .dapp-core-component__dappModalStyles__dappModalHeader {
padding: 0 !important;
}

.login-modal .dapp-core-component__main__h4 {
margin: 0 !important;
}

.dapp-core-component__signWithDeviceModalStyles__title, .dapp-core-component__confirmAmountDataStyles__confirmAmountDataBalance {
color: #000 !important;
font-size: 1.5em !important;
margin-bottom: 10px !important;
}

.dapp-core-component__signWithDeviceModalStyles__sign-button-cancel {
@apply text-blue-600 !important;
margin-top: 24px !important;
}

.dapp-core-component__main__btn-primary {
@apply bg-blue-600 !important;
}

.dapp-core-component__signWithDeviceModalStyles__sign-buttons {
margin: 0 !important;
padding: 0 !important;
}

.dapp-core-component__confirmReceiverStyles__receiverLabel,
.dapp-core-component__confirmAmountLabelStyles__confirmAmountLabel,
.dapp-core-component__confirmFeeStyles__confirmFeeLabel,
.dapp-core-component__confirmAmountDataStyles__confirmAmountDataPrice,
.dapp-core-component__TransactionDataStyles__transactionDataLabel {
@apply text-gray-400 !important;
margin-bottom: 4px !important;
}

.dapp-core-component__confirmAmountDataStyles__confirmAmountDataPrice {
margin: 0 !important;
}

.dapp-core-component__addressTableStyles__ledger-address-table-wrapper {
padding: 40px 0 !important;
}

.dapp-core-component__main__card-body, .dapp-core-component__dappModalStyles__dappModalBody {
padding: 0 !important;
}

/* Input styles */
.dapp-core-component__TransactionDataStyles__transactionData .dapp-core-component__TransactionDataStyles__transactionDataValueWrapper {
width: 100% !important;
padding: 10px !important;
border: 1px solid #ccc !important;
border-radius: 5px !important;
box-sizing: border-box !important;
}

.dapp-core-component__balanceStyles__balanceSymbol {
color: #0ac2ae !important;
}

0 comments on commit 507ce13

Please sign in to comment.