fix/878-change-padding-on-button

govtool/frontend/src/components/atoms/Button.tsx

@@ -1,30 +1,43 @@
-import { Button as MUIButton } from "@mui/material";
+import { CircularProgress, Button as MUIButton } from "@mui/material";
 import { ButtonProps } from ".";
 
 export const Button = ({
   size = "large",
   variant = "contained",
   sx,
+  isLoading,
   ...props
 }: ButtonProps) => {
-  const buttonHeight = {
+  const height = {
     extraLarge: 48,
     large: 40,
     medium: 36,
     small: 32,
   }[size];
 
+  const px = {
+    extraLarge: 3.5,
+    large: 3.25,
+    medium: 3,
+    small: 3,
+  }[size];
+
   return (
     <MUIButton
+      disabled={isLoading || props?.disabled}
       sx={{
         fontSize: size === "extraLarge" ? 16 : 14,
-        height: buttonHeight,
+        height,
+        px,
         whiteSpace: "nowrap",
         ...sx,
       }}
       variant={variant}
       {...props}
     >
+      {isLoading && (
+        <CircularProgress size={26} sx={{ position: "absolute" }} />
+      )}
       {props.children}
     </MUIButton>
   );

govtool/frontend/src/components/atoms/index.ts

@@ -12,7 +12,6 @@ export * from "./HighlightedText";
 export * from "./InfoText";
 export * from "./Input";
 export * from "./Link";
-export * from "./LoadingButton";
 export * from "./modal/Modal";
 export * from "./modal/ModalContents";
 export * from "./modal/ModalHeader";

govtool/frontend/src/components/atoms/types.ts

@@ -10,6 +10,7 @@ import {
 import * as TooltipMUI from "@mui/material/Tooltip";
 
 export type ButtonProps = Omit<MUIButtonProps, "size"> & {
+  isLoading?: boolean;
   size?: "small" | "medium" | "large" | "extraLarge";
   dataTestId?: string;
 };

govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx

@@ -1,6 +1,6 @@
 import { Box, Divider } from "@mui/material";
 
-import { Button, LoadingButton, Typography } from "@atoms";
+import { Button, Typography } from "@atoms";
 import { primaryBlue } from "@consts";
 import { useModal } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
@@ -141,7 +141,7 @@ export const AutomatedVotingCard = ({
               </Button>
             ) : (
               !isSelected && (
-                <LoadingButton
+                <Button
                   data-testid={`${testIdLabel}-delegate-button`}
                   isLoading={isDelegateLoading}
                   onClick={onClickDelegate}
@@ -150,7 +150,7 @@ export const AutomatedVotingCard = ({
                   variant="contained"
                 >
                   {t("delegate")}
-                </LoadingButton>
+                </Button>
               )
             )}
           </Box>

govtool/frontend/src/components/molecules/CenteredBoxBottomButtons.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { Box } from "@mui/material";
 
-import { Button, LoadingButton } from "@atoms";
+import { Button } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
 
 interface Props {
@@ -41,7 +41,7 @@ export const CenteredBoxBottomButtons = ({
 
   const renderActionButton = useMemo(
     () => (
-      <LoadingButton
+      <Button
         data-testid="register-button"
         isLoading={isLoading}
         onClick={onActionButton}
@@ -53,7 +53,7 @@ export const CenteredBoxBottomButtons = ({
         variant="contained"
       >
         {actionButtonText ?? t("continue")}
-      </LoadingButton>
+      </Button>
     ),
     [isLoading, isMobile],
   );

govtool/frontend/src/components/molecules/DashboardActionCard.tsx

@@ -1,7 +1,7 @@
 import { Box, Skeleton } from "@mui/material";
 import { FC, ReactNode } from "react";
 
-import { Button, LoadingButton, LoadingButtonProps, Typography } from "@atoms";
+import { Button, LoadingButtonProps, Typography } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { openInNewTab } from "@utils";
 
@@ -141,7 +141,7 @@ export const DashboardActionCard: FC<DashboardActionCardProps> = ({
           </>
         ) : (
           buttons?.map(({ dataTestId, ...buttonProps }) => (
-            <LoadingButton
+            <Button
               key={buttonProps.children?.toString()}
               data-testid={dataTestId}
               size="large"

govtool/frontend/src/components/molecules/VoteActionForm.tsx

@@ -3,7 +3,7 @@ import { useLocation } from "react-router-dom";
 import { Box } from "@mui/material";
 import { Trans } from "react-i18next";
 
-import { Button, LoadingButton, Radio, Typography } from "@atoms";
+import { Button, Radio, Typography } from "@atoms";
 import { orange } from "@consts";
 import { useModal } from "@context";
 import {
@@ -110,7 +110,7 @@ export const VoteActionForm = ({
 
   const renderChangeVoteButton = useMemo(
     () => (
-      <LoadingButton
+      <Button
         data-testid="change-vote"
         onClick={confirmVote}
         disabled={
@@ -128,7 +128,7 @@ export const VoteActionForm = ({
         }}
       >
         {t("govActions.changeVote")}
-      </LoadingButton>
+      </Button>
     ),
     [confirmVote, areFormErrors, vote, isVoteLoading],
   );
@@ -372,7 +372,7 @@ export const VoteActionForm = ({
           {isMobile ? renderCancelButton : renderChangeVoteButton}
         </Box>
       ) : (
-        <LoadingButton
+        <Button
           data-testid="vote-button"
           variant="contained"
           disabled={
@@ -386,7 +386,7 @@ export const VoteActionForm = ({
           size="extraLarge"
         >
           {t("govActions.vote")}
-        </LoadingButton>
+        </Button>
       )}
     </Box>
   );

govtool/frontend/src/components/organisms/BgCard.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box } from "@mui/material";
 
-import { Button, LoadingButton } from "@atoms";
+import { Button } from "@atoms";
 import { PATHS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { theme } from "@/theme";
@@ -50,7 +50,7 @@ export const BgCard = ({
 
   const renderContinueButton = useMemo(
     () => (
-      <LoadingButton
+      <Button
         data-testid="retire-button"
         disabled={isActionButtonDisabled}
         isLoading={isLoadingActionButton}
@@ -62,7 +62,7 @@ export const BgCard = ({
         variant="contained"
       >
         {actionButtonLabel}
-      </LoadingButton>
+      </Button>
     ),
     [
       actionButtonLabel,

govtool/frontend/src/pages/DRepDetails.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 import { Navigate, useNavigate, useParams } from "react-router-dom";
 import { Box, ButtonBase, Chip, CircularProgress } from "@mui/material";
 
-import { Button, LoadingButton, StatusPill, Typography } from "@atoms";
+import { Button, StatusPill, Typography } from "@atoms";
 import { ICONS, PATHS } from "@consts";
 import { useCardano, useModal } from "@context";
 import {
@@ -185,7 +185,7 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
           }}
         >
           {isConnected && status === "Active" && !isMyDrep && (
-            <LoadingButton
+            <Button
               data-testid="delegate-button"
               disabled={!!pendingTransaction.delegate}
               isLoading={isDelegating}
@@ -195,7 +195,7 @@ export const DRepDetails = ({ isConnected }: DRepDetailsProps) => {
               variant="contained"
             >
               {t("delegate")}
-            </LoadingButton>
+            </Button>
           )}
           {!isConnected && status === "Active" && (
             <Button

govtool/frontend/src/stories/Button.stories.ts

@@ -44,3 +44,12 @@ export const Text: Story = {
     children: "Button",
   },
 };
+
+export const LoadingButton: Story = {
+  args: {
+    children: "Button",
+    size: "large",
+    variant: "contained",
+    isLoading: true,
+  },
+};