From 12a898232e523077fbfda79585136580768592f5 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Sat, 25 Nov 2023 19:10:14 +0100
Subject: [PATCH] feat: add credits

---
 public/locales/en/home.json                  |  5 ++++-
 public/locales/fr/home.json                  |  5 ++++-
 src/components/Links/Links.tsx               | 15 +++++++++++++++
 src/components/Links/links.module.scss       | 10 +++++++++-
 src/components/Modal/Modal.tsx               |  3 ++-
 src/components/PageTransition.tsx            |  6 +-----
 src/components/SideMenu/sidemenu.module.scss |  1 +
 src/constants/paths.ts                       |  4 ++++
 src/styles/colors.scss                       |  2 +-
 src/styles/globals.scss                      |  3 ++-
 10 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/public/locales/en/home.json b/public/locales/en/home.json
index db70819..9f541b7 100644
--- a/public/locales/en/home.json
+++ b/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"
+  }
 }
diff --git a/public/locales/fr/home.json b/public/locales/fr/home.json
index bef936e..054b9d6 100644
--- a/public/locales/fr/home.json
+++ b/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"
+  }
 }
diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx
index 44729e7..9eefa2d 100644
--- a/src/components/Links/Links.tsx
+++ b/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>
   );
 }
diff --git a/src/components/Links/links.module.scss b/src/components/Links/links.module.scss
index 0fdd617..c17eb3f 100644
--- a/src/components/Links/links.module.scss
+++ b/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;
+}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index abcdaad..f3be88d 100644
--- a/src/components/Modal/Modal.tsx
+++ b/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"]}>
diff --git a/src/components/PageTransition.tsx b/src/components/PageTransition.tsx
index e0669bb..399dfdf 100644
--- a/src/components/PageTransition.tsx
+++ b/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={{
-        type: "spring",
-        stiffness: 260,
-        damping: 20,
-      }}
+      transition={{ type: "tween" }}
       style={style}
     >
       {children}
diff --git a/src/components/SideMenu/sidemenu.module.scss b/src/components/SideMenu/sidemenu.module.scss
index 25dd0d5..876db0c 100644
--- a/src/components/SideMenu/sidemenu.module.scss
+++ b/src/components/SideMenu/sidemenu.module.scss
@@ -21,6 +21,7 @@
   flex-direction: column;
 
   & .action {
+    font-size: 0.95em;
     display: flex;
     gap: 0.5em;
   }
diff --git a/src/constants/paths.ts b/src/constants/paths.ts
index 59f3a3b..2f42ceb 100644
--- a/src/constants/paths.ts
+++ b/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;
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 2735b6d..9375e21 100644
--- a/src/styles/colors.scss
+++ b/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);
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 11b82a9..003c9c5 100644
--- a/src/styles/globals.scss
+++ b/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 */