Skip to content

Fix/dark mode text visibility #545

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

Closed
wants to merge 6 commits into from
Closed

Fix/dark mode text visibility #545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6c5c989
Add new class for text wrapping
rahul-vyas-dev Nov 8, 2025
0dffc38
feat: Add installation guides for Fedora, Ubuntu, Debian, and Raspbia…
rahul-vyas-dev Nov 9, 2025
bbed799
fix: Update button type definition and ensure selectedOS is set as st…
rahul-vyas-dev Nov 9, 2025
bcae826
fix: Standardize import statements and improve code formatting in ins…
rahul-vyas-dev Nov 10, 2025
6ff4e51
feat: Implement dark mode support in MorePage component
rahul-vyas-dev Nov 11, 2025
9d321c7
fixing formatting in according to prettier config file
rahul-vyas-dev Nov 11, 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
Binary file added public/assets/Images/fedora-step1.webp
View file
Open in desktop
Copy link
Member

@sa-fw-an sa-fw-an Nov 15, 2025

Choose a reason for hiding this comment

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

These files are not even related to the PR. Why are they even pushed with the PR?

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/Images/guid-image-1.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
125 changes: 125 additions & 0 deletions src/components/Installation-guid/Debian.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import { motion } from 'framer-motion';
import img1 from '../../../public/assets/Images/guid-image-1.webp';

