Style button when disabled

brucedonovan · Apr 20, 2022 · f410813 · f410813
1 parent 1886b0d
commit f410813
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/frontend/src/components/Invest.tsx b/frontend/src/components/Invest.tsx
@@ -61,7 +61,15 @@ export default class Invest extends React.Component<Properties, State> {
     let component;
     switch (this.state.approvalState) {
       case ApprovalState.Loading:
-        component = <p key="loading">Loading</p>;
+        component = (
+          <input
+            key="loading"
+            className="button"
+            type="button"
+            value="Loading..."
+            disabled={true}
+          />
+        );
         break;
       case ApprovalState.ApprovalRequired:
         component = (
@@ -130,7 +138,7 @@ export default class Invest extends React.Component<Properties, State> {
           name="leverage"
           type="range"
           min="1.01"
-          max="10"
+          max="5"
           step="0.01"
           value={utils.formatUnits(this.state.leverage, 2)}
           onChange={(el) => this.onLeverageChange(el.target.value)}

diff --git a/frontend/src/index.scss b/frontend/src/index.scss
@@ -27,12 +27,19 @@ body {
   border: metrics.$border-width solid colors.$border-color;
   padding: metrics.$padding;
   border-radius: metrics.$padding;
-  cursor: pointer;
   user-select: none;
   &:active {
     background: colors.$border-color;
   }
   &:hover {
     background-color: colors.$alt-light;
   }
+
+
+  &:disabled {
+    background-color: desaturate($color: colors.$alt, $amount: 50);
+  }
+  &:not(:disabled) {
+    cursor: pointer;
+  }
 }