Fix focusring on disabled inputs

Author: DaneEveritt

resources/scripts/components/elements/Input.tsx

@@ -39,7 +39,7 @@ const inputStyle = css<Props>`
     resize: none;
     ${tw`appearance-none outline-none w-full min-w-0`};
     ${tw`p-3 border-2 rounded text-sm transition-all duration-150`};
-    ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
+    ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none focus:ring-0`};
     
     & + .input-help {
         ${tw`mt-1 text-xs`};
@@ -52,14 +52,15 @@ const inputStyle = css<Props>`
     
     &:not(:disabled):not(:read-only):focus {
         ${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`};
+        ${props => props.hasError && tw`border-red-300 ring-red-200`};
     }
 
     &:disabled {
         ${tw`opacity-75`};
     }
     
     ${props => props.isLight && light};
-    ${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300 focus:border-red-300! focus:ring-red-200!`};
+    ${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`};
 `;
 
 const Input = styled.input<Props>`