uni - mint new pool - styles

swaponline · Oct 5, 2024 · dd1db3a · dd1db3a
1 parent b3e2eff
commit dd1db3a
Show file tree

Hide file tree

Showing 4 changed files with 269 additions and 75 deletions.
diff --git a/src/front/shared/pages/Exchange/QuickSwap/UniV3Pools.tsx b/src/front/shared/pages/Exchange/QuickSwap/UniV3Pools.tsx
@@ -171,28 +171,12 @@ function UniV3Pools(props) {
         slippage={slippage}
         intl={intl}
         owner={userWalletAddress}
+        setDoPositionsUpdate={setDoPositionsUpdate}
       />
     )
   }
   return (
     <div id="uniV3Holder">
-      {/*
-      {currentAction == PositionAction.MINT_POSITION && (
-        <MintPosition
-          token0Address={token0}
-          token1Address={token1}
-          token0Wallet={token0Wallet}
-          token1Wallet={token1Wallet}
-          activePair={currentLiquidityPair}
-          setCurrentAction={setCurrentAction}
-          baseCurrency={network.currency}
-          chainId={network.networkVersion}
-          userDeadline={userDeadline}
-          slippage={slippage}
-          intl={intl}
-        />
-      )}
-      */}
       {currentAction == PositionAction.INFO && (
         <PositionInfo
           positionId={activePositionId}

diff --git a/src/front/shared/pages/Exchange/QuickSwap/univ3/MintPosition.scss b/src/front/shared/pages/Exchange/QuickSwap/univ3/MintPosition.scss
@@ -1,3 +1,10 @@
+H4 {
+  display: block;
+  text-align: left;
+  font-weight: bold;
+  font-size: 12pt;
+  color: var(--gray-dark);
+}
 .selectFee {
   display: flex;
   justify-content: space-between;
@@ -6,20 +13,50 @@
 
   >DIV {
     width: 25%;
+    cursor: pointer;
+    padding: 0.3rem 0.8rem;
+    border: 1px solid var(--color-border);
+    border-right: 0px;
+
+    >SPAN {
+      display: block;
+      text-align: left;
+    }
+    &.active {
+      background: var(--color-inactive-border);
+    }
+    >EM {
+      display: block;
+      font-weight: bold;
+      font-style: normal;
+      color: var(--color-brand);
+    }
+    &.notCreated>EM {
+      color: var(--color-f-error);
+    }
   }
+  >DIV:first-child {
+    border-radius: 6px 0 0 6px;
+  }
+  >DIV:last-child {
+    border-radius: 0px 6px 6px 0px;
+    border: 1px solid var(--color-border);
+  }
+
   LABEL {
     cursor: pointer;
     display: flex;
     align-items: center;
-
-    &:not(:last-child) {
-      margin-right: 0.8rem;
+    margin: 0;
+    justify-content: space-between;
+
+    SPAN {
+      font-weight: bold;
     }
-
     input {
       display: grid;
       place-content: center;
-      margin: 0 0.3rem 0 0;
+      margin: 0;
       -webkit-appearance: none;
       appearance: none;
       width: 1rem;
@@ -48,15 +85,88 @@
         outline: max(2px, 0.1em) solid var(--color-brand);
         outline-offset: max(2px, 0.1em);
       }
+
+      &[disabled] {
+        border-color: var(--gray);
+      }
+      &[disabled]::before {
+        background-color: var(--gray);
+      }
     }
   }
 }
+.notInRange,
+.needInitPool {
+  display: flex;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-f-error);
+  padding: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background: var(--color-warning);
+  border-radius: 6px;
+  color: var(--color-f-error);
+
+  SPAN {
+    font-weight: bold;
+    display: block;
+    text-align: center;
+    font-size: 10pt;
+  }
+  I {
+    display: block;
+    margin-right: 0.5rem;
+    margin-top: 2px;
+  }
+}
+.needInitPool {
+  background: var(--color-brand-background);
+  color: var(--color-brand);
+  border-color: var(--color-brand);
+}
+@media all and (max-width: 720px) {
+  .selectFee {
+    display: block;
+    justify-content: space-between;
+
+    font-size: 0.9rem;
+
+    >DIV {
+      width: 100%;
+      border: 1px solid var(--color-border);
+      border-bottom: 0px;
+    }
+    >DIV:first-child {
+      border-radius: 6px 6px 0 0;
+    }
+    >DIV:last-child {
+      border-radius: 0px 0px 6px 6px;
+      border: 1px solid var(--color-border);
+    }
+  }
+}
+
 H3.title {
   font-weight: bold;
   margin-bottom: 1rem;
 }
+.viewSideHolder {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+  align-items: baseline;
+  >STRONG {
+    display: block;
+    text-align: left;
+    font-weight: bold;
+    font-size: 12pt;
+    color: var(--gray-dark);
+  }
+}
 .selectViewSide {
-  margin-bottom: 0.4rem;
   display: flex;
   font-size: 0.9rem;
   justify-content: flex-end;