close

Author: jakewheeler

client/src/components/Icons/CloseIcon.tsx

@@ -0,0 +1,19 @@
+interface CloseIconProps {
+  size?: number;
+  className?: string;
+}
+
+export function CloseIcon({ size = 32, className }: CloseIconProps) {
+  return (
+    <svg
+      aria-hidden
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+    </svg>
+  );
+}

client/src/components/Modal/index.tsx

@@ -4,9 +4,9 @@ import {
   DialogPanel,
   DialogTitle,
 } from '@headlessui/react';
-import { Icon } from '@trussworks/react-uswds';
 import { createContext, useContext } from 'react';
 import classNames from 'classnames';
+import { CloseIcon } from '@components/Icons/CloseIcon';
 
 type ModalContextValue = {
   onClose: () => void;
@@ -99,11 +99,7 @@ function ModalCloseButton() {
       onClick={onClose}
       className="absolute top-4 right-4 rounded hover:cursor-pointer"
     >
-      <Icon.Close
-        className="text-gray-500 hover:text-gray-900"
-        size={4}
-        aria-hidden
-      />
+      <CloseIcon className="fill-gray-500 hover:fill-gray-900" />
     </button>
   );
 }

client/src/pages/Configurations/ConfigBuild/CodeSets/Drawer.tsx

@@ -8,10 +8,10 @@
  */
 import React, { useCallback, useEffect, useState } from 'react';
 import { FocusTrap } from 'focus-trap-react';
-import { Icon } from '@trussworks/react-uswds';
 import classNames from 'classnames';
 import { Search } from '@components/Search';
 import { Button } from '@components/Button';
+import { CloseIcon } from '@components/Icons/CloseIcon';
 
 type DrawerProps = {
   title: string | React.ReactNode;
@@ -85,7 +85,7 @@ export function Drawer({
                 onClick={handleClose}
                 aria-label="Close drawer"
               >
-                <Icon.Close size={3} aria-label="X icon indicating closure" />
+                <CloseIcon size={24} />
               </Button>
               <section className="p-4">
                 <h2>{title}</h2>

client/src/pages/Configurations/index.tsx

@@ -32,13 +32,13 @@ import {
 } from '@components/Combobox';
 import { Label } from '@components/Label';
 import { Field } from '@components/Field';
-import { Icon } from '@trussworks/react-uswds';
 import { useUpdateUserNotifications } from '../../api/app-notifications/app-notifications';
 import { useSearch } from '../../hooks/useSearch';
 import { FuseResult, FuseResultMatch, RangeTuple } from 'fuse.js';
 import classNames from 'classnames';
 import { Search } from '@components/Search';
 import { InfoIcon } from '@components/Icons/InfoIcon';
+import { CloseIcon } from '@components/Icons/CloseIcon';
 
 enum ConfigurationStatus {
   on = 'on',
@@ -183,7 +183,7 @@ function AppUpdateBanner({
           variant="unstyled"
           className="ml-4 flex h-11 w-11 items-center justify-center rounded hover:cursor-pointer hover:opacity-75 focus:outline-none"
         >
-          <Icon.Close size={3} aria-hidden className="text-blue-500" />
+          <CloseIcon size={24} className="fill-blue-500" />
         </Button>
       </div>
     </div>