function Debian() {
return (
<>
<motion.section
initial={{ opacity: 0, x: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
className="mt-5"
>
<div className="flex flex-col gap-5">
<h2 className="text-center text-4xl font-medium">
Install Sugar on Debian
</h2>
<span className="text-center text-gray-700 text-xl">
Debian is a free, stable Linux distribution. Sugar packages are
available in Debian releases — use the commands below depending on
your Debian version.
<a
href="https://www.debian.org/"
className=" hover:text-blue-800 underline"
>
<b>click here</b>
</a>{' '}
<img src={`${img1}`} alt="Download Sugar for Debian" />
</span>
</div>
</motion.section>
<motion.section
initial={{ opacity: 0, x: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
className="mt-5"
>
<div>
<div className="flex flex-col gap-4">
<h3 className="text-3xl font-semibold text-center">
Using Sugar 0.112 on Debian Buster
</h3>

<p className="text-center text-xl">
Sugar 0.112 will be available in Debian Buster. Install from the
default repositories:
</p>

<p className="text-center text-gray-700 text-xl">
After installation, log out and choose the <strong>Sugar</strong>{' '}
session at the login screen.
</p>
</div>
</div>
</motion.section>{' '}
<motion.section
initial={{ opacity: 0, x: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
className="mt-5"
>
<div>
<div className="flex flex-col gap-4 mt-6">
<h3 className="text-3xl font-semibold text-center">
Using Sugar 0.110 on Debian Stretch
</h3>

<p className="text-center text-xl">
Sugar 0.110 is available in Debian Stretch. To install on a fresh
Stretch installation:
</p>
<p className="text-center text-gray-600">
During the Debian installer, when asked which collections to
include, deselect all to keep a minimal system; then install{' '}
<code>sucrose</code> and a display manager like{' '}
<code>lightdm</code>.
</p>
<b className="text-center">
when the install has completed, log in, install Sugar, a display
manager, and reboot, type
</b>
<div className="flex flex-col items-center gap-3">
<pre>
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
sudo apt install sucrose lightdm
</code>
</pre>
<button
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
onClick={() =>
navigator.clipboard.writeText(
'sudo apt install sucrose lightdm',
)
}
>
Copy
</button>

<pre>
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
exec sudo reboot
</code>
</pre>
<button
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
onClick={() =>
navigator.clipboard.writeText('exec sudo reboot')
}
>
Copy
</button>
</div>

<p className="text-center text-gray-700 text-xl">
At the graphical login screen change from the default X session to{' '}
<strong>Sugar</strong>, then log in with the non-root user you
created during install.
</p>
</div>
</div>
</motion.section>
</>
);
}

export default Debian;
181 changes: 181 additions & 0 deletions src/components/Installation-guid/Fedora.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
import { motion } from 'framer-motion';
import img1 from '../../../public/assets/Images/fedora-step1.webp';

function Fedora() {
return (
<>
<main>
<motion.article className="mx-auto p-6 flex items-center flex-col max-w-10/12">
<h1 className="text-4xl font-sans font-bold text-center">
Steps to install Sugar using Fedora
</h1>

<motion.section
initial={{ opacity: 0, x: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
className="mt-5"
>
<div className="flex flex-col gap-5">
<div>
<h3 className="font-medium text-gray-600 flex justify-center">
Step 1
</h3>
</div>
<span className="text-3xl text-center">
Install <b>Fedora</b> on your device.
<a
href="https://getfedora.org/"
className=" hover:text-blue-800 underline"
>
{' '}
Click here{' '}
</a>
</span>
<desc className=" text-gray-600 text-center">
Download the Fedora ARM image for your Raspberry Pi from the
official Fedora website. Make sure to select the version that
matches your Raspberry Pi model.
</desc>
</div>
<div>
<img src={`${img1}`} alt="Download Fedora for Raspberry Pi" />
</div>
</motion.section>

<motion.section
initial={{ opacity: 0, x: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
className="mt-5"
>
<div className="flex flex-col gap-5 ">
<h3 className="font-medium text-gray-600 flex justify-center">
Step 2
</h3>
<ol className="flex flex-col gap-5">
<li className=" text-4xl text-center font-medium flex justify-center">
Open the Terminal & Run the command:
</li>
<li className="text-xl text-center flex gap-2.5">
<code className="font-mono bg-gray-100 px-2 py-1 rounded-2xl hover:bg-gray-200 text-wrap">
sudo dnf groupinstall sugar-desktop
</code>
<button
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
onClick={() => {
navigator.clipboard.writeText(
'sudo dnf groupinstall sugar-desktop',
);
}}
>
Copy
</button>
</li>
<div className="flex flex-col gap-3 items-center">
<li className="text-center text-3xl font-medium flex justify-center">
Restart your system:
</li>
<div className="text-center flex items-center gap-2.5">
<pre className="text-center">
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
sudo reboot
</code>
</pre>{' '}
<button
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
onClick={() => {
navigator.clipboard.writeText('sudo reboot');
}}
>
Copy
</button>
</div>
</div>
<li className="text-center text-3xl font-medium ">
On the login screen, select the <strong>Sugar Desktop</strong>{' '}
session.
</li>
</ol>
</div>
</motion.section>

<motion.section
initial={{ opacity: 0, x: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
className="mt-5"
>
<div className="flex flex-col gap-5">
<h3 className="font-medium text-gray-600 flex justify-center">
Step 3
</h3>
<h2 className="text-center text-4xl font-medium">
Using Sugar Inside GNOME
</h2>
<ol className="flex flex-col gap-4">
<li className="text-center text-3xl">
Select GNOME on Xorg or GNOME Classic at login.
</li>
<li className="text-center">
<span className="text-center text-2xl font-medium">
Open Terminal and run:
</span>
<pre className="flex flex-col text-xl gap-1.5">
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
sudo dnf groupinstall sugar-desktop
</code>
<button
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
onClick={() => {
navigator.clipboard.writeText(
'sudo dnf groupinstall sugar-desktop',
);
}}
>
Copy
</button>
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
sudo dnf install sugar-runner
</code>
<button
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
onClick={() => {
navigator.clipboard.writeText(
'sudo dnf install sugar-runner',
);
}}
>
Copy
</button>
</pre>
</li>
<li className="text-center text-xl font-medium">
Start Sugar:
<pre>
<code className="font-mono bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
sugar-runner
</code>
<button
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
onClick={() => {
navigator.clipboard.writeText('sugar-runner');
}}
>
Copy
</button>
</pre>
</li>
<li>
<strong>Logout from Sugar to return to GNOME.</strong>
</li>
</ol>
</div>
</motion.section>
</motion.article>
</main>
</>
);
}

export default Fedora;
77 changes: 77 additions & 0 deletions src/components/Installation-guid/Raspbian.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { motion } from 'framer-motion';
import img1 from '../../../public/assets/Images/fedora-step1.webp';

function Raspbian() {
return (
<div className="w-full max-w-3xl mx-auto p-6 space-y-6">
<h1 className="text-3xl font-bold">Installing Sugar on Raspberry Pi</h1>

<p className="text-base leading-relaxed">
Raspberry Pi devices are small, low-cost computers that work well with
Sugar. To use Sugar, you'll need a display, keyboard, and mouse.
</p>
<img src={`${img1}`} alt="" />
<motion.section
className="space-y-3"
initial={{ opacity: 0, x: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
>
<h2 className="text-2xl font-semibold">
Recommended Method: Sugar on a Stick(SoaS)
</h2>
<p>
The most reliable way to run Sugar on a Raspberry Pi is by using{' '}
<b>Sugar on a Stick</b>, a Fedora-based build that ships with many
activities and receives regular security updates.
<a
href="https://wiki.sugarlabs.org/go/Installation"
className=" hover:text-blue-800 underline"
>
<b> Click here for more info</b>
</a>
</p>
</motion.section>

<motion.section
className="space-y-3"
initial={{ opacity: 0, x: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
>
<h2 className="text-2xl font-semibold">Other Installation Options</h2>
<ul className="list-disc ml-6 space-y-2">
<li>
<b>Fedora:</b> Actively used for Sugar development and provides
strong tooling.
</li>
<li>
<b>Debian:</b> Stable environment with good ARM support for
Raspberry Pi.
</li>
<li>
<b>Ubuntu:</b> Works well for general Sugar usage and familiar
workflows.
</li>
</ul>
</motion.section>

<motion.section
className="space-y-3"
initial={{ opacity: 0, x: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.3 }}
>
<h2 className="text-2xl font-semibold">Development Notes</h2>
<p>
Developers usually choose <b>Fedora</b> or <b>Debian</b> when setting
up a development environment for Sugar on Raspberry Pi, since both
align closely with the platforms used for Sugar development on
standard computers.
</p>
</motion.section>
</div>
);
}

export default Raspbian;
Loading