From 294db7581da4f93a11e061e67b3802627b68ce35 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Fri, 23 Sep 2022 13:24:59 +1000
Subject: [PATCH] Improve element styling consistency

---
 src/components/Button.tsx      | 2 +-
 src/components/IconButton.tsx  | 2 +-
 src/components/form/Input.tsx  | 9 ++++-----
 src/components/form/Select.tsx | 4 ++--
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 05df0297..27d47440 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -19,7 +19,7 @@ export const Button = ({
 }: ButtonProps): JSX.Element => {
   return (
     <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"
           ? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
           : "bg-orange-100 text-orange-700 hover:bg-orange-200"
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 66d99e85..1678b23e 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -18,7 +18,7 @@ export const IconButton = ({
 }: IconButtonProps): JSX.Element => {
   return (
     <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"
           ? "bg-orange-600 text-white shadow-sm hover:bg-orange-700"
           : "bg-orange-100 text-orange-700 hover:bg-orange-200"
diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx
index 5e7fb63b..f58b2218 100644
--- a/src/components/form/Input.tsx
+++ b/src/components/form/Input.tsx
@@ -26,19 +26,19 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       {/*  */}
       <div className="relative flex rounded-md shadow-sm">
         {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}
           </span>
         )}
         <input
           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" : ""
           } ${action ? "rounded-r-none" : ""}`}
           {...rest}
         />
         {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">
               {suffix}
             </span>
@@ -48,10 +48,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           <button
             type="button"
             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}
-            {/* <span>Sort</span> */}
           </button>
         )}
         {error && (
diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
index 4531ff4a..8f2bbf5f 100644
--- a/src/components/form/Select.tsx
+++ b/src/components/form/Select.tsx
@@ -39,7 +39,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Input(
       <div className="flex">
         <select
           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" : ""
           } ${action ? "rounded-r-none" : ""}`}
           {...rest}
@@ -54,7 +54,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Input(
           <button
             type="button"
             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}
           </button>