Add Multilingual Translator #193
Conversation
|
@17arindam is attempting to deploy a commit to the bunty's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes introduce a new React component, Changes
Possibly related PRs
Suggested labels
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (3)
frontend/src/components/Shared/GoogleTranslate.jsx (3)
36-38: Consider implementing cleanup logic.The cleanup function in the useEffect hook is currently empty. Consider implementing proper cleanup logic if needed, such as removing the script or cleaning up any global variables set by the Google Translate script.
4-39: LGTM: Good implementation with a suggestion for error handling.The implementation of the useEffect hook is well-structured and follows good practices for dynamically loading and initializing the Google Translate script. The retry mechanism is a nice touch for handling potential timing issues.
Consider adding more robust error handling, such as a maximum retry count or a timeout mechanism, to prevent infinite retries in case of persistent failures.
🧰 Tools
🪛 Biome
[error] 32-32: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
41-104: LGTM: Effective styling with room for improvement.The styling effectively customizes the Google Translate widget to fit the application's design. However, consider the following improvements:
- Move the styles to a separate CSS file for better maintainability.
- Use CSS-in-JS solutions like styled-components or emotion if you prefer keeping styles close to the component.
- Consider using CSS variables for colors and other repeated values to make theme changes easier in the future.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
frontend/src/assets/img/google.pngis excluded by!**/*.png
📒 Files selected for processing (2)
- frontend/src/components/Shared/GoogleTranslate.jsx (1 hunks)
- frontend/src/components/Shared/footer/Content.jsx (5 hunks)
🧰 Additional context used
🪛 Biome
frontend/src/components/Shared/GoogleTranslate.jsx
[error] 32-32: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (7)
frontend/src/components/Shared/footer/Content.jsx (4)
4-4: LGTM: GoogleTranslate component import added correctly.The import statement for the GoogleTranslate component is properly placed and follows React conventions.
39-40: LGTM: Responsive design improvements in Section2 component.The changes enhance the component's responsiveness by applying different styles based on screen width. The use of template literals for conditional class names is appropriate and follows React best practices.
Also applies to: 43-44, 49-50
86-86: LGTM: Instagram link updated in socialLink array.The Instagram profile link has been updated, maintaining consistency with other social media links in the array.
116-116: Excellent addition of aria-labels for improved accessibility!The addition of aria-labels to social media links enhances accessibility for screen readers. The dynamic insertion of the platform name and the indication that the link opens in a new tab improve the user experience for all users.
frontend/src/components/Shared/GoogleTranslate.jsx (3)
1-3: LGTM: Imports and component declaration are correct.The imports and component declaration follow React best practices. The
useEffecthook is correctly imported, which will be used for managing side effects in the component.
107-107: LGTM: Correct export statement.The default export of the GoogleTranslate component is correct and follows common React practices.
6-6:⚠️ Potential issueUse optional chaining for safer property access.
Consider using optional chaining for accessing
window.google.translate.TranslateElementto prevent potential errors if the intermediate properties are undefined.Apply this change:
-if (!window.google?.translate?.TranslateElement) { +if (!window.google?.translate?.TranslateElement) {Likely invalid or redundant comment.
| <div className="flex items-center justify-center mt-4"> | ||
| <img | ||
| src="https://w7.pngwing.com/pngs/211/630/png-transparent-google-translate-translation-android-noodle-blue-english-text.png" | ||
| alt="Google Translate" | ||
| className="w-12 h-12" | ||
| /> | ||
| <GoogleTranslate/> | ||
| </div> |
There was a problem hiding this comment.
💡 Codebase verification
Issues Found: Review of Google Translate integration implementation
-
The image source still uses an external URL. Consider using a local asset to mitigate potential security risks and improve load performance.
-
The
GoogleTranslatecomponent relies on an external script from Google Translate. Ensure that this dependency is necessary and assess any security implications it may introduce. -
The placement of the translation feature within the "Contact Us" section may hinder user accessibility. Consider relocating it to a more prominent area, such as the header or a persistent floating button, to enhance visibility and usability.
🔗 Analysis chain
Review needed: Google Translate integration implementation
The addition of the Google Translate UI elements aligns with the PR objective. However, there are a few points to consider:
-
The image source uses an external URL. Consider using a local asset instead to avoid potential security risks and improve performance.
-
The GoogleTranslate component is rendered, but its implementation is not visible in this file. Could you provide more information about how this component works and handles the translation functionality?
-
The placement of the translation feature within the "Contact Us" section of the footer may not be ideal for user accessibility. Consider moving it to a more prominent location, such as the header or a floating button, to make it easily discoverable for users.
To ensure the GoogleTranslate component is properly implemented, please run the following script:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the implementation of the GoogleTranslate component
# Test: Check if the GoogleTranslate component file exists
fd --type f --full-path "GoogleTranslate.(js|jsx|ts|tsx)" src
# Test: Examine the content of the GoogleTranslate component
fd --type f --full-path "GoogleTranslate.(js|jsx|ts|tsx)" src --exec cat {}
# Test: Check for any Google Translate API usage
rg --type js "translate\.google\.com" src
Length of output: 413
Script:
#!/bin/bash
# Description: Verify the implementation of the GoogleTranslate component without assuming a 'src' directory
# Test: Check if the GoogleTranslate component file exists anywhere in the repository
fd --type f --full-path "GoogleTranslate.(js|jsx|ts|tsx)" .
# Test: Examine the content of the GoogleTranslate component if it exists
fd --type f --full-path "GoogleTranslate.(js|jsx|ts|tsx)" . --exec cat {}
# Test: Check for any Google Translate API usage across the repository
rg --type js "translate\.google\.com" .
Length of output: 4118
| <style jsx>{` | ||
| .goog-te-combo { | ||
| display: inline-block; | ||
| background-color: #e0f2ff; /* Light blue background */ | ||
| border: 2px solid #0056b3; /* Dark blue border */ | ||
| border-radius: 0.5rem; /* Slightly more rounded */ | ||
| padding: 0.5rem 1rem; /* Tailwind: p-2 */ | ||
| font-size: 0.875rem; /* Tailwind: text-sm */ | ||
| transition: all 0.3s ease; /* Smooth transition */ | ||
| outline: none; | ||
| color: #000; /* Black text */ | ||
| font-weight: 500; /* Tailwind: font-medium */ | ||
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow */ | ||
| } | ||
| .goog-te-combo:hover { | ||
| background-color: #b3e0ff; /* Lighter blue on hover */ | ||
| border-color: #004494; /* Darker blue on hover */ | ||
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */ | ||
| } | ||
| .goog-logo-link { | ||
| display: none !important; | ||
| } | ||
| .goog-te-gadget { | ||
| color: transparent !important; | ||
| } | ||
| .goog-te-gadget > span > a { | ||
| display: none !important; | ||
| } | ||
| .goog-te-gadget .goog-te-combo { | ||
| color: #0056b3 !important; /* Dark blue text */ | ||
| } | ||
| #google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child { | ||
| display: none; | ||
| } | ||
| #google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before { | ||
| content: 'Translate'; /* Change the default text */ | ||
| color: #0056b3; /* Dark blue text */ | ||
| } | ||
| .goog-te-banner-frame { | ||
| display: none !important; | ||
| } | ||
| .goog-te-menu-frame { | ||
| max-height: 400px !important; | ||
| overflow-y: auto !important; | ||
| background-color: #fff; /* White background for dropdown */ | ||
| border: 1px solid #cce5ff; /* Light blue border */ | ||
| border-radius: 0.5rem; /* Slightly more rounded */ | ||
| } | ||
| /* Hide the banner frame */ | ||
| .goog-te-banner-frame { | ||
| display: none !important; | ||
| } | ||
| /* Customize the iframe */ | ||
| .skiptranslate > iframe { | ||
| height: 0 !important; | ||
| border-style: none; | ||
| box-shadow: none; | ||
| } | ||
| `} | ||
| </style> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider moving inline styles to a separate CSS file.
While the inline styles effectively customize the Google Translate widget, moving them to a separate CSS file would improve maintainability and reusability. This separation of concerns aligns with best practices in React development.
| .goog-te-banner-frame { | ||
| display: none !important; | ||
| } |
There was a problem hiding this comment.
Remove duplicated styles.
The style for hiding the banner frame is duplicated. Consider removing this duplicate to keep the styles DRY (Don't Repeat Yourself).
Remove these lines as they are already defined earlier:
- /* Hide the banner frame */
- .goog-te-banner-frame {
- display: none !important;
- }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .goog-te-banner-frame { | |
| display: none !important; | |
| } |
|
@RamakrushnaBiswal please review my pr issue no - #176 |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (1)
frontend/src/components/Shared/GoogleTranslate.jsx (1)
36-38: Clean up global variables on component unmountThe
useEffecthook defines a global functionwindow.googleTranslateInit. To prevent potential memory leaks or unintended side effects, consider cleaning up this global function when the component unmounts.Update the cleanup function as follows:
return () => { - // Cleanup logic if necessary + delete window.googleTranslateInit; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- frontend/src/components/Shared/GoogleTranslate.jsx (1 hunks)
- frontend/src/components/Shared/footer/Content.jsx (5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/components/Shared/footer/Content.jsx
🧰 Additional context used
🪛 Biome
frontend/src/components/Shared/GoogleTranslate.jsx
[error] 32-32: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
| } else { | ||
| new window.google.translate.TranslateElement({ | ||
| pageLanguage: 'en', | ||
| includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,es,nl,fr,de,it,ta,te', |
There was a problem hiding this comment.
Remove duplicate language code 'es' in includedLanguages
The language code 'es' for Spanish is included twice in the includedLanguages string. This duplication is unnecessary and can be removed to prevent any potential issues.
Apply this diff to remove the duplicate:
includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,es,nl,fr,de,it,ta,te',
- includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,es,nl,fr,de,it,ta,te',
+ includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,nl,fr,de,it,ta,te',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,es,nl,fr,de,it,ta,te', | |
| includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,nl,fr,de,it,ta,te', |
|
|
||
| loadGoogleTranslateScript(); | ||
|
|
||
| if (window.google && window.google.translate) { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplify condition using optional chaining
You can simplify the condition by using optional chaining, which enhances readability by concisely checking for the existence of window.google and window.google.translate.
Apply this diff to simplify the condition:
- if (window.google && window.google.translate) {
+ if (window.google?.translate) {
window.googleTranslateInit();
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (window.google && window.google.translate) { | |
| if (window.google?.translate) { |
🧰 Tools
🪛 Biome
[error] 32-32: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
| window.googleTranslateInit = () => { | ||
| if (!window.google?.translate?.TranslateElement) { | ||
| setTimeout(window.googleTranslateInit, 100); | ||
| } else { | ||
| new window.google.translate.TranslateElement({ | ||
| pageLanguage: 'en', | ||
| includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,ja,ko,zh-CN,es,nl,fr,de,it,ta,te', | ||
| layout: window.google.translate.TranslateElement.InlineLayout.HORIZONTAL, | ||
| defaultLanguage: 'en', | ||
| autoDisplay: false, | ||
| }, 'google_element'); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Prevent potential infinite retries in googleTranslateInit function
The googleTranslateInit function retries initialization every 100ms if window.google.translate.TranslateElement is not available. If the TranslateElement never becomes available (e.g., due to network issues or script loading failure), this could result in infinite retries, potentially impacting performance.
Consider adding a retry limit or a timeout to prevent infinite retries. Here's how you might implement a retry limit:
+ let retryCount = 0;
+ const maxRetries = 50; // Adjust as needed
window.googleTranslateInit = () => {
if (!window.google?.translate?.TranslateElement) {
+ if (retryCount < maxRetries) {
+ retryCount++;
setTimeout(window.googleTranslateInit, 100);
+ } else {
+ console.error('Failed to initialize Google Translate after maximum retries.');
+ }
} else {
new window.google.translate.TranslateElement({
pageLanguage: 'en',Alternatively, you could implement a timeout mechanism:
+ const startTime = Date.now();
+ const timeout = 5000; // Timeout after 5 seconds
window.googleTranslateInit = () => {
if (!window.google?.translate?.TranslateElement) {
+ if (Date.now() - startTime < timeout) {
setTimeout(window.googleTranslateInit, 100);
+ } else {
+ console.error('Failed to initialize Google Translate within the timeout period.');
+ }
} else {
new window.google.translate.TranslateElement({
pageLanguage: 'en',Committable suggestion was skipped due to low confidence.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- frontend/src/components/Shared/GoogleTranslate.jsx (1 hunks)
🧰 Additional context used
🔇 Additional comments (1)
frontend/src/components/Shared/GoogleTranslate.jsx (1)
50-105: Consider moving inline styles to a separate CSS fileMaintaining styles in a separate CSS file improves readability and reusability. This separation aligns with best practices in React development.
| return () => { | ||
| // Cleanup logic if necessary | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add cleanup logic in the useEffect cleanup function
The useEffect hook returns a cleanup function, but it currently contains only a placeholder comment. To prevent potential memory leaks and side effects, consider adding necessary cleanup logic when the component unmounts.
For example, you might want to remove the script or clean up global functions:
return () => {
// Cleanup logic if necessary
+ // Remove the Google Translate script
+ const script = document.getElementById("google_translate_script");
+ if (script) {
+ document.body.removeChild(script);
+ }
+
+ // Remove the global function
+ delete window.googleTranslateInit;
};Committable suggestion was skipped due to low confidence.
| <style jsx>{` | ||
| .goog-te-combo { | ||
| display: inline-block; | ||
| background-color: #e0f2ff; /* Light blue background */ | ||
| border: 2px solid #0056b3; /* Dark blue border */ | ||
| border-radius: 0.5rem; /* Slightly more rounded */ | ||
| padding: 0.5rem 1rem; /* Tailwind: p-2 */ | ||
| font-size: 0.875rem; /* Tailwind: text-sm */ | ||
| transition: all 0.3s ease; /* Smooth transition */ | ||
| outline: none; | ||
| color: #000; /* Black text */ | ||
| font-weight: 500; /* Tailwind: font-medium */ | ||
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow */ | ||
| } | ||
| .goog-te-combo:hover { | ||
| background-color: #b3e0ff; /* Lighter blue on hover */ | ||
| border-color: #004494; /* Darker blue on hover */ | ||
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */ | ||
| } | ||
| .goog-logo-link { | ||
| display: none !important; | ||
| } | ||
| .goog-te-gadget { | ||
| color: transparent !important; | ||
| } | ||
| .goog-te-gadget > span > a { | ||
| display: none !important; | ||
| } | ||
| .goog-te-gadget .goog-te-combo { | ||
| color: #0056b3 !important; /* Dark blue text */ | ||
| } | ||
| #google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child { | ||
| display: none; | ||
| } | ||
| #google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before { | ||
| content: 'Translate'; /* Change the default text */ | ||
| color: #0056b3; /* Dark blue text */ | ||
| } | ||
| .goog-te-banner-frame { | ||
| display: none !important; | ||
| } | ||
| .goog-te-menu-frame { | ||
| max-height: 400px !important; | ||
| overflow-y: auto !important; | ||
| background-color: #fff; /* White background for dropdown */ | ||
| border: 1px solid #cce5ff; /* Light blue border */ | ||
| border-radius: 0.5rem; /* Slightly more rounded */ | ||
| } | ||
| /* Customize the iframe */ | ||
| .skiptranslate > iframe { | ||
| height: 0 !important; | ||
| border-style: none; | ||
| box-shadow: none; | ||
| } | ||
| `} | ||
| </style> |
There was a problem hiding this comment.
Ensure global styles apply correctly by adding the global attribute
The styles within the <style jsx> tag are scoped locally to the component by default. Since you're targeting global classes from the Google Translate widget (e.g., .goog-te-combo, .goog-te-banner-frame), these styles may not be applied as intended.
Apply this change to ensure the styles are global:
- <style jsx>{`
+ <style jsx global>{`📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <style jsx>{` | |
| .goog-te-combo { | |
| display: inline-block; | |
| background-color: #e0f2ff; /* Light blue background */ | |
| border: 2px solid #0056b3; /* Dark blue border */ | |
| border-radius: 0.5rem; /* Slightly more rounded */ | |
| padding: 0.5rem 1rem; /* Tailwind: p-2 */ | |
| font-size: 0.875rem; /* Tailwind: text-sm */ | |
| transition: all 0.3s ease; /* Smooth transition */ | |
| outline: none; | |
| color: #000; /* Black text */ | |
| font-weight: 500; /* Tailwind: font-medium */ | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow */ | |
| } | |
| .goog-te-combo:hover { | |
| background-color: #b3e0ff; /* Lighter blue on hover */ | |
| border-color: #004494; /* Darker blue on hover */ | |
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */ | |
| } | |
| .goog-logo-link { | |
| display: none !important; | |
| } | |
| .goog-te-gadget { | |
| color: transparent !important; | |
| } | |
| .goog-te-gadget > span > a { | |
| display: none !important; | |
| } | |
| .goog-te-gadget .goog-te-combo { | |
| color: #0056b3 !important; /* Dark blue text */ | |
| } | |
| #google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child { | |
| display: none; | |
| } | |
| #google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before { | |
| content: 'Translate'; /* Change the default text */ | |
| color: #0056b3; /* Dark blue text */ | |
| } | |
| .goog-te-banner-frame { | |
| display: none !important; | |
| } | |
| .goog-te-menu-frame { | |
| max-height: 400px !important; | |
| overflow-y: auto !important; | |
| background-color: #fff; /* White background for dropdown */ | |
| border: 1px solid #cce5ff; /* Light blue border */ | |
| border-radius: 0.5rem; /* Slightly more rounded */ | |
| } | |
| /* Customize the iframe */ | |
| .skiptranslate > iframe { | |
| height: 0 !important; | |
| border-style: none; | |
| box-shadow: none; | |
| } | |
| `} | |
| </style> | |
| <style jsx global>{` | |
| .goog-te-combo { | |
| display: inline-block; | |
| background-color: #e0f2ff; /* Light blue background */ | |
| border: 2px solid #0056b3; /* Dark blue border */ | |
| border-radius: 0.5rem; /* Slightly more rounded */ | |
| padding: 0.5rem 1rem; /* Tailwind: p-2 */ | |
| font-size: 0.875rem; /* Tailwind: text-sm */ | |
| transition: all 0.3s ease; /* Smooth transition */ | |
| outline: none; | |
| color: #000; /* Black text */ | |
| font-weight: 500; /* Tailwind: font-medium */ | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Slight shadow */ | |
| } | |
| .goog-te-combo:hover { | |
| background-color: #b3e0ff; /* Lighter blue on hover */ | |
| border-color: #004494; /* Darker blue on hover */ | |
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */ | |
| } | |
| .goog-logo-link { | |
| display: none !important; | |
| } | |
| .goog-te-gadget { | |
| color: transparent !important; | |
| } | |
| .goog-te-gadget > span > a { | |
| display: none !important; | |
| } | |
| .goog-te-gadget .goog-te-combo { | |
| color: #0056b3 !important; /* Dark blue text */ | |
| } | |
| #google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child { | |
| display: none; | |
| } | |
| #google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before { | |
| content: 'Translate'; /* Change the default text */ | |
| color: #0056b3; /* Dark blue text */ | |
| } | |
| .goog-te-banner-frame { | |
| display: none !important; | |
| } | |
| .goog-te-menu-frame { | |
| max-height: 400px !important; | |
| overflow-y: auto !important; | |
| background-color: #fff; /* White background for dropdown */ | |
| border: 1px solid #cce5ff; /* Light blue border */ | |
| border-radius: 0.5rem; /* Slightly more rounded */ | |
| } | |
| /* Customize the iframe */ | |
| .skiptranslate > iframe { | |
| height: 0 !important; | |
| border-style: none; | |
| box-shadow: none; | |
| } | |
| `} | |
| </style> |
|
@RamakrushnaBiswal i have resolved conflicts please review my pr |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
hi @17arindam it doesn't looks good and also don't use css use tailwind css. |
|
@RamakrushnaBiswal actually the classes are coming from google translator api because of that the tailwind code is not implementing correctly i have improved the ui of google translator |
|
@RamakrushnaBiswal please review my changes |
|
@17arindam do something like this |
RamakrushnaBiswal
added
enhancement
|
@RamakrushnaBiswal please check the updated ui |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
README.md (1)
252-253: Replace hard tabs with spaces for better compatibility.The static analysis tool has flagged the use of hard tabs on lines 252, 253, 296, and 297. While this doesn't affect functionality, it's recommended to use spaces instead of tabs for better compatibility across different platforms and editors. This will also improve the overall consistency of the document.
Consider replacing the hard tabs with spaces. Most modern text editors have a setting to automatically convert tabs to spaces.
Also applies to: 296-297
🧰 Tools
🪛 Markdownlint
252-252: Column: 1
Hard tabs(MD010, no-hard-tabs)
253-253: Column: 1
Hard tabs(MD010, no-hard-tabs)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- README.md (2 hunks)
- frontend/src/components/Shared/GoogleTranslate.jsx (1 hunks)
- frontend/src/components/Shared/footer/Content.jsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/src/components/Shared/GoogleTranslate.jsx
- frontend/src/components/Shared/footer/Content.jsx
🧰 Additional context used
🪛 Markdownlint
README.md
252-252: Column: 1
Hard tabs(MD010, no-hard-tabs)
253-253: Column: 1
Hard tabs(MD010, no-hard-tabs)
296-296: Column: 1
Hard tabs(MD010, no-hard-tabs)
297-297: Column: 1
Hard tabs(MD010, no-hard-tabs)
🔇 Additional comments (2)
README.md (2)
238-244: LGTM! New contributors added successfully.The changes to the contributors section look good. New contributors MANI and Ali Gates have been added following the existing format, and the table layout has been adjusted appropriately to accommodate them.
Also applies to: 252-253, 254-260
Line range hint
238-297: Overall, the changes look good with a minor formatting suggestion.The updates to the contributors section have been implemented correctly, maintaining consistency with the existing format. The only suggestion is to address the use of hard tabs in a few lines for better cross-platform compatibility. Once this minor formatting issue is resolved, the changes will be ready for merging.
🧰 Tools
🪛 Markdownlint
252-252: Column: 1
Hard tabs(MD010, no-hard-tabs)
253-253: Column: 1
Hard tabs(MD010, no-hard-tabs)
|
LGTM 🚀 |
RamakrushnaBiswal
merged commit 4012b50
into
RamakrushnaBiswal:main
This PR integrates the google multilingual translator enabling users to translate content into multiple languages. This feature enhances accessibility and user experience for a diverse audience.
Screen.Recording.2024-10-09.224532.mp4
Summary by CodeRabbit
New Features
Documentation