refactor: button to allow html attributes & refactor class names (#956)

app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx

@@ -39,7 +39,7 @@ export const Authentication: FunctionComponent<{
             and enable end-to-end encryption.
           </Text>
           <Button
-            type="primary"
+            variant="primary"
             label="Create free account"
             onClick={clickRegister}
             className="mb-3"

app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx

@@ -50,7 +50,7 @@ export const Credentials: FunctionComponent<Props> = observer(
           </Text>
           <Button
             className="min-w-20 mt-3"
-            type="normal"
+            variant="normal"
             label="Change email"
             onClick={() => {
               setIsChangeEmailDialogOpen(true);
@@ -64,7 +64,7 @@ export const Credentials: FunctionComponent<Props> = observer(
           </Text>
           <Button
             className="min-w-20 mt-3"
-            type="normal"
+            variant="normal"
             label="Change password"
             onClick={presentPasswordWizard}
           />

app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx

@@ -27,14 +27,14 @@ const SignOutView: FunctionComponent<{
           <div className="flex flex-row">
             <Button
               className="mr-3"
-              type="normal"
+              variant="normal"
               label="Sign out other sessions"
               onClick={() => {
                 appState.accountMenu.setOtherSessionsSignOut(true);
               }}
             />
             <Button
-              type="normal"
+              variant="normal"
               label="Manage sessions"
               onClick={() => appState.openSessionsModal()}
             />
@@ -48,7 +48,7 @@ const SignOutView: FunctionComponent<{
           </Text>
           <div className="min-h-3" />
           <Button
-            type="danger"
+            dangerStyle={true}
             label="Sign out workspace"
             onClick={() => {
               appState.accountMenu.setSigningOut(true);
@@ -76,7 +76,7 @@ const ClearSessionDataView: FunctionComponent<{
         </Text>
         <div className="min-h-3" />
         <Button
-          type="danger"
+          dangerStyle={true}
           label="Clear workspace"
           onClick={() => {
             appState.accountMenu.setSigningOut(true);

app/assets/javascripts/components/Preferences/panes/account/Sync.tsx

@@ -55,7 +55,7 @@ export const Sync: FunctionComponent<Props> = observer(
               </Text>
               <Button
                 className="min-w-20 mt-3"
-                type="normal"
+                variant="normal"
                 label="Sync now"
                 disabled={isSyncingInProgress}
                 onClick={doSynchronization}

app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx

@@ -169,7 +169,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
         <ModalDialogButtons className="px-4.5">
           <Button
             className="min-w-20"
-            type="primary"
+            variant="primary"
             label={submitButtonTitle}
             onClick={handleSubmit}
           />

app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx

@@ -2,8 +2,6 @@ import { FunctionalComponent } from 'preact';
 import { Subtitle } from '@/components/Preferences/components';
 import { DecoratedInput } from '@/components/DecoratedInput';
 import { Button } from '@/components/Button';
-import { JSXInternal } from '@node_modules/preact/src/jsx';
-import TargetedEvent = JSXInternal.TargetedEvent;
 import { useEffect, useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
@@ -40,9 +38,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
       );
     };
 
-    const handleSubscriptionCodeSubmit = async (
-      event: TargetedEvent<HTMLFormElement, Event>
-    ) => {
+    const handleSubscriptionCodeSubmit = async (event: Event) => {
       event.preventDefault();
 
       const result = await application.features.setOfflineFeaturesCode(
@@ -117,7 +113,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
               )}
               {hasUserPreviouslyStoredCode && (
                 <Button
-                  type="danger"
+                  dangerStyle={true}
                   label="Remove offline key"
                   onClick={() => {
                     handleRemoveClick();
@@ -127,13 +123,9 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
               {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
                 <Button
                   label={'Submit'}
-                  type="primary"
+                  variant="primary"
                   disabled={activationCode === ''}
-                  onClick={(event) =>
-                    handleSubscriptionCodeSubmit(
-                      event as TargetedEvent<HTMLFormElement>
-                    )
-                  }
+                  onClick={(event) => handleSubscriptionCodeSubmit(event)}
                 />
               )}
             </form>

app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx

@@ -46,7 +46,7 @@ export const NoSubscription: FunctionalComponent<{
         {application.hasAccount() && (
           <Button
             className="min-w-20 mt-3"
-            type="primary"
+            variant="primary"
             label="Subscribe"
             onClick={onPurchaseClick}
           />

app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx

@@ -81,7 +81,7 @@ export const SubscriptionInformation = observer(
         <StatusText subscriptionState={subscriptionState} />
         <Button
           className="min-w-20 mt-3 mr-3"
-          type="normal"
+          variant="normal"
           label="Manage subscription"
           onClick={manageSubscription}
         />