[C-3571] Fix modal header styles (#7091)

AudiusProject · Jan 5, 2024 · d162abc · d162abc
1 parent 3e22ea8
commit d162abc
Show file tree

Hide file tree

Showing 18 changed files with 8 additions and 73 deletions.
diff --git a/packages/web/src/components/collection/desktop/PublishConfirmationModal.module.css b/packages/web/src/components/collection/desktop/PublishConfirmationModal.module.css
@@ -1,7 +1,3 @@
-.icon path {
-  fill: var(--neutral);
-}
-
 .footer {
   column-gap: var(--unit-4);
   padding: var(--unit-6);

diff --git a/packages/web/src/components/collection/desktop/PublishConfirmationModal.tsx b/packages/web/src/components/collection/desktop/PublishConfirmationModal.tsx
@@ -56,10 +56,7 @@ export const PublishConfirmationModal = (
   return (
     <Modal {...other} size='small'>
       <ModalHeader>
-        <ModalTitle
-          title={messages.title}
-          icon={<IconRocket className={styles.icon} />}
-        />
+        <ModalTitle title={messages.title} icon={<IconRocket />} />
       </ModalHeader>
       <ModalContent>
         <ModalContentText>

diff --git a/packages/web/src/components/inbox-settings-modal/InboxSettingsModal.module.css b/packages/web/src/components/inbox-settings-modal/InboxSettingsModal.module.css
@@ -7,10 +7,6 @@
   flex-direction: column;
 }
 
-.icon path {
-  fill: var(--neutral);
-}
-
 .saveButton {
   margin: auto;
 }

diff --git a/packages/web/src/components/inbox-settings-modal/InboxSettingsModal.tsx b/packages/web/src/components/inbox-settings-modal/InboxSettingsModal.tsx
@@ -102,10 +102,7 @@ export const InboxSettingsModal = () => {
       isOpen={isVisible}
     >
       <ModalHeader onClose={handleClose}>
-        <ModalTitle
-          title={messages.title}
-          icon={<IconMessage className={styles.icon} />}
-        />
+        <ModalTitle title={messages.title} icon={<IconMessage />} />
       </ModalHeader>
       <ModalContent className={styles.modalContent}>
         <RadioButtonGroup

diff --git a/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.module.css b/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.module.css
@@ -2,10 +2,6 @@
   max-width: 480px;
 }
 
-.icon path {
-  fill: var(--neutral);
-}
-
 .content {
   line-height: 130%;
   font-size: var(--font-l);

diff --git a/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.tsx b/packages/web/src/components/inbox-unavailable-modal/InboxUnavailableModal.tsx
@@ -185,10 +185,7 @@ export const InboxUnavailableModal = () => {
       onClosed={onClosed}
     >
       <ModalHeader onClose={handleCancel}>
-        <ModalTitle
-          icon={<IconMessageLocked className={styles.icon} />}
-          title={messages.title}
-        />
+        <ModalTitle icon={<IconMessageLocked />} title={messages.title} />
       </ModalHeader>
       <ModalContent className={styles.content}>{content}</ModalContent>
       <ModalFooter className={styles.footer}>

diff --git a/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx b/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx
@@ -42,11 +42,7 @@ export const LeavingAudiusModal = () => {
       size={'small'}
     >
       <ModalHeader>
-        <ModalTitle
-          iconClassName={styles.icon}
-          icon={<Icon icon={IconInfo} />}
-          title={messages.title}
-        />
+        <ModalTitle icon={<Icon icon={IconInfo} />} title={messages.title} />
       </ModalHeader>
       <ModalContent className={styles.content}>
         <Text>{messages.body}</Text>

diff --git a/packages/web/src/components/locked-content-modal/LockedContentModal.module.css b/packages/web/src/components/locked-content-modal/LockedContentModal.module.css
@@ -26,10 +26,6 @@
   height: var(--unit-5);
 }
 
-.modalTitleIcon path {
-  fill: var(--neutral-light-2);
-}
-
 .modalContent {
   align-self: stretch;
   display: flex;

diff --git a/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css b/packages/web/src/components/remix-settings-modal/RemixSettingsModal.module.css
@@ -34,10 +34,6 @@
   height: var(--unit-5);
 }
 
-.remixSettingsModalTitleIcon path {
-  fill: var(--neutral-light-2);
-}
-
 .modalTitle {
   color: var(--neutral);
   font-size: var(--font-l);

diff --git a/packages/web/src/components/search-users-modal/SearchUsersModal.module.css b/packages/web/src/components/search-users-modal/SearchUsersModal.module.css
@@ -16,10 +16,6 @@
   flex: 1;
 }
 
-.icon path {
-  fill: var(--neutral);
-}
-
 .iconLight {
   /* Fixes vertical alignment inside IconButton */
   display: block;

diff --git a/packages/web/src/components/search-users-modal/SearchUsersModal.tsx b/packages/web/src/components/search-users-modal/SearchUsersModal.tsx
@@ -144,7 +144,7 @@ export const SearchUsersModal = (props: SearchUsersModalProps) => {
   return (
     <Modal isOpen={isOpen} onClose={handleClose} onClosed={onClosed}>
       <ModalHeader onClose={handleCancel}>
-        <ModalTitle iconClassName={styles.icon} {...titleProps}></ModalTitle>
+        <ModalTitle {...titleProps}></ModalTitle>
       </ModalHeader>
       <div className={styles.modalContent}>
         <div className={styles.search}>

diff --git a/packages/web/src/components/share-modal/components/ShareDialog.module.css b/packages/web/src/components/share-modal/components/ShareDialog.module.css
@@ -21,10 +21,6 @@
   margin-right: var(--unit-2);
 }
 
-.titleIcon path {
-  fill: var(--neutral);
-}
-
 .title {
   font-size: var(--font-xl);
 }

diff --git a/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.module.css b/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.module.css
@@ -2,10 +2,6 @@
   max-width: 488px;
 }
 
-.icon path {
-  fill: var(--neutral-light-2);
-}
-
 .button {
   flex: 1;
 }

diff --git a/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx b/packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx
@@ -70,11 +70,7 @@ export const BlockUserConfirmationModal = ({
   return (
     <Modal bodyClassName={styles.root} isOpen={isVisible} onClose={onClose}>
       <ModalHeader>
-        <ModalTitle
-          title={messages.title}
-          icon={<IconBlockMessages />}
-          iconClassName={styles.icon}
-        />
+        <ModalTitle title={messages.title} icon={<IconBlockMessages />} />
       </ModalHeader>
       <ModalContent className={styles.content}>
         <div>{messages.content(user, isReportAbuse)}</div>

diff --git a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css b/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css
@@ -2,10 +2,6 @@
   max-width: 488px;
 }
 
-.icon path {
-  fill: var(--neutral-light-2);
-}
-
 .button {
   flex: 1;
 }

diff --git a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx b/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx
@@ -47,11 +47,7 @@ export const DeleteChatConfirmationModal = ({
   return (
     <Modal bodyClassName={styles.root} isOpen={isVisible} onClose={onClose}>
       <ModalHeader>
-        <ModalTitle
-          title={messages.title}
-          icon={<IconTrash />}
-          iconClassName={styles.icon}
-        />
+        <ModalTitle title={messages.title} icon={<IconTrash />} />
       </ModalHeader>
       <ModalContent className={styles.content}>{messages.content}</ModalContent>
       <ModalFooter className={styles.footer}>

diff --git a/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.module.css b/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.module.css
@@ -2,10 +2,6 @@
   max-width: 488px;
 }
 
-.icon path {
-  fill: var(--neutral-light-2);
-}
-
 .button {
   flex: 1;
 }

diff --git a/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.tsx b/packages/web/src/pages/chat-page/components/UnblockUserConfirmationModal.tsx
@@ -51,11 +51,7 @@ export const UnblockUserConfirmationModal = ({
   return (
     <Modal bodyClassName={styles.root} isOpen={isVisible} onClose={onClose}>
       <ModalHeader>
-        <ModalTitle
-          title={messages.title}
-          icon={<IconUnblockMessages />}
-          iconClassName={styles.icon}
-        />
+        <ModalTitle title={messages.title} icon={<IconUnblockMessages />} />
       </ModalHeader>
       <ModalContent className={styles.content}>
         {messages.content(user)}