removed the unwanted class and refined share modal

samvardhan777 · Jul 14, 2022 · 99f3dbe · 99f3dbe
1 parent c566fe2
commit 99f3dbe
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 22 deletions.
diff --git 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
@@ -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);