fix: share event ui change

fixed

component/layout/EventDetails/ShareEvent.jsx

@@ -5,59 +5,68 @@ import {
   FacebookShareButton,
   LinkedinShareButton,
   TwitterShareButton,
-  WhatsappShareButton
+  WhatsappShareButton,
+  EmailShareButton,
 } from "react-share";
-import { FacebookIcon, TwitterIcon, LinkedinIcon, WhatsappIcon } from "react-share";
+import { FacebookIcon, TwitterIcon, LinkedinIcon, WhatsappIcon, EmailIcon } from "react-share";
 function ShareEvent({ hidewindow, location }) {
   const url = location;
   const copyToClipBoard = () => {
     navigator.clipboard.writeText(url);
     notify("Copied to clipboard", "success");
   };
   return (
-    <div className={styles.cover}>
-      <div className={styles.card}>
+    <div className={styles.cover} >
+      <div className={styles.card} >
         <div className={styles.topbar}>
           <div>Share</div>
           <div onClick={hidewindow} className={styles.close}>
             <svg
-              width="16"
-              height="16"
+              width="12"
+              height="12"
               viewBox="0 0 12 12"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 d="M6 4.66688L10.6669 0L12 1.33312L7.33312 6L12 10.6669L10.6669 12L6 7.33312L1.33312 12L0 10.6669L4.66688 6L0 1.33312L1.33312 0L6 4.66688Z"
-                fill="#ffffff"
+                fill="#C6C6C6"
               />
             </svg>
           </div>
         </div>
-        <div>
+        <div className={styles.iconset}>
           <FacebookShareButton url={url} className={styles.icons}>
-            <FacebookIcon size={32} />
+            <FacebookIcon className={styles.iconimage} round={true} />
           </FacebookShareButton>
-          <LinkedinShareButton url={url} className={styles.icons}>
-            <LinkedinIcon size={32} />
-          </LinkedinShareButton>
-          <TwitterShareButton url={url} className={styles.icons}>
-            <TwitterIcon size={32} />
-          </TwitterShareButton>
           <WhatsappShareButton url={url} className={styles.icons}>
-            <WhatsappIcon size={32} />
+            <WhatsappIcon className={styles.iconimage} round={true} />
           </WhatsappShareButton>
+          <TwitterShareButton url={url} className={styles.icons}>
+            <TwitterIcon className={styles.iconimage} round={true} />
+          </TwitterShareButton>
+          <EmailShareButton url={url} className={styles.icons}>
+            <EmailIcon className={styles.iconimage} round={true} />
+          </EmailShareButton>
+          <LinkedinShareButton url={url} className={styles.icons}>
+            <LinkedinIcon className={styles.iconimage} round={true} />
+          </LinkedinShareButton>
+
+
         </div>
-        <div>
+        <div className={styles.linkbox}>
           <input
-            onClick={copyToClipBoard}
+
             type="text"
             name="link"
             id="link"
             readOnly={true}
             value={url}
             className={styles.link}
           />
+          <div className={styles.copy} onClick={copyToClipBoard}>
+            copy
+          </div>
         </div>
       </div>
     </div>

component/layout/EventDetails/ShareEvent.module.scss

@@ -1,41 +1,95 @@
-.cover{
+.cover {
   @apply w-full h-screen flex flex-row justify-center items-center z-50 fixed;
   background-color: rgba($color: #000000, $alpha: 0.6);
 }
-.card{
-  @apply w-full md:w-1/3 h-auto p-4 mx-4;
-  background-color: rgb(29, 28, 28);
+.card {
+  @apply p-6 mx-4 bg-white;
+  width: 591px;
+  height: 270px;
+  border-radius: 14px;
 }
-.topbar{
-  @apply flex justify-between text-white font-bold text-xl my-2;
+.topbar {
+  @apply flex justify-between font-bold text-xl my-2;
 }
-.link{
-  @apply p-2 w-full bg-gray-700 text-gray-100 mt-4 cursor-pointer;
+.link {
+  @apply p-2;
+  color: #adadad;
+  width: 400px;
+  background-color: #f8fafc;
 }
-.facebook{
+.facebook {
   margin: 10px 10px;
   cursor: pointer;
-  svg:hover{
+  svg:hover {
     fill: #0e76a8;
   }
 }
-.instagram{
+.instagram {
   margin: 10px 10px;
   cursor: pointer;
-  svg:hover{
+  svg:hover {
     fill: #3f729b;
   }
 }
-.twitter{
+.twitter {
   margin: 10px 10px;
   cursor: pointer;
-  svg:hover{
+  svg:hover {
     fill: #00acee;
   }
 }
-.close{
+.close {
   cursor: pointer;
 }
-.icons{
-  margin-right: 10px;
-}
+.icons {
+  margin-right: 40px;
+  margin-top: 22px;
+}
+.linkbox {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  margin-top: 34px;
+  background-color: #f8fafc;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.copy {
+  font-size: 18px;
+  color: #4a81ef;
+  font-weight: 600;
+  cursor: pointer;
+}
+@media only screen and (max-width: 420px) {
+  .link {
+    width: 200px;
+  }
+  .iconset {
+    overflow-x: scroll;
+    display: flex;
+    width: 100%;
+    margin-top: 10px;
+  }
+  .iconset::-webkit-scrollbar{
+    display: none;
+  }
+  .card {
+    width: 360px;
+  }
+  .icons {
+    margin-right: 20px;
+    margin-top: 0px;
+  }
+  .iconimage{
+    width: 40px;
+  }
+  .linkbox{
+    margin-top: 5px;
+  }
+  .card{
+    height: auto;
+    padding: 20px;
+  }
+}