fix: Modify footer links (#52)

Split up the "Theme by LekoArts" into two links
LekoArts · Aug 24, 2019 · 793c94a · 793c94a
1 parent 981d2b2
commit 793c94a
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 9 deletions.
diff --git a/cypress/e2e/cara.ts b/cypress/e2e/cara.ts
@@ -27,6 +27,9 @@ describe(`gatsby-theme-cara`, () => {
     cy.getByLabelText(/toggle dark mode/i)
   })
   it(`should render the footer`, () => {
-    cy.getByText(/theme by lekoarts/i)
+    cy.getByLabelText(`Link to the theme's GitHub repository`)
+      .contains(`Theme`)
+      .getByLabelText(`Link to the theme author's website`)
+      .contains(`LekoArts`)
   })
 })
diff --git a/cypress/e2e/emma.ts b/cypress/e2e/emma.ts
@@ -19,7 +19,10 @@ describe(`gatsby-theme-emma`, () => {
     cy.getByLabelText(/instagram/i).getByLabelText(/dribbble/i)
   })
   it(`should render the footer`, () => {
-    cy.getByText(/theme by lekoarts/i)
+    cy.getByLabelText(`Link to the theme's GitHub repository`)
+      .contains(`Theme`)
+      .getByLabelText(`Link to the theme author's website`)
+      .contains(`LekoArts`)
   })
   it(`should have item with all information`, () => {
     cy.getByLabelText(/view detail page of hermione granger/i).within(() => {

diff --git a/themes/gatsby-theme-cara/src/components/footer.tsx b/themes/gatsby-theme-cara/src/components/footer.tsx
@@ -20,14 +20,29 @@ const Footer = () => {
       </button>
       Copyright &copy; {new Date().getFullYear()}. All rights reserved.
       <br />
-      <Flex sx={{ justifyContent: `center`, alignItems: `center`, mt: 3 }}>
+      <Flex
+        sx={{
+          justifyContent: `center`,
+          alignItems: `center`,
+          mt: 3,
+          color: `text`,
+          fontWeight: `semibold`,
+          a: { color: `text` },
+        }}
+      >
         <img width="30" height="30" src="https://img.lekoarts.de/gatsby/logo_w30.png" alt="LekoArts Logo" />
         {` `}
         <Styled.a
-          sx={{ color: `text`, fontWeight: `semibold`, ml: 2 }}
-          href="https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara"
+          aria-label="Link to the theme's GitHub repository"
+          sx={{ ml: 2 }}
+          href="https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-emma"
         >
-          Theme by LekoArts
+          Theme
+        </Styled.a>
+        <div sx={{ mx: 1 }}>by</div>
+        {` `}
+        <Styled.a aria-label="Link to the theme author's website" href="https://www.lekoarts.de/en">
+          LekoArts
         </Styled.a>
       </Flex>
     </ThemeFooter>

diff --git a/themes/gatsby-theme-emma/src/components/footer.tsx b/themes/gatsby-theme-emma/src/components/footer.tsx
@@ -5,14 +5,29 @@ const Footer = () => (
   <ThemeFooter>
     Copyright &copy; {new Date().getFullYear()}. All rights reserved.
     <br />
-    <Flex sx={{ justifyContent: `center`, alignItems: `center`, mt: 3 }}>
+    <Flex
+      sx={{
+        justifyContent: `center`,
+        alignItems: `center`,
+        mt: 3,
+        color: `text`,
+        fontWeight: `semibold`,
+        a: { color: `text` },
+      }}
+    >
       <img width="30" height="30" src="https://img.lekoarts.de/gatsby/logo_w30.png" alt="LekoArts Logo" />
       {` `}
       <Styled.a
-        sx={{ color: `text`, fontWeight: `semibold`, ml: 2 }}
+        aria-label="Link to the theme's GitHub repository"
+        sx={{ ml: 2 }}
         href="https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-emma"
       >
-        Theme by LekoArts
+        Theme
+      </Styled.a>
+      <div sx={{ mx: 1 }}>by</div>
+      {` `}
+      <Styled.a aria-label="Link to the theme author's website" href="https://www.lekoarts.de/en">
+        LekoArts
       </Styled.a>
     </Flex>
   </ThemeFooter>