refact(Stack): use spacing instead of gap property

Axobot-org · Jan 19, 2025 · fdf7991 · fdf7991
1 parent fefc96f
commit fdf7991
Show file tree

Hide file tree

Showing 16 changed files with 20 additions and 20 deletions.
diff --git a/src/components/GuildDashboard/ConfigComponents/FloatConfigComponent.tsx b/src/components/GuildDashboard/ConfigComponents/FloatConfigComponent.tsx
@@ -67,7 +67,7 @@ export default function FloatConfigComponent({ optionId, option }: FloatConfigCo
 
   return (
     <ComplexConfiguration optionId={optionId}>
-      <Stack direction="row" gap={2}>
+      <Stack direction="row" spacing={2}>
         <Slider
           aria-label={optionId}
           defaultValue={defaultValue}

diff --git a/src/components/GuildDashboard/ConfigComponents/LevelupChannelConfigComponent.tsx b/src/components/GuildDashboard/ConfigComponents/LevelupChannelConfigComponent.tsx
@@ -63,7 +63,7 @@ export default function LevelupChannelConfigComponent({ optionId, option }: Leve
 
   return (
     <LargeConfiguration optionId={optionId}>
-      <Stack gap={1}>
+      <Stack spacing={1}>
         <StyledSelect
           value={currentEnumValue}
           onChange={(e) => onChange(e.target.value as string)}

diff --git a/src/components/GuildDashboard/ConfigComponents/shared/SharedConfigComponents.tsx b/src/components/GuildDashboard/ConfigComponents/shared/SharedConfigComponents.tsx
@@ -75,7 +75,7 @@ export function ComplexConfiguration({ optionId, children }: PropsWithChildren<S
 function EditedBadge() {
   return (
     <Tooltip title="This configuration has been edited and needs to be saved.">
-      <Stack direction="row" gap={0.5} component="span" display="inline-flex" sx={{ verticalAlign: "sub" }}>
+      <Stack direction="row" spacing={0.5} component="span" display="inline-flex" sx={{ verticalAlign: "sub" }}>
         <SyncProblemIcon color="warning" fontSize="small" />
         <Typography component="span" variant="caption" color="text.secondary" sx={{ display: "inline-block" }}>Edited</Typography>
       </Stack>

diff --git a/...nents/GuildDashboard/SpecialCategoryComponents/EditionLogs/ConfigEditionLogsComponent.tsx b/...nents/GuildDashboard/SpecialCategoryComponents/EditionLogs/ConfigEditionLogsComponent.tsx
@@ -31,7 +31,7 @@ export default function ConfigEditionLogsComponent() {
   return (
     <Fragment>
       <Typography variant="h5" gutterBottom textAlign="center">Configuration edition logs</Typography>
-      <Stack gap={{ xs: 3, md: 0.75 }}>
+      <Stack spacing={{ xs: 3, md: 0.75 }}>
         {sortedData.map((log) => (
           <LogRow key={log.id} log={log} />
         ))}
@@ -44,7 +44,7 @@ function LogRow({ log }: { log: ConfigEditionLog }) {
   return (
     <LogRowContainer>
       <Typography variant="body2" color="textDisabled">{new Date(log.date).toLocaleString()}</Typography>
-      <Stack direction="row" gap={1} alignItems="center" flexWrap="wrap">
+      <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap">
         <LogAuthor log={log} />
         <span>
           <LogAction log={log} />
@@ -149,7 +149,7 @@ function LogAction({ log }: { log: ConfigEditionLog }) {
 function LogAuthor({ log }: { log: ConfigEditionLog }) {
   return (
     <Tooltip enterDelay={400} enterNextDelay={200} title={`ID ${log.user_id}`}>
-      <Stack direction="row" gap={0.5} alignItems="center">
+      <Stack direction="row" spacing={0.5} alignItems="center">
         <Avatar sx={{ width: 32, height: 32 }} alt={log.username ?? log.user_id} src={log.avatar + "?size=64"} />
         <Typography color="secondary">
           {log.username ?? log.user_id}

diff --git a/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/FeedEmbedSettings.tsx b/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/FeedEmbedSettings.tsx
@@ -13,7 +13,7 @@ interface FeedEmbedSettingsProps {
 
 export default function FeedEmbedSettings({ feed, editFeed }: FeedEmbedSettingsProps) {
   return (
-    <Stack gap={1}>
+    <Stack spacing={1}>
       <SimpleParameterRow label="Show date in footer">
         <ShowDateInFooterToggle feed={feed} editFeed={editFeed} />
       </SimpleParameterRow>

diff --git a/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/RssFeedMention.tsx b/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/RssFeedMention.tsx
@@ -24,7 +24,7 @@ function _RssFeedMention({ feed, sx }: RssFeedMentionProps) {
   const tooltipTitle = getGuildDashboardTranslations("rss_type." + feed.type, feed.type);
 
   return (
-    <Stack direction="row" gap={{ xs: 0.5, md: 1 }} overflow="hidden" sx={sx}>
+    <Stack direction="row" spacing={{ xs: 0.5, md: 1 }} overflow="hidden" sx={sx}>
       <IconTooltip title={tooltipTitle}>
         <FeedTypeIcon feedType={feed.type} />
       </IconTooltip>

diff --git a/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/RssFeedsComponent.tsx b/src/components/GuildDashboard/SpecialCategoryComponents/RssFeeds/RssFeedsComponent.tsx
@@ -68,7 +68,7 @@ function PageContent({ data, isLoading, showErrorMessages }: { data: RssFeed[] |
 
   return (
     <Suspense fallback={<LoadingPlaceholder />}>
-      <Stack gap={{ xs: 3, md: 1 }}>
+      <Stack spacing={{ xs: 3, md: 1 }}>
         {sortedFeed.map((feed) => (
           <FeedComponent key={feed.id} feed={feed} />
         ))}

diff --git a/src/components/GuildDashboard/SpecialCategoryComponents/XpCategory/AddRoleRewardButton.tsx b/src/components/GuildDashboard/SpecialCategoryComponents/XpCategory/AddRoleRewardButton.tsx
@@ -29,7 +29,7 @@ export default function AddRoleRewardButton({ guildId, existingRoleIds, addNewRe
   };
 
   return (
-    <Stack direction="row" gap={1} alignItems="center">
+    <Stack direction="row" spacing={1} alignItems="center">
       <AddIcon color="primary" />
       <Autocomplete
         openOnFocus

diff --git a/src/components/GuildDashboard/SpecialCategoryComponents/XpCategory/RoleRewardsList.tsx b/src/components/GuildDashboard/SpecialCategoryComponents/XpCategory/RoleRewardsList.tsx
@@ -61,7 +61,7 @@ function RoleRewardRow({ roleReward, role, editRewardLevel, deleteReward }: Role
 
   return (
     <Stack direction="row" height="48px" alignItems="center">
-      <Stack direction="row" py={1} gap={1} minWidth="18rem" alignItems="first baseline">
+      <Stack direction="row" py={1} spacing={1} minWidth="18rem" alignItems="first baseline">
         {isEditing
           ? (
             <NumericInput

diff --git a/src/components/GuildDashboard/SpecialCategoryComponents/XpCategory/XpCategoryComponent.tsx b/src/components/GuildDashboard/SpecialCategoryComponents/XpCategory/XpCategoryComponent.tsx
@@ -39,9 +39,9 @@ function LeaderboardActionsSection() {
   return (
     <Fragment>
       <DividerWithMargins />
-      <Stack px={2} gap={2}>
+      <Stack px={2} spacing={2}>
         <SectionTitle>Leaderboard actions</SectionTitle>
-        <Stack gap={2} direction={{ xs: "column", sm: "row" }}>
+        <Stack spacing={2} direction={{ xs: "column", sm: "row" }}>
           <Button
             component={Link}
             target="_blank"
@@ -121,7 +121,7 @@ function RolesRewardsSection() {
   return (
     <Fragment>
       <DividerWithMargins />
-      <Stack px={2} gap={1}>
+      <Stack px={2} spacing={1}>
         <SectionTitle>{title}</SectionTitle>
         <Description>
           Roles rewards are roles given to your members when they reach a certain level of XP. This is a great way to encourage your members to be active!

diff --git a/src/components/common/ChannelMention.tsx b/src/components/common/ChannelMention.tsx
@@ -27,7 +27,7 @@ export default function ChannelMention({ channel, disabled, indent, disableColor
   return (
     <Stack
       direction="row"
-      gap={0.5}
+      spacing={0.5}
       sx={{
         color: disableColor ? undefined : `#${mentionColor.toString(16).padStart(6, "0")}`,
         backgroundColor: disableColor ? undefined : `#${backgroundColor.toString(16).padStart(8, "0")}`,

diff --git a/src/components/common/CollapsedInfoBox.tsx b/src/components/common/CollapsedInfoBox.tsx
@@ -13,7 +13,7 @@ export default function CollapsedInfoBox({ title, children }: PropsWithChildren<
 
   return (
     <Container className={isOpen ? "isOpen" : undefined}>
-      <Stack useFlexGap direction="row" gap={2} alignItems="center">
+      <Stack direction="row" spacing={2} alignItems="center">
         <Tooltip title={title}>
           <IconButton onClick={() => setIsOpen(!isOpen)}>
             <Icon />

diff --git a/src/components/common/RoleMention.tsx b/src/components/common/RoleMention.tsx
@@ -22,7 +22,7 @@ export default function RoleMention({ name, color, disabled, onDelete, sx }: Rol
     <Stack
       display="inline-flex"
       direction="row"
-      gap={0.5}
+      spacing={0.5}
       sx={{
         color: mentionColorAsHex,
         backgroundColor: backgroundColorAsRGBA,

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
@@ -50,7 +50,7 @@ function GuildsGrid() {
   }
 
   return (
-    <Stack direction="row" flexWrap="wrap" gap={3} my={4} justifyContent="center">
+    <Stack direction="row" flexWrap="wrap" spacing={3} my={4} justifyContent="center">
       {sortedGuilds.map((guild) => (
         <GuildBox guild={guild} key={guild.id} />
       ))}

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -31,7 +31,7 @@ export default function Home() {
         <BotGuildCounter />
       </Box>
 
-      <Stack direction={{ xs: "column", sm: "row" }} gap={3} mt={5} mb={8}>
+      <Stack direction={{ xs: "column", sm: "row" }} spacing={3} mt={5} mb={8}>
         <Button variant="contained" target="_blank" href={ExternalRoutesURLs.botInvite}>
           Invite Axobot
         </Button>

diff --git a/src/pages/legal/TOS.tsx b/src/pages/legal/TOS.tsx
@@ -16,7 +16,7 @@ const TOSSummary = () => {
 
   return (
     <Paper sx={{ mt: { xs: 2, md: 4 }, p: 2, width: "100%", backgroundColor: "#318167" }}>
-      <Stack useFlexGap direction="row" gap={2} justifyContent="space-between" alignItems="center">
+      <Stack direction="row" spacing={2} justifyContent="space-between" alignItems="center">
         <Typography variant="h5">Summary</Typography>
         <IconButton onClick={() => setIsOpen(!isOpen)}>
           <Icon />