refactor: buttons width 100% (#379)

* feat: make btns width 100% looks better :) before/after * fixup refund button
BoltzExchange · Jan 3, 2024 · 5cb5e25 · 5cb5e25 · vercel · Jan 3, 2024
1 parent 2a5ee53
commit 5cb5e25
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/src/RefundStep.jsx b/src/RefundStep.jsx
@@ -42,7 +42,7 @@ const RefundStep = () => {
                 <hr />
                 <div class="btns btns-space-between">
                     <button
-                        class="btn btn-light"
+                        class="btn btn-light no-grow"
                         onClick={() => navigate("/swap/" + params.id)}>
                         {t("backup_skip")}
                     </button>

diff --git a/src/components/DownloadRefund.tsx b/src/components/DownloadRefund.tsx
@@ -48,17 +48,13 @@ const DownloadRefund = () => {
     };
 
     return (
-        <div class="download-refund">
-            <button
-                class="btn btn-success"
-                onclick={() =>
-                    isMobile
-                        ? downloadRefundQr(swap())
-                        : downloadRefundJson(swap())
-                }>
-                {t("download_refund_file")}
-            </button>
-        </div>
+        <button
+            class="btn btn-success"
+            onclick={() =>
+                isMobile ? downloadRefundQr(swap()) : downloadRefundJson(swap())
+            }>
+            {t("download_refund_file")}
+        </button>
     );
 };
 

diff --git a/src/style/index.scss b/src/style/index.scss
@@ -229,10 +229,14 @@ hr.spacer {
 .btns-space-between {
     justify-content: space-between;
 }
-.btns > * {
+.btns .btn {
     display: inline-block;
     width: auto;
     margin: 3px;
+    flex-grow: 1;
+}
+.btns .no-grow {
+    flex-grow: 0;
 }
 
 .fee {