Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Polish some UI details #52

Merged
merged 2 commits into from
Nov 18, 2024
Merged

Polish some UI details #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c76c993
Show treasury metrics with only 2 decimals
gabmontes Nov 18, 2024
cd7dc59
Make some borders and shadows more consistent
gabmontes Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/components/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
9 changes: 6 additions & 3 deletions site/components/Input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' : ''
Expand Down
4 changes: 2 additions & 2 deletions site/components/TokenSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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}>
Expand Down
10 changes: 5 additions & 5 deletions site/components/Treasury.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down Expand Up @@ -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>
Expand Down