feat: changed 'X' button to SVG (#19)

dylandbl · Jul 11, 2022 · 953a530 · 953a530
1 parent fc63cf2
commit 953a530
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/src/components/ReactionPopover/ReactionPopover.tsx b/src/components/ReactionPopover/ReactionPopover.tsx
@@ -8,6 +8,7 @@ import {
   Overlay,
 } from "../../styles/ReactionPopoverStyles";
 import { PopoverProps } from "../../types";
+import { CloseSvg } from "../svg/CloseSvg";
 
 export const ReactionPopover = (props: PopoverProps) => {
   const {
@@ -57,7 +58,7 @@ export const ReactionPopover = (props: PopoverProps) => {
             className={"rqr-close-button " + closeButtonClass}
             onClick={() => setIsPopoverVisible(false)}
           >
-            {closeButtonAlt ? closeButtonAlt : "X"}
+            {closeButtonAlt ? closeButtonAlt : <CloseSvg />}
           </CloseButton>
         )}
         {!hideHeader && (

diff --git a/src/components/svg/CloseSvg.tsx b/src/components/svg/CloseSvg.tsx
@@ -0,0 +1,14 @@
+export const CloseSvg = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384 512"
+      height={12}
+      width={12}
+      fill={"lightgrey"}
+    >
+      {/* Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
+      <path d="M376.6 427.5c11.31 13.58 9.484 33.75-4.094 45.06c-5.984 4.984-13.25 7.422-20.47 7.422c-9.172 0-18.27-3.922-24.59-11.52L192 305.1l-135.4 162.5c-6.328 7.594-15.42 11.52-24.59 11.52c-7.219 0-14.48-2.438-20.47-7.422c-13.58-11.31-15.41-31.48-4.094-45.06l142.9-171.5L7.422 84.5C-3.891 70.92-2.063 50.75 11.52 39.44c13.56-11.34 33.73-9.516 45.06 4.094L192 206l135.4-162.5c11.3-13.58 31.48-15.42 45.06-4.094c13.58 11.31 15.41 31.48 4.094 45.06l-142.9 171.5L376.6 427.5z" />
+    </svg>
+  );
+};
diff --git a/src/styles/ReactionPopoverStyles.ts b/src/styles/ReactionPopoverStyles.ts
@@ -53,20 +53,23 @@ export const OuterDiv = styled.div<{
 `;
 
 export const CloseButton = styled.span`
-  color: lightgrey;
   position: absolute;
   top: 4px;
   right: 8px;
   font-size: 0.8rem;
   cursor: pointer;
   font-weight: bold;
 
+  fill: lightgrey;
   :hover {
-    color: #969696;
+    > svg {
+      fill: #969696;
+    }
   }
-
   :active {
-    color: #434343;
+    > svg {
+      fill: #434343;
+    }
   }
 `;