fix: tailwind classes properly generating & colour improvements for h…

…ealthbar

locales/cn/component.healthbar.json

@@ -1,5 +1,6 @@
 {
   "Target stake": "",
   "Auction Trigger stake": "",
-  "Fee": ""
+  "Fee": "",
+  "Providers greater than 2x target stake not shown": ""
 }

locales/en/component.healthbar.json

@@ -1,5 +1,6 @@
 {
   "Target stake": "",
   "Auction Trigger stake": "",
-  "Fee": ""
+  "Fee": "",
+  "Providers greater than 2x target stake not shown": ""
 }

locales/es/component.healthbar.json

@@ -1,5 +1,6 @@
 {
   "Target stake": "",
   "Auction Trigger stake": "",
-  "Fee": ""
+  "Fee": "",
+  "Providers greater than 2x target stake not shown": ""
 }

locales/ko/component.healthbar.json

@@ -1,5 +1,6 @@
 {
   "Target stake": "",
   "Auction Trigger stake": "",
-  "Fee": ""
+  "Fee": "",
+  "Providers greater than 2x target stake not shown": ""
 }

locales/ru/component.healthbar.json

@@ -1,5 +1,6 @@
 {
   "Target stake": "",
   "Auction Trigger stake": "",
-  "Fee": ""
+  "Fee": "",
+  "Providers greater than 2x target stake not shown": ""
 }

locales/vi/component.healthbar.json

@@ -1,5 +1,6 @@
 {
   "Target stake": "",
   "Auction Trigger stake": "",
-  "Fee": ""
+  "Fee": "",
+  "Providers greater than 2x target stake not shown": ""
 }

src/components/HealthBar.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { BigNumber } from 'bignumber.js'
 import classNames from 'classnames'
 import { useTranslation } from 'gatsby-plugin-react-i18next'
-import { getIntentBackground, Intent } from '../utils/vega/Intent'
+import { Intent } from '../utils/vega/Intent'
 import {
   addDecimalsFormatNumber,
   formatNumberPercentage,
@@ -15,6 +15,18 @@ const Remainder = () => (
   <div className="bg-greys-light-200 relative h-[inherit] flex-1" />
 )
 
+const getIntentBackground = (intent?: Intent) => {
+  console.log('background intent:', intent)
+  return {
+    'bg-neutral-200 dark:bg-neutral-800': intent === undefined,
+    'bg-black dark:bg-white': intent === Intent.None,
+    'bg-vega-blue-300 dark:bg-vega-blue-650': intent === Intent.Primary,
+    'bg-danger': intent === Intent.Danger,
+    'bg-warning': intent === Intent.Warning,
+    // contrast issues with light mode
+    'bg-vega-green-550 dark:bg-vega-green': intent === Intent.Success,
+  }
+}
 const Target = ({
   target,
   decimals,
@@ -96,7 +108,7 @@ const AuctionTarget = ({
       >
         <div
           className={classNames(
-            'health-target group-hover:scale-y-108 w-0.5 dashed-background group-hover:scale-x-150',
+            'health-target group-hover:scale-y-108 dashed-background w-0.5 group-hover:scale-x-150',
             {
               'h-6': !isLarge,
               'h-12': isLarge,

src/pages/liquidity-provision/index.tsx

@@ -76,7 +76,7 @@ const MarketsLiquidity = () => {
             <Trans t={t}>Provide Liquidity</Trans>
           </GlitchTitle>
         </div>
-        <div className="mx-auto mb-3 max-w-[44rem]">
+        <div className="mx-auto mb-3 max-w-[44rem] bg-vega-pink-550">
           <LeadingLine className="text-center">
             <Trans t={t}>
               Liquidity providers receive a share of fees paid during trading in
@@ -255,9 +255,9 @@ const MarketsLiquidity = () => {
                         .liquidityMonitoringParameters.triggeringRatio
 
                     const intentForLiquidity = intentForProvisionedLiquidity(
-                      targetStake,
-                      suppliedStake,
-                      auctionTrigger
+                      parseFloat(targetStake),
+                      parseFloat(suppliedStake),
+                      parseFloat(auctionTrigger)
                     )
                     return (
                       <div>
@@ -401,17 +401,10 @@ const MarketsLiquidity = () => {
                     )
                     const suppliedStake = params.data.node.data.suppliedStake
                     const intent = intentForProvisionedLiquidity(
-                      targetStake,
-                      suppliedStake,
-                      auctionTrigger
+                      parseFloat(targetStake),
+                      parseFloat(suppliedStake),
+                      parseFloat(auctionTrigger)
                     )
-                    const statusBasedIntent = intentForStatus(tradingMode)
-                    console.log('intent:', {
-                      suppliedStake,
-                      auctionTrigger,
-                      intent,
-                      statusBasedIntent,
-                    })
                     return (
                       <div>
                         {tradingModeLabel}
@@ -565,11 +558,17 @@ const intentForProvisionedLiquidity = (
   suppliedStake,
   auctionTrigger
 ) => {
-  return suppliedStake >= targetStake
-    ? Intent.Success
-    : suppliedStake <= targetStake * auctionTrigger
-    ? Intent.Danger
-    : Intent.Warning
+  if (suppliedStake >= targetStake) {
+    return Intent.Success
+  }
+  if (suppliedStake <= targetStake) {
+    if (suppliedStake <= auctionTrigger * targetStake) {
+      {
+        return Intent.Danger
+      }
+    } else return Intent.Warning
+  }
+  return Intent.Primary
 }
 
 export const getFeeLevels = (providers: any[]) => {

src/utils/vega/Intent.ts

@@ -7,17 +7,6 @@ export enum Intent {
   Success,
 }
 
-export const getIntentBorder = (intent = Intent.None) => {
-  return {
-    border: true,
-    'border-danger': intent === Intent.Danger,
-    'border-warning': intent === Intent.Warning,
-    'border-neutral-500': intent === Intent.None,
-    'border-vega-blue-300': intent === Intent.Primary,
-    'border-vega-green': intent === Intent.Success,
-  }
-}
-
 export const getIntentBackground = (intent?: Intent) => {
   return {
     'bg-neutral-200 dark:bg-neutral-800': intent === undefined,

tailwind.config.js

@@ -2,6 +2,12 @@ const vegaCustomClasses = require('./tailwind/vega-custom-classes.js')
 const _ = require('lodash')
 
 const theme = {
+  listStyleType: {
+    none: 'none',
+    disc: 'disc',
+    decimal: 'decimal',
+    square: 'square',
+  },
   spacing: {
     'space-1': '0.25rem',
     'space-2': '0.5rem',
@@ -309,13 +315,7 @@ module.exports = {
     './tailwind/index.js',
   ],
   theme: {
-    listStyleType: {
-      none: 'none',
-      disc: 'disc',
-      decimal: 'decimal',
-      square: 'square',
-    },
-    extend: _.merge(theme),
+    extend: theme,
   },
   plugins: [
     vegaCustomClasses,

tailwind/index.js

@@ -1,10 +1,5 @@
 const theme = require('./theme')
-const vegaCustomClasses = require('./vega-custom-classes')
-const { VegaColours } = require('./vega-colours')
 
 module.exports = {
   theme,
-  themelite,
-  plugins: [vegaCustomClasses],
-  VegaColours,
 }