Use style components for button styles

mattmilburn · Dec 14, 2024 · 46c7da9 · 46c7da9
1 parent acda80e
commit 46c7da9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/admin/src/components/CopyLinkButton/index.tsx b/admin/src/components/CopyLinkButton/index.tsx
@@ -1,6 +1,7 @@
 import { memo, useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import styled from 'styled-components';
 import { Button } from '@strapi/design-system';
 import { Link as LinkIcon } from '@strapi/icons';
 import { useNotification } from '@strapi/strapi/admin';
@@ -12,6 +13,10 @@ export interface CopyLinkButtonProps {
   url: string;
 }
 
+const ButtonStyled = styled(Button)`
+  width: 100%;
+`;
+
 const CopyLinkButton = ({ isDraft, url }: CopyLinkButtonProps) => {
   const { formatMessage } = useIntl();
   const { toggleNotification } = useNotification();
@@ -28,7 +33,7 @@ const CopyLinkButton = ({ isDraft, url }: CopyLinkButtonProps) => {
 
   return (
     <CopyToClipboard text={url} onCopy={handleOnCopy}>
-      <Button size="S" startIcon={<LinkIcon />} variant="secondary" style={{ width: '100%' }}>
+      <ButtonStyled size="S" startIcon={<LinkIcon />} variant="secondary">
         {formatMessage(
           isDraft
             ? {
@@ -40,7 +45,7 @@ const CopyLinkButton = ({ isDraft, url }: CopyLinkButtonProps) => {
                 defaultMessage: 'Copy link',
               }
         )}
-      </Button>
+      </ButtonStyled>
     </CopyToClipboard>
   );
 };

diff --git a/admin/src/components/PreviewButton/index.tsx b/admin/src/components/PreviewButton/index.tsx
@@ -1,5 +1,6 @@
 import { memo, useCallback } from 'react';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 import { LinkButton } from '@strapi/design-system';
 import { ExternalLink } from '@strapi/icons';
 
@@ -10,6 +11,15 @@ export interface PreviewButtonProps extends PreviewButtonStateConfig {
   isDraft: boolean;
 }
 
+const LinkButtonStyled = styled(LinkButton)`
+  width: 100%;
+
+  // Fix visited state color for the icon.
+  &:visited {
+    color: ${({ theme }) => theme.colors.primary700};
+  }
+`;
+
 const PreviewButton = ({ isDraft, openTarget, url }: PreviewButtonProps) => {
   const { formatMessage } = useIntl();
 
@@ -27,15 +37,14 @@ const PreviewButton = ({ isDraft, openTarget, url }: PreviewButtonProps) => {
   );
 
   return (
-    <LinkButton
+    <LinkButtonStyled
       disabled={!url}
       href={url}
       onClick={handleClick}
       size="S"
       startIcon={<ExternalLink />}
       target="_blank"
       variant="secondary"
-      style={{ width: '100%' }}
     >
       {formatMessage(
         isDraft
@@ -48,7 +57,7 @@ const PreviewButton = ({ isDraft, openTarget, url }: PreviewButtonProps) => {
               defaultMessage: 'Open live view',
             }
       )}
-    </LinkButton>
+    </LinkButtonStyled>
   );
 };