feat: add github link to credits section

src/components/Credits/Credits.test.tsx

@@ -5,6 +5,9 @@ describe('Credits', () => {
   it('renders correctly', async () => {
     render(() => <Credits />)
 
-    expect(screen.getByText('Made by khmm12')).toBeInTheDocument()
+    const $credits = screen.getByText('Made by khmm12')
+
+    expect($credits).toBeInTheDocument()
+    expect($credits).toMatchSnapshot()
   })
 })

src/components/Credits/__snapshots__/Credits.test.tsx.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Credits > renders correctly 1`] = `
+<a
+  class="d_inline-block td_none font-style_italic tt_uppercase c_slate.700 dark:c_slate.300 hover:c_black hover:dark:c_white trf_scale(1) hover:trf_scale(1.05) trs_0.1s_transform_ease-out,_0.1s_color_ease-out"
+  href="https://github.com/khmm12/minimal-chrome-tab"
+  rel="noreferrer"
+  target="_blank"
+>
+  Made by khmm12
+</a>
+`;

src/components/Credits/index.tsx

@@ -2,6 +2,14 @@ import type { JSX } from 'solid-js'
 import { css } from 'styled-system/css'
 import * as s from './styles'
 
+const link = 'https://github.com/khmm12/minimal-chrome-tab'
+
 export default function Credits(): JSX.Element {
-  return <div class={css(s.container)}>Made by khmm12</div>
+  return (
+    <div class={css(s.container)}>
+      <a class={css(s.link)} href={link} target="_blank" rel="noreferrer">
+        Made by khmm12
+      </a>
+    </div>
+  )
 }

src/components/Credits/styles.ts

@@ -3,6 +3,14 @@ import { css } from 'styled-system/css'
 export const container = css.raw({
   textAlign: 'right',
   fontSize: '1.6rem',
+})
+
+export const link = css.raw({
+  display: 'inline-block',
+  textDecoration: 'none',
   fontStyle: 'italic',
   textTransform: 'uppercase',
+  color: { base: 'slate.700', _dark: 'slate.300', _hover: { base: 'black', _dark: 'white' } },
+  transform: { base: 'scale(1)', _hover: 'scale(1.05)' },
+  transition: '0.1s transform ease-out, 0.1s color ease-out',
 })

src/components/SettingsButton/__snapshots__/SettingsButton.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SettingsButton > renders a button 1`] = `
 <button
   aria-disabled="false"
-  class="w_3.2rem h_3.2rem flex_0_0_auto c_black/60 dark:c_white/60 hover:c_black hover:dark:c_white ap_none p_0.4rem bg_transparent bd_none cursor_pointer disabled:cursor_default trs_0.1s_color_ease-out fs_2.4rem group"
+  class="w_3.2rem h_3.2rem flex_0_0_auto c_slate.700 dark:c_slate.300 hover:c_black hover:dark:c_white ap_none p_0.4rem bg_transparent bd_none cursor_pointer disabled:cursor_default trs_0.1s_color_ease-out fs_2.4rem group"
   title="Open settings"
   type="button"
 >

src/components/SettingsButton/styles.ts

@@ -4,7 +4,7 @@ export const button = css.raw({
   width: '3.2rem',
   height: '3.2rem',
   flex: '0 0 auto',
-  color: { base: 'black/60', _dark: 'white/60', _hover: { base: 'black', _dark: 'white' } },
+  color: { base: 'slate.700', _dark: 'slate.300', _hover: { base: 'black', _dark: 'white' } },
   appearance: 'none',
   padding: '0.4rem',
   background: 'transparent',