From 3e74f00f4096982d85b2f58e0fada94fb1915f25 Mon Sep 17 00:00:00 2001
From: Maxim Khvatalin <khmm12@gmail.com>
Date: Mon, 23 Sep 2024 15:47:41 +0300
Subject: [PATCH] feat: add github link to credits section

---
 src/components/Credits/Credits.test.tsx              |  5 ++++-
 .../Credits/__snapshots__/Credits.test.tsx.snap      | 12 ++++++++++++
 src/components/Credits/index.tsx                     | 10 +++++++++-
 src/components/Credits/styles.ts                     |  8 ++++++++
 .../__snapshots__/SettingsButton.test.tsx.snap       |  2 +-
 src/components/SettingsButton/styles.ts              |  2 +-
 6 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Credits/__snapshots__/Credits.test.tsx.snap

diff --git a/src/components/Credits/Credits.test.tsx b/src/components/Credits/Credits.test.tsx
index b03121d..6fff0f0 100644
--- a/src/components/Credits/Credits.test.tsx
+++ b/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()
   })
 })
diff --git a/src/components/Credits/__snapshots__/Credits.test.tsx.snap b/src/components/Credits/__snapshots__/Credits.test.tsx.snap
new file mode 100644
index 0000000..09b0191
--- /dev/null
+++ b/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>
+`;
diff --git a/src/components/Credits/index.tsx b/src/components/Credits/index.tsx
index bf080ec..ac6ec81 100644
--- a/src/components/Credits/index.tsx
+++ b/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>
+  )
 }
diff --git a/src/components/Credits/styles.ts b/src/components/Credits/styles.ts
index 3034a3d..a510e93 100644
--- a/src/components/Credits/styles.ts
+++ b/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',
 })
diff --git a/src/components/SettingsButton/__snapshots__/SettingsButton.test.tsx.snap b/src/components/SettingsButton/__snapshots__/SettingsButton.test.tsx.snap
index 1c69be5..da4f72b 100644
--- a/src/components/SettingsButton/__snapshots__/SettingsButton.test.tsx.snap
+++ b/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"
 >
diff --git a/src/components/SettingsButton/styles.ts b/src/components/SettingsButton/styles.ts
index 3bb4c22..43ce616 100644
--- a/src/components/SettingsButton/styles.ts
+++ b/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',