Skip to content

fix(electron): resolve gradient heading disappearing in fullscreen mode #480

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

Open
mahek2016 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(electron): resolve gradient heading disappearing in fullscreen mode #480

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
75d80aa
fix(electron): apply CSS-only gradient fallback for Electron fullscre…
mahek2016 Feb 24, 2026
1c2dde3
fix(electron): prevent gradient text rendering issue in fullscreen mode
mahek2016 Feb 25, 2026
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
3 changes: 3 additions & 0 deletions eduaid_web/.dockerignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
.git
.env
12 changes: 12 additions & 0 deletions eduaid_web/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]
Comment on lines +1 to +12
Copy link

@coderabbitai coderabbitai bot Feb 25, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

Node.js 18 end of life date

💡 Result:

Node.js 18.x reached End of Life (EOL) on April 30, 2025 (no further security updates after that date). [1][2]

Sources: Node.js v18.20.8 release note (states the scheduled EOL date) [1]; Node.js Releases page (shows v18 is End-of-life) [2].

🏁 Script executed:

# Check project structure and package.json
cd eduaid_web
ls -la | head -20
cat -n package.json 2>/dev/null | head -50

Repository: AOSSIE-Org/EduAid

Length of output: 2181

🏁 Script executed:

# Check if .dockerignore exists
ls -la | grep dockerignore

Repository: AOSSIE-Org/EduAid

Length of output: 43

Container runs as root and uses dev server for production.

Several concerns with this Dockerfile:

  1. No non-root user (Trivy DS-0002): The container runs as root by default, which is a security risk.
  2. npm start runs the React development server, which is not suited for production. The app should be built and static files served (e.g., via nginx).
  3. Node 18 reached EOL on April 30, 2025. Consider using node:20-alpine or node:22-alpine.
Proposed production-ready Dockerfile 
-FROM node:18-alpine
-
-WORKDIR /app
-
-COPY package*.json ./
-RUN npm install
-
-COPY . .
-
-EXPOSE 3000
-
-CMD ["npm", "start"]
+# Stage 1: Build
+FROM node:20-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+# Stage 2: Serve
+FROM nginx:alpine
+COPY --from=build /app/build /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
📝 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.

Suggested change
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
# Stage 1: Build
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# Stage 2: Serve
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
🧰 Tools
🪛 Trivy (0.69.1)

[error] 1-1: Image user should not be 'root'

Specify at least 1 USER command in Dockerfile with non-root user as argument

Rule: DS-0002

Learn more

(IaC/Dockerfile)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@eduaid_web/Dockerfile` around lines 1 - 12, The Dockerfile currently uses
node:18-alpine, runs npm install/build as root and launches the React dev server
via CMD ["npm","start"]; fix by converting to a multi-stage, production-ready
build: use a supported base (node:20-alpine or node:22-alpine) for the build
stage, create a non-root user/group (e.g., addgroup/adduser and chown WORKDIR)
and run npm ci / npm run build in that stage (reference WORKDIR, RUN npm
install), then copy the built static files into a minimal nginx (or httpd)
runtime image and serve them there; ensure the final image switches to a
non-root USER, remove CMD ["npm","start"] and replace with the appropriate nginx
foreground command, and update EXPOSE if needed.

34 changes: 33 additions & 1 deletion eduaid_web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
@tailwind components;
@tailwind utilities;

/* =========================
Base Styles
========================= */

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
Expand All @@ -16,10 +20,38 @@ code {
monospace;
}

/* =========================
Border Gradient
========================= */

.border-gradient {
border-width: 2px;
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7);
border-image-slice: 1;
border-radius: 2rem;
}

/* =========================
Gradient Text Styling
========================= */

/* Shared Base Class */
.gradient-text-base {
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
transform: translateZ(0);
}

/* Main Gradient */
.gradient-text {
--gradient: linear-gradient(to right, #FF005C, #7600F2);
}

/* Secondary Gradient */
.gradient-text-2 {
--gradient: linear-gradient(to right, #7600F2, #00CBE7);
}
14 changes: 4 additions & 10 deletions eduaid_web/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import "../index.css";
import logo_trans from "../assets/aossie_logo_transparent.png"
import logo_trans from "../assets/aossie_logo_transparent.png";
import starsImg from "../assets/stars.png";
import arrow from "../assets/arrow.png";
import gitStar from "../assets/gitStar.png";
Expand Down Expand Up @@ -47,14 +47,8 @@ const Home = () => {
<img src={logo_trans} alt="logo" className="w-24 my-4 sm:my-6" />

{/* Heading */}
<h1 className="text-5xl sm:text-6xl md:text-7xl text-center font-extrabold leading-tight">
<span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
Edu
</span>
<span className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
Aid
</span>
</h1>
<h1 className="gradient-text-base gradient-text">Edu</h1>
<h1 className="gradient-text-base gradient-text-2">Aid</h1>

{/* Subtitle */}
<div className="text-white text-lg sm:text-xl text-center mt-4 mb-6">
Expand Down Expand Up @@ -125,4 +119,4 @@ const Home = () => {
);
};

export default Home;
export default Home;
Loading