mobile stylings

astriaorg · Sep 27, 2024 · e44180c · e44180c
1 parent 4962e51
commit e44180c
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 19 deletions.
diff --git a/web/src/components/DepositCard/DepositCard.tsx b/web/src/components/DepositCard/DepositCard.tsx
@@ -234,7 +234,7 @@ export default function DepositCard(): React.ReactElement {
       <div className="field">
         <div className="is-flex is-flex-direction-column">
           <div className="is-flex is-flex-direction-row is-align-items-center mb-3">
-            <div className="mr-5 w-70">From</div>
+            <div className="label-left">From</div>
             <div className="is-flex-grow-1">
               <Dropdown
                 placeholder="Select..."
@@ -285,7 +285,7 @@ export default function DepositCard(): React.ReactElement {
 
       <div className="field">
         <div className="is-flex is-flex-direction-row is-align-items-center">
-          <div className="mr-5 w-70">To</div>
+          <div className="label-left">To</div>
           <div className="is-flex-grow-1">
             <Dropdown
               placeholder="Connect EVM Wallet"
@@ -306,7 +306,7 @@ export default function DepositCard(): React.ReactElement {
 
       <div className="field">
         <div className="is-flex is-flex-direction-row is-align-items-center">
-          <div className="mr-5 w-70">Amount</div>
+          <div className="label-left">Amount</div>
           <div className="control mt-1 is-flex-grow-1">
             <input
               className="input is-medium"

diff --git a/web/src/components/Dropdown/Dropdown.tsx b/web/src/components/Dropdown/Dropdown.tsx
@@ -168,15 +168,15 @@ function Dropdown<T>({
             >
               <span className="dropdown-item-inner is-size-6">
                 {option.leftIconClass && (
-                  <span className="icon ml-1 mr-3">
-                    <i className={option.leftIconClass} />
-                  </span>
+                <span className="icon ml-1 mr-3">
+                  <i className={option.leftIconClass} />
+                </span>
                 )}
-                <span className="dropdown-item-label">{option.label}</span>
+                <span className="dropdown-item-label is-text-overflow">{option.label}</span>
                 {option.rightIconClass && (
-                  <span className="icon icon-right">
-                    <i className={option.rightIconClass} />
-                  </span>
+                <span className="icon icon-right">
+                  <i className={option.rightIconClass} />
+                </span>
                 )}
               </span>
             </button>

diff --git a/web/src/components/WithdrawCard/WithdrawCard.tsx b/web/src/components/WithdrawCard/WithdrawCard.tsx
@@ -224,7 +224,7 @@ export default function WithdrawCard(): React.ReactElement {
       <div className="field">
         <div className="is-flex is-flex-direction-column">
           <div className="is-flex is-flex-direction-row is-align-items-center mb-3">
-            <div className="mr-5 w-70">From</div>
+            <div className="label-left">From</div>
             <div className="is-flex-grow-1">
               <Dropdown
                 placeholder="Connect EVM Wallet"
@@ -266,7 +266,7 @@ export default function WithdrawCard(): React.ReactElement {
       <div className="field">
         <div className="is-flex is-flex-direction-column">
           <div className="is-flex is-flex-direction-row is-align-items-center">
-            <div className="mr-5 w-70">To</div>
+            <div className="label-left">To</div>
             <div className="is-flex-grow-1">
               <Dropdown
                 placeholder="Select..."
@@ -298,7 +298,7 @@ export default function WithdrawCard(): React.ReactElement {
 
       <div className="field">
         <div className="is-flex is-flex-direction-row is-align-items-center">
-          <div className="mr-5 w-70">Amount</div>
+          <div className="label-left">Amount</div>
           <div className="control mt-1 is-flex-grow-1">
             <input
               className="input is-medium"

diff --git a/web/src/pages/BridgePage/BridgePage.tsx b/web/src/pages/BridgePage/BridgePage.tsx
@@ -41,10 +41,10 @@ export default function BridgePage(): React.ReactElement {
   return (
     <section className="">
       <div className="container px-2">
-        <div className="columns is-centered is-fullheight-with-navbar">
-          <div className="column is-12-mobile is-8-tablet">
-            <div className="card p-6">
-              <div className="tabs is-fullwidth is-medium">
+        <div className="columns is-centered is-vcentered is-fullheight-with-navbar">
+          <div className="column is-12-mobile is-8-tablet is-6-desktop">
+            <div className="card">
+              <div className="tabs is-fullwidth is-small">
                 <ul>
                   {tabs.map((tab) => (
                     <Tab

diff --git a/web/src/styles/card-customizations.scss b/web/src/styles/card-customizations.scss
@@ -11,6 +11,11 @@
 }
 
 .card {
+  padding: 3rem;
+  @include mobile {
+    padding: 1rem;
+  }
+
   &.disabled {
     opacity: 0.5;
     pointer-events: none;

diff --git a/web/src/styles/dropdown-customizations.scss b/web/src/styles/dropdown-customizations.scss
@@ -12,9 +12,11 @@
 
     .button {
       width: 100%;
+      min-width: 0;
+      display: flex;
+      align-items: center;
       background-color: transparent;
       color: $dropdown-item-color;
-      justify-content: flex-start;
 
       span {
         color: $dropdown-placeholder-color;
@@ -25,10 +27,12 @@
 
         &.icon-left {
           height: 20px;
+          flex-shrink: 0;
         }
 
         &.icon-right {
           margin-left: auto;
+          flex-shrink: 0;
         }
       }
     }

diff --git a/web/src/styles/form-customizations.scss b/web/src/styles/form-customizations.scss
@@ -1,6 +1,15 @@
 @import './astria-colors';
 
 div.control > input {
-    color: $astria-text-light;
+  color: $astria-text-light;
 }
 
+.field {
+  .label-left {
+    margin-right: 1rem;
+    min-width: 70px;
+    @include mobile {
+      min-width: 60px;
+    }
+  }
+}
diff --git a/web/src/styles/index.scss b/web/src/styles/index.scss
@@ -182,4 +182,5 @@ body {
 .is-text-overflow {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }