chore: tweak setting button style

web/src/components/CreateWebhookDialog.tsx

@@ -110,15 +110,27 @@ const CreateWebhookDialog: React.FC<Props> = (props: Props) => {
             Title <span className="text-red-600">*</span>
           </span>
           <div className="relative w-full">
-            <Input className="w-full" type="text" placeholder="" value={state.name} onChange={handleTitleInputChange} />
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="An easy-to-remember name"
+              value={state.name}
+              onChange={handleTitleInputChange}
+            />
           </div>
         </div>
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <span className="mb-2">
-            Url <span className="text-red-600">*</span>
+            Payload URL <span className="text-red-600">*</span>
           </span>
           <div className="relative w-full">
-            <Input className="w-full" type="text" placeholder="Callback endpoint" value={state.url} onChange={handleUrlInputChange} />
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="https://example.com/postreceive"
+              value={state.url}
+              onChange={handleUrlInputChange}
+            />
           </div>
         </div>
         <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">

web/src/components/Settings/PreferencesSection.tsx

@@ -95,7 +95,9 @@ const PreferencesSection = () => {
           <span className="text-sm mr-1">{t("setting.preference-section.telegram-user-id")}</span>
           <LearnMore url="https://usememos.com/docs/integration/telegram-bot" />
         </div>
-        <Button onClick={handleSaveTelegramUserId}>{t("common.save")}</Button>
+        <Button variant="outlined" color="neutral" onClick={handleSaveTelegramUserId}>
+          {t("common.save")}
+        </Button>
       </div>
       <Input
         className="w-full"
@@ -108,7 +110,7 @@ const PreferencesSection = () => {
         placeholder={t("setting.preference-section.telegram-user-id-placeholder")}
       />
 
-      <Divider className="!mt-3 !my-4" />
+      <Divider className="!my-4" />
 
       <WebhookSection />
     </div>

web/src/components/Settings/SystemSection.tsx

@@ -325,7 +325,9 @@ const SystemSection = () => {
             />
           </div>
         </div>
-        <Button onClick={handleSaveTelegramBotToken}>{t("common.save")}</Button>
+        <Button variant="outlined" color="neutral" onClick={handleSaveTelegramBotToken}>
+          {t("common.save")}
+        </Button>
       </div>
       <Input
         className="w-full"
@@ -340,7 +342,9 @@ const SystemSection = () => {
       <Divider className="!mt-3 !my-4" />
       <div className="form-label">
         <span className="normal-text">{t("setting.system-section.additional-style")}</span>
-        <Button onClick={handleSaveAdditionalStyle}>{t("common.save")}</Button>
+        <Button variant="outlined" color="neutral" onClick={handleSaveAdditionalStyle}>
+          {t("common.save")}
+        </Button>
       </div>
       <Textarea
         className="w-full"
@@ -356,7 +360,9 @@ const SystemSection = () => {
       />
       <div className="form-label mt-2">
         <span className="normal-text">{t("setting.system-section.additional-script")}</span>
-        <Button onClick={handleSaveAdditionalScript}>{t("common.save")}</Button>
+        <Button variant="outlined" color="neutral" onClick={handleSaveAdditionalScript}>
+          {t("common.save")}
+        </Button>
       </div>
       <Textarea
         className="w-full"