Merge pull request #590 from Aeledfyr/button-style

chore: rename Button 'styles' prop to 'style' for consistency

Author: SupertigerDev

src/components/InviteBotPopup.tsx

@@ -122,7 +122,7 @@ export const InviteBotPopup = (props: {
           iconName="add"
           primary
           margin={0}
-          styles={{ "align-self": "stretch" }}
+          style={{ "align-self": "stretch" }}
           onClick={addBot}
         />
       </FlexColumn>

src/components/message-pane/MessagePane.tsx

@@ -931,7 +931,7 @@ const MicButton = (props: { onBlob?: (blob: Blob) => void }) => {
       </Show>
       <Button
         type="hover_border"
-        styles={{ "touch-action": "none", "user-select": "none" }}
+        style={{ "touch-action": "none", "user-select": "none" }}
         class={classNames(styles.inputButtons, "voice-recorder-button")}
         onPointerDown={onMicHold}
         onTouchMove={onTouchMove}
@@ -1375,7 +1375,7 @@ function FloatingAttachment(props: {}) {
               padding={6}
               iconSize={18}
               primary
-              styles={{ "margin-left": "auto" }}
+              style={{ "margin-left": "auto" }}
               iconName="brush"
             />
           </div>
@@ -2324,14 +2324,14 @@ const GoogleDriveLinkModal = (props: { close: () => void }) => {
   const actionButtons = (
     <FlexRow style={{ width: "100%" }}>
       <Button
-        styles={{ flex: 1 }}
+        style={{ flex: 1 }}
         iconName="close"
         label={t("messageArea.linkToGoogleDrive.cancelButton")}
         color="var(--alert-color)"
         onClick={props.close}
       />
       <Button
-        styles={{ flex: 1 }}
+        style={{ flex: 1 }}
         label={t("messageArea.linkToGoogleDrive.linkButton")}
         iconName="link"
         primary
@@ -2441,7 +2441,7 @@ function BeforeYouChatNotice(props: {
             <Markup inline text={notice()!.content} />
           </div>
           <Button
-            styles={{ opacity: buttonClickable() ? 1 : 0.5 }}
+            style={{ opacity: buttonClickable() ? 1 : 0.5 }}
             label={t("settings.account.understoodButton")}
             iconName="check"
             onClick={understoodClick}

src/components/message-pane/message-item/AudioEmbed.tsx

@@ -178,7 +178,7 @@ export const AudioEmbed = (props: {
             onClick={onPlayClick}
             iconName={statusIcon()}
             color="var(--primary-color)"
-            styles={{ "border-radius": "50%" }}
+            style={{ "border-radius": "50%" }}
           />
           <div class={styles.fileEmbedDetails}>
             <div class={styles.fileEmbedName}>{props.file?.name}</div>

src/components/message-pane/message-item/Reactions.tsx

@@ -142,7 +142,7 @@ function AddNewReactionButton(props: {
       margin={0}
       padding={6}
       class={style.reactionItem}
-      styles={{ visibility: show() ? "visible" : "hidden" }}
+      style={{ visibility: show() ? "visible" : "hidden" }}
       iconName="add"
       iconSize={15}
     />

src/components/moderation-pane/ModerationPane.tsx

@@ -1372,7 +1372,7 @@ function AuditLogItem(props: { auditLog: AuditLog }) {
         <Button
           padding={4}
           margin={[0, 6, 0, 0]}
-          styles={{ "margin-left": "auto", "align-self": "start" }}
+          style={{ "margin-left": "auto", "align-self": "start" }}
           iconName="arrow_drop_down"
           onClick={() => setExpanded(!expanded())}
         />

src/components/servers/settings/ExternalEmbedSettings.tsx

@@ -135,7 +135,7 @@ export default function ExternalEmbedSettings() {
           children={
             <Button
               label={t("servers.settings.externalEmbed.noInvites.createButton")}
-              styles={{ "margin-left": "auto" }}
+              style={{ "margin-left": "auto" }}
               margin={0}
               primary
               onclick={() =>

src/components/servers/settings/ServerVerifySettings.tsx

@@ -82,7 +82,7 @@ export default function ServerSettingsBans() {
               <Button
                 onClick={verifyClick}
                 label={t("servers.settings.verify.verifyButton")}
-                styles={{ "margin-left": "auto" }}
+                style={{ "margin-left": "auto" }}
                 margin={0}
                 color="var(--success-color)"
               />

src/components/settings/AccountSettings.tsx

@@ -665,7 +665,7 @@ function DeleteAccountNoticeModal(props: { close(): void }) {
       actionButtons={
         <Button
           iconName="check"
-          styles={{ "margin-left": "auto" }}
+          style={{ "margin-left": "auto" }}
           label={t("settings.account.understoodButton")}
           onClick={props.close}
         />
@@ -897,13 +897,13 @@ const ConfirmEmailModal = (props: { close(): void; message: string }) => {
     <FlexRow style={{ flex: 1 }}>
       <Button
         onClick={props.close}
-        styles={{ flex: 1 }}
+        style={{ flex: 1 }}
         iconName="close"
         label={t("general.cancelButton")}
         color="var(--alert-color)"
       />
       <Button
-        styles={{ flex: 1 }}
+        style={{ flex: 1 }}
         iconName="check"
         label={t("general.confirmButton")}
         onClick={confirmClicked}
@@ -957,13 +957,13 @@ const ConfirmPasswordModal = (props: {
     <FlexRow style={{ flex: 1 }}>
       <Button
         onClick={props.close}
-        styles={{ flex: 1 }}
+        style={{ flex: 1 }}
         iconName="close"
         label={t("general.cancelButton")}
         color="var(--alert-color)"
       />
       <Button
-        styles={{ flex: 1 }}
+        style={{ flex: 1 }}
         iconName="check"
         label={t("general.confirmButton")}
         onClick={() => props.onConfirm(password())}

src/components/settings/NotificationsSettings.tsx

@@ -234,7 +234,7 @@ function NotificationSoundDropDown(props: {
             <div style={{ "margin-left": "auto", "flex-shrink": 0 }}>
               <Button
                 onClick={(e) => testSound(e, sound)}
-                styles={{ "margin-left": "6px", "flex-shrink": 0 }}
+                style={{ "margin-left": "6px", "flex-shrink": 0 }}
                 iconName="play_circle"
                 margin={0}
                 padding={4}

src/components/ui/Button.tsx

@@ -8,7 +8,7 @@ import { A } from "solid-navigator";
 
 export type ButtonProps = Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
-  "color" | "type"
+  "color" | "type" | "style"
 > & {
   color?: string | null;
   label?: string;
@@ -23,7 +23,7 @@ export type ButtonProps = Omit<
   href?: string;
   target?: string;
   rel?: string;
-  styles?: JSX.CSSProperties;
+  style?: JSX.CSSProperties;
   tabIndex?: string;
   hoverText?: string;
   iconClass?: string;
@@ -44,7 +44,7 @@ export default function Button(props: ButtonProps) {
     "customChildren",
     "href",
     "customChildrenLeft",
-    "styles",
+    "style",
     "tabIndex",
     "hoverText",
     "iconClass",
@@ -70,7 +70,7 @@ export default function Button(props: ButtonProps) {
           ? props.padding.join("px ") + "px"
           : props.padding + "px"
         : undefined,
-    ...customProps.styles,
+    ...customProps.style,
   });
 
   return (