From d675c7841d8b39aadc556a0d1a95a726a0acc67b Mon Sep 17 00:00:00 2001
From: Robin Andeer <robin.andeer@gmail.com>
Date: Mon, 17 Jul 2023 16:45:24 +0200
Subject: [PATCH] Refactor styling of debug dialog

---
 .../components/CartPage/PageDebugDialog.tsx   | 13 ++----
 .../DebugDialog/CopyToClipboard.tsx           | 45 +++++++++----------
 .../components/DebugDialog/DebugDialog.tsx    |  3 +-
 .../DebugDialog/DebugResumeSessionSection.tsx |  6 +--
 .../DebugDialog/DebugShopSessionSection.tsx   | 13 ++----
 .../ProductPage/PageDebugDialog.tsx           | 13 ++----
 6 files changed, 34 insertions(+), 59 deletions(-)

diff --git a/apps/store/src/components/CartPage/PageDebugDialog.tsx b/apps/store/src/components/CartPage/PageDebugDialog.tsx
index 35a9e731b1..554fd6bec9 100644
--- a/apps/store/src/components/CartPage/PageDebugDialog.tsx
+++ b/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>
 }
diff --git a/apps/store/src/components/DebugDialog/CopyToClipboard.tsx b/apps/store/src/components/DebugDialog/CopyToClipboard.tsx
index f4c03b22eb..20858a113e 100644
--- a/apps/store/src/components/DebugDialog/CopyToClipboard.tsx
+++ b/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,36 +26,32 @@ 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,
+  paddingInline: theme.space.md,
   borderRadius: theme.radius.xs,
-  height: '2.5rem',
 
   '@media (hover: hover)': {
+    cursor: 'pointer',
+
     '&:hover': {
       backgroundColor: theme.colors.gray200,
     },
@@ -66,7 +64,4 @@ const Elipsis = styled(Text)({
   whiteSpace: 'nowrap',
 })
 
-const CopyToClipboardButton = styled.button({
-  cursor: 'pointer',
-  flexShrink: 0,
-})
+const SlimText = styled(Text)({ lineHeight: 1 })
diff --git a/apps/store/src/components/DebugDialog/DebugDialog.tsx b/apps/store/src/components/DebugDialog/DebugDialog.tsx
index 9859f5f254..de2e651598 100644
--- a/apps/store/src/components/DebugDialog/DebugDialog.tsx
+++ b/apps/store/src/components/DebugDialog/DebugDialog.tsx
@@ -37,8 +37,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)`,
diff --git a/apps/store/src/components/DebugDialog/DebugResumeSessionSection.tsx b/apps/store/src/components/DebugDialog/DebugResumeSessionSection.tsx
index f6c9e36d99..8fc4d8265f 100644
--- a/apps/store/src/components/DebugDialog/DebugResumeSessionSection.tsx
+++ b/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>
@@ -48,6 +48,6 @@ export const DebugResumeSessionSection = () => {
 const Layout = styled.form({
   display: 'grid',
   gridTemplateColumns: '4fr 1fr',
-  alignItems: 'center',
-  gap: theme.space.xs,
+  alignItems: 'flex-end',
+  gap: theme.space.xxs,
 })
diff --git a/apps/store/src/components/DebugDialog/DebugShopSessionSection.tsx b/apps/store/src/components/DebugDialog/DebugShopSessionSection.tsx
index 915509735d..e0743118b7 100644
--- a/apps/store/src/components/DebugDialog/DebugShopSessionSection.tsx
+++ b/apps/store/src/components/DebugDialog/DebugShopSessionSection.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { useRouter } from 'next/router'
-import { Button, Space, Text, theme } from 'ui'
+import { Button, Space, theme } from 'ui'
 import { useShopSession } from '@/services/shopSession/ShopSessionContext'
 import { PageLink } from '@/utils/PageLink'
 import { CopyToClipboard } from './CopyToClipboard'
@@ -15,14 +15,9 @@ export const DebugShopSessionSection = () => {
   const nextUrl = `/${router.locale}${router.pathname}`
 
   return (
-    <Space y={1}>
+    <Space y={0.25}>
       <Layout>
-        <Space y={0.25} style={{ flex: 1 }}>
-          <Text as="p" size="sm">
-            Shop Session
-          </Text>
-          <CopyToClipboard>{shopSession.id}</CopyToClipboard>
-        </Space>
+        <CopyToClipboard label="Shop Session">{shopSession.id}</CopyToClipboard>
 
         <Button
           variant="secondary"
@@ -42,5 +37,5 @@ const Layout = styled.div({
   display: 'grid',
   gridTemplateColumns: '4fr 1fr',
   alignItems: 'flex-end',
-  gap: theme.space.xs,
+  gap: theme.space.xxs,
 })
diff --git a/apps/store/src/components/ProductPage/PageDebugDialog.tsx b/apps/store/src/components/ProductPage/PageDebugDialog.tsx
index 37b45be73d..1f44e29889 100644
--- a/apps/store/src/components/ProductPage/PageDebugDialog.tsx
+++ b/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>
 }