From 99f3dbedb9f43678f83ef251a54ef5a5594e5e0c Mon Sep 17 00:00:00 2001
From: Nirmal Kumar <nirmalkc@gmail.com>
Date: Thu, 14 Jul 2022 10:33:14 +0530
Subject: [PATCH] removed the unwanted class and refined share modal

---
 src/common/header/HeaderNav.jsx | 26 +++++++-------------------
 src/common/header/header.css    | 27 ++++++++++++++++++++++++---
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
index d83160caf..1baf804cc 100644
--- a/src/common/header/HeaderNav.jsx
+++ b/src/common/header/HeaderNav.jsx
@@ -7,23 +7,10 @@ import { IoAddSharp, IoShareSocial, IoHeartSharp } from "react-icons/io5";
 import { MdManageSearch, MdClose } from "react-icons/md";
 import SocialShare from "common/components/SocialShare";
 import { GoX } from "react-icons/go";
-import { Modal, Box, Typography, Menu, Link as MuiLink } from "@mui/material";
+import { Modal, Box, Typography, Menu } from "@mui/material";
 import { useContext } from "react";
 import { SearchContext } from "common/search/search-context";
 
-const style = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: 400,
-  bgcolor: "background.paper",
-  borderRadius: 2,
-  boxShadow: 24,
-  px: 4,
-  py: 2,
-};
-
 const HeaderNav = ({ showBrowse }) => {
   const { showShareModal, setShowShareModal } = useContext(SearchContext);
 
@@ -45,11 +32,11 @@ const HeaderNav = ({ showBrowse }) => {
   return (
     <nav>
       <Modal open={showShareModal} onClose={modalClose}>
-        <Box sx={style}>
+        <Box className="modal-share">
           <Typography
-            sx={{ display: "block", textAlign: "center", py: 2 }}
+            sx={{ display: "block", textAlign: "center", py: 2, fontFamily: "var(--ff-default)" }}
             component='div'
-            variant='h5'
+            variant='subtitle1'
           >
             Share about ReactPlay
           </Typography>
@@ -59,10 +46,10 @@ const HeaderNav = ({ showBrowse }) => {
             sx={{ mt: 4, display: "flex", justifyContent: "flex-end" }}
           >
             <button
-              className='btn-default-light btn-size--sm'
+              className='modal-share-close'
               onClick={modalClose}
             >
-              <GoX size='16px' className='icon' /> Cancel
+              <GoX size='16px' className='icon' /> <span className='sr-only'>Cancel</span>
             </button>
           </Box>
         </Box>
@@ -174,6 +161,7 @@ const HeaderNav = ({ showBrowse }) => {
               <a
                 onClick={handleClose}
                 target='_blank'
+                rel='noopener noreferrer'
                 className='my-2 btn-secondary-light'
                 href='https://github.com/sponsors/atapas'
               >
diff --git a/src/common/header/header.css b/src/common/header/header.css
index 5d24987a2..231573771 100644
--- a/src/common/header/header.css
+++ b/src/common/header/header.css
@@ -371,11 +371,32 @@
   font-size: var(--fs-md);
 }
 
-.modal-share .modal-share-body {
-  padding: 0 1.6rem 1rem 1.6rem;
+.modal-share {
+  padding: 1.6rem;
   flex-grow: 1;
 }
 
+.modal-share .modal-share-close {
+  position: absolute;
+  top: .6rem;
+  right: .6rem;
+  padding: .6rem;
+}
+
+.modal-share .modal-share-close .icon {
+  fill: var(--color-neutral-70);
+}
+
+.modal-share .modal-share-close:hover,
+.modal-share .modal-share-close:focus {
+  background-color: var(--color-neutral-30);
+}
+
+.modal-share .modal-share-close:hover .icon,
+.modal-share .modal-share-close:focus .icon {
+  fill: var(--color-neutral-100);
+}
+
 .modal-share .modal-share-footer {
   display: flex;
   flex-direction: row;
@@ -422,7 +443,7 @@
 }
 
 .social-share-buttons .social-share-button .icon {
-  fill: var(--color-neutral-80);
+  fill: var(--color-neutral-70);
 }
 .social-share-buttons .social-share-button:hover .icon {
   fill: var(--color-brand-primary);