refactor(web): improve buttons for alias setting [VIZ-1653] (#1612)

mkumbobeaty · web-flow · commit 4e08d5daee3a · 2025-05-21T10:48:28.000+03:00
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/AliasSettings/EditPanel.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/AliasSettings/EditPanel.tsx
@@ -88,18 +88,21 @@ const EditPanel: FC<Prop> = ({
       <ModalPanel
         title={t("Edit Alias")}
         onCancel={onClose}
-        actions={
-          <ButtonWrapper>
-            <Button extendWidth title={t("Cancel")} onClick={onClose} />
-            <Button
-              extendWidth
-              title={t("Apply")}
-              appearance="primary"
-              disabled={isDisabled}
-              onClick={handleSubmit}
-            />
-          </ButtonWrapper>
-        }
+        actions={[
+          <Button
+            key="cancel"
+            title={t("Cancel")}
+            appearance="secondary"
+            onClick={onClose}
+          />,
+          <Button
+            key="apply"
+            title={t("Apply")}
+            appearance="primary"
+            disabled={isDisabled}
+            onClick={handleSubmit}
+          />
+        ]}
       >
         <Wrapper>
           <Typography size="body">
@@ -167,13 +170,6 @@ const InputWrapper = styled("div")<{ hasSuffix?: boolean }>(
   })
 );
 
-const ButtonWrapper = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "flex-start",
-  gap: theme.spacing.small
-}));
-
 const WarningMessage = styled("div")(({ theme }) => ({
   color: theme.dangerous.main,
   display: "flex",
diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/AliasSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/AliasSettings/index.tsx
@@ -12,7 +12,7 @@ import {
 import { config } from "@reearth/services/config";
 import { useT } from "@reearth/services/i18n";
 import { useNotification } from "@reearth/services/state";
-import { styled, useTheme } from "@reearth/services/theme";
+import { styled } from "@reearth/services/theme";
 import { FC, useCallback, useMemo, useState } from "react";
 
 import { PublicAliasSettingsType } from "..";
@@ -38,7 +38,6 @@ const AliasSetting: FC<AliasSettingProps> = ({
   settingsItem,
   onUpdateAlias
 }) => {
-  const theme = useTheme();
   const t = useT();
   const { checkProjectAlias } = useProjectFetcher();
   const { checkStoryAlias } = useStorytellingFetcher();
@@ -124,11 +123,10 @@ const AliasSetting: FC<AliasSettingProps> = ({
         </UrlWrapper>
         <Button
           appearance="secondary"
-          title={t("clean")}
+          title={t("Reset")}
           icon="pencilLine"
           size="small"
           disabled={isDisabled}
-          iconColor={theme.content.weak}
           onClick={handleCleanAlias}
         />
 
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
@@ -401,7 +401,7 @@ Edit Alias: ''
 You are about to change the alias for your story. Only alphanumeric characters and hyphens are allows.: ''
 You are about to change the alias for your project. Only alphanumeric characters and hyphens are allows.: ''
 Your Alias: ''
-clean: ''
+Reset: ''
 Public Info: ''
 Published page settings: ''
 This section's settings are mainly applied to the Open Graph Protocol settings in the header of the published page.: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
@@ -404,7 +404,7 @@ Edit Alias: エイリアスを編集
 You are about to change the alias for your story. Only alphanumeric characters and hyphens are allows.: ストーリーのエイリアスを変更しようとしています。英数字とハイフンのみが使用可能です。
 You are about to change the alias for your project. Only alphanumeric characters and hyphens are allows.: プロジェクトのエイリアスを変更しようとしています。英数字とハイフンのみが使用可能です。
 Your Alias: あなたのエイリアス'
-clean: ''
+Reset: リセット
 Public Info: 公開情報
 Published page settings: 公開ページ設定
 This section's settings are mainly applied to the Open Graph Protocol settings in the header of the published page.: このセクションの設定は、主に公開ページのヘッダーにあるOpen Graph Protocolの設定に適用されます。
