Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve CSS of Language Selector Button and Remove "Powered by" Text from Google Translate Widget #169

Merged
merged 2 commits into from
Oct 8, 2024
Merged

Improve CSS of Language Selector Button and Remove "Powered by" Text from Google Translate Widget #169

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
270c335
Powered by is removed and some changes in the CSS are done
rebornstar1 Oct 8, 2024
3266dee
Merge branch 'main' into TestBranch
manikumarreddyu Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 62 additions & 56 deletions frontend/src/components/GoogleTranslate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import { useState } from "react";

const GoogleTranslate = () => {
const [isVisible,setIsVisible] = useState(true);
const [isVisible, setIsVisible] = useState(true);

useEffect(() => {
window.googleTranslateInit = () => {
Expand Down Expand Up @@ -48,61 +48,67 @@ const GoogleTranslate = () => {
}, []);

return (
<div id="google_element" className={`google-translate-container ${isVisible ? '' : 'hidden'}`}>
<style jsx>{`
.goog-te-combo {
background-color: #d1fae5; /* Light green background */
border: 2px solid #10b981; /* Green border */
border-radius: 0.375rem; /* Rounded edges */
padding: 0.5rem;
font-size: 0.75rem;
transition: all 0.2s;
outline: none;
z-index: 1; /* Ensure the dropdown doesn't overlap navbar */
}

.goog-te-combo:hover {
background-color: #86efac; /* Hover effect: lighter green */
border-color: #047857; /* Darker green border on hover */
}

/* Hide the Google Translate logo link and branding */
.goog-logo-link {
display: none !important;
}

/* Hide any extra branding text or elements */
.goog-te-gadget > span > a {
display: none !important;
}

/* Custom Google Translate styling */
#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';
}

/* Control the pop-up behavior */
.goog-te-banner-frame {
display: none !important; /* Hide the banner */
}

/* Optional: Contain the dropdown within specific boundaries */
.goog-te-menu-frame {
max-height: 400px !important; /* Limit height of the dropdown */
overflow-y: auto !important; /* Enable scrolling if too large */
}

.skiptranslate > iframe {
height: 0 !important;
border-style: none;
box-shadow: none;
}
`}</style>
</div>
<div id="google_element" className={`google-translate-container pl-20 md:pl-0 ${isVisible ? '' : 'hidden'}`}>
<style jsx>{`
.goog-te-combo {
background-color: #f0fdf4; /* Light green background (Tailwind equivalent: bg-green-50) */
border: 2px solid #10b981; /* Tailwind green-500 border */
border-radius: 0.5rem; /* Slightly more rounded (rounded-md in Tailwind) */
padding: 0.5rem 1rem; /* Tailwind: p-2 */
font-size: 0.875rem; /* Tailwind: text-sm */
transition: all 0.3s ease; /* Smooth transition */
outline: none;
color: #065f46; /* Dark green text (Tailwind: text-green-800) */
font-weight: 500; /* Tailwind: font-medium */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Slight shadow */
}

.goog-te-combo:hover {
background-color: #d1fae5; /* Hover effect: Tailwind equivalent of bg-green-100 */
border-color: #047857; /* Darker border (Tailwind: border-green-700) */
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 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: green !important;
}

#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';
}

.goog-te-banner-frame {
display: none !important;
}

.goog-te-menu-frame {
max-height: 400px !important;
overflow-y: auto !important;
}

.skiptranslate > iframe {
height: 0 !important;
border-style: none;
box-shadow: none;
}
`}</style>
</div>
);
};

Expand Down
Loading