Move code for smaller notice into general notice component

Fixes other notices

public/content.css

@@ -120,17 +120,17 @@
 }
 
 .sponsorSkipNoticeParent {
-	min-width: 350px;
     position: absolute;
 
 	right: 5px;
 	bottom: 100px;
 	right: 10px;
+}
 
-	z-index: 1000;
+.sponsorSkipNoticeParent, .sponsorSkipNotice {
+	min-width: 350px;
 
 	border-radius: 5px;
-
 	border-spacing: 5px 10px;
 	padding-left: 5px;
 	padding-right: 5px;
@@ -142,21 +142,9 @@
 	min-width: 350px;
 	background-color: rgba(28, 28, 28, 0.9);
 
-	border-radius: 5px;
-
-	border-spacing: 5px 10px;
-	padding-left: 5px;
-	padding-right: 5px;
-
-	border-collapse: unset;
-
 	transition: all 0.1s ease-out;
 }
 
-/* .sponsorSkipNotice .miniNotice {
-	bottom: 146px;
-} */
-
 .sponsorSkipNotice .hidden {
 	display: none;
 }

src/components/NoticeComponent.tsx

@@ -21,12 +21,13 @@ export interface NoticeProps {
     startFaded?: boolean,
     firstColumn?: React.ReactElement,
     firstRow?: React.ReactElement,
+    bottomRow?: React.ReactElement[],
 
     smaller?: boolean,
 
     // Callback for when this is closed
     closeListener: () => void,
-    onMouseEnter?: (e: React.MouseEvent<HTMLTableElement, MouseEvent>) => void,
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void,
 
     zIndex?: number,
     style?: React.CSSProperties
@@ -94,14 +95,15 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         }
 
         return (
-            <table id={"sponsorSkipNotice" + this.idSuffix} 
+            <div id={"sponsorSkipNotice" + this.idSuffix} 
-                className={"sponsorSkipObject sponsorSkipNotice" 
+                className={"sponsorSkipObject sponsorSkipNoticeParent"
-                        + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
-                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "")
                     + (this.amountOfPreviousNotices > 0 ? " secondSkipNotice" : "")}
-                style={noticeStyle}
                 onMouseEnter={(e) => this.onMouseEnter(e) }
-                onMouseLeave={() => this.timerMouseLeave()}>
+                onMouseLeave={() => this.timerMouseLeave()}
+                style={noticeStyle} >
+                <table className={"sponsorSkipObject sponsorSkipNotice" 
+                        + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") } >
                     <tbody>
 
                         {/* First row */}
@@ -128,7 +130,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
 
                             {/* Right column */}
                             <td className="sponsorSkipNoticeRightSection"
-                            style={{top: this.props.smaller ? "9.32px" : "8px"}}>
+                                style={{top: "9.32px"}}>
                                 
                                 {/* Time left */}
                                 {this.props.timed ? ( 
@@ -152,8 +154,20 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
 
                         {this.props.children}
 
+                        {!this.props.smaller ? 
+                            this.props.bottomRow
+                        : null}
+
                     </tbody> 
                 </table>
+
+                {/* Add as a hidden table to keep the height constant */}
+                {this.props.smaller ? 
+                    <table style={{visibility: "hidden", paddingTop: "14px"}}>
+                        {this.props.bottomRow}
+                    </table>
+                : null}
+            </div>
         );
     }
 
@@ -182,7 +196,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         )];
     }
 
-    onMouseEnter(event: React.MouseEvent<HTMLTableElement, MouseEvent>): void {
+    onMouseEnter(event: React.MouseEvent<HTMLElement, MouseEvent>): void {
         if (this.props.onMouseEnter) this.props.onMouseEnter(event);
 
         this.fadedMouseEnter();

src/components/SkipNoticeComponent.tsx

@@ -145,11 +145,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
         }
 
-        if (this.state.smaller) {
-            // noticeStyle.transform = "translate(0, -45%)";
-            // noticeStyle.bottom = "148px";
-        }
-
         // If it started out as smaller, always keep the 
         // skip button there
         const firstColumn = this.props.smaller ? (
@@ -157,7 +152,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         ) : null;
 
         return (
-            <div className="sponsorSkipNoticeParent">
             <NoticeComponent noticeTitle={this.state.noticeTitle}
                 amountOfPreviousNotices={this.amountOfPreviousNotices}
                 idSuffix={this.idSuffix}
@@ -169,34 +163,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 style={noticeStyle}
                 ref={this.noticeRef}
                 closeListener={() => this.closeListener()}
-                    smaller={this.props.smaller}
+                smaller={this.state.smaller}
                 firstColumn={firstColumn}
+                bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
                 onMouseEnter={() => this.onMouseEnter() } >
                     
                 {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
                     <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
                 </audio>}
-
-                    {/* Text Boxes */}
-                    {!this.state.smaller ? 
-                        this.getMessageBoxes() 
-                    : null}
-
-                    {!this.state.smaller ? 
-                        this.getBottomRow() 
-                    : null}
-
             </NoticeComponent>
-
-                {/* Text Boxes */}
-                {this.state.smaller ? (
-                    <table style={{visibility: "hidden", paddingTop: "14px"}}>
-                        {this.getMessageBoxes()}
-
-                        {this.getBottomRow()}
-                    </table>
-                ) : null}
-            </div>
         );
     }
 
@@ -367,14 +342,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         }
     }
 
-    getMessageBoxes(): JSX.Element[] | JSX.Element {
+    getMessageBoxes(): JSX.Element[] {
         if (this.state.messages.length === 0) {
             // Add a spacer if there is no text
-            return (
+            return [
                 <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
-                    className="sponsorBlockSpacer">
+                    className="sponsorBlockSpacer"
+                    key={0}>
                 </tr>
-            );
+            ];
         }
 
         const elements: JSX.Element[] = [];