Refactor styling of debug dialog (#2802)

<!--
PR title: GRW-123 / Feature / Awesome new thing
-->

## Describe your changes

![Screenshot 2023-07-18 at 09.38.27.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/OgXegTwxM9IeuXHZyw5h/857b4981-56a0-45af-9515-2b894e265a8e/Screenshot%202023-07-18%20at%2009.38.27.png)


- Update styling for debug dialog elements

<!--
What changes are made?
If there are many changes, a list might be a good format.
If it makes sense, add screenshots and/or screen recordings here.
-->

## Justify why they are needed

- I wanted it go along with input fields

- The button height doesn't match input fields so they look a little strange

## Checklist before requesting a review

- [ ] I have performed a self-review of my code

apps/store/src/components/CartPage/PageDebugDialog.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { Space, Text } from 'ui'
+import { Space } from 'ui'
 import { CopyToClipboard } from '@/components/DebugDialog/CopyToClipboard'
 import { DebugDialog } from '@/components/DebugDialog/DebugDialog'
 import { DebugShopSessionSection } from '@/components/DebugDialog/DebugShopSessionSection'
@@ -12,7 +12,7 @@ import { PageLink } from '@/utils/PageLink'
 export const PageDebugDialog = () => {
   return (
     <DebugDialog>
-      <Space y={1}>
+      <Space y={0.25}>
         <LinkToCartSection />
         <DebugShopSessionSection />
       </Space>
@@ -33,12 +33,5 @@ const LinkToCartSection = () => {
     })
   }, [shopSession, routingLocale])
 
-  return (
-    <Space y={0.25}>
-      <Text as="p" size="sm">
-        Share link to cart
-      </Text>
-      <CopyToClipboard>{cartLink ?? ''}</CopyToClipboard>
-    </Space>
-  )
+  return <CopyToClipboard label="Share link to cart">{cartLink ?? ''}</CopyToClipboard>
 }

apps/store/src/components/DebugDialog/CopyToClipboard.tsx

@@ -2,15 +2,17 @@
 
 import styled from '@emotion/styled'
 import { useEffect, useState } from 'react'
-import { CheckIcon, Text, theme } from 'ui'
-import { SpaceFlex } from '@/components/SpaceFlex/SpaceFlex'
+import { Text, theme } from 'ui'
+import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
 
