chore: Review markup and selectors for the Notice component (#849)

Doist · Nov 11, 2024 · 4db03bc · 4db03bc
1 parent 5fee496
commit 4db03bc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/src/notice/notice.module.css b/src/notice/notice.module.css
@@ -6,22 +6,22 @@
     padding-top: calc(var(--reactist-spacing-xsmall) / 2);
 }
 
-.icon svg {
+.icon {
     display: block;
 }
 
-.tone-info svg {
+.tone-info .icon {
     color: var(--reactist-alert-tone-info-icon);
 }
 
-.tone-positive svg {
+.tone-positive .icon {
     color: var(--reactist-alert-tone-positive-icon);
 }
 
-.tone-caution svg {
+.tone-caution .icon {
     color: var(--reactist-alert-tone-caution-icon);
 }
 
-.tone-critical svg {
+.tone-critical .icon {
     color: var(--reactist-alert-tone-critical-icon);
 }
diff --git a/src/notice/notice.tsx b/src/notice/notice.tsx
@@ -24,9 +24,7 @@ function Notice({ id, children, tone }: NoticeProps) {
         >
             <Columns space="small" alignY="top">
                 <Column width="content">
-                    <Box className={styles.icon}>
-                        <AlertIcon tone={tone} />
-                    </Box>
+                    <AlertIcon tone={tone} className={styles.icon} />
                 </Column>
                 <Column>
                     <Box className={styles.content}>{children}</Box>