change button text when pressed

hogashi · Nov 28, 2023 · 9d0e4ad · 9d0e4ad
1 parent 34c3ae0
commit 9d0e4ad
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 64 deletions.
diff --git a/dist/css/popup.css b/dist/css/popup.css
@@ -548,23 +548,10 @@ video {
   margin-bottom: 0.25rem;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
 .flex {
   display: flex;
 }
@@ -577,17 +564,12 @@ video {
   height: 1.5rem;
 }
 
-.w-4 {
-  width: 1rem;
-}
-
 .w-1\/2 {
   width: 50%;
 }
 
-.min-w-max {
-  min-width: -moz-max-content;
-  min-width: max-content;
+.w-4 {
+  width: 1rem;
 }
 
 .flex-col {
@@ -602,22 +584,11 @@ video {
   justify-content: center;
 }
 
-.gap-x-3 {
-  -moz-column-gap: 0.75rem;
-       column-gap: 0.75rem;
-}
-
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
 
-.space-y-12 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
-}
-
 .self-center {
   align-self: center;
 }
@@ -640,10 +611,6 @@ video {
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
-.p-1 {
-  padding: 0.25rem;
-}
-
 .p-3 {
   padding: 0.75rem;
 }
@@ -658,31 +625,13 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .text-center {
   text-align: center;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .text-sm {
@@ -695,11 +644,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .font-bold {
   font-weight: 700;
 }

diff --git a/src/extension-contexts/options.ts b/src/extension-contexts/options.ts
@@ -1,8 +1,11 @@
 import { OPTION_KEYS, OptionsBool, initialOptionsBool } from '../constants';
 
-export const setOptions = (options: OptionsBool): void => {
+export const setOptions = (options: OptionsBool, callback?: () => void): void => {
   chrome.storage.sync.set(options, () => {
     console.log('options set');
+    if (callback) {
+      callback();
+    }
   });
 };
 

diff --git a/src/extension-contexts/popup.tsx b/src/extension-contexts/popup.tsx
@@ -30,9 +30,15 @@ interface Props {
 export const Popup = (props: Props): JSX.Element => {
   const { optionsText, optionKeys, optionsEnabled } = props;
   const [enabled, setEnabled] = useState(optionsEnabled);
+  const [buttonText, setButtonText] = useState('設定を保存');
 
   const onSave = useCallback(() => {
-    setOptions(enabled);
+    setOptions(enabled, () => {
+      setButtonText('しました');
+      setTimeout(() => {
+        setButtonText('設定を保存');
+      }, 500);
+    });
     chrome.tabs.query({}, (result) =>
       result.forEach((tab) => {
         // console.log(tab);
@@ -108,7 +114,7 @@ export const Popup = (props: Props): JSX.Element => {
         className="saveSettingButton rounded-md bg-indigo-600 w-1/2 mt-1 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         onClick={onSave}
       >
-        設定を保存
+        {buttonText}
       </button>
       <footer className="text-center mt-1">twitter画像原寸ボタン - hogashi</footer>
     </div>