Change edit time button style

hanydd · May 11, 2024 · 9867b4f · 9867b4f
1 parent 16bcbb2
commit 9867b4f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 36 deletions.
diff --git a/public/content.css b/public/content.css
@@ -506,9 +506,20 @@
 /* Submission Notice */
 
 .sponsorTimeDisplay {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 1%;
+
 	font-size: 15px;
 }
 
+.sponsorTimeStackButton {
+	display: inline-flex;
+	flex-direction: column;
+	gap: 0.2em;
+}
+
 .sponsorTimeEditButton {
 	text-decoration: underline;
 

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
@@ -127,64 +127,65 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     style={timeDisplayStyle}
                     className="sponsorTimeDisplay">
 
+                    <span className="sponsorTimeStackButton">
+                        <span id={"nowButton0" + this.idSuffix}
+                            className="sponsorNowButton"
+                            onClick={() => this.setTimeToNow(0)}>
+                                {chrome.i18n.getMessage("bracketNow")}
+                        </span>
+
                         {this.state.selectedActionType !== ActionType.Poi ? (
                             <span id={"startButton" + this.idSuffix}
                                 className="sponsorNowButton"
                                 onClick={() => this.setTimeTo(0, 0)}>
                                     {chrome.i18n.getMessage("bracketStart")}
                             </span>
                         ): ""}
+                    </span>
 
-                        &nbsp;
-
-                        <span id={"nowButton0" + this.idSuffix}
-                            className="sponsorNowButton"
-                            onClick={() => this.setTimeToNow(0)}>
-                                {chrome.i18n.getMessage("bracketNow")}
-                        </span>
-                        <input id={"submittingTime0" + this.idSuffix}
-                            className="sponsorTimeEdit sponsorTimeEditInput"
-                            type="text"
-                            style={{color: "inherit", backgroundColor: "inherit"}}
-                            value={this.state.sponsorTimeEdits[0] ?? ""}
-                            onKeyDown={(e) => e.stopPropagation()}
-                            onKeyUp={(e) => e.stopPropagation()}
-                            onChange={(e) => this.handleOnChange(0, e, sponsorTime, e.target.value)}
-                            onWheel={(e) => this.changeTimesWhenScrolling(0, e, sponsorTime)}>
-                        </input>
-
-                        {this.state.selectedActionType !== ActionType.Poi ? (
+                    <input id={"submittingTime0" + this.idSuffix}
+                        className="sponsorTimeEdit sponsorTimeEditInput"
+                        type="text"
+                        style={{color: "inherit", backgroundColor: "inherit"}}
+                        value={this.state.sponsorTimeEdits[0] ?? ""}
+                        onKeyDown={(e) => e.stopPropagation()}
+                        onKeyUp={(e) => e.stopPropagation()}
+                        onChange={(e) => this.handleOnChange(0, e, sponsorTime, e.target.value)}
+                        onWheel={(e) => this.changeTimesWhenScrolling(0, e, sponsorTime)}>
+                    </input>
+
+                    {this.state.selectedActionType !== ActionType.Poi ? (
+                        <>
                             <span>
-                                <span>
-                                    {" " + chrome.i18n.getMessage("to") + " "}
-                                </span>
-
-                                <input id={"submittingTime1" + this.idSuffix}
-                                    className="sponsorTimeEdit sponsorTimeEditInput"
-                                    type="text"
-                                    style={{color: "inherit", backgroundColor: "inherit"}}
-                                    value={this.state.sponsorTimeEdits[1] ?? ""}
-                                    onKeyDown={(e) => e.stopPropagation()}
-                                    onKeyUp={(e) => e.stopPropagation()}
-                                    onChange={(e) => this.handleOnChange(1, e, sponsorTime, e.target.value)}
-                                    onWheel={(e) => this.changeTimesWhenScrolling(1, e, sponsorTime)}>
-                                </input>
+                                {" " + chrome.i18n.getMessage("to") + " "}
+                            </span>
 
+                            <input id={"submittingTime1" + this.idSuffix}
+                                className="sponsorTimeEdit sponsorTimeEditInput"
+                                type="text"
+                                style={{color: "inherit", backgroundColor: "inherit"}}
+                                value={this.state.sponsorTimeEdits[1] ?? ""}
+                                onKeyDown={(e) => e.stopPropagation()}
+                                onKeyUp={(e) => e.stopPropagation()}
+                                onChange={(e) => this.handleOnChange(1, e, sponsorTime, e.target.value)}
+                                onWheel={(e) => this.changeTimesWhenScrolling(1, e, sponsorTime)}>
+                            </input>
+
+                            <span className="sponsorTimeStackButton">
                                 <span id={"nowButton1" + this.idSuffix}
                                     className="sponsorNowButton"
                                     onClick={() => this.setTimeToNow(1)}>
                                         {chrome.i18n.getMessage("bracketNow")}
                                 </span>
 
-                                &nbsp;
-
                                 <span id={"endButton" + this.idSuffix}
                                     className="sponsorNowButton"
                                     onClick={() => this.setTimeToEnd()}>
                                         {chrome.i18n.getMessage("bracketEnd")}
                                 </span>
                             </span>
-                        ): ""}
+                        </>
+                    ): ""}
                 </div>
             );
         } else {