Icon improvements.

GitOrigin-RevId: 28776bbe1afd88fc33a12a30370a96a5d4faf48f
nkzw-tech · Nov 29, 2024 · e6abc1c · e6abc1c
1 parent ce955d3
commit e6abc1c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/hera/campaign/CampaignEditor.tsx b/hera/campaign/CampaignEditor.tsx
@@ -449,6 +449,7 @@ export default function CampaignEditor({
           hide={hidden}
           inset={0}
           isExpanded={false}
+          size="wide"
           toggleExpanded={() => void 0}
         >
           <Stack
@@ -469,8 +470,20 @@ export default function CampaignEditor({
             </div>
             {slug && (
               <div>
-                <InlineLink className={iconStyle} selectedText={hasCopied}>
-                  <Icon icon={hasCopied ? Check : Copy} />
+                <InlineLink selectedText={hasCopied}>
+                  {hasCopied ? (
+                    <Stack
+                      alignCenter
+                      className={smallTextStyle}
+                      gap={2}
+                      nowrap
+                    >
+                      <Icon height={18} icon={Check} width={18} />
+                      <fbt desc="Text for copying a link">Copied</fbt>
+                    </Stack>
+                  ) : (
+                    <Icon className={iconStyle} icon={Copy} />
+                  )}
                 </InlineLink>
               </div>
             )}
@@ -718,6 +731,12 @@ const primaryButtonStyle = css`
   height: ${TileSize * 1.5}px;
 `;
 
+const smallTextStyle = css`
+  font-size: 0.75em;
+`;
+
 const iconStyle = css`
+  height: 24px;
   margin-top: 4px;
+  width: 24px;
 `;
diff --git a/hera/editor/MapEditor.tsx b/hera/editor/MapEditor.tsx
@@ -944,6 +944,7 @@ export default function MapEditor({
           hide={hidden}
           inset={inset}
           isExpanded={menuIsExpanded}
+          size="wide"
           toggleExpanded={() => setMenuIsExpanded((isExpanded) => !isExpanded)}
         >
           <Stack alignCenter gap nowrap>
@@ -960,7 +961,7 @@ export default function MapEditor({
               </div>
             </Stack>
             <InlineLink className={cx(linkStyle, menuIsExpanded && hideStyle)}>
-              <Icon icon={ChevronDown} />
+              <Icon className={menuIconStyle} icon={ChevronDown} />
             </InlineLink>
           </Stack>
           {menuIsExpanded && (
@@ -1199,6 +1200,11 @@ const linkStyle = css`
   transition: opacity 150ms ease;
 `;
 
+const menuIconStyle = css`
+  width: 24px;
+  height: 24px;
+`;
+
 const hideStyle = css`
   opacity: 0;
 `;