Amina/ style fix on popup (#7028)

* style fix

* style fix

* styl efix

* lint fix

* mobile-style fix

* master

* master

Co-authored-by: Kevin <70131533+kevinw-binary@users.noreply.github.com>

Author: amina-deriv

src/sass/app/websocket_pages.scss

@@ -291,18 +291,57 @@
             max-width: 25em;
             padding: 32px;
 
-            #btn_cancel {
-                span {
-                    width: calc(100% - 50px);
-                }
+            #frm_confirm {
+                justify-content: center;
             }
-            #btn_ok {
-                width: calc(100% - 25px);
+            .hint {
+                padding: 0px 10px 25px 0px;
+                white-space: nowrap;
+                @media screen and (max-width: 500px) {
+                    padding: 0px 10px 20px 0px;
+                    white-space: nowrap;
+                }
+                @media screen and (max-width: 345px) {
+                    padding: 0px 10px 20px 0px;
+                    white-space: nowrap;
+                    font-size: x-small;
+                }
             }
             &#dialog_content {
                 padding: 22px 12px;
             }
         }
+        &#top_up_virtual_pop_up, &#top_up_error {
+            #continue_text {
+                width: calc(100% - 50px);
+                @media screen and (max-width: 435px) {
+                    width: calc(100% - 1rem);
+                    font-size: small;
+                    padding: 10px;
+                }
+                @media screen and (max-width: 300px) {
+                    width: calc(100% - 0.625rem);
+                    font-size: x-small;
+                    padding: 10px;
+                }
+            }
+            #btn_ok {
+                width: calc(100% - 10px);
+                height: 56px;
+                @media screen and (max-width: 435px) {
+                    font-size: small;
+                    width: calc(100% - 0.375rem);
+                    padding: 10px;
+                    height: 46px;
+                }
+                @media screen and (max-width: 300px) {
+                    font-size: x-small;
+                    width: 100%;
+                    height: 40px;
+                    margin-left: 10px;
+                }
+            }
+        }
     }
     &#top_up_error {
         > div {
@@ -322,8 +361,8 @@
                 width: 100%;
                 text-align: center;
 
-                .button span {
-                    width: calc(50% - 55px);
+                #cancel_btn_text, #ok_btn_text {
+                    width: 4.5rem;
                 }
             }
         }

src/templates/app/dialog.jsx

@@ -9,8 +9,8 @@ const Dialog = () => (
                     <p id='dialog_message' className='gr-padding-10 no-margin' />
                     <div className='gr-row gr-row-align-right gr-padding-10'>
                         <form id='frm_confirm'>
-                            <a className='button button-secondary' id='btn_cancel' href='javascript:;'><span>{it.L('Cancel')}</span></a>
-                            <a className='button' id='btn_ok' href='javascript:;'><span>{it.L('OK')}</span></a>
+                            <a className='button button-secondary' id='btn_cancel' href='javascript:;'><span id='cancel_btn_text'>{it.L('Cancel')}</span></a>
+                            <a className='button' id='btn_ok' href='javascript:;'><span id='ok_btn_text'>{it.L('OK')}</span></a>
                         </form>
                     </div>
                     <p id='dialog_footnote' className='invisible hint' />

src/templates/app/user/top_up_virtual/pop_up.jsx

@@ -14,7 +14,7 @@ const TopUpVirtualPopup = () => (
                 </div>
                 <div className='gr-row'>
                     <div className='gr-6'>
-                        <a className='button button-secondary' id='btn_cancel' href='javascript:;'><span>{it.L('Continue trading')}</span></a>
+                        <a className='button button-secondary' id='btn_cancel' href='javascript:;'><span id='continue_text'>{it.L('Continue trading')}</span></a>
                     </div>
                     <div className='gr-6 gr-no-gutter-left'>
                         <button className='button' type='submit' id='btn_ok'>{it.L('Top up')}</button>