fix pack title ui

andrew-bierman · Dec 19, 2024 · 92fc6dd · 92fc6dd
1 parent 793301a
commit 92fc6dd
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 54 deletions.
diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
@@ -67,6 +67,7 @@ export const CustomCard = ({
             padding: 15,
             paddingBottom: isWeb ? 0 : 10,
             flexDirection: 'row',
+            flexWrap: 'wrap',
             justifyContent: 'space-between',
             alignItems: 'center',
             gap: 16,

diff --git a/packages/app/components/card/CustomCardHeader.tsx b/packages/app/components/card/CustomCardHeader.tsx
@@ -36,47 +36,49 @@ export const CustomCardHeader = ({
 
   return (
     <>
-      <RStack style={{ flex: 1 }}>
+      <RStack style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
         {typeof title === 'string' ? <RText>{title}</RText> : title}
       </RStack>
-      {data.type != 'packTemplate' && (
-        <ConnectionGate mode="connected">
-          <View>
-            <RLink
-              href={`/profile/${ownerId}`}
-              style={{ textDecoration: 'none' }}
-            >
-              <RText>
-                {user?.id === ownerId
-                  ? 'Your Profile'
-                  : `View ${
-                      data.owners && data.owners?.length
-                        ? data.owners[0]?.name
-                        : 'Profile'
-                    }`}
-              </RText>
-            </RLink>
-          </View>
-          {user?.id !== ownerId && COPY_TYPES.includes(data.type) && (
-            <RButton
-              onPress={() => {
-                setIsCopyPackModalOpen(true);
-              }}
-              style={{ backgroundColor: 'transparent' }}
-            >
-              <RText style={{ color: 'black' }}>Copy Pack</RText>
-            </RButton>
-          )}
-        </ConnectionGate>
-      )}
-      {actionsComponent}
-      <CopyPackModal
-        currentPack={data}
-        isOpen={isCopyPackModalOpen}
-        onClose={() => {
-          setIsCopyPackModalOpen(false);
-        }}
-      />
+      <RStack style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+        {data.type != 'packTemplate' && (
+          <ConnectionGate mode="connected">
+            <View>
+              <RLink
+                href={`/profile/${ownerId}`}
+                style={{ textDecoration: 'none' }}
+              >
+                <RText>
+                  {user?.id === ownerId
+                    ? 'Your Profile'
+                    : `View ${
+                        data.owners && data.owners?.length
+                          ? data.owners[0]?.name
+                          : 'Profile'
+                      }`}
+                </RText>
+              </RLink>
+            </View>
+            {user?.id !== ownerId && COPY_TYPES.includes(data.type) && (
+              <RButton
+                onPress={() => {
+                  setIsCopyPackModalOpen(true);
+                }}
+                style={{ backgroundColor: 'transparent' }}
+              >
+                <RText style={{ color: 'black' }}>Copy Pack</RText>
+              </RButton>
+            )}
+          </ConnectionGate>
+        )}
+        {actionsComponent}
+        <CopyPackModal
+          currentPack={data}
+          isOpen={isCopyPackModalOpen}
+          onClose={() => {
+            setIsCopyPackModalOpen(false);
+          }}
+        />
+      </RStack>
     </>
   );
 };
diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -3,7 +3,7 @@ import useTheme from 'app/hooks/useTheme';
 import { CustomCardHeader } from '../CustomCardHeader';
 import { AntDesign, MaterialIcons } from '@expo/vector-icons';
 import { useAuthUser } from 'app/modules/auth';
-import { ActionsDropdownComponent } from '@packrat/ui';
+import { ActionsDropdownComponent, RText } from '@packrat/ui';
 import { EditableText } from '@packrat/ui/src/EditableText';
 import RStack from '@packrat/ui/src/RStack';
 import RIconButton from '@packrat/ui/src/RIconButton';
@@ -51,13 +51,7 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
         data={data}
         ownerId={data?.owner_id}
         title={
-          <RStack
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
+          <>
             {Platform.OS === 'web' && (
               <RIconButton
                 backgroundColor="transparent"
@@ -78,13 +72,8 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
               />
             )}
 
-            <EditableText
-              isLoading={isLoading}
-              defaultValue={title}
-              isFocused={isTitleEditMode}
-              onSave={handleSaveTitle}
-            />
-          </RStack>
+            <RText style={{ fontSize: 24, fontWeight: 600 }}>{title}</RText>
+          </>
         }
         actionsComponent={
           user?.id === data.owner_id && (