Merge pull request #52 from vesperfi/ui-cleanup

Polish some UI details
vesperfi · Nov 18, 2024 · 383c6e6 · 383c6e6
2 parents 13e5867 + cd7dc59
commit 383c6e6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/site/components/Button.js b/site/components/Button.js
@@ -9,7 +9,7 @@ const Button = function ({
   return (
     <button
       {...props}
-      className={`w-32 bg-vesper rounded-3xl py-1 text-white text-center font-bold text-sm focus:outline-none uppercase ${
+      className={`w-32 bg-vesper rounded-md py-1 text-white text-center font-bold text-sm focus:outline-none uppercase ${
         disabled ? 'bg-opacity-25 cursor-not-allowed' : 'hover:bg-opacity-75'
       } ${className}`}
       onClick={handleClick}

diff --git a/site/components/Input.js b/site/components/Input.js
@@ -3,12 +3,15 @@ const InputTitle = ({ title }) => (
 )
 
 const SimpleInput = props => (
-  <input {...props} className="align-middle w-full h-10 border-2" />
+  <input {...props} className="align-middle w-full h-10 border-2 rounded-md" />
 )
 
 const SuffixedInput = ({ disabled, suffix, onSuffixClick, ...props }) => (
-  <div className="flex align-middle w-full h-10 border-2">
-    <input {...props} className="flex-1 pl-2 tabular-nums border-r-2" />
+  <div className="flex align-middle w-full h-10 border-2 rounded-md">
+    <input
+      {...props}
+      className="flex-1 pl-2 tabular-nums border-r-2 rounded-l-md"
+    />
     <div
       className={`w-16 m-auto text-center ${
         !disabled && onSuffixClick ? 'cursor-pointer' : ''

diff --git a/site/components/TokenSelector.js b/site/components/TokenSelector.js
@@ -38,7 +38,7 @@ const TokenSelector = function ({
         }`}
         disabled={!active}
         selector={
-          <div className="flex items-center justify-between px-4 py-1 w-full h-10 font-semibold border border-gray-200 focus:outline-none">
+          <div className="flex items-center justify-between px-4 py-1 w-full h-10 font-semibold border-2 border-gray-200 rounded-md focus:outline-none">
             {active && (
               <>
                 <div className="flex items-center justify-between w-full">
@@ -72,7 +72,7 @@ const TokenSelector = function ({
         }
       >
         <div className="absolute z-10 pt-2 w-full">
-          <ul className="w-full bg-white border shadow-lg">
+          <ul className="w-full bg-white border-2 rounded-md shadow-lg">
             {tokensList &&
               tokensList.map(token => (
                 <li key={token.symbol}>

diff --git a/site/components/Treasury.js b/site/components/Treasury.js
@@ -17,7 +17,7 @@ const TreasuryAssetBox = function ({ title, symbol, valueInUnit }) {
         </span>
       </div>
       <div className="font-bold">
-        {formatNumber(toFixed(fromUnit(valueInUnit), 4))}
+        {formatNumber(toFixed(fromUnit(valueInUnit), 2))}
       </div>
     </div>
   )
@@ -56,14 +56,14 @@ const Treasury = function () {
           />
         </div>
         <div className="flex mt-4 pt-4 w-full border-t-2 space-x-4">
-          <div className="py-8 w-full text-center font-semibold bg-white rounded-md">
+          <div className="py-8 w-full text-center font-semibold bg-white rounded-md shadow-md">
             <p className="text-vesper pb-1">{t('treasury-total')}</p>
-            <p>{formatNumber(toFixed(fromUnit(treasuryValue), 4))}</p>
+            <p>{formatNumber(toFixed(fromUnit(treasuryValue), 2))}</p>
           </div>
 
-          <div className="py-8 w-full text-center font-semibold bg-white rounded-md">
+          <div className="py-8 w-full text-center font-semibold bg-white rounded-md shadow-md">
             <p className="text-vesper pb-1">{t('treasury-excess')}</p>
-            <p>{formatNumber(toFixed(fromUnit(treasuryExcess), 4))}</p>
+            <p>{formatNumber(toFixed(fromUnit(treasuryExcess), 2))}</p>
           </div>
         </div>
       </div>