Skip to content

Refactor the front end design. New design #19

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
ewalid merged 1 commit into from
Jan 3, 2026
Merged

Refactor the front end design. New design #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<title>Rosetta - Excel Translation</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
Expand Down
28 changes: 18 additions & 10 deletions frontend/public/rosetta.svg
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.
9 changes: 3 additions & 6 deletions frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
background: linear-gradient(
135deg,
var(--color-neutral-50) 0%,
rgba(139, 92, 246, 0.05) 50%,
rgba(16, 185, 129, 0.03) 50%,
var(--color-neutral-50) 100%
);
}
Expand All @@ -15,7 +15,7 @@
background: linear-gradient(
135deg,
var(--color-neutral-950) 0%,
rgba(139, 92, 246, 0.1) 50%,
rgba(16, 185, 129, 0.05) 50%,
var(--color-neutral-950) 100%
);
}
Expand Down Expand Up @@ -49,10 +49,7 @@
.hero-title-gradient {
display: block;
margin-top: 0.5rem;
background: linear-gradient(to right, var(--color-accent-600), var(--color-accent-400));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
color: var(--color-accent-500);
}

.hero-subtitle {
Expand Down
60 changes: 34 additions & 26 deletions frontend/src/components/features/about/About.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,24 +37,24 @@
.bento-card {
padding: 1.5rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(229, 229, 229, 0.6);
background: white;
border: 1px solid var(--color-neutral-200);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, box-shadow 0.2s;
}

.bento-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

:root.dark .bento-card {
background: rgba(38, 38, 38, 0.6);
border-color: rgba(64, 64, 64, 0.6);
background: var(--color-neutral-900);
border-color: var(--color-neutral-800);
}

:root.dark .bento-card:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Problem card - red accent */
Expand All @@ -66,7 +66,7 @@
border-left-color: #f87171;
}

/* How it works card - purple accent */
/* How it works card - emerald accent */
.bento-card-how {
border-left: 3px solid var(--color-accent-500);
}
Expand All @@ -84,13 +84,13 @@
border-left-color: #4ade80;
}

/* AI card - purple accent */
/* AI card - blue accent */
.bento-card-ai {
border-left: 3px solid var(--color-accent-500);
border-left: 3px solid #3b82f6;
}

:root.dark .bento-card-ai {
border-left-color: var(--color-accent-400);
border-left-color: #60a5fa;
}

/* Feature cards */
Expand Down Expand Up @@ -141,12 +141,12 @@
}

.bento-icon-purple {
background: rgba(139, 92, 246, 0.1);
background: rgba(16, 185, 129, 0.1);
color: var(--color-accent-600);
}

:root.dark .bento-icon-purple {
background: rgba(139, 92, 246, 0.2);
background: rgba(16, 185, 129, 0.2);
color: var(--color-accent-400);
}

Expand Down Expand Up @@ -255,7 +255,7 @@
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.profile-avatar-img {
Expand Down Expand Up @@ -336,7 +336,7 @@
}

:root.dark .profile-cta {
background: rgba(139, 92, 246, 0.2);
background: rgba(16, 185, 129, 0.2);
color: var(--color-accent-400);
}

Expand Down Expand Up @@ -396,29 +396,35 @@
}

.profile-link-email {
background: rgba(139, 92, 246, 0.1);
background: rgba(16, 185, 129, 0.1);
color: var(--color-accent-600);
}

.profile-link-email:hover {
background: rgba(139, 92, 246, 0.2);
background: rgba(16, 185, 129, 0.2);
}

:root.dark .profile-link-email {
background: rgba(139, 92, 246, 0.2);
background: rgba(16, 185, 129, 0.2);
color: var(--color-accent-400);
}

/* Profile Intro */
.profile-intro {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--color-neutral-600);
color: var(--color-neutral-700);
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--color-accent-50);
border-left: 3px solid var(--color-accent-500);
border-radius: 0.5rem;
}

:root.dark .profile-intro {
color: var(--color-neutral-400);
color: var(--color-neutral-300);
background: rgba(16, 185, 129, 0.1);
border-left-color: var(--color-accent-400);
}

/* Timeline - Grid Layout */
Expand Down Expand Up @@ -546,23 +552,25 @@
color: #f87171;
}

