refactor: use github corner from artistic-components

Author: S-N-O-R-L-A-X

package-lock.json

@@ -14,7 +14,7 @@
     "@ui5/webcomponents": "^1.12.2",
     "@ui5/webcomponents-fiori": "^1.12.2",
     "@ui5/webcomponents-react": "^1.13.1",
-    "artistic-components": "^0.4.0",
+    "artistic-components": "^0.5.1",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",

package.json

@@ -1,8 +1,8 @@
-import { MoneyButton } from "artistic-components";
-import Octocat from "./Octocat";
+import { MoneyButton, Octocat } from "artistic-components";
 import { FlexBox } from "@ui5/webcomponents-react";
 import SponsorDialog from "../SponsorDialog/SponsorDialog";
 import { useState } from "react";
+import "./index.css";
 
 export default function Header() {
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
@@ -16,7 +16,7 @@ export default function Header() {
       </p>
       <FlexBox>
         <MoneyButton className="sponsor" onClick={clickHandler}> Sponsor me </MoneyButton>
-        <Octocat />
+        <Octocat href="https://github.com/S-N-O-R-L-A-X/S-N-O-R-L-A-X.github.io"/>
       </FlexBox>
       <SponsorDialog open={isDialogOpen} closeHandler={() => { setIsDialogOpen(false) }} />
     </>

src/components/Header/Header.tsx

@@ -1,44 +1,4 @@
-.github-corner {
-  border-bottom: 0;
-  text-decoration: none;
-  z-index: 1;
-}
-
-.github-corner:hover .octo-body {
-  animation: octocat-push .56s ease-in-out;
-}
-
-@media screen and (max-width: 768px) {
-  .github-corner:hover .octo-arm {
-    animation: none;
-  }
-
-  .github-corner .octo-arm {
-    animation: octocat-push .56s ease-in-out;
-  }
-}
-
-@keyframes octocat-push {
-
-  0%,
-  to {
-    transform: rotate(10deg);
-  }
-
-  20%,
-  60% {
-    transform: rotate(10deg);
-  }
-
-  40%,
-  80% {
-    transform: rotate(10deg);
-  }
-}
-
 .github-corner svg {
-  color: #fff;
-  fill: black;
   height: var(--header-height);
   width: var(--header-height);
 }
@@ -53,7 +13,7 @@
   font-size: 3rem;
   margin: 0;
   background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
-  -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: marquee 5s linear infinite;
 }