From 8218ef99c60e66f16deea016007c10f9e8e86d1a Mon Sep 17 00:00:00 2001
From: weronika <werawera112@gmail.com>
Date: Wed, 8 May 2024 12:01:37 +0200
Subject: [PATCH] fix styles for inputs in profile for web

---
 src/screens/ProfileScreen.tsx | 103 ++++++++++++++++++++++++----------
 1 file changed, 72 insertions(+), 31 deletions(-)

diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx
index d130a814..3a159500 100644
--- a/src/screens/ProfileScreen.tsx
+++ b/src/screens/ProfileScreen.tsx
@@ -1,11 +1,19 @@
 import { ControlledField } from '@baca/components'
+import { isWeb } from '@baca/constants'
 import { Button, Text, Spacer, Row, Box } from '@baca/design-system'
-import { useCallback, useTranslation, useUpdateProfileForm, useScreenOptions } from '@baca/hooks'
+import {
+  useCallback,
+  useTranslation,
+  useUpdateProfileForm,
+  useScreenOptions,
+  useWeb,
+} from '@baca/hooks'
 import { useRouter } from 'expo-router'
 
 export const ProfileScreen = () => {
   const { t } = useTranslation()
   const { back } = useRouter()
+  const { shouldApplyMobileStyles } = useWeb()
 
   useScreenOptions({
     title: t('navigation.screen_titles.profile'),
@@ -21,36 +29,69 @@ export const ProfileScreen = () => {
       <Text.LgBold>Profile</Text.LgBold>
       <Text.MdRegular>Update your personal details here.</Text.MdRegular>
       <Box borderColor="utility.gray.300" borderBottomWidth={2} borderTopWidth={2} my={4} py={4}>
-        <ControlledField.Input
-          {...{ control, errors }}
-          autoCapitalize="none"
-          inputMode="text"
-          label={t('form.labels.first_name')}
-          name="firstName"
-          onFocus={focusLastNameInput}
-          placeholder={t('form.placeholders.email')}
-          testID="emailInput"
-        />
-        <ControlledField.Input
-          {...{ control, errors }}
-          autoCapitalize="none"
-          inputMode="text"
-          label={t('form.labels.last_name')}
-          name="lastName"
-          placeholder={t('form.placeholders.last_name')}
-          testID="lastNameInput"
-        />
-        <ControlledField.Input
-          {...{ control, errors }}
-          autoCapitalize="none"
-          inputMode="email"
-          isDisabled
-          label={t('form.labels.email')}
-          name="email"
-          onSubmitEditing={submit}
-          placeholder={t('form.placeholders.email')}
-          testID="emailInput"
-        />
+        <Box
+          justifyContent="space-between"
+          flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
+          mb={isWeb ? 10 : 0}
+        >
+          <Text.SmBold flex={1}>{t('form.labels.first_name')}</Text.SmBold>
+          <Box flex={isWeb ? 1 : 0}>
+            <ControlledField.Input
+              {...{ control, errors }}
+              autoCapitalize="none"
+              inputMode="text"
+              name="firstName"
+              onFocus={focusLastNameInput}
+              placeholder={t('form.placeholders.email')}
+              testID="emailInput"
+              {...(!isWeb && {
+                label: t('form.labels.first_name'),
+              })}
+            />
+          </Box>
+        </Box>
+        <Box
+          justifyContent="space-between"
+          flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
+          mb={isWeb ? 10 : 0}
+        >
+          <Text.SmBold flex={1}>{t('form.labels.last_name')}</Text.SmBold>
+          <Box flex={isWeb ? 1 : 0}>
+            <ControlledField.Input
+              {...{ control, errors }}
+              autoCapitalize="none"
+              inputMode="text"
+              name="lastName"
+              placeholder={t('form.placeholders.last_name')}
+              testID="lastNameInput"
+              {...(!isWeb && {
+                label: t('form.labels.last_name'),
+              })}
+            />
+          </Box>
+        </Box>
+        <Box
+          justifyContent="space-between"
+          flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
+          mb={isWeb ? 10 : 0}
+        >
+          <Text.SmBold flex={1}>{t('form.labels.last_name')}</Text.SmBold>
+          <Box flex={isWeb ? 1 : 0}>
+            <ControlledField.Input
+              {...{ control, errors }}
+              autoCapitalize="none"
+              inputMode="email"
+              isDisabled
+              name="email"
+              onSubmitEditing={submit}
+              placeholder={t('form.placeholders.email')}
+              testID="emailInput"
+              {...(!isWeb && {
+                label: t('form.labels.email'),
+              })}
+            />
+          </Box>
+        </Box>
       </Box>
       <Row justifyContent="flex-end">
         <Button.SecondaryColor