Fix lag caused by poorly written CSS rules (#3198)

Co-authored-by: Nuckyz <61953774+Nuckyz@users.noreply.github.com>

src/plugins/sendTimestamps/index.tsx

@@ -68,15 +68,16 @@ function PickerModal({ rootProps, close }: { rootProps: ModalProps, close(): voi
     return (
         <ModalRoot {...rootProps}>
             <ModalHeader className={cl("modal-header")}>
-                <Forms.FormTitle tag="h2">
+                <Forms.FormTitle tag="h2" className={cl("modal-title")}>
                     Timestamp Picker
                 </Forms.FormTitle>
 
-                <ModalCloseButton onClick={close} />
+                <ModalCloseButton onClick={close} className={cl("modal-close-button")} />
             </ModalHeader>
 
             <ModalContent className={cl("modal-content")}>
                 <input
+                    className={cl("date-picker")}
                     type="datetime-local"
                     value={value}
                     onChange={e => setValue(e.currentTarget.value)}
@@ -86,23 +87,25 @@ function PickerModal({ rootProps, close }: { rootProps: ModalProps, close(): voi
                 />
 
                 <Forms.FormTitle>Timestamp Format</Forms.FormTitle>
-                <Select
-                    options={
-                        Formats.map(m => ({
-                            label: m,
-                            value: m
-                        }))
-                    }
-                    isSelected={v => v === format}
-                    select={v => setFormat(v)}
-                    serialize={v => v}
-                    renderOptionLabel={o => (
-                        <div className={cl("format-label")}>
-                            {Parser.parse(formatTimestamp(time, o.value))}
-                        </div>
-                    )}
-                    renderOptionValue={() => rendered}
-                />
+                <div className={cl("format-select")}>
+                    <Select
+                        options={
+                            Formats.map(m => ({
+                                label: m,
+                                value: m
+                            }))
+                        }
+                        isSelected={v => v === format}
+                        select={v => setFormat(v)}
+                        serialize={v => v}
+                        renderOptionLabel={o => (
+                            <div className={cl("format-label")}>
+                                {Parser.parse(formatTimestamp(time, o.value))}
+                            </div>
+                        )}
+                        renderOptionValue={() => rendered}
+                    />
+                </div>
 
                 <Forms.FormTitle className={Margins.bottom8}>Preview</Forms.FormTitle>
                 <Forms.FormText className={cl("preview-text")}>

src/plugins/sendTimestamps/styles.css

@@ -1,4 +1,4 @@
-.vc-st-modal-content input {
+.vc-st-date-picker {
     background-color: var(--input-background);
     color: var(--text-normal);
     width: 95%;
@@ -12,35 +12,28 @@
     font-size: 100%;
 }
 
-.vc-st-format-label,
-.vc-st-format-label span {
-    background-color: transparent;
-}
-
-.vc-st-modal-content [class|="select"] {
+.vc-st-format-select {
     margin-bottom: 1em;
+
+    --background-modifier-accent: transparent;
 }
 
-.vc-st-modal-content [class|="select"] span {
-    background-color: var(--input-background);
+.vc-st-format-label {
+    --background-modifier-accent: transparent;
 }
 
 .vc-st-modal-header {
     place-content: center space-between;
 }
 
-.vc-st-modal-header h1 {
+.vc-st-modal-title {
     margin: 0;
 }
 
-.vc-st-modal-header button {
+.vc-st-modal-close-button {
     padding: 0;
 }
 
 .vc-st-preview-text {
     margin-bottom: 1em;
 }
-
-.vc-st-button svg {
-    transform: scale(1.1) translateY(1px);
-}