From 025d9c90c77282b070338dffda1dfa5d92810fc7 Mon Sep 17 00:00:00 2001
From: Karol Stawowski <stawowski.dev@gmail.com>
Date: Wed, 1 Nov 2023 16:50:12 +0100
Subject: [PATCH] feat: change project buttons

---
 src/components/Projects/LivePreviewButton.tsx |  6 ++---
 src/components/Projects/RepositoryButton.tsx  |  4 +--
 src/icons/{Play.tsx => ExternalLink.tsx}      | 13 +++++-----
 src/icons/Link.tsx                            | 26 +++++++++++++++++++
 tailwind.config.js                            |  4 ++-
 5 files changed, 40 insertions(+), 13 deletions(-)
 rename src/icons/{Play.tsx => ExternalLink.tsx} (51%)
 create mode 100644 src/icons/Link.tsx

diff --git a/src/components/Projects/LivePreviewButton.tsx b/src/components/Projects/LivePreviewButton.tsx
index 9b257fa..f2a7cbb 100644
--- a/src/components/Projects/LivePreviewButton.tsx
+++ b/src/components/Projects/LivePreviewButton.tsx
@@ -1,4 +1,4 @@
-import { Play } from '../../icons/Play'
+import { Link } from '../../icons/Link'
 
 type LivePreviewButtonProps = { url: string; name: string }
 
@@ -8,8 +8,8 @@ export const LivePreviewButton = ({
 }: LivePreviewButtonProps): JSX.Element => {
   return (
     <a href={url} target="_blank" aria-label={`Live ${name} project preview`}>
-      <span className="block p-1 text-green-600 bg-green-200 rounded-md fill-current outline outline-2 outline-green-600 hover:outline-green-300">
-        <Play />
+      <span className="grid text-black rounded-md shadow-lg fill-current w-11 h-11 bg-button hover:bg-button-hover place-items-center">
+        <Link width={28} height={28} />
       </span>
     </a>
   )
diff --git a/src/components/Projects/RepositoryButton.tsx b/src/components/Projects/RepositoryButton.tsx
index c2cf992..b89a597 100644
--- a/src/components/Projects/RepositoryButton.tsx
+++ b/src/components/Projects/RepositoryButton.tsx
@@ -12,11 +12,11 @@ export const RepositoryButton = ({
   return (
     <a
       href={url}
-      className="flex items-center justify-center w-10 h-10 bg-white rounded-lg shadow-2xl outline outline-2 outline-secondary hover:outline-text"
+      className="grid rounded-lg shadow-lg place-items-center w-11 h-11 bg-button hover:bg-button-hover"
       target="_blank"
       aria-label={`Github repository of ${name}`}
     >
-      <Github width={32} height={32} />
+      <Github width={28} height={28} />
     </a>
   )
 }
diff --git a/src/icons/Play.tsx b/src/icons/ExternalLink.tsx
similarity index 51%
rename from src/icons/Play.tsx
rename to src/icons/ExternalLink.tsx
index 4874fe3..e4c2e8f 100644
--- a/src/icons/Play.tsx
+++ b/src/icons/ExternalLink.tsx
@@ -1,11 +1,12 @@
 import { FC, SVGProps } from 'react'
 
-export const Play: FC<SVGProps<SVGSVGElement>> = ({
+export const ExternalLink: FC<SVGProps<SVGSVGElement>> = ({
   ...props
 }): JSX.Element => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-external-link"
       width={32}
       height={32}
       viewBox="0 0 24 24"
@@ -16,12 +17,10 @@ export const Play: FC<SVGProps<SVGSVGElement>> = ({
       strokeLinejoin="round"
       {...props}
     >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path
-        d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z"
-        strokeWidth="0"
-        fill="currentColor"
-      />
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
+      <path d="M11 13l9 -9"></path>
+      <path d="M15 4h5v5"></path>
     </svg>
   )
 }
diff --git a/src/icons/Link.tsx b/src/icons/Link.tsx
new file mode 100644
index 0000000..3fbc124
--- /dev/null
+++ b/src/icons/Link.tsx
@@ -0,0 +1,26 @@
+import { FC, SVGProps } from 'react'
+
+export const Link: FC<SVGProps<SVGSVGElement>> = ({
+  ...props
+}): JSX.Element => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-link"
+      width={32}
+      height={32}
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="currentColor"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M9 15l6 -6"></path>
+      <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
+      <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
+    </svg>
+  )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 388c8b3..073baad 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,11 +13,13 @@ module.exports = {
         console: ['consolas', 'monaco', 'monospace'],
       },
       colors: {
-        primary: '#00ABBD',
+        primary: '#00BCD1',
         secondary: '#0C2F3B',
         accent: '#3CB0D7',
         background: '#030A0D',
         text: '#D5EEF6',
+        button: '#e1f8ff',
+        'button-hover': '#bfd3d9',
         'monitor-inner-border': '#32323C',
         'monitor-side-pannel': '#0B0D14',
         'monitor-outer-border': '#393A3C',