-export const CopyToClipboard = (props: { children: string }) => {
+export const CopyToClipboard = (props: { label: string; children: string }) => {
+  const { highlight, animationProps } = useHighlightAnimation<HTMLButtonElement>()
   const [copied, setCopied] = useState(false)
 
   const copy = () => {
     navigator.clipboard.writeText(props.children)
     setCopied(true)
+    highlight()
   }
 
   useEffect(() => {
@@ -24,38 +26,34 @@ export const CopyToClipboard = (props: { children: string }) => {
   }, [copied])
 
   return (
-    <CopyToClipboardWrapper>
-      <Elipsis as="p" size="sm">
+    <CopyToClipboardWrapper type="button" onClick={copy} {...animationProps}>
+      <SlimText as="p" size="sm" color="textSecondaryOnGray">
+        {props.label}
+      </SlimText>
+
+      <Elipsis as="p" size="lg">
         {props.children}
       </Elipsis>
-      <CopyToClipboardButton onClick={copy}>
-        {copied ? (
-          <SpaceFlex align="center" space={0.5}>
-            <CheckIcon size="1em" />
-            Copied
-          </SpaceFlex>
-        ) : (
-          'Copy'
-        )}
-      </CopyToClipboardButton>
     </CopyToClipboardWrapper>
   )
 }
 
-const CopyToClipboardWrapper = styled.div({
+const CopyToClipboardWrapper = styled.button({
   display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: theme.space.lg,
+  flexDirection: 'column',
+  justifyContent: 'center',
+  height: '3.25rem',
+  width: '100%',
 
-  backgroundColor: theme.colors.gray100,
-  paddingInline: theme.space.xs,
-  borderRadius: theme.radius.xs,
-  height: '2.5rem',
+  borderRadius: theme.radius.sm,
+  backgroundColor: theme.colors.translucent1,
+  paddingInline: theme.space.md,
 
   '@media (hover: hover)': {
+    cursor: 'pointer',
+
     '&:hover': {
-      backgroundColor: theme.colors.gray200,
+      backgroundColor: theme.colors.translucent2,
     },
   },
 })
@@ -66,7 +64,4 @@ const Elipsis = styled(Text)({
   whiteSpace: 'nowrap',
 })
 
-const CopyToClipboardButton = styled.button({
-  cursor: 'pointer',
-  flexShrink: 0,
-})
+const SlimText = styled(Text)({ lineHeight: 1 })

apps/store/src/components/DebugDialog/DebugDialog.tsx

@@ -36,8 +36,7 @@ const DialogContent = styled(Dialog.Content)({
 })
 
 const DialogWindow = styled(Dialog.Window)({
-  padding: theme.space.lg,
-  paddingTop: theme.space.md,
+  padding: theme.space.md,
   borderBottomRightRadius: theme.radius.sm,
   borderBottomLeftRadius: theme.radius.sm,
   maxWidth: `calc(100% - ${theme.space.xs} * 2)`,

apps/store/src/components/DebugDialog/DebugResumeSessionSection.tsx

@@ -38,7 +38,7 @@ export const DebugResumeSessionSection = () => {
         <TextField name={INPUT_NAME} label="Resume shop session" variant="small" />
       </div>
 
-      <Button size="medium" type="submit">
+      <Button variant="secondary" size="medium" type="submit">
         Go
       </Button>
     </Layout>
@@ -47,7 +47,7 @@ export const DebugResumeSessionSection = () => {
 
 const Layout = styled.form({
   display: 'grid',
-  gridTemplateColumns: '4fr 1fr',
+  gridTemplateColumns: '4fr minmax(8rem, 1fr)',
   alignItems: 'center',
-  gap: theme.space.xs,
+  gap: theme.space.xxs,
 })

apps/store/src/components/DebugDialog/DebugShopSessionSection.tsx

@@ -1,6 +1,5 @@
-import styled from '@emotion/styled'
 import { useRouter } from 'next/router'
-import { Button, Space, Text, theme } from 'ui'
+import { Button, Space } from 'ui'
 import { useShopSession } from '@/services/shopSession/ShopSessionContext'
 import { PageLink } from '@/utils/PageLink'
 import { CopyToClipboard } from './CopyToClipboard'
@@ -15,32 +14,14 @@ export const DebugShopSessionSection = () => {
   const nextUrl = `/${router.locale}${router.pathname}`
 
   return (
-    <Space y={1}>
-      <Layout>
-        <Space y={0.25} style={{ flex: 1 }}>
-          <Text as="p" size="sm">
-            Shop Session
-          </Text>
-          <CopyToClipboard>{shopSession.id}</CopyToClipboard>
-        </Space>
+    <Space y={0.25}>
+      <CopyToClipboard label="Shop Session">{shopSession.id}</CopyToClipboard>
 
-        <Button
-          variant="secondary"
-          size="medium"
-          href={PageLink.apiSessionReset({ next: nextUrl })}
-        >
-          Reset
-        </Button>
-      </Layout>
+      <Button variant="secondary" href={PageLink.apiSessionReset({ next: nextUrl })}>
+        Reset Shop Session
+      </Button>
 
       <DebugResumeSessionSection />
     </Space>
   )
 }
-
-const Layout = styled.div({
-  display: 'grid',
-  gridTemplateColumns: '4fr 1fr',
-  alignItems: 'flex-end',
-  gap: theme.space.xs,
-})

apps/store/src/components/ProductPage/PageDebugDialog.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { Space, Text } from 'ui'
+import { Space } from 'ui'
 import { CopyToClipboard } from '@/components/DebugDialog/CopyToClipboard'
 import { DebugDialog } from '@/components/DebugDialog/DebugDialog'
 import { DebugShopSessionSection } from '@/components/DebugDialog/DebugShopSessionSection'
@@ -13,7 +13,7 @@ import { usePriceIntent } from './PriceIntentContext'
 export const PageDebugDialog = () => {
   return (
     <DebugDialog>
-      <Space y={1}>
+      <Space y={0.25}>
         <DebugShopSessionSection />
         <LinkToOfferSection />
       </Space>
@@ -36,12 +36,5 @@ const LinkToOfferSection = () => {
     })
   }, [routingLocale, shopSession, priceIntent])
 
-  return (
-    <Space y={0.25}>
-      <Text as="p" size="sm">
-        Share link to offer
-      </Text>
-      <CopyToClipboard>{link ?? ''}</CopyToClipboard>
-    </Space>
-  )
+  return <CopyToClipboard label="Share link to offer">{link ?? ''}</CopyToClipboard>
 }