feat: post-launch qa updates 2

src/components/Tooltip/Tooltip.module.scss

@@ -25,8 +25,13 @@
   background-color: $layer-inverse-02;
   color: $text-inverse;
   border-radius: $block-radius;
-  padding: $spacing-03 $spacing-04;
   max-inline-size: rem(264px);
+  .root.size-sm & {
+    padding: $spacing-02 $spacing-03;
+  }
+  .root.size-md & {
+    padding: $spacing-03 $spacing-04;
+  }
 }
 
 .arrow {

src/components/Tooltip/Tooltip.tsx

@@ -24,7 +24,6 @@ import {
   Placement,
   safePolygon,
   shift,
-  useClick,
   useDismiss,
   useFloating,
   useFocus,
@@ -33,23 +32,39 @@ import {
   useRole,
 } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
 import { PropsWithChildren, ReactNode, useRef, useState } from 'react';
 import classes from './Tooltip.module.scss';
 
 export interface TooltipProps {
   content: ReactNode;
   placement?: Placement;
+  size?: 'sm' | 'md';
   asChild?: boolean;
 }
 
 export function Tooltip({
   content,
   placement = 'bottom',
+  size = 'md',
   asChild,
   children,
 }: PropsWithChildren<TooltipProps>) {
   const arrowRef = useRef(null);
 
+  const SIZE = {
+    sm: {
+      ArrowWidth: 8,
+      ArrowHeight: 4,
+      Offset: 3,
+    },
+    md: {
+      ArrowWidth: 9,
+      ArrowHeight: 7,
+      Offset: 5,
+    },
+  }[size];
+
   const [isOpen, setIsOpen] = useState(false);
 
   const { refs, floatingStyles, context } = useFloating({
@@ -58,7 +73,7 @@ export function Tooltip({
     onOpenChange: setIsOpen,
     whileElementsMounted: autoUpdate,
     middleware: [
-      offset(ARROW_HEIGHT + OFFSET),
+      offset(SIZE.ArrowHeight + SIZE.Offset),
       flip({
         fallbackAxisSideDirection: 'start',
       }),
@@ -94,16 +109,16 @@ export function Tooltip({
           <div
             ref={refs.setFloating}
             style={floatingStyles}
-            className={classes.root}
+            className={clsx(classes.root, { [classes[`size-${size}`]]: size })}
             {...getFloatingProps()}
           >
             <div className={classes.content}>{content}</div>
 
             <FloatingArrow
               ref={arrowRef}
               context={context}
-              width={ARROW_WIDTH}
-              height={ARROW_HEIGHT}
+              width={SIZE.ArrowWidth}
+              height={SIZE.ArrowHeight}
               className={classes.arrow}
             />
           </div>
@@ -112,7 +127,3 @@ export function Tooltip({
     </>
   );
 }
-
-const ARROW_WIDTH = 9;
-const ARROW_HEIGHT = 7;
-const OFFSET = 5;

src/modules/apps/ShareApp.tsx

@@ -69,7 +69,7 @@ export function ShareApp({ artifact, onSuccess }: Props) {
         <div className={classes.text}>
           <h3 className={classes.heading}>Public link</h3>
           <p className={classes.description}>
-            Anyone with this link can remix or save this artifact
+            Anyone with this link can save or copy to edit this artifact
           </p>
         </div>
 

src/modules/apps/builder/AppBuilder.module.scss

@@ -124,6 +124,14 @@
   }
 }
 
+.shareButton {
+  padding-inline: rem(7px);
+  &:global(.#{$prefix}--btn:disabled) {
+    border-color: $border-subtle-00;
+    color: $button-gray-active;
+  }
+}
+
 @include breakpoint-down(md) {
   .root {
     display: grid;

src/modules/apps/builder/AppBuilder.tsx

@@ -19,6 +19,8 @@ import { getAppBuilderNavbarProps } from '@/app/(main)/[projectId]/apps/utils';
 import { createMessage } from '@/app/api/threads-messages';
 import { Thread } from '@/app/api/threads/types';
 import { decodeMetadata, encodeMetadata } from '@/app/api/utils';
+import { Tooltip } from '@/components/Tooltip/Tooltip';
+import { useBreakpoint } from '@/hooks/useBreakpoint';
 import { useModal } from '@/layout/providers/ModalProvider';
 import {
   ProjectProvider,
@@ -33,15 +35,7 @@ import {
 } from '@/modules/chat/types';
 import { useLayoutActions } from '@/store/layout';
 import { isNotNull } from '@/utils/helpers';
-import {
-  Button,
-  IconButton,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from '@carbon/react';
+import { Button, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
 import { ArrowLeft, Share } from '@carbon/react/icons';
 import { useQueryClient } from '@tanstack/react-query';
 import clsx from 'clsx';
@@ -73,6 +67,8 @@ export function AppBuilder({ assistant, thread, initialMessages }: Props) {
   const { setCode, getCode } = useAppBuilderApi();
   const { artifact, code } = useAppBuilder();
 
+  const isXlgDown = useBreakpoint('xlgDown');
+
   const handleMessageCompleted = useCallback(
     (newThread: Thread, content: string) => {
       const pythonAppCode = extractCodeFromMessageContent(content);
@@ -142,9 +138,15 @@ export function AppBuilder({ assistant, thread, initialMessages }: Props) {
       }
       inputPlaceholder={{
         initial: isEditAppThread
-          ? 'Describe what this app should do or what you want to change about this app.'
-          : 'Outline what your app should do and how it should work.',
-        ongoing: 'Describe the change(s) you want to make to this app.',
+          ? isXlgDown
+            ? 'Describe the changes to the app'
+            : 'Describe what this app should do or what you want to change about this app.'
+          : isXlgDown
+            ? 'Describe how your app should work'
+            : 'Outline what your app should do and how it should work.',
+        ongoing: isXlgDown
+          ? 'Describe the changes to the app.'
+          : 'Describe the changes you want to make to this app.',
       }}
       onMessageCompleted={handleMessageCompleted}
       onBeforePostMessage={handleBeforePostMessage}
@@ -295,30 +297,40 @@ function AppBuilderContent() {
                 <Tab>Source code</Tab>
               </TabList>
               <div className={classes.appActions}>
-                {artifact && (
-                  <IconButton
-                    label="Share"
+                <Tooltip
+                  content={artifact ? 'Share' : 'Save to share'}
+                  placement="bottom-start"
+                  size="sm"
+                  asChild
+                >
+                  <Button
+                    className={classes.shareButton}
                     kind="tertiary"
                     size="sm"
                     align="bottom"
-                    onClick={() =>
-                      openModal((props) => (
-                        <ProjectProvider
-                          project={project}
-                          organization={organization}
-                        >
-                          <ShareAppModal
-                            {...props}
-                            artifact={artifact}
-                            onSuccess={setArtifact}
-                          />
-                        </ProjectProvider>
-                      ))
+                    disabled={!artifact}
+                    onClick={
+                      artifact
+                        ? () =>
+                            openModal((props) => (
+                              <ProjectProvider
+                                project={project}
+                                organization={organization}
+                              >
+                                <ShareAppModal
+                                  {...props}
+                                  artifact={artifact}
+                                  onSuccess={setArtifact}
+                                />
+                              </ProjectProvider>
+                            ))
+                        : undefined
                     }
                   >
                     <Share />
-                  </IconButton>
-                )}
+                  </Button>
+                </Tooltip>
+
                 <Button
                   kind="secondary"
                   size="sm"

src/modules/chat/ConversationView.tsx

@@ -153,7 +153,7 @@ export const ConversationView = memo(function ConversationView({
             onClick={onShowMobilePreviewButtonClick}
           >
             <Application />
-            <span>Show app preview</span>
+            <span>View app preview</span>
           </Button>
         </div>
       )}