Merge pull request #802 from DTS-STN/button-style

fix: help icon styling update
DTS-STN · May 10, 2023 · da63450 · da63450
2 parents b81a3b2 + bdf0449
commit da63450
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 13 deletions.
diff --git a/src/components/HelpIcon/HelpIcon.css b/src/components/HelpIcon/HelpIcon.css
@@ -1,7 +1,11 @@
-svg {
+.help-icon {
   fill: #2b4380;
 }
 
+.exit-icon {
+  fill: #333333;
+}
+
 .info {
   width: 44px;
   height: 44px;
@@ -11,7 +15,7 @@ svg {
   align-items: center;
 }
 
-svg:hover {
+.help-icon:hover {
   fill: #31708f;
 }
 
@@ -37,25 +41,24 @@ svg:hover {
   outline: none;
 }
 
-.info:focus svg {
+.info:focus .help-icon {
   fill: #31708f;
 }
 
 .info:active {
   border: 1px;
   border-style: solid;
   border-color: #6f6f6f;
-  background: white;
   outline: none;
 }
 
-.info:active svg {
+.info:active .help-icon {
   fill: #31708f;
 }
 
 .modal {
   max-width: 1136px;
-  min-width: 290px;
+  color: #333333;
   padding: 40px;
   border: 1px solid #dddddd;
   box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
@@ -82,6 +85,7 @@ svg:hover {
 .modal-header {
   display: flex;
   justify-content: space-between;
+  min-width: 290px;
 }
 
 .modal-exit {
@@ -98,17 +102,31 @@ svg:hover {
 }
 
 .modal-exit:focus {
-  background-color: #e5e5e5;
-  border: 3px;
-  border-style: solid;
-  border-color: #0e62c9;
   outline: none;
+  background-color: #e5e5e5;
+  border: 3px solid #0e62c9;
+  box-shadow: inset 0 0 2px 2px white;
 }
 
 .modal-exit:hover {
   background-color: #e5e5e5;
 }
 
+.modal-exit:active {
+  background-color: #cccccc;
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+
+.modal-exit:focus .exit-icon {
+  fill: #000000;
+}
+
+.modal-exit:hover .exit-icon {
+  fill: #000000;
+}
+
 .modal-title {
   font-family: "Lato";
   font-weight: 700;
@@ -120,7 +138,7 @@ svg:hover {
 
 .modal-body {
   display: flex;
-  max-width: 947px;
+  width: 95%;
   margin-top: 1rem;
 }
 
@@ -137,6 +155,7 @@ svg:hover {
   }
   .modal-body {
     margin-top: 0rem;
+    width: 100%;
   }
   .modal-footer {
     margin-top: 1rem;

diff --git a/src/components/HelpIcon/HelpIcon.tsx b/src/components/HelpIcon/HelpIcon.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { Modal } from "react-bootstrap";
 import "./HelpIcon.css";
-import exitIcon from "../../assets/exit-icon.svg";
 import { Button } from "../Button/Button";
 
 export interface HelpIconProps {
@@ -28,6 +27,7 @@ export const HelpIcon: React.FC<HelpIconProps> = ({ title, body }) => {
           viewBox="0 0 26 26"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          className="help-icon"
         >
           <path d="M26 13C26 20.1813 20.1792 26 13 26C5.8208 26 0 20.1813 0 13C0 5.8229 5.8208 0 13 0C20.1792 0 26 5.8229 26 13ZM13.3489 4.29839C10.4922 4.29839 8.67016 5.50178 7.23943 7.64054C7.05407 7.91763 7.11608 8.29133 7.38175 8.49277L9.20065 9.87193C9.47349 10.0788 9.86223 10.0296 10.0742 9.76069C11.0106 8.57298 11.6527 7.88424 13.078 7.88424C14.1489 7.88424 15.4735 8.57345 15.4735 9.61187C15.4735 10.3969 14.8254 10.8001 13.768 11.3929C12.5349 12.0841 10.9032 12.9445 10.9032 15.0968V15.3065C10.9032 15.6538 11.1849 15.9355 11.5323 15.9355H14.4677C14.8151 15.9355 15.0968 15.6538 15.0968 15.3065V15.2366C15.0968 13.7446 19.4573 13.6825 19.4573 9.64516C19.4573 6.60473 16.3035 4.29839 13.3489 4.29839ZM13 17.2984C11.6704 17.2984 10.5887 18.3801 10.5887 19.7097C10.5887 21.0392 11.6704 22.121 13 22.121C14.3296 22.121 15.4113 21.0392 15.4113 19.7097C15.4113 18.3801 14.3296 17.2984 13 17.2984Z" />
         </svg>
@@ -39,7 +39,16 @@ export const HelpIcon: React.FC<HelpIconProps> = ({ title, body }) => {
             <Modal.Header className="modal-header">
               <h2 className="modal-title">{title}</h2>
               <button onClick={handleClose} className="modal-exit">
-                <img src={exitIcon} alt="close button" />
+                <svg
+                  width="17"
+                  height="17"
+                  viewBox="0 0 17 17"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="exit-icon"
+                >
+                  <path d="M11.3775 8.25L16.0683 3.55922C16.6439 2.98359 16.6439 2.05031 16.0683 1.47422L15.0258 0.431719C14.4502 -0.143906 13.5169 -0.143906 12.9408 0.431719L8.25 5.1225L3.55922 0.431719C2.98359 -0.143906 2.05031 -0.143906 1.47422 0.431719L0.431719 1.47422C-0.143906 2.04984 -0.143906 2.98312 0.431719 3.55922L5.1225 8.25L0.431719 12.9408C-0.143906 13.5164 -0.143906 14.4497 0.431719 15.0258L1.47422 16.0683C2.04984 16.6439 2.98359 16.6439 3.55922 16.0683L8.25 11.3775L12.9408 16.0683C13.5164 16.6439 14.4502 16.6439 15.0258 16.0683L16.0683 15.0258C16.6439 14.4502 16.6439 13.5169 16.0683 12.9408L11.3775 8.25Z" />
+                </svg>
               </button>
             </Modal.Header>
             <Modal.Body>