responsive login

actualbudget · Feb 26, 2025 · 36c3f42 · 36c3f42
1 parent 6f5585e
commit 36c3f42
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx
@@ -11,6 +11,7 @@ import { css, cx } from '@emotion/css';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { useProperFocus } from '../../hooks/useProperFocus';
 import { theme, type CSSProperties } from '../../style';
+import { useResponsive } from '../responsive/ResponsiveProvider';
 
 export const defaultInputStyle = {
   outline: 0,
@@ -22,7 +23,7 @@ export const defaultInputStyle = {
   border: '1px solid ' + theme.formInputBorder,
 };
 
-type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   style?: CSSProperties;
   inputRef?: Ref<HTMLInputElement>;
   onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
@@ -111,3 +112,9 @@ export function BigInput(props: InputProps) {
     />
   );
 }
+
+export function ResponsiveInput(props: InputProps) {
+  const { isNarrowWidth } = useResponsive();
+
+  return isNarrowWidth ? <BigInput {...props} /> : <Input {...props} />;
+}
diff --git a/packages/desktop-client/src/components/manager/subscribe/Login.tsx b/packages/desktop-client/src/components/manager/subscribe/Login.tsx
@@ -21,7 +21,7 @@ import { SvgCheveronDown } from '../../../icons/v1';
 import { useDispatch } from '../../../redux';
 import { theme } from '../../../style';
 import { warningBackground } from '../../../style/themes/dark';
-import { Input } from '../../common/Input';
+import { ResponsiveInput } from '../../common/Input';
 import { Link } from '../../common/Link';
 import { useResponsive } from '../../responsive/ResponsiveProvider';
 import { useAvailableLoginMethods, useLoginMethod } from '../../ServerContext';
@@ -63,7 +63,7 @@ function PasswordLogin({ setError, dispatch }) {
         gap: '1rem',
       }}
     >
-      <Input
+      <ResponsiveInput
         autoFocus={true}
         placeholder={t('Password')}
         type="password"
@@ -74,7 +74,11 @@ function PasswordLogin({ setError, dispatch }) {
       <ButtonWithLoading
         variant="primary"
         isLoading={loading}
-        style={{ fontSize: 15, width: isNarrowWidth ? '100%' : 170 }}
+        style={{
+          fontSize: 15,
+          width: isNarrowWidth ? '100%' : 170,
+          ...(isNarrowWidth ? { padding: 10 } : null),
+        }}
         onPress={onSubmitPassword}
       >
         <Trans>Sign in</Trans>
@@ -85,6 +89,7 @@ function PasswordLogin({ setError, dispatch }) {
 
 function OpenIdLogin({ setError }) {
   const { t } = useTranslation();
+  const { isNarrowWidth } = useResponsive();
   const [warnMasterCreation, setWarnMasterCreation] = useState(false);
   const [reviewOpenIdConfiguration, setReviewOpenIdConfiguration] =
     useState(false);
@@ -140,7 +145,7 @@ function OpenIdLogin({ setError }) {
             }}
           >
             {warnMasterCreation && (
-              <Input
+              <ResponsiveInput
                 autoFocus={true}
                 placeholder={t('Enter server password')}
                 type="password"
@@ -194,7 +199,10 @@ function OpenIdLogin({ setError }) {
                     }
                   });
                 }}
-                style={{ marginTop: 5 }}
+                style={{
+                  marginTop: 5,
+                  ...(isNarrowWidth ? { padding: 10 } : null),
+                }}
               >
                 <Trans>Review OpenID configuration</Trans>
               </Button>
@@ -221,7 +229,10 @@ function OpenIdLogin({ setError }) {
               <Button
                 key="cancel"
                 variant="bare"
-                style={{ marginRight: 10 }}
+                style={{
+                  marginRight: 10,
+                  ...(isNarrowWidth && { padding: 10 }),
+                }}
                 onPress={() => {
                   setReviewOpenIdConfiguration(false);
                   setOpenIdConfig(null);
@@ -271,6 +282,7 @@ function HeaderLogin({ error }) {
 
 export function Login() {
   const { t } = useTranslation();
+  const { isNarrowWidth } = useResponsive();
 
   const dispatch = useDispatch();
   const defaultLoginMethod = useLoginMethod();
@@ -369,6 +381,7 @@ export function Login() {
                 color: theme.pageTextLight,
                 paddingTop: 5,
                 width: 'fit-content',
+                ...(isNarrowWidth ? { padding: 10 } : null),
               }}
             >
               <Trans>Select the login method</Trans>{' '}

diff --git a/packages/desktop-client/src/components/manager/subscribe/OpenIdForm.tsx b/packages/desktop-client/src/components/manager/subscribe/OpenIdForm.tsx
@@ -12,11 +12,12 @@ import { View } from '@actual-app/components/view';
 import { type OpenIdConfig } from 'loot-core/types/models/openid';
 
 import { theme } from '../../../style';
-import { Input } from '../../common/Input';
 import { Link } from '../../common/Link';
 import { Select } from '../../common/Select';
 import { FormField, FormLabel } from '../../forms';
 import { useServerURL } from '../../ServerContext';
+import { ResponsiveInput } from '../../common/Input';
+import { useResponsive } from '../../responsive/ResponsiveProvider';
 
 type OpenIdCallback = (config: OpenIdConfig) => Promise<void>;
 
@@ -48,7 +49,7 @@ export function OpenIdForm({
   openIdData,
 }: OpenIdFormProps) {
   const { t } = useTranslation();
-
+  const { isNarrowWidth } = useResponsive();
   const [issuer, setIssuer] = useState('');
   const [clientId, setClientId] = useState('');
   const [clientSecret, setClientSecret] = useState('');
@@ -133,7 +134,7 @@ export function OpenIdForm({
         <FormField style={{ flex: 1 }}>
           {!submitButtonDisabled && (
             <View>
-              <Input
+              <ResponsiveInput
                 id="issuer-field"
                 type="text"
                 value={issuer}
@@ -168,7 +169,7 @@ export function OpenIdForm({
       <Stack>
         <FormField style={{ flex: 1 }}>
           <FormLabel title={t('Client ID')} htmlFor="clientid-field" />
-          <Input
+          <ResponsiveInput
             type="text"
             id="clientid-field"
             value={clientId}
@@ -188,7 +189,7 @@ export function OpenIdForm({
         </FormField>
         <FormField style={{ flex: 1 }}>
           <FormLabel title={t('Client secret')} htmlFor="clientsecret-field" />
-          <Input
+          <ResponsiveInput
             type="text"
             id="clientsecret-field"
             value={clientSecret}
@@ -217,6 +218,7 @@ export function OpenIdForm({
             isLoading={loading}
             onPress={onSubmit}
             isDisabled={submitButtonDisabled}
+            style={isNarrowWidth ? { padding: 10} : undefined}
           >
             OK
           </ButtonWithLoading>
@@ -405,6 +407,7 @@ function OpenIdProviderSelector({
   defaultValue: string;
 }) {
   const { t } = useTranslation();
+  const { isNarrowWidth } = useResponsive();
 
   const handleProviderChange = (newValue: string) => {
     const selectedProvider = openIdProviders.find(provider =>
@@ -425,6 +428,7 @@ function OpenIdProviderSelector({
         defaultLabel={t('Select Provider')}
         value={defaultValue}
         onChange={handleProviderChange}
+        style={isNarrowWidth ? { padding: 10 } : undefined}
       />
     </FormField>
   );