From 9867b4f185c6ad4129b4083363e62f05d789c8cd Mon Sep 17 00:00:00 2001
From: HanYaodong <hanyaodongcn@gmail.com>
Date: Sat, 11 May 2024 15:59:55 +0800
Subject: [PATCH] Change edit time button style

---
 public/content.css                          | 11 ++++
 src/components/SponsorTimeEditComponent.tsx | 73 +++++++++++----------
 2 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/public/content.css b/public/content.css
index 1b98a5c6..4332b876 100644
--- 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
index d7ca2856..7f8759e3 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -127,6 +127,13 @@ 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"
@@ -134,57 +141,51 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                     {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 {