trying to fix toasts

src/components/GoogleOAuth/Callback.tsx

@@ -1,11 +1,6 @@
-// this component is used to catch responses from google OAuth. Upon load, we check if the 
-// Url contains the code parameter. if it does we extract the code, and open 
-// the /stremio/addons/stremio-gdrive/ page with the code as a query parameter.
-
 import React, {useState} from "react";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import { sessionKeys } from ".";
-import { showToast } from "../Toasts";
 
 export default function Catcher(): JSX.Element {
     const redirectUrl = useBaseUrl('/stremio/addons/stremio-gdrive#oauth-tool');

src/components/GoogleOAuth/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import CodeBlock from "@theme/CodeBlock";
-import { showToast } from "../Toasts";
-import './styles.css';
+import { showToast } from "@site/src/components/Toasts";
+import styles from "./styles.module.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
 const scopes = ['https://www.googleapis.com/auth/drive'];
@@ -14,8 +14,7 @@ export const sessionKeys = {
     authorisationCode: "Viren070Guides_OAuthTool_authorisationCode",
     oauthError: "Viren070Guides_OAuthTool_oauthError"
 };
-// https://accounts.google.com/o/oauth2/v2/auth?client_id=113852005442-335efquhgv3q9qa6kv1rg50j27ema3l4.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fstremio%2Faddons%2Fstremio-gdrive%2Fcallback&response_type=code&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive&prompt=consent
-// Function to obtain the refresh token
+
 const openAuthorisationUrl = (clientId: string, redirectUrl: string) => {
 
     if (clientId.length === 0) {
@@ -173,29 +172,29 @@ export default function CodeGenerator(): JSX.Element {
 
     return (
         
-        <div className="google-auth-form-container">
+        <div className={styles.googleAuthFormContainer} >
             <div>
                 
             </div>
             <div>
-                <label className="google-auth-form-label" htmlFor="client-id">Client ID: </label>
-                <input className="google-auth-form-input" id="client-id" type="text" placeholder="Client ID" value={clientId} onChange={handleClientIdChange} />
+                <label className={styles.googleAuthFormLabel} htmlFor="client-id">Client ID: </label>
+                <input className={styles.googleAuthFormInput}  id="client-id" type="text" placeholder="Client ID" value={clientId} onChange={handleClientIdChange} />
             </div>
             <div>
-                <label className="google-auth-form-label" htmlFor="client-secret">Client Secret: </label>
-                <input className="google-auth-form-input" type="text" placeholder="Client Secret" value={clientSecret} onChange={handleClientSecretChange} />
+                <label className={styles.googleAuthFormLabel} htmlFor="client-secret">Client Secret: </label>
+                <input className={styles.googleAuthFormInput} type="text" placeholder="Client Secret" value={clientSecret} onChange={handleClientSecretChange} />
             </div>
             <div>
 
-                <button className="default-themed-button google-auth-form-button" onClick={() => openAuthorisationUrl(clientId, redirectUrl)}>Get Authorisation Code</button>
+                <button className={`${styles.googleAuthFormButton} default-themed-button`} onClick={() => openAuthorisationUrl(clientId, redirectUrl)}>Get Authorisation Code</button>
             </div>
             <div>
 
-                <label className="google-auth-form-label" htmlFor="authorisation-code">Authorisation Code: </label>
-                <input className="google-auth-form-input" type="text" placeholder="Authorisation Code" value={authorisationCode} onChange={(e) => setAuthorisationCode(e.target.value)} />
+                <label className={styles.googleAuthFormLabel} htmlFor="authorisation-code">Authorisation Code: </label>
+                <input className={styles.googleAuthFormInput} type="text" placeholder="Authorisation Code" value={authorisationCode} onChange={(e) => setAuthorisationCode(e.target.value)} />
             </div>
             <div>
-                <button className="google-auth-form-button default-themed-button" onClick={getRefreshCode}>Get Credentials</button>
+                <button className={`${styles.googleAuthFormButton} default-themed-button`} onClick={getRefreshCode}>Get Credentials</button>
             </div>
             <div>
                 {refreshToken.length > 0 && getCodeBlock()}

src/components/GoogleOAuth/styles.module.css

@@ -1,5 +1,5 @@
 
-.google-auth-form-container {
+.googleAuthFormContainer {
     max-width: 600px;
     margin: 0 auto;
     outline: 1px solid var(--ifm-color-primary);
@@ -7,18 +7,18 @@
     border-radius: var(--ifm-global-radius);
 }
 
-.google-auth-form-container > * {
+.googleAuthFormContainer > * {
     margin-top: 10px;
 }
 
-.google-auth-form-label {
+.googleAuthFormLabel {
     display: block;
     margin-bottom: 5px;
     font-weight: bold;
     margin-left: 10px;
 }
 
-.google-auth-form-input {
+.googleAuthFormInput {
     width: 100%;
     padding: 10px;
     margin-bottom: 20px;
@@ -26,21 +26,21 @@
     box-sizing: border-box;
 }
 
-.google-auth-form-input:focus {
+.googleAuthFormInput:focus {
     outline: none;
     border-color: var(--ifm-color-primary-darkest);
     box-shadow: 0 0 5px var(--ifm-color-primary-darkest);
 }
 
 
-.google-auth-form-button {
+.googleAuthFormButton {
     width: 100%;
     size: 16px;
     font-size: 16px;
     font-weight: bold;
 }
 
-.google-auth-form-button:hover {
+.googleAuthFormButton:hover {
     transform: scale(1.025);
     box-shadow: 0 0 5px var(--ifm-color-primary-darkest);
     border-color: 0 0 5px var(--ifm-color-primary-darkest);

src/components/Toasts/index.tsx

@@ -1,12 +1,12 @@
 import { ToastContainer, toast, Slide } from 'react-toastify';
-import styles from './styles.module.css';
+import './styles.css';
 
 // Singleton showToast function
 export const showToast = (message: string, type: 'info' | 'error' | 'success', toastId?: string) => {
   toast(message, {
     type: type,
     toastId: toastId,
-    className: styles.customToast,
+    className: `wideToast`,
   });
 };
 
@@ -23,7 +23,7 @@ export function MyToastContainer(): JSX.Element {
       limit={10}
       theme="colored"
       transition={Slide}
-      className={styles.customContainer}
+      className="wideToastContainer"
       closeButton={false}
     />
   );

src/components/Toasts/styles.css

@@ -20,7 +20,7 @@
 }
 
 
-.customContainer {
+.wideToastContainer {
   width: auto; /* Ensure the width is auto to respect max-width */
   padding: 10px; /* Add padding to ensure space on all sides */
   left: 5vw; /* Add space on the left */
@@ -29,14 +29,14 @@
   transform: none; /* Remove transform */
   border-radius: var(--ifm-global-radius); /* Ensure the border-radius is respected */
 }
-.customToast {
+.wideToast {
   border-radius: var(--ifm-global-radius); /* Ensure the border-radius is respected */
   justify-content: center; /* Center content horizontally */
   box-shadow: var(--box-shadow); /* Use CSS variable */
 }
 
 @media only screen and (max-width : 480px) {
-  .customContainer {
+  .wideToastContainer {
     width: auto; /* Ensure the width is auto to respect max-width */
     padding: 10px; /* Add padding to ensure space on all sides */
     left: 5vw; /* Add space on the left */
@@ -45,7 +45,7 @@
     transform: none; /* Remove transform */
     border-radius: var(--ifm-global-radius); /* Ensure the border-radius is respected */
   }
-  .customToast {
+  .wideToast {
     border-radius: var(--ifm-global-radius); /* Ensure the border-radius is respected */
     justify-content: center; /* Center content horizontally */
 

src/css/custom.css

@@ -127,7 +127,7 @@
   box-shadow: none;
 }
 
-.custom-button:hover {
+.default-themed-button:hover {
   transform: scale(1.05);
   box-shadow: var(--button-hover-box-shadow);
   color: white;