Fix auth translations and admin PWA UI

resources/js/admin/mobile/components/FormControls.tsx

@@ -47,6 +47,86 @@ type MobileSelectProps = React.ComponentPropsWithoutRef<'select'> & ControlProps
   containerStyle?: React.CSSProperties;
 };
 
+export const MobileColorInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentPropsWithoutRef<'input'> & { size?: number }
+>(function MobileColorInput({ size = 52, style, ...props }, ref) {
+  const { border, surface } = useAdminTheme();
+
+  return (
+    <input
+      ref={ref}
+      type="color"
+      {...props}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: 12,
+        border: `1px solid ${border}`,
+        background: surface,
+        padding: 0,
+        ...style,
+      }}
+    />
+  );
+});
+
+export const MobileFileInput = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'>>(
+  function MobileFileInput({ style, ...props }, ref) {
+    return (
+      <input
+        ref={ref}
+        type="file"
+        {...props}
+        style={{
+          display: 'none',
+          ...style,
+        }}
+      />
+    );
+  },
+);
+
+export const MobileDateTimeInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentPropsWithoutRef<'input'> & ControlProps
+>(function MobileDateTimeInput({ hasError = false, style, ...props }, ref) {
+  const { border, surface, text, primary, danger } = useAdminTheme();
+  const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
+  const borderColor = hasError ? danger : border;
+
+  return (
+    <input
+      ref={ref}
+      type="datetime-local"
+      {...props}
+      style={{
+        width: '100%',
+        height: 44,
+        padding: '0 12px',
+        borderRadius: 12,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor,
+        backgroundColor: surface,
+        color: text,
+        fontSize: 14,
+        outline: 'none',
+        boxShadow: `0 0 0 0 ${ringColor}`,
+        ...style,
+      }}
+      onFocus={(event) => {
+        event.currentTarget.style.boxShadow = `0 0 0 3px ${ringColor}`;
+        props.onFocus?.(event);
+      }}
+      onBlur={(event) => {
+        event.currentTarget.style.boxShadow = `0 0 0 0 ${ringColor}`;
+        props.onBlur?.(event);
+      }}
+    />
+  );
+});
+
 export const MobileInput = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'> & ControlProps>(
   function MobileInput({ hasError = false, compact = false, style, onChange, type, ...props }, ref) {
     const { border, surface, text, primary, danger } = useAdminTheme();