Merge pull request #165 from burnt-labs/nerve/mobileZoomFix

Added mobile zoom fix
burnt-labs · Apr 26, 2024 · 6c09d7a · 6c09d7a
2 parents 586a0a1 + a9e702a
commit 6c09d7a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/smooth-clouds-fetch.md b/.changeset/smooth-clouds-fetch.md
@@ -0,0 +1,6 @@
+---
+"abstraxion-dashboard": minor
+"@burnt-labs/ui": minor
+---
+
+Added prop for more direct access to input styles
diff --git a/apps/abstraxion-dashboard/components/AbstraxionSignin/index.tsx b/apps/abstraxion-dashboard/components/AbstraxionSignin/index.tsx
@@ -121,10 +121,12 @@ export const AbstraxionSignin = () => {
             </h2>
           </div>
           <Input
+            baseInputClassName="!ui-text-[16px]"
             placeholder="Verification Code"
             value={otp}
             onChange={handleOtpChange}
             error={otpError}
+            onKeyDown={(e) => e.key === "Enter" && handleOtp(e)}
           />
           <div className="ui-flex ui-w-full ui-flex-col ui-items-center ui-gap-4">
             <Button fullWidth={true} onClick={handleOtp} disabled={!!otpError}>
@@ -151,11 +153,13 @@ export const AbstraxionSignin = () => {
             </h2>
           </div>
           <Input
+            baseInputClassName="!ui-text-[16px]"
             placeholder="Email address"
             value={email}
             onChange={handleEmailChange}
             error={emailError}
             onBlur={validateEmail}
+            onKeyDown={(e) => e.key === "Enter" && handleEmail(e)}
           />
           <Button
             fullWidth={true}

diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
@@ -6,13 +6,18 @@ type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "prefix">;
 export interface ITextFieldProps extends BaseInputProps {
   className?: string;
   error?: string;
+  baseInputClassName?: string;
+  onKeyDown?: (e: any) => false | Promise<void>;
 }
 export function Input({
   className,
   placeholder,
+  // This should only be used for specific classes that can't override the base input styles.
+  baseInputClassName,
   value,
   error,
   onBlur,
+  onKeyDown,
   ...props
 }: ITextFieldProps) {
   const [isInputFocused, setIsInputFocused] = useState(false);
@@ -46,11 +51,14 @@ export function Input({
       </label>
       <input
         {...props}
-        className={`ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${
+        className={`${
+          baseInputClassName || ""
+        } ui-z-10 ui-block ui-h-8 ui-w-full ui-border-b ui-relative ${
           error ? "ui-border-red-400" : ""
         } ui-bg-transparent ui-font-akkuratLL ui-text-sm ui-text-zinc-100 ui-font-normal ui-leading-tight ui-outline-none`}
         onBlur={handleBlur}
         onFocus={handleFocus}
+        onKeyDown={onKeyDown}
         value={value}
       />
     </div>