From 507ce13c8134a1663e073ec64d9c3abb0e98e3c2 Mon Sep 17 00:00:00 2001
From: "razvan.tomegea" <razvan.tomegea@gmail.com>
Date: Wed, 19 Jun 2024 18:16:18 +0300
Subject: [PATCH] Styling

---
 src/components/Button/Button.tsx              |  2 +-
 src/pages/Send/Send.tsx                       | 40 +++++------
 .../KeystoreModal/KeystoreModal.tsx           | 34 +++++++---
 .../Pem/components/PemModal/PemModal.tsx      | 21 ++++--
 src/styles/globals.css                        | 66 +++++++++++++++++++
 5 files changed, 125 insertions(+), 38 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index e388b7be..26a72d6e 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -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;
diff --git a/src/pages/Send/Send.tsx b/src/pages/Send/Send.tsx
index 5efb4f2e..a6224195 100644
--- a/src/pages/Send/Send.tsx
+++ b/src/pages/Send/Send.tsx
@@ -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,
@@ -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}
@@ -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>
diff --git a/src/pages/Unlock/components/Keystore/components/KeystoreModal/KeystoreModal.tsx b/src/pages/Unlock/components/Keystore/components/KeystoreModal/KeystoreModal.tsx
index 06e4939b..6062e4fd 100644
--- a/src/pages/Unlock/components/Keystore/components/KeystoreModal/KeystoreModal.tsx
+++ b/src/pages/Unlock/components/Keystore/components/KeystoreModal/KeystoreModal.tsx
@@ -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'
@@ -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'
@@ -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}
@@ -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}
@@ -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}
@@ -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'
@@ -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}
diff --git a/src/pages/Unlock/components/Pem/components/PemModal/PemModal.tsx b/src/pages/Unlock/components/Pem/components/PemModal/PemModal.tsx
index 4eb9388d..63f4d96d 100644
--- a/src/pages/Unlock/components/Pem/components/PemModal/PemModal.tsx
+++ b/src/pages/Unlock/components/Pem/components/PemModal/PemModal.tsx
@@ -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'
@@ -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'
@@ -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}
@@ -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}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index e12af315..4b525b23 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -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;
 }
\ No newline at end of file