Merge pull request #67 from SmartCash/feature/improvements

Feature/improvements
SmartCash · Jul 6, 2021 · 97299d4 · 97299d4
2 parents c6e6626 + 2873223
commit 97299d4
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "beehivedesktop",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "description": "A decentralized Smartcash wallet.",
     "private": true,
     "author": "SmartCash",

diff --git a/src/presentation/components/Wallet.css b/src/presentation/components/Wallet.css
@@ -1,3 +1,7 @@
+.wBalance{
+    width: 90%;
+}
+
 .btnCopy {
     width: 20px;
     height: 20px;
@@ -42,7 +46,7 @@
  .numberVersion{
      text-align: right;
      float: right;
-     width: 400px;
+     width: 100%;
  }
  .version{
      color: var(--primary);

diff --git a/src/presentation/components/Wallet.js b/src/presentation/components/Wallet.js
@@ -11,10 +11,10 @@ function Wallet({ wallet, isCurrent }) {
     return (
         <div className={`wallet ${isCurrent && 'wallet-current'}`} role="button">
             <div className="symbol" onClick={() => setWalletCurrent(wallet)}>
-                ∑
+                ∑ 
             </div>
             <div className="content">
-                <div onClick={() => setWalletCurrent(wallet)}>
+                <div onClick={() => setWalletCurrent(wallet)} className="wBalance">
                     <p className="amount">
                         <Balance value={ wallet.balance.unlocked } />             
                     </p>

diff --git a/src/presentation/components/login-modal/login-modal.js b/src/presentation/components/login-modal/login-modal.js
@@ -13,7 +13,7 @@ export function LoginModal() {
     const [showModal, setShowModal] = useState(true);
     const [loading, setLoading] = useState(false);
     const [savePasswordInContext, setSavePasswordInContext] = useState(false);
-
+    
     const handleDecryptWallets = async () => {
         setLoading(true);
         const wallets = await decryptWallets(_password);
@@ -40,7 +40,8 @@ export function LoginModal() {
                             <p className="version">v{pjson.version}</p>
                         </div>
                         <div className={style['modal-body']}>
-                            <div className={style['address-content']}>
+                            <form onSubmit={e => { e.preventDefault(); handleDecryptWallets(e); }}>
+                                <div className={style['address-content']}>
                                 {!loading && (
                                     <React.Fragment>
                                         <div className={style['password-wrapper']}>
@@ -73,7 +74,7 @@ export function LoginModal() {
                                         </div>
 
                                         <div className={style.buttonArea}>
-                                        <button className={style.btnOpen} onClick={handleDecryptWallets}>Start BeeHive</button>
+                                        <button type="submit" className={style.btnOpen}>Start BeeHive</button>
                                         </div>
                                     </React.Fragment>
                                 )}
@@ -83,6 +84,7 @@ export function LoginModal() {
                                     </p>
                                 )}
                             </div>
+                            </form>
                         </div>
                     </div>
                 </div>

diff --git a/src/presentation/components/modal/modal.module.css b/src/presentation/components/modal/modal.module.css
@@ -52,13 +52,15 @@
     font-weight: 700;
     line-height: 1;
     color: #000;
-    opacity: 0.3;
+    opacity: 0.7;
     cursor: pointer;
     border: none;
+    background-color: transparent;
 }
 
 .modal-title {
     color: var(--primary);
+    margin-bottom: -10px;
 }
 
 .address-content {
@@ -138,7 +140,9 @@
 }
 
 .buttonArea{
-    margin-top: 40px;    
+    margin-top: 40px;
+    width: 100%;
+    text-align: center;
 }
 
 .inputPass{
@@ -178,5 +182,4 @@
     font-family: inherit;
     margin: 26px 0 0;
     cursor: pointer;
-    margin-left: -170px;
 }
diff --git a/src/presentation/components/password-modal/passsword-modal.js b/src/presentation/components/password-modal/passsword-modal.js
@@ -42,6 +42,7 @@ export function PasswordModal(props) {
 
     return (
         <Modal title="Password" onClose={onClose}>
+            <form onSubmit={e => { e.preventDefault(); handleCallback(e); }}>
             <p>Please, input your password to complete this action.</p>
             <p>Check the flag "Remember Password" to hide this modal in future actions.</p>
 
@@ -71,7 +72,8 @@ export function PasswordModal(props) {
             )}
 
 
-            <button className={style.sendbutton} onClick={handleCallback}>Send</button>
+            <button type="submit" className={style.sendbutton}>Send</button>
+            </form>
         </Modal>
     );
 }
diff --git a/src/presentation/pages/chat/Chat.css b/src/presentation/pages/chat/Chat.css
@@ -150,6 +150,8 @@
 
 .page-chat .message {
     width: 60%;
+    word-wrap: normal !important;
+    overflow-wrap: normal !important;
 }
 
 .page-chat .transaction-messages {
@@ -181,7 +183,7 @@
     padding: 0;
     color: var(--primary);
     font-size: 16px;
-    word-break: break-all;
+    word-break: normal;
 }
 
 .page-chat .transaction button {

diff --git a/src/presentation/pages/chat/Chat.js b/src/presentation/pages/chat/Chat.js
@@ -163,6 +163,11 @@ function ChatComponent() {
         handleCalculateChatFee(message, getRecipientRSAPublicKey());
     }, 1000);
 
+    async function refreshButton(){       
+        await _getTransactionHistory();
+        setTimeout(() => messagesRef?.current?.scrollToBottom(), 50);        
+    };
+
     return (
         <Page className="page-chat">
             {!hasPass() && (
@@ -180,7 +185,7 @@ function ChatComponent() {
                         <div className="header">
                             <span className="title">Chats</span>
                             {<button onClick={() => handleSetNewChat()}>Start chat</button>}
-                            <button onClick={() => _getTransactionHistory()}>Refresh</button>
+                            <button onClick={() => refreshButton()}>Refresh</button>
                         </div>
                         {error && <p className="error">{error}</p>}
                         <Scrollbars renderThumbVertical={(props) => <div {...props} className="thumb-vertical" />}>
@@ -229,7 +234,7 @@ function ChatComponent() {
                                                 X
                                             </button>
                                             <p>
-                                                <strong>Message has been sent.  Refresh to show message.</strong>
+                                                <strong>Message has been sent. Refresh to show message.</strong>
                                             </p>
                                             <div className="msgSuccess">Transaction ID: </div>
                                             <strong className="txID">{TXID}</strong>

diff --git a/src/presentation/pages/receive/Receive.css b/src/presentation/pages/receive/Receive.css
@@ -13,8 +13,6 @@
     right: -200px;
     bottom: 0;
     width: 190px;
-    display: inline;
-    flex-direction: column;
 }
 
 .page-receive .qrcode .btnWrapper button ~ button {
@@ -67,6 +65,8 @@
     object-fit: contain;
     fill: #fff;
     position: relative;
+    float: left;
+    margin-right: 10px;
 }
 
 .page-receive .btnCopy:active {
@@ -91,8 +91,9 @@
 }
 
 .page-receive .descIcon{
-    color: var(--primary);
-    float: right;
+    color: var(--primary);    
     font-size: 12px;
     margin: 0 0 0 8px;
+    width: 350px;
+    text-align: left;
 }
diff --git a/src/presentation/pages/receive/Receive.js b/src/presentation/pages/receive/Receive.js
@@ -60,8 +60,9 @@ function Receive() {
                                 }}
                             >
                                 <IconDownload className="btnCopy" />
+                                <p className="descIcon">Download the QR Code image</p>
                             </button>
-                            <p className="descIcon">Download the QR Code image</p>
+
                         </div>
 
                         <div className="btnIcon">
@@ -75,8 +76,9 @@ function Receive() {
                                 }}
                             >
                                 <IconCopy className="btnCopy" />
+                                <p className="descIcon">Copy QR Code image</p>
                             </button>
-                            <p className="descIcon">Copy QR Code image</p>
+
                         </div>
                     </div>
                 </div>

diff --git a/src/presentation/styles/index.css b/src/presentation/styles/index.css
@@ -224,9 +224,6 @@ body {
     display: inline;
     padding: 1px 5px;
 }
-.wallet .btnCopy {
-    margin-left: 16px;
-}
 
 /* FormControl */
 .form-control {