Skip to content

Fix/ebooks searchbar theme dark mode #1075

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

Merged
merged 2 commits into from
Oct 26, 2025
Merged

Fix/ebooks searchbar theme dark mode #1075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19dc572
fix(TOS): improve grammar, clarity, and UI for Terms of Service page
Oct 25, 2025
103e49e
fix(ebooks): make search bar text and placeholder theme-aware for dar…
Oct 25, 2025
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
4 changes: 2 additions & 2 deletions src/pages/ebooks/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,14 @@
border-radius: 12px;
border: 1px solid var(--ifm-toc-border-color);
font-size: 1rem;
color: var(--ifm-font-color-base);
background-color: var(--ifm-background-color);
color: var(--ifm-color-gray-900);
box-shadow: var(--ifm-global-shadow-lw);
transition: all 0.25s ease;
}

.ebook-search-wrapper input.ebook-search::placeholder {
color: var(--ifm-color-gray-700);
color: var(--ifm-color-muted);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
color: var(--ifm-color-muted);
color: var(--ifm-color-content-secondary);

The CSS variable --ifm-color-muted used for the placeholder color doesn't exist in Docusaurus v3. This will cause the placeholder text color to fall back to browser defaults, breaking the intended dark/light theme support.

View Details

Analysis

Undefined CSS variable --ifm-color-muted breaks theme-aware placeholder color

What fails: Ebook search placeholder in src/pages/ebooks/index.css line 71 uses undefined --ifm-color-muted variable, causing placeholder text to fall back to browser defaults instead of Docusaurus theme colors

How to reproduce:

# Inspect the ebook search placeholder color in browser DevTools
npm run build && npm run serve
# Navigate to /ebooks page and inspect the search input placeholder

Result: Placeholder text color ignores dark/light theme switching and uses browser default gray instead of theme-appropriate colors

Expected: Placeholder should use theme-aware colors that adapt to light/dark mode like other UI elements

Root cause: --ifm-color-muted is not defined in Docusaurus v3 Infima CSS variables. Verified by examining node_modules/infima/dist/css/default/default.css - only --ifm-color-content-secondary (#525860) exists for secondary text content.

opacity: 0.6;
}

Expand Down
206 changes: 102 additions & 104 deletions src/pages/terms-service/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,91 @@
import React from "react";
import React, { useState } from "react";
import Layout from "@theme/Layout";

interface SectionProps {
id: string;
title: string;
children: React.ReactNode;
}

const Section: React.FC<SectionProps> = ({ id, title, children }) => {
const [open, setOpen] = useState(true);
return (
<div id={id} className="mb-6 border-b border-gray-200 pb-4">
<button
className="w-full text-left text-xl font-bold mb-2 flex justify-between items-center"
onClick={() => setOpen(!open)}
>
{title}
<span className="text-gray-500">{open ? "▲" : "▼"}</span>
</button>
{open && <div className="pl-2 text-justify">{children}</div>}
</div>
);
};

const TermsOfService: React.FC = () => {
return (
<Layout
title={"Terms and condition of recodehive.com"}
description="Terms of Service Page for recodehive Learners, and users"
title="Terms and Conditions of RecodeHive"
description="Terms of Service Page for RecodeHive learners and users"
>
<div className="mx-auto mt-8 mb-8 max-w-3xl rounded-lg p-6 text-justify font-sans text-base leading-relaxed shadow-lg">
<h2 className="mb-6 text-center text-2xl font-bold">
Terms of Service
</h2>
<p className="mb-6">
These Terms of Service govern your use of{" "}
<b className="dark:text-gray-900">recodehive</b>, provided by{" "}
<strong className="dark:text-gray-900">Sanjay Viswanathan</strong>.
Below are the Terms and Conditions for the use of www.recodehive.com.
Please read these carefully. If you need to contact us regarding any
aspect of the following terms of use of our website, please reach out
us at the following email address – [email protected].
</p>
<h3 className="mb-4 text-xl font-bold">Acceptance of Terms</h3>
<div className="mx-auto mt-8 mb-8 max-w-3xl rounded-lg p-6 font-sans text-base leading-relaxed shadow-lg bg-white dark:bg-gray-100">
<h1 className="mb-6 text-center text-3xl font-bold">Terms of Service</h1>
<p className="mb-6">
By accessing or using the Service, you acknowledge that you have read,
understood, and agree to be bound by these Terms, as well as any
additional terms and conditions, policies, and guidelines provided by
us. If you do not agree to these Terms, please refrain from using the
Service.
Welcome to <b>RecodeHive</b>, operated by <strong>Sanjay Viswanathan</strong>.
These Terms of Service govern your use of www.recodehive.com. Please read
carefully. If you have any questions, contact us at{" "}
<a href="mailto:[email protected]" className="text-blue-600 underline">
[email protected]
</a>.
</p>
<h3 className="mb-4 text-xl font-bold">Use of the Service</h3>
<ol className="mb-6 list-decimal pl-6">
<li className="mb-4">
<strong>Usage Instructions:</strong> You agree not to use the
website in a way that may impair the performance, corrupt or
manipulate the content or information available on the website or
reduce the overall functionality of the website.
</li>
<li className="mb-4">
<strong>License:</strong> We grant you a limited, non-exclusive,
non-transferable, and revocable license to access and use the
Service for your personal or internal business purposes. This
license does not permit any resale or commercial use of the Service.
</li>
<li className="mb-4">
<strong>User Conduct:</strong> You agree not to compromise the
security of the website or attempt to gain access to secured areas
of the website or attempt to access any sensitive information you
may believe exist on the website or server where it is hosted.
</li>
</ol>
<h3 className="mb-4 text-xl font-bold">Content</h3>
<ol className="mb-6 list-decimal pl-6">
<li className="mb-4">
<strong>User Content:</strong> You retain ownership of any content
you submit or upload to the Service (&quot;User Content&quot;). By
submitting User Content, you grant us a worldwide, royalty-free, and
non-exclusive license to use, reproduce, modify, adapt, publish,
translate, distribute, and display such User Content.
</li>
<li className="mb-4">
<strong>Intellectual Property:</strong> All content, trademarks,
service marks, logos, and other intellectual property displayed on
or related to the Service are the property of{" "}
<strong className="dark:text-gray-900">Sanjay Viswanathan</strong>{" "}
or its licensors. You may not use or display any of these without
our prior written consent.
</li>
<li className="mb-4">
<strong>Compensation:</strong> You agree to be fully responsible for
any claim, expense, losses, liability, costs including legal fees
incurred by us arising from any infringement of the terms and
conditions of this agreement and to which you will have agreed if
you continue to use the website.
</li>
</ol>
<h3 className="mb-4 text-xl font-bold">Privacy</h3>
<p className="mb-6">
Your privacy is important to us. Please review our{" "}

<Section id="acceptance" title="Acceptance of Terms">
By accessing or using RecodeHive, you agree to comply with these Terms
and any other guidelines provided by us. If you do not agree, please
refrain from using the Service.
</Section>

<Section id="use-of-service" title="Use of the Service">
<ol className="list-decimal pl-6">
<li className="mb-4">
<strong>Usage Instructions:</strong> Do not use the website in any way
that could impair its performance, corrupt content, or reduce overall functionality.
</li>
<li className="mb-4">
<strong>License:</strong> We grant a limited, non-exclusive, non-transferable,
revocable license for personal or internal business use only. Commercial use
is prohibited without prior consent.
</li>
<li className="mb-4">
<strong>User Conduct:</strong> Do not compromise website security,
attempt unauthorized access, or access sensitive information you are
not permitted to view.
</li>
</ol>
</Section>

<Section id="content" title="Content">
<ol className="list-decimal pl-6">
<li className="mb-4">
<strong>User Content:</strong> You retain ownership of content you
submit. By submitting, you grant RecodeHive a worldwide, royalty-free,
non-exclusive license to use, reproduce, modify, distribute, and display it.
</li>
<li className="mb-4">
<strong>Intellectual Property:</strong> All trademarks, logos, and other
intellectual property remain the property of Sanjay Viswanathan or its licensors.
Usage requires prior written consent.
</li>
<li className="mb-4">
<strong>Compensation:</strong> You are responsible for any claims, expenses,
or legal fees arising from violations of these Terms.
</li>
</ol>
</Section>

<Section id="privacy" title="Privacy">
Please review our{" "}
<a
href="/privacy-policy/"
target="_blank"
Expand All @@ -85,41 +94,30 @@ const TermsOfService: React.FC = () => {
>
Privacy Policy
</a>{" "}
to understand how we collect, use, and disclose your personal
information.
</p>
<h3 className="mb-4 text-xl font-bold">Termination</h3>
<p className="mb-6">
We reserve the right to suspend or terminate your access to the
Service at any time, with or without cause, and without notice or
liability.
</p>
to understand how your personal information is collected and used.
</Section>

<h3 className="mb-4 text-xl font-bold">Governing Law</h3>
<p className="mb-6">
These Terms shall be governed by and construed per the laws of India,
without regard to its conflict of law principles.
</p>
<h3 className="mb-4 text-xl font-bold">Changes to the Terms</h3>
<p className="mb-6">
Though we strive to be entirely accurate in the information that is
presented on our site and attempt to keep it as up to date as
possible, in some cases, some of the information you find on the
website may be slightly outdated. www.recodehive.com reserves the
right to make any modifications or corrections to the information you
find on the site at any time without notice.
</p>
<h3 className="mb-4 text-xl font-bold">Contact Us</h3>
<p>
If you have any questions about these Terms, please contact us at{" "}
<a
href="mailto:[email protected]"
className="text-blue-600 underline"
>
<Section id="termination" title="Termination">
We reserve the right to suspend or terminate access to the Service at any time,
with or without cause, and without prior notice or liability.
</Section>

<Section id="governing-law" title="Governing Law">
These Terms are governed by the laws of India, without regard to conflicts of law.
</Section>

<Section id="changes-to-terms" title="Changes to the Terms">
RecodeHive may update or modify these Terms at any time. Continued use of the
Service constitutes acceptance of the updated Terms. Users are responsible for
reviewing changes regularly.
</Section>

<Section id="contact" title="Contact Us">
If you have any questions regarding these Terms, contact us at{" "}
<a href="mailto:[email protected]" className="text-blue-600 underline">
[email protected]
</a>
.
</p>
</a>.
</Section>
</div>
</Layout>
);
Expand Down
Loading