Properly style faucet button.

input-output-hk · Jan 11, 2021 · a75d8a2 · a75d8a2
1 parent a6192cd
commit a75d8a2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/src/antd-overrides/button.scss b/src/antd-overrides/button.scss
@@ -199,8 +199,9 @@ $transition: all $transition-duration cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 
   .main-buttons {
-    $button-width: 125px;
+    $min-button-width: 125px;
     $space-between: 10px;
+    $vertical-padding: 15px;
 
     position: absolute;
     right: 0;
@@ -209,7 +210,7 @@ $transition: all $transition-duration cubic-bezier(0.645, 0.045, 0.355, 1);
       display: inline-block;
       position: relative;
       z-index: 1;
-      width: $button-width;
+      min-width: $min-button-width;
       height: $button-height;
       margin-right: $diagonal-part-width + $space-between;
       font-size: $font-size-s;
@@ -220,21 +221,21 @@ $transition: all $transition-duration cubic-bezier(0.645, 0.045, 0.355, 1);
     }
 
     .left-diagonal {
-      padding: 0 0 0 15px;
+      padding: 0 0 0 $vertical-padding;
 
       &::after {
         @extend %diagonal-before-after-common;
-        right: -15px;
+        right: -$vertical-padding;
         border-left: none !important;
       }
     }
 
     .right-diagonal {
-      padding: 0 15px 0 0;
+      padding: 0 $vertical-padding 0 0;
 
       &::before {
         @extend %diagonal-before-after-common;
-        left: -15px;
+        left: -$vertical-padding;
         border-right: none !important;
       }
     }

diff --git a/src/layout/Sidebar.scss b/src/layout/Sidebar.scss
@@ -124,10 +124,6 @@
   }
 
   .balance-wrapper {
-    .faucet-button {
-      margin-top: 10px;
-    }
-
     .BalanceDisplay {
       .balances {
         .label {
@@ -147,6 +143,15 @@
     }
   }
 
+  .main-buttons {
+    position: relative;
+    margin-top: 50px;
+
+    .faucet-button {
+      width: 220px;
+    }
+  }
+
   .footer {
     position: absolute;
     bottom: 0;

diff --git a/src/layout/Sidebar.tsx b/src/layout/Sidebar.tsx
@@ -129,12 +129,12 @@ export const Sidebar = (): JSX.Element => {
           {walletState.walletStatus === 'LOADED' && (
             <>
               <BalanceDisplay availableBalance={walletState.getOverviewProps().availableBalance} />
-              <div className="faucet-button">
+              <div className="main-buttons">
                 {networkName === 'testnet-internal-nomad' && (
                   <Button
                     data-testid="faucet-button"
-                    type="default"
-                    className="action"
+                    type="primary"
+                    className="faucet-button action left-diagonal"
                     {...fillActionHandlers((): void => {
                       shell.openExternal(FAUCET_URL)
                     })}