fix: improve general styling

Improve the general styling of the app by removing floats and replacing it `flex`. Additionally, improve the constrast of certain parts of the app and add some transitions to hover changes.
This commit is contained in:
Mythie
2023-04-21 21:51:20 +10:00
parent d2301a923b
commit d135df827a
7 changed files with 113 additions and 63 deletions

View File

@ -6,8 +6,8 @@ export function Button(props: any) {
const isLink = typeof props.href !== "undefined" && !props.disabled;
const { color = "primary", icon, disabled, onClick } = props;
const baseStyles =
"inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300";
const primaryStyles = "text-white bg-neon hover:bg-neon-dark";
"inline-flex gap-x-2 items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300";
const primaryStyles = "text-gray-900 bg-neon hover:bg-neon-dark";
const secondaryStyles = "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
return isLink ? (
@ -21,7 +21,7 @@ export function Button(props: any) {
)}
hidden={props.hidden}>
{props.icon ? (
<props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
<props.icon className="inline-block h-5 text-inherit" aria-hidden="true"></props.icon>
) : (
""
)}
@ -40,7 +40,7 @@ export function Button(props: any) {
disabled={props.disabled || props.loading}
hidden={props.hidden}>
{props.icon ? (
<props.icon className="mr-1 inline h-5 text-inherit" aria-hidden="true"></props.icon>
<props.icon className="inline h-5 text-inherit" aria-hidden="true"></props.icon>
) : (
""
)}