feat: add credits

public/locales/en/home.json

@@ -1,5 +1,8 @@
 {
   "select-categorie": "Please select a category",
   "or-create-one": "or create one",
-  "no-link": "No link for <b>{{name}}</b>"
+  "no-link": "No link for <b>{{name}}</b>",
+  "footer": {
+    "made_by": "Made with ❤\uFE0F by"
+  }
 }

public/locales/fr/home.json

@@ -1,5 +1,8 @@
 {
   "select-categorie": "Veuillez séléctionner une categorie",
   "or-create-one": "ou en créer une",
-  "no-link": "Aucun lien pour <b>{{name}}</b>"
+  "no-link": "Aucun lien pour <b>{{name}}</b>",
+  "footer": {
+    "made_by": "Fait avec ❤\uFE0F par"
+  }
 }

src/components/Links/Links.tsx

@@ -12,6 +12,7 @@ import { TFunctionParam } from "types/i18next";
 import LinkItem from "./LinkItem";
 import styles from "./links.module.scss";
 import clsx from "clsx";
+import PATHS from "constants/paths";
 
 export default function Links({
   category,
@@ -98,6 +99,20 @@ export default function Links({
           </LinkTag>
         </div>
       )}
+      <footer className={styles["footer"]}>
+        {t("home:footer.made_by")}{" "}
+        <LinkTag href={PATHS.AUTHOR} target="_blank">
+          Sonny
+        </LinkTag>
+        {" • "}
+        <LinkTag href={PATHS.REPO_GITHUB} target="_blank">
+          Github
+        </LinkTag>
+        {" • "}
+        <LinkTag href={PATHS.EXTENSION} target="_blank">
+          Extension
+        </LinkTag>
+      </footer>
     </div>
   );
 }

src/components/Links/links.module.scss

@@ -25,7 +25,8 @@
 .links-wrapper {
   height: calc(100%); // FIXME: eurk
   min-width: 0;
-  padding: 10px;
+  padding: 0.5em;
+  padding-bottom: 0;
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -189,3 +190,10 @@
     animation: rotate 1s both reverse infinite linear;
   }
 }
+
+.footer {
+  font-size: 0.8em;
+  color: $grey;
+  text-align: center;
+  padding: 0.75em 0 0.25em;
+}

src/components/Modal/Modal.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { GrClose } from "react-icons/gr";
-
 import { motion } from "framer-motion";
 import styles from "./modal.module.scss";
 
@@ -15,6 +14,7 @@ interface ModalProps {
   noHeader?: boolean;
   padding?: string;
 }
+
 export default function Modal({
   close,
   title,
@@ -40,6 +40,7 @@ export default function Modal({
         initial={{ opacity: 0, y: "-6em" }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: "-6em", transition: { duration: 0.1 } }}
+        transition={{ type: "tween" }}
       >
         {!noHeader && (
           <div className={styles["modal-header"]}>

src/components/PageTransition.tsx

@@ -21,11 +21,7 @@ export default function PageTransition({
       className={className}
       initial={{ opacity: 0, scale: 0.95 }}
       animate={{ opacity: 1, scale: 1 }}
-      transition={{
+      transition={{ type: "tween" }}
-        type: "spring",
-        stiffness: 260,
-        damping: 20,
-      }}
       style={style}
     >
       {children}

src/components/SideMenu/sidemenu.module.scss

@@ -21,6 +21,7 @@
   flex-direction: column;
 
   & .action {
+    font-size: 0.95em;
     display: flex;
     gap: 0.5em;
   }

src/constants/paths.ts

@@ -20,6 +20,10 @@ const PATHS = {
   },
   NOT_FOUND: "/404",
   SERVER_ERROR: "/505",
+  AUTHOR: "https://www.sonny.dev/",
+  REPO_GITHUB: "https://github.com/Sonny93/my-links",
+  EXTENSION:
+    "https://chromewebstore.google.com/detail/mylinks/agkmlplihacolkakgeccnbhphnepphma",
 };
 
 export default PATHS;

src/styles/colors.scss

@@ -7,7 +7,7 @@ $white: #fff;
 
 $lightest-grey: #dadce0;
 $light-grey: #f0eef6;
-$grey: #bbb;
+$grey: #aaa;
 
 $black: #333;
 $black-blur: rgba(0, 0, 0, 0.3);

src/styles/globals.scss

@@ -31,7 +31,7 @@ body {
 .App {
   height: 100%;
   width: 1280px;
-  padding: 10px;
+  padding: 0.5em;
   display: flex;
 }
 
@@ -56,6 +56,7 @@ h4,
 h5,
 h6 {
   color: $blue;
+  font-weight: 500;
 }
 
 /* width */