.timeline-icon-purple {
background: rgba(139, 92, 246, 0.1);
.timeline-icon-purple,
.timeline-icon-emerald {
background: rgba(16, 185, 129, 0.1);
color: var(--color-accent-600);
}

:root.dark .timeline-icon-purple {
background: rgba(139, 92, 246, 0.2);
:root.dark .timeline-icon-purple,
:root.dark .timeline-icon-emerald {
background: rgba(16, 185, 129, 0.2);
color: var(--color-accent-400);
}

.timeline-icon-accent {
background: rgba(139, 92, 246, 0.15);
background: rgba(16, 185, 129, 0.15);
color: var(--color-accent-600);
}

:root.dark .timeline-icon-accent {
background: rgba(139, 92, 246, 0.25);
background: rgba(16, 185, 129, 0.25);
color: var(--color-accent-400);
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/features/about/AboutRosetta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export function AboutRosetta() {
transition={{ duration: 0.5, delay: 0.3 }}
className="bento-card bento-card-ai"
>
<div className="bento-icon-wrapper bento-icon-purple">
<div className="bento-icon-wrapper bento-icon-blue">
<Bot className="bento-icon" />
</div>
<h3 className="bento-card-title">Built for AI</h3>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/features/about/Timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const timelineData = [
company: 'Radancy',
description: 'End-to-end enterprise sales. ~€600k TCV closed in Q3-Q4 2025. Discovery to deal closing.',
icon: Briefcase,
color: 'purple',
color: 'emerald',
},
{
year: '2024',
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/components/features/feedback/Feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@
}

:root.dark .feedback-emoji.selected {
background: rgba(139, 92, 246, 0.2);
background: rgba(16, 185, 129, 0.2);
border-color: var(--color-accent-400);
}

Expand Down Expand Up @@ -192,7 +192,7 @@
}

:root.dark .feedback-chip.selected {
background: rgba(139, 92, 246, 0.2);
background: rgba(16, 185, 129, 0.2);
border-color: var(--color-accent-400);
color: var(--color-accent-300);
}
Expand Down Expand Up @@ -229,7 +229,7 @@
.feedback-textarea:focus {
outline: none;
border-color: var(--color-accent-500);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Navigation */
Expand Down Expand Up @@ -297,8 +297,8 @@
}

:root.dark .footer-feedback-btn {
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.3);
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.3);
color: var(--color-accent-300);
}

Expand All @@ -308,8 +308,8 @@
}

:root.dark .footer-feedback-btn:hover {
background: rgba(139, 92, 246, 0.25);
border-color: rgba(139, 92, 246, 0.4);
background: rgba(16, 185, 129, 0.25);
border-color: rgba(16, 185, 129, 0.4);
}

.footer-feedback-btn svg {
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/features/translate/Progress.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
flex-direction: column;
gap: 1rem;
padding: 1rem;
background: rgba(139, 92, 246, 0.05);
background: rgba(16, 185, 129, 0.05);
border-radius: 0.75rem;
border: 1px solid rgba(139, 92, 246, 0.15);
border: 1px solid rgba(16, 185, 129, 0.15);
}

:root.dark .progress-indicator {
background: rgba(139, 92, 246, 0.08);
border-color: rgba(139, 92, 246, 0.2);
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.2);
}

/* Progress bar */
Expand Down Expand Up @@ -100,7 +100,7 @@
}

:root.dark .progress-stage.active .progress-stage-icon {
background: rgba(139, 92, 246, 0.2);
background: rgba(16, 185, 129, 0.2);
color: var(--color-accent-400);
}

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/features/translate/Translate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
}

:root.dark .translate-form-badge {
background-color: rgba(139, 92, 246, 0.2);
background-color: rgba(16, 185, 129, 0.2);
}

.translate-form-badge svg {
Expand Down Expand Up @@ -321,7 +321,7 @@
.sheet-selector-trigger:focus {
outline: none;
border-color: var(--color-accent-500);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.sheet-selector-disabled {
Expand Down Expand Up @@ -521,7 +521,7 @@
.context-input-textarea:focus {
outline: none;
border-color: var(--color-accent-500);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.context-input-textarea:disabled {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/layout/Layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
}

:root.dark .header-logo-icon {
background-color: rgba(139, 92, 246, 0.2);
background-color: rgba(16, 185, 129, 0.2);
}

.header-logo-icon svg {
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/ui/Button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,18 @@

/* Primary variant */
.button-primary {
background-color: var(--color-accent-600);
background-color: var(--color-accent-500);
color: white;
box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.25);
box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2);
}

.button-primary:hover:not(:disabled) {
background-color: var(--color-accent-700);
box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.3);
background-color: var(--color-accent-600);
box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.25);
}

.button-primary:active:not(:disabled) {
background-color: var(--color-accent-800);
background-color: var(--color-accent-700);
}

.button-primary:focus {
Expand Down
Loading