Skip to content

Commit 546c3a0

Browse files
ralyodioralyodio
committed
Update color scheme from blue to red/orange and rebrand to convert2doc
1 parent bb14f55 commit 546c3a0

File tree

8 files changed

+64
-51
lines changed

8 files changed

+64
-51
lines changed

‎HUMAN-TODO.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
# todo
22

33
- [ ] speed up build. (currently takes 67 seconds)
4-
- [ ] break up css files into ./main.css (loads fonts.css, theme.css, reset.css, forms.css etc etc)

‎public/colorscheme.png‎

124 KB
Loading

‎public/css/layout.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,7 @@ body {
314314
display: flex;
315315
flex-direction: column;
316316
min-height: 100vh;
317+
padding: 0 var(--spacing-md);
317318
}
318319

319320
#app {

‎public/css/theme.css‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55

66
:root {
77
/* Base colors - Light theme (default) */
8-
--primary-color: #2563eb; /* Profullstack, Inc. blue */
9-
--primary-light: #3b82f6; /* Lighter blue */
10-
--primary-dark: #1d4ed8; /* Darker blue */
11-
--secondary-color: #10b981; /* Accent green */
12-
--secondary-light: #34d399; /* Lighter green */
13-
--secondary-dark: #059669; /* Darker green */
8+
--primary-color: #e02337; /* Profullstack, Inc. red */
9+
--primary-light: #e54d5d; /* Lighter red */
10+
--primary-dark: #c01d2f; /* Darker red */
11+
--secondary-color: #fc7e3e; /* Accent orange */
12+
--secondary-light: #fd9c6a; /* Lighter orange */
13+
--secondary-dark: #e66a2c; /* Darker orange */
14+
--accent-color: #ba18aa; /* Accent magenta */
1415

1516
/* Neutral colors - Light theme */
1617
--background-color: #ffffff; /* White background */
@@ -29,9 +30,9 @@
2930

3031
/* Status colors - Light theme */
3132
--success-color: #10b981; /* Success green */
32-
--warning-color: #f59e0b; /* Warning yellow/orange */
33-
--error-color: #ef4444; /* Error red */
34-
--info-color: #3b82f6; /* Info blue */
33+
--warning-color: #fc7e3e; /* Warning orange */
34+
--error-color: #e02337; /* Error red */
35+
--info-color: #ba18aa; /* Info magenta */
3536

3637
/* Component colors - Light theme */
3738
--card-background: #ffffff; /* Card background */
@@ -87,12 +88,13 @@
8788
/* Dark theme */
8889
[data-theme="dark"] {
8990
/* Base colors - Dark theme */
90-
--primary-color: #3b82f6; /* Brighter blue for dark mode */
91-
--primary-light: #60a5fa; /* Lighter blue */
92-
--primary-dark: #2563eb; /* Darker blue */
93-
--secondary-color: #10b981; /* Accent green */
94-
--secondary-light: #34d399; /* Lighter green */
95-
--secondary-dark: #059669; /* Darker green */
91+
--primary-color: #e54d5d; /* Brighter red for dark mode */
92+
--primary-light: #e97683; /* Lighter red */
93+
--primary-dark: #e02337; /* Darker red */
94+
--secondary-color: #fd9c6a; /* Accent orange */
95+
--secondary-light: #feba96; /* Lighter orange */
96+
--secondary-dark: #fc7e3e; /* Darker orange */
97+
--accent-color: #d34bc1; /* Accent magenta */
9698

9799
/* Neutral colors - Dark theme */
98100
--background-color: #111827; /* Dark background */
@@ -111,9 +113,9 @@
111113

112114
/* Status colors - Dark theme */
113115
--success-color: #34d399; /* Brighter success green */
114-
--warning-color: #fbbf24; /* Brighter warning yellow */
115-
--error-color: #f87171; /* Brighter error red */
116-
--info-color: #60a5fa; /* Brighter info blue */
116+
--warning-color: #fd9c6a; /* Brighter warning orange */
117+
--error-color: #e54d5d; /* Brighter error red */
118+
--info-color: #d34bc1; /* Brighter info magenta */
117119

118120
/* Component colors - Dark theme */
119121
--card-background: #1f2937; /* Card background */
@@ -235,6 +237,15 @@ html, body {
235237
background-color: var(--secondary-dark);
236238
}
237239

240+
.btn-amber {
241+
background-color: var(--secondary-color);
242+
color: var(--text-on-secondary);
243+
}
244+
245+
.btn-amber:hover {
246+
background-color: var(--secondary-dark);
247+
}
248+
238249
.btn-outline {
239250
background-color: transparent;
240251
border: 1px solid var(--border-color);
@@ -282,7 +293,7 @@ html, body {
282293
.form-input:focus {
283294
outline: none;
284295
border-color: var(--primary-color);
285-
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
296+
box-shadow: 0 0 0 3px rgba(224, 35, 55, 0.1);
286297
}
287298

288299
/* Table styles */
@@ -335,7 +346,7 @@ html, body {
335346
}
336347

337348
.alert-info {
338-
background-color: rgba(59, 130, 246, 0.1);
349+
background-color: rgba(186, 24, 170, 0.1);
339350
border-left: 4px solid var(--info-color);
340351
color: var(--info-color);
341352
}
@@ -379,7 +390,7 @@ html, body {
379390
}
380391

381392
.pricing-plan.popular {
382-
border: 2px solid var(--primary-color);
393+
border: 2px solid var(--accent-color);
383394
position: relative;
384395
z-index: 1;
385396
}
@@ -390,7 +401,7 @@ html, body {
390401
top: -12px;
391402
left: 50%;
392403
transform: translateX(-50%);
393-
background-color: var(--primary-color);
404+
background-color: var(--accent-color);
394405
color: var(--text-on-primary);
395406
padding: 4px 12px;
396407
border-radius: var(--border-radius-full);
@@ -454,7 +465,7 @@ html, body {
454465
.back-link {
455466
display: inline-block;
456467
margin-top: var(--spacing-xl);
457-
color: var(--primary-color);
468+
color: var(--accent-color);
458469
text-decoration: none;
459470
font-weight: var(--font-weight-medium);
460471
}

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document Generation API - Profullstack, Inc.</title>
7+
<title>convert2doc - Profullstack, Inc.</title>
88
<meta name="description" content="Convert HTML content to PDF, Word, Excel, PowerPoint, and EPUB formats with a simple API call.">
9-
<meta name="theme-color" content="#2563eb">
9+
<meta name="theme-color" content="#e02337">
1010
<link rel="manifest" href="/manifest.json">
1111
<link rel="stylesheet" href="/css/main.css">
1212
<link id="favicon" rel="icon" type="image/svg+xml" href="/icons/favicon.light.svg">

‎public/js/components/pf-footer.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ class PfFooter extends HTMLElement {
1818
<style>
1919
:host {
2020
display: block;
21-
font-family: Arial, sans-serif;
21+
font-family: var(--font-primary, 'SpaceMono', monospace);
2222
margin-top: 60px;
2323
}
2424
2525
.footer {
2626
padding: 30px 0;
27-
border-top: 1px solid #e5e7eb;
27+
border-top: 1px solid var(--border-color);
2828
}
2929
3030
.footer-content {
@@ -40,7 +40,7 @@ class PfFooter extends HTMLElement {
4040
}
4141
4242
.footer-section h3 {
43-
color: #2563eb;
43+
color: var(--primary-color);
4444
margin-top: 0;
4545
margin-bottom: 15px;
4646
font-size: 18px;
@@ -57,19 +57,19 @@ class PfFooter extends HTMLElement {
5757
}
5858
5959
.footer-links a {
60-
color: #4b5563;
60+
color: var(--text-secondary);
6161
text-decoration: none;
6262
transition: color 0.2s;
6363
}
6464
6565
.footer-links a:hover {
66-
color: #2563eb;
66+
color: var(--primary-color);
6767
}
6868
6969
.copyright {
7070
margin-top: 30px;
7171
text-align: center;
72-
color: #6b7280;
72+
color: var(--text-tertiary);
7373
font-size: 14px;
7474
}
7575
@@ -83,7 +83,7 @@ class PfFooter extends HTMLElement {
8383
<div class="footer">
8484
<div class="footer-content">
8585
<div class="footer-section">
86-
<h3>Document Generation API</h3>
86+
<h3>convert2doc</h3>
8787
<ul class="footer-links">
8888
<li><a href="/">Home</a></li>
8989
<li><a href="/api-docs">API Documentation</a></li>

‎public/js/components/pf-header.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ class PfHeader extends HTMLElement {
1818
<style>
1919
:host {
2020
display: block;
21-
font-family: Arial, sans-serif;
21+
font-family: var(--font-primary, 'SpaceMono', monospace);
2222
}
2323
2424
.header {
@@ -66,7 +66,7 @@ class PfHeader extends HTMLElement {
6666
6767
.logo h1 {
6868
margin: 0;
69-
color: #2563eb;
69+
color: #e02337;
7070
font-weight: bold;
7171
}
7272
@@ -77,20 +77,21 @@ class PfHeader extends HTMLElement {
7777
7878
.nav-link {
7979
padding: 8px 15px;
80-
color: #333;
80+
color: var(--text-primary);
8181
text-decoration: none;
8282
border-radius: 5px;
83-
transition: background-color 0.2s;
83+
transition: background-color 0.2s, color 0.2s;
8484
}
8585
8686
.nav-link:hover {
87-
background-color: #f0f0f0;
87+
background-color: var(--surface-variant);
88+
color: var(--primary-color);
8889
}
8990
9091
.subscription-link {
9192
display: inline-block;
9293
padding: 8px 15px;
93-
background-color: #2563eb;
94+
background-color: #e02337;
9495
color: white;
9596
text-decoration: none;
9697
border-radius: 5px;
@@ -99,7 +100,7 @@ class PfHeader extends HTMLElement {
99100
}
100101
101102
.subscription-link:hover {
102-
background-color: #1d4ed8;
103+
background-color: #c01d2f;
103104
}
104105
105106
/* User dropdown styles */
@@ -156,13 +157,14 @@ class PfHeader extends HTMLElement {
156157
</style>
157158
158159
<div class="header">
159-
<div class="logo">
160-
<img src="/icons/logo.${this.currentTheme === 'dark' ? 'dark' : 'light'}.svg" alt="Profullstack, Inc. Logo">
161-
<h1>Document Generation API</h1>
162-
</div>
160+
<a href="/" class="logo-link" style="text-decoration: none;">
161+
<div class="logo">
162+
<img src="/icons/logo.${this.currentTheme === 'dark' ? 'dark' : 'light'}.svg" alt="Profullstack, Inc. Logo">
163+
<h1>convert2doc</h1>
164+
</div>
165+
</a>
163166
164167
<div class="nav-links">
165-
<a href="/" class="nav-link">Home</a>
166168
<a href="/api-docs" class="nav-link">API Docs</a>
167169
<a href="/api-keys" class="nav-link">API Keys</a>
168170
<a href="/login" class="nav-link login-link">Login</a>

‎public/views/register.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ <h3>Payment Method</h3>
4747
</div>
4848
</div>
4949

50-
<button type="submit" class="register-button">Register & Subscribe</button>
50+
<button type="submit" class="register-button btn-primary">Register & Subscribe</button>
5151
</form>
5252

5353
<p class="login-link">Already have an account? <a href="/login">Login</a> instead.</p>
@@ -71,14 +71,14 @@ <h3>Payment Method</h3>
7171
}
7272

7373
.plan-option.selected {
74-
border-color: #2563eb;
75-
background-color: rgba(37, 99, 235, 0.1);
74+
border-color: #e02337;
75+
background-color: rgba(224, 35, 55, 0.1);
7676
}
7777

7878
.plan-option h3 {
7979
margin-top: 0;
8080
margin-bottom: 5px;
81-
color: #2563eb;
81+
color: #e02337;
8282
}
8383

8484
.plan-option .price {
@@ -119,8 +119,8 @@ <h3>Payment Method</h3>
119119
}
120120

121121
.payment-method.selected {
122-
border-color: #2563eb;
123-
background-color: rgba(37, 99, 235, 0.1);
122+
border-color: #e02337;
123+
background-color: rgba(224, 35, 55, 0.1);
124124
}
125125
</style>
126126

0 commit comments

Comments
 (0)