Fix UI to create a shortcut or applescript

Author: ospfranco

src/components/Input.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import {useBoolean} from 'hooks'
+import {cssInterop} from 'nativewind'
 import React, {FC, MutableRefObject} from 'react'
 import {TextInput, TextInputProps, View, ViewStyle} from 'react-native'
 import colors from 'tailwindcss/colors'
@@ -23,13 +24,16 @@ export const Input: FC<Props> = ({
 }) => {
   const [focused, focusOn, focusOff] = useBoolean(autoFocus)
   const [hovered, hoverOn, hoverOff] = useBoolean(false)
+  console.log('ROPO')
+  console.log(style)
+  console.log(inputStyle)
   return (
     <View
       //@ts-ignore
       onMouseEnter={hoverOn}
       //@ts-ignore
       onMouseLeave={hoverOff}
-      className={clsx('w-full rounded bg-transparent px-2 h-7 justify-center', {
+      className={clsx('w-full rounded bg-transparent px-2 h-7', {
         'border border-lightBorder dark:border-darkBorder':
           !!bordered && !focused && !hovered,
         'border border-accent': !!bordered && !!focused,
@@ -52,3 +56,12 @@ export const Input: FC<Props> = ({
     </View>
   )
 }
+
+cssInterop(Input, {
+  className: 'style',
+  inputClassName: 'inputStyle',
+  nativeStyleToProp: {
+    // @ts-expect-error
+    borderRadius: 'borderRadius',
+  },
+})

src/widgets/createItem.widget.tsx

@@ -74,15 +74,11 @@ export const CreateItemWidget: FC<Props> = observer(({style}) => {
 
   return (
     <View className="flex-1" style={style}>
-      <BackButton onPress={store.ui.onHide} />
+      <BackButton onPress={store.ui.onHide} className="p-4" />
       {!iconSelectorOpen && (
-        <View
-          className={clsx(`flex-1`, {
-            'pt-10': isApplescript,
-            'justify-center': !isApplescript,
-          })}>
+        <View className={clsx(`flex-1 p-12`)}>
           <View className="flex-row items-center py-2">
-            <Text className="mr-2 flex-1 text-right">Icon</Text>
+            <Text className="w-24 font-bold text-right mr-2">Icon</Text>
             <View className="flex-[1.5]">
               <TouchableOpacity
                 onPress={() => setIconSelectorOpen(!iconSelectorOpen)}
@@ -108,8 +104,8 @@ export const CreateItemWidget: FC<Props> = observer(({style}) => {
             </View>
           </View>
           <View className="flex-row items-center py-2">
-            <Text className="mr-2 flex-1 text-right">Name</Text>
-            <View className="flex-[1.5]">
+            <Text className="w-24 font-bold text-right mr-2">Name</Text>
+            <View className="flex-1">
               <Input
                 placeholder="My favorite shortcut..."
                 bordered
@@ -120,37 +116,29 @@ export const CreateItemWidget: FC<Props> = observer(({style}) => {
             </View>
           </View>
           <View className="flex-row items-center py-2">
-            <Text className="mr-2 flex-1 text-right">Applescript</Text>
-            <View className="flex-[1.5]">
+            <Text className="mr-2 w-24 text-right font-bold">Applescript</Text>
+            <View className="flex-1">
               <MySwitch
                 value={isApplescript}
                 onValueChange={setIsAppleScript}
               />
             </View>
           </View>
-          <View
-            className={clsx(`flex-row py-2`, {
-              'items-start': isApplescript,
-              'items-center': !isApplescript,
-            })}>
-            <Text className="mr-2 flex-1 text-right">
+          <View className="flex-row py-2">
+            <Text className="mr-2 w-24 text-right font-bold">
               {isApplescript ? 'Script' : 'Link'}
             </Text>
-            <View className="flex-[1.5]">
-              <Input
-                placeholder="Link or script..."
-                bordered
-                // broken on 0.71.3
-                // multiline={isApplescript}
-                className={clsx({
-                  'w-64': !isApplescript,
-                  'h-48 w-80 p-2': isApplescript,
-                })}
-                inputClassName={isApplescript ? 'h-48' : undefined}
-                value={text}
-                onChangeText={setText}
-              />
-            </View>
+
+            <Input
+              placeholder="Link or script..."
+              bordered
+              // broken on 0.71.3
+              multiline={isApplescript}
+              className={clsx('flex-1 h-52')}
+              inputClassName={'h-52'}
+              value={text}
+              onChangeText={setText}
+            />
           </View>
         </View>
       )}

tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
-  content: ['./src/**/*.{tsx,ts}'],
+  content: ['./src/**/**.{tsx,ts}'],
   presets: [require('nativewind/preset')],
   theme: {
     minWidth: {