frontend: make recieve view responsive

Author: thisconnect

frontends/web/src/routes/account/receive/receive.module.css

@@ -19,21 +19,6 @@
     min-height: 260px;
 }
 
-.arrowLeft,
-.arrowRight {
-    width: 16px;
-    position: relative;
-    top: 3px;
-}
-
-.arrowLeft {
-    margin-right: 3px;
-}
-
-.arrowRight {
-    margin-left: 3px;
-}
-
 .previous,
 .next {
     appearance: none;
@@ -46,6 +31,13 @@
     text-decoration: none;
 }
 
+.previous img,
+.next img {
+    display: block;
+    height: min(2.4rem, 36px);
+    width: min(2.4rem, 36px);
+}
+
 .hide {
     position: absolute;
     top: 0;
@@ -62,11 +54,12 @@
     color: var(--color-secondary);
     cursor: pointer;
     display: inline-block;
+    font-size: var(--size-small);
     text-align: center;
     text-decoration: underline;
     padding: var(--space-quarter);
 }
 
 .messageContainer {
-    margin-top: var(--spacing-default);
+    margin-top: var(--spacing-half);
 }

frontends/web/src/routes/account/receive/receive.tsx

@@ -75,11 +75,9 @@ const AddressTypeDialog = ({
               {t(`receive.scriptType.${scriptType}`)}
             </Radio>
             {scriptType === 'p2tr' && addressType === i && (
-              <div className={style.messageContainer}>
-                <Message type="warning">
-                  {t('receive.taprootWarning')}
-                </Message>
-              </div>
+              <Message type="warning" className={style.messageContainer}>
+                {t('receive.taprootWarning')}
+              </Message>
             )}
           </div>
         ))}
@@ -237,9 +235,9 @@ export const Receive = ({
                         className={style.previous}
                         onClick={previous}>
                         {(verifying || activeIndex === 0) ? (
-                          <ArrowCirlceLeft height="24" width="24" />
+                          <ArrowCirlceLeft />
                         ) : (
-                          <ArrowCirlceLeftActive height="24" width="24" title={t('button.previous')} />
+                          <ArrowCirlceLeftActive title={t('button.previous')} />
                         )}
                       </button>
                     )}
@@ -251,9 +249,9 @@ export const Receive = ({
                         className={style.next}
                         onClick={e => next(e, currentAddresses.length)}>
                         {(verifying || activeIndex >= currentAddresses.length - 1) ? (
-                          <ArrowCirlceRight height="24" width="24" />
+                          <ArrowCirlceRight />
                         ) : (
-                          <ArrowCirlceRightActive height="24" width="24" title={t('button.next')} />
+                          <ArrowCirlceRightActive title={t('button.next')} />
                         )}
                       </button>
                     )}