Merge pull request #260 from wakatime/fix-202

Close options window on save #202

src/components/Options.tsx

@@ -1,7 +1,6 @@
-import { Toast } from 'bootstrap';
-import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 import config, { SuccessOrFailType } from '../config/config';
+import { IS_CHROME } from '../utils';
 import apiKeyInvalid from '../utils/apiKey';
 import { logUserIn } from '../utils/user';
 import SitesList from './SitesList';
@@ -38,8 +37,6 @@ export default function Options(): JSX.Element {
     whitelist: '',
   });
 
-  const liveToastRef = useRef(null);
-
   const loggingStyleRef = useRef(null);
 
   const restoreSettings = async (): Promise<void> => {
@@ -131,9 +128,10 @@ export default function Options(): JSX.Element {
       trackSocialMedia,
       whitelist,
     });
-    // eslint-disable-next-line
-    Toast.getOrCreateInstance(liveToastRef?.current ?? '')?.show();
     await logUserIn(state.apiKey);
+    if (IS_CHROME) {
+      window.close();
+    }
   };
 
   const updateBlacklistState = (sites: string) => {
@@ -180,15 +178,7 @@ export default function Options(): JSX.Element {
   const isApiKeyValid = apiKeyInvalid(state.apiKey) === '';
 
   return (
-    <div
+    <div className="container">
-      className="container"
-      style={{
-        height: 590,
-        marginTop: 0,
-        overflow: 'hidden',
-        overflowY: 'scroll',
-      }}
-    >
       <div className="row">
         <div className="col-md-12">
           <form className="form-horizontal">
@@ -363,30 +353,6 @@ export default function Options(): JSX.Element {
                 </button>
               </div>
             </div>
-            <div className="toast-container position-fixed bottom-0 end-0 p-3">
-              <div
-                className={classNames(
-                  'toast align-items-center justify-content-between alert',
-                  `alert-${state.alertType}`,
-                )}
-                role="alert"
-                aria-live="assertive"
-                aria-atomic="true"
-                id="liveToast"
-                ref={liveToastRef}
-                data-bs-delay="3000"
-              >
-                <div className="fs-5">{state.alertText}</div>
-                <div data-bs-theme="dark">
-                  <button
-                    type="button"
-                    className="btn-close m-0"
-                    data-bs-dismiss="toast"
-                    aria-label="Close"
-                  ></button>
-                </div>
-              </div>
-            </div>
           </form>
         </div>
       </div>