refactor: adding hover and active effect on edp-unblock page and othe…

…r minor CSS changes
Magic-Fishes · Mar 25, 2024 · 0e022f6 · 0e022f6
1 parent 4577c1b
commit 0e022f6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 51 deletions.
diff --git a/src/components/EdpUnblock/EdpUnblock.css b/src/components/EdpUnblock/EdpUnblock.css
@@ -1,5 +1,5 @@
 html :has(.edpu-page) {
-    background-image: url("/public/images/edpu-background.png");
+    background-image: url("/images/edpu-background.png");
     background-repeat: no-repeat;
     background-size: cover;
 }
@@ -20,31 +20,6 @@ html :has(.edpu-page) {
     right: 40px;
     display: flex;
     gap: 15px;
-    padding: 20px;
-}
-
-.social a {
-    transition: .15s;
-}
-
-.social svg {
-    height: 40px;
-    cursor: pointer;
-}
-
-.social svg path {
-    fill: #B4B4F0;
-    transition: .15s;
-}
-
-.social a:is(:hover, :focus-visible){
-    transform: scale(1.11) rotate(5deg);
-    filter: drop-shadow(0 0 7px #FFF8);
-    outline: none;
-}
-
-.social a:is(:hover, :focus-visible) svg path {
-    fill: white;
 }
 
 .edpu-page {
@@ -184,10 +159,17 @@ html :has(.edpu-page) {
     position: absolute;
     bottom: 20px;
     left: 30px;
+    transition: 0.2s;
 }
 
 .edpu-feedback-link:is(:hover, :focus-visible) {
     color: white;
+    outline: none;
+}
+
+.edpu-feedback-link:active {
+    color: white;
+    opacity: 0.9;
 }
 
 .edpu-about-link {
@@ -198,21 +180,43 @@ html :has(.edpu-page) {
     flex-flow: column;
     justify-content: space-between;
     gap: 10px;
-
+    transition: 0.2s;
+    transition-property: transform;
 }
 
-.edpu-about-link.edpu-about-link h5{
+.edpu-about-link h5{
     color: rgb(var(--text-color-alt));
+    scale: 1.2;
+    transition: 0.2s;
 }
 
 .edpu-about-link svg {
     animation: bounce 3s ease-in-out infinite;
 }
 
 .edpu-about-link svg path {
+    transition: 0.2s;
     stroke: rgb(var(--text-color-alt));
 }
 
+.edpu-about-link:is(:hover, :focus-visible) {
+    transform: translateY(-5px);
+    outline: none;
+}
+
+.edpu-about-link:is(:active) {
+    padding-top: 15px;
+    transform: translateY(15px);
+}
+
+.edpu-about-link:is(:hover, :focus-visible) h5 {
+    color: rgb(var(--text-color-main));
+}
+
+.edpu-about-link:is(:hover, :focus-visible) path {
+    stroke: rgb(var(--text-color-main));
+}
+
 @media only screen and (max-width: 1050px) {
     .edpu-title {
         text-align: center;

diff --git a/src/components/EdpUnblock/EdpUnblock.jsx b/src/components/EdpUnblock/EdpUnblock.jsx
@@ -19,7 +19,7 @@ const browserLogosInfos = {
     Firefox: {
         logo: <FirefoxLogo />,
         available: true,
-        url: "#FIREFOX_EXTENSION",
+        url: "https://addons.mozilla.org/fr/firefox/addon/ecole-directe-plus-unblock/",
     },
     Chrome: {
         logo: <ChromeLogo />,
@@ -55,7 +55,7 @@ const browserLogosInfos = {
 
 const userBrowser = getBrowser()
 
-export default function EdpUnblock({ ...props }) {
+export default function EdpUnblock() {
     const location = useLocation();
 
     const [arrowText, setArrowText] = useState("En savoir plus")
@@ -96,25 +96,6 @@ export default function EdpUnblock({ ...props }) {
         scrollToAbout();
     }, [location.hash])
 
-    // useEffect(() => {
-    //     const htmlClass = document.children[0].classList
-    //     if (htmlClass.contains("light")) {
-    //         console.log("lightMODEDETECTED")
-    //         htmlClass.remove("light");
-    //         htmlClass.add("dark");
-    //         return () => {
-    //             htmlClass.remove("dark");
-    //             htmlClass.add("light");
-    //         }
-    //     } else if (htmlClass.contains("auto")) {
-    //         htmlClass.remove("auto");
-    //         htmlClass.add("dark");
-    //         return () => {
-    //             htmlClass.remove("dark");
-    //             htmlClass.add("auto");
-    //         }
-    //     }
-    // }, [])
     return (<>
         <span className="edpu-back-arrow">
             <GoBackArrow />
@@ -136,15 +117,15 @@ export default function EdpUnblock({ ...props }) {
                         </div>
                     </div>
                     <p>Ecole Directe Plus a besoin de son extension pour accéder au contenu fourni par l’API d’EcoleDirecte</p>
-                    <a href={browserLogosInfos[userBrowser].url} className={`edpu-dowload-link ${browserLogosInfos[userBrowser].available ? "available" : "unavailable"}`}>
+                    <a href={browserLogosInfos[userBrowser].url} target="_blank" className={`edpu-dowload-link ${browserLogosInfos[userBrowser].available ? "available" : "unavailable"}`}>
                         {browserLogosInfos[userBrowser].logo}
                         <span>Ajouter l’extension</span>
                         <DownloadIcon />
                     </a>
                 </div>
                 <Link to="/feedback" className="edpu-feedback-link">Besoin d’aide ? </Link>
                 <Link ref={aboutButtonRef} to="#about" className="edpu-about-link" replace onClick={() => { location.hash === "#about" && scrollToAbout() }}>
-                    <h5>{arrowText}</h5>
+                    <h5>En savoir plus</h5>
                     <AboutArrow viewBox="0 36 100 26" />
                 </Link>
             </main>