From b276f21680e30e7ca04b09c41d00f5c312a9e4a1 Mon Sep 17 00:00:00 2001 From: Viren070 Date: Sat, 7 Dec 2024 01:45:45 +0000 Subject: [PATCH] trying to fix toasts --- src/components/GoogleOAuth/Callback.tsx | 5 ---- src/components/GoogleOAuth/index.tsx | 25 +++++++++---------- .../{styles.css => styles.module.css} | 14 +++++------ src/components/Toasts/index.tsx | 6 ++--- .../Toasts/{styles.module.css => styles.css} | 8 +++--- src/css/custom.css | 2 +- 6 files changed, 27 insertions(+), 33 deletions(-) rename src/components/GoogleOAuth/{styles.css => styles.module.css} (79%) rename src/components/Toasts/{styles.module.css => styles.css} (96%) diff --git a/src/components/GoogleOAuth/Callback.tsx b/src/components/GoogleOAuth/Callback.tsx index 15b608c..86be878 100644 --- a/src/components/GoogleOAuth/Callback.tsx +++ b/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'); diff --git a/src/components/GoogleOAuth/index.tsx b/src/components/GoogleOAuth/index.tsx index a5c2746..441afe0 100644 --- a/src/components/GoogleOAuth/index.tsx +++ b/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 ( -
+
- - + +
- - + +
- +
- - setAuthorisationCode(e.target.value)} /> + + setAuthorisationCode(e.target.value)} />
- +
{refreshToken.length > 0 && getCodeBlock()} diff --git a/src/components/GoogleOAuth/styles.css b/src/components/GoogleOAuth/styles.module.css similarity index 79% rename from src/components/GoogleOAuth/styles.css rename to src/components/GoogleOAuth/styles.module.css index 7fcba0c..e0f57cf 100644 --- a/src/components/GoogleOAuth/styles.css +++ b/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); diff --git a/src/components/Toasts/index.tsx b/src/components/Toasts/index.tsx index c4000bf..ec03833 100644 --- a/src/components/Toasts/index.tsx +++ b/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} /> ); diff --git a/src/components/Toasts/styles.module.css b/src/components/Toasts/styles.css similarity index 96% rename from src/components/Toasts/styles.module.css rename to src/components/Toasts/styles.css index a4ec542..932f216 100644 --- a/src/components/Toasts/styles.module.css +++ b/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 */ diff --git a/src/css/custom.css b/src/css/custom.css index c0d129f..12f44fb 100644 --- a/src/css/custom.css +++ b/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;