hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve element styling consistency

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-09-23 13:24:59 +10:00
parent 506e59e86b
commit 294db7581d
4 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const Button = ({
}: ButtonProps): JSX.Element => { }: ButtonProps): JSX.Element => {
return ( return (
<button <button
className={`flex w-full rounded-md border border-transparent px-3 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${ className={`flex w-full rounded-md border border-transparent px-3 focus:outline-none focus:ring-2 focus:ring-orange-500 ${
variant === "primary" variant === "primary"
? "bg-orange-600 text-white shadow-sm hover:bg-orange-700" ? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
: "bg-orange-100 text-orange-700 hover:bg-orange-200" : "bg-orange-100 text-orange-700 hover:bg-orange-200"
src/components/IconButton.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export const IconButton = ({
}: IconButtonProps): JSX.Element => { }: IconButtonProps): JSX.Element => {
return ( return (
<button <button
className={`flex rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 ${ className={`flex rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 ${
variant === "primary" variant === "primary"
? "bg-orange-600 text-white shadow-sm hover:bg-orange-700" ? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
: "bg-orange-100 text-orange-700 hover:bg-orange-200" : "bg-orange-100 text-orange-700 hover:bg-orange-200"
src/components/form/Input.tsx
+4 -5
View File
@@ -26,19 +26,19 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
{/* */} {/* */}
<div className="relative flex rounded-md shadow-sm"> <div className="relative flex rounded-md shadow-sm">
{prefix && ( {prefix && (
<span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm"> <span className="inline-flex items-center rounded-l-md border-gray-300 bg-orange-200 px-3 font-mono text-sm">
{prefix} {prefix}
</span> </span>
)} )}
<input <input
ref={ref} ref={ref}
className={`block h-10 w-full min-w-0 flex-1 rounded-md border border-gray-300 px-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm ${ className={`flex h-10 w-full rounded-md bg-orange-100 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 ${
prefix ? "rounded-l-none" : "" prefix ? "rounded-l-none" : ""
} ${action ? "rounded-r-none" : ""}`} } ${action ? "rounded-r-none" : ""}`}
{...rest} {...rest}
/> />
{suffix && ( {suffix && (
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"> <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 font-mono">
<span className="text-gray-500 sm:text-sm" id="price-currency"> <span className="text-gray-500 sm:text-sm" id="price-currency">
{suffix} {suffix}
</span> </span>
@@ -48,10 +48,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
<button <button
type="button" type="button"
onClick={action.action} onClick={action.action}
className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md bg-orange-200 px-4 py-2 text-sm font-medium hover:bg-orange-300 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
> >
{action.icon} {action.icon}
{/* <span>Sort</span> */}
</button> </button>
)} )}
{error && ( {error && (
src/components/form/Select.tsx
+2 -2
View File
@@ -39,7 +39,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Input(
<div className="flex"> <div className="flex">
<select <select
ref={ref} ref={ref}
className={`block w-full min-w-0 flex-1 rounded-md border border-gray-300 px-3 py-2 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm ${ className={`flex h-10 w-full rounded-md bg-orange-100 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 ${
prefix ? "rounded-l-none" : "" prefix ? "rounded-l-none" : ""
} ${action ? "rounded-r-none" : ""}`} } ${action ? "rounded-r-none" : ""}`}
{...rest} {...rest}
@@ -54,7 +54,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Input(
<button <button
type="button" type="button"
onClick={action.action} onClick={action.action}
className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500" className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md bg-orange-200 px-4 py-2 text-sm font-medium hover:bg-orange-300 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
> >
{action.icon} {action.icon}
</button> </button>