Added hover effect to supporters cards

Signed-off-by: Suruchi Kumari <[email protected]>
kubeedge · Aug 20, 2023 · d65233b · d65233b
1 parent 69ce661
commit d65233b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/src/components/supporters/index.js b/src/components/supporters/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import SectionContainer from "../sectionContainer";
 import Translate from "@docusaurus/Translate";
 import "./index.scss";
-
+import Link from "@docusaurus/Link";
 const supportList = [
   {
     name: "ARM",
@@ -94,9 +94,10 @@ const supportList = [
     external_link: "https://kubesphere.io",
   },
 
-  { name: "Orange", 
-   img_src: "img/supporters/orange.png", 
-   external_link: "https://www.orange.com/en" 
+  {
+    name: "Orange",
+    img_src: "img/supporters/orange.png",
+    external_link: "https://www.orange.com/en",
   },
   {
     name: "Raisecom Technology",
@@ -168,7 +169,7 @@ const supportList = [
     name: "njhyst",
     img_src: "img/supporters/njhyst.png",
     external_link: "http://njhyst.com/",
-  }
+  },
 ];
 
 export default function Supporters() {
@@ -181,11 +182,9 @@ export default function Supporters() {
         {supportList.map((item, index) => (
           <div key={index} className="supporterBox">
             <div className="imgContainer">
-              <img
-                alt={item.name}
-                src={item.img_src}
-                onClick={() => window.open(item.external_link)}
-              />
+              <Link to={item.external_link}>
+                <img alt={item.name} src={item.img_src} />
+              </Link>
             </div>
           </div>
         ))}

diff --git a/src/components/supporters/index.scss b/src/components/supporters/index.scss
@@ -22,8 +22,14 @@
         padding: 5px 15px 15px;
         text-align: center;
         background-color: #fff;
+        border-style: solid;
+        border-width: 0.5px;
+        border-color: #dde6ed;
+      }
+      .imgContainer:hover {
+        background-color: #eeeeee;
+        border-width: 2px;
       }
-
       img {
         position: relative;
         display: inline-block;
@@ -51,8 +57,8 @@
   }
 }
 
-html[data-theme='dark'] {
+html[data-theme="dark"] {
   .supporterContainer {
     background-color: #242526;
   }
-}
+}