fix: underline adjustments and code optimisations (#4391)

- Fix underline issue for FireFox browser - Reusable component and cleanup for external link icon
minvws · Aug 31, 2022 · dfa1d26 · dfa1d26
1 parent 796dbec
commit dfa1d26
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 36 deletions.
diff --git a/packages/app/src/components/anchor-tile.tsx b/packages/app/src/components/anchor-tile.tsx
@@ -3,6 +3,7 @@ import { External as ExternalLinkIcon } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
 import styled from 'styled-components';
 import { Anchor, Heading } from '~/components/typography';
+import { Box } from '~/components/base';
 import { asResponsiveArray } from '~/style/utils';
 import { Link } from '~/utils/link';
 import { ExternalLink } from './external-link';
@@ -33,12 +34,12 @@ export function AnchorTile({
       <LinkContainer>
         {external ? (
           <ExternalLink href={href}>
-            <ExternalLinkIconContainer>
-              <IconContainer>
+            <Box display="flex" alignItems="center">
+              <IconWrapper>
                 <ExternalLinkIcon />
-              </IconContainer>
+              </IconWrapper>
               {label}
-            </ExternalLinkIconContainer>
+            </Box>
           </ExternalLink>
         ) : (
           <Link href={href} passHref>
@@ -52,10 +53,10 @@ export function AnchorTile({
   );
 }
 
-const ExternalLinkIconContainer = styled.div(
+export const IconWrapper = styled.span(
   css({
-    display: 'flex',
-    alignItems: 'center',
+    mr: 2,
+    svg: { width: 24, height: 11, display: 'block', maxWidth: 'initial' },
   })
 );
 
@@ -82,13 +83,6 @@ const StyledAnchor = styled(Anchor)(
   })
 );
 
-const IconContainer = styled.span(
-  css({
-    mr: 2,
-    svg: { width: 24, height: 11, display: 'block', maxWidth: 'initial' },
-  })
-);
-
 const LinkContainer = styled.div(
   css({
     flexShrink: 1,

diff --git a/packages/app/src/components/page-information-block/components/page-links.tsx b/packages/app/src/components/page-information-block/components/page-links.tsx
@@ -65,7 +65,7 @@ function TitleWithIcon({ title, icon }: { title: string; icon?: JSX.Element }) {
       <Box display="inline-flex" position="relative">
         <InlineText>
           {lastWord}
-          <IconContainer>{icon}</IconContainer>
+          <IconWrapper>{icon}</IconWrapper>
         </InlineText>
       </Box>
     </InlineText>
@@ -91,12 +91,9 @@ const ListItem = styled.li(
   })
 );
 
-const IconContainer = styled.span(
+const IconWrapper = styled.span(
   css({
-    position: 'absolute',
-    right: -13,
-    top: 0,
-
+    ml: 1,
     svg: {
       width: 11,
       height: 11,

diff --git a/packages/app/src/components/typography.tsx b/packages/app/src/components/typography.tsx
@@ -63,7 +63,11 @@ export const Anchor = styled.a<AnchorProps>(
     props.underline &&
     css({
       textDecoration: props.underline === 'hover' ? 'none' : 'underline',
-      '&:hover, &:focus': { textDecoration: 'underline' },
+      '&:hover, &:focus': {
+        span: {
+          textDecoration: 'underline',
+        },
+      },
     }),
   (props) =>
     props.hoverColor &&

diff --git a/packages/app/src/pages/landelijk/coronamelder.tsx b/packages/app/src/pages/landelijk/coronamelder.tsx
@@ -1,8 +1,7 @@
 import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
-import { External, Phone } from '@corona-dashboard/icons';
+import { External as ExternalLinkIcon, Phone } from '@corona-dashboard/icons';
 import { css } from '@styled-system/css';
 import { isEmpty } from 'lodash';
-import styled from 'styled-components';
 import { WarningTile } from '~/components';
 import { ChartTile } from '~/components/chart-tile';
 import { KpiTile } from '~/components/kpi-tile';
@@ -14,6 +13,8 @@ import { TileList } from '~/components/tile-list';
 import { TimeSeriesChart } from '~/components/time-series-chart';
 import { TwoKpiSection } from '~/components/two-kpi-section';
 import { Heading, Text, BoldText } from '~/components/typography';
+import { Box } from '~/components/base';
+import { IconWrapper } from '~/components/anchor-tile';
 import { Layout } from '~/domain/layout/layout';
 import { NlLayout } from '~/domain/layout/nl-layout';
 import { useIntl } from '~/intl';
@@ -134,10 +135,12 @@ const CoronamelderPage = (props: StaticProps<typeof getStaticProps>) => {
               <Text>{corona_melder_app.rapport.description}</Text>
 
               <Link href={corona_melder_app.rapport.link.href} passHref>
-                <a target="_blank" css={css({ display: 'flex' })}>
-                  <IconContainer>
-                    <External aria-hidden="true" />
-                  </IconContainer>
+                <a target="_blank" css={css({ display: 'flex', mt: 2 })}>
+                  <Box display="flex" alignItems="center">
+                    <IconWrapper>
+                      <ExternalLinkIcon aria-hidden="true" />
+                    </IconWrapper>
+                  </Box>
                   <span css={css({ maxWidth: 200 })}>
                     {corona_melder_app.rapport.link.text}
                   </span>
@@ -189,12 +192,3 @@ const CoronamelderPage = (props: StaticProps<typeof getStaticProps>) => {
 };
 
 export default CoronamelderPage;
-
-const IconContainer = styled.span(
-  css({
-    marginRight: 3,
-    color: 'gray',
-    height: 25,
-    width: 25,
-  })
-);