feat: change project buttons

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>
   )

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>
   )
 }

src/icons/Play.tsx → 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>
   )
 }

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>
+  )
+}

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',