byarielm.fyi
ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto
update extension popup UI to match web app style
Changed color scheme from purple/indigo to purple/cyan/orange:
- Header: gradient from yellow-400 → orange-500 → pink-600 (firefly banner)
- Background: purple-50 → white → cyan-50 gradient
- Primary button: orange-600 with hover state
- Secondary button: purple-800 border
- Progress bar: orange → pink gradient
- Links and accents: orange-600
Matches web app's tailwind.config.js color system.
+13
-12
+13
-12
packages/extension/src/popup/popup.css
+13
-12
packages/extension/src/popup/popup.css
···
9
min-height: 400px;
10
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
11
color: #1e293b;
12
-
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
13
}
14
15
.container {
···
19
}
20
21
header {
22
-
background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
23
color: white;
24
padding: 20px;
25
text-align: center;
···
81
}
82
83
.btn-primary {
84
-
background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
85
color: white;
86
border: none;
87
padding: 12px 24px;
···
91
cursor: pointer;
92
margin-top: 16px;
93
width: 100%;
94
-
transition: transform 0.2s, box-shadow 0.2s;
95
}
96
97
.btn-primary:hover {
98
transform: translateY(-1px);
99
-
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
100
}
101
102
.btn-primary:active {
···
105
106
.btn-secondary {
107
background: white;
108
-
color: #7c3aed;
109
-
border: 2px solid #7c3aed;
110
padding: 10px 24px;
111
border-radius: 8px;
112
font-size: 14px;
···
118
}
119
120
.btn-secondary:hover {
121
-
background: #f5f3ff;
122
}
123
124
.progress {
···
128
.progress-bar {
129
width: 100%;
130
height: 8px;
131
-
background: #e0e7ff;
132
border-radius: 4px;
133
overflow: hidden;
134
margin-bottom: 12px;
···
136
137
.progress-fill {
138
height: 100%;
139
-
background: linear-gradient(90deg, #7c3aed 0%, #6366f1 100%);
140
width: 0%;
141
transition: width 0.3s ease;
142
animation: pulse 2s infinite;
···
166
}
167
168
.count-display strong {
169
-
color: #7c3aed;
170
font-size: 18px;
171
}
172
···
188
}
189
190
footer a {
191
-
color: #7c3aed;
192
text-decoration: none;
193
font-size: 13px;
194
font-weight: 500;
···
9
min-height: 400px;
10
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
11
color: #1e293b;
12
+
background: linear-gradient(135deg, #faf5ff 0%, #ffffff 50%, #ecfeff 100%);
13
}
14
15
.container {
···
19
}
20
21
header {
22
+
background: linear-gradient(to right, #facc15 0%, #f97316 50%, #ec4899 100%);
23
color: white;
24
padding: 20px;
25
text-align: center;
···
81
}
82
83
.btn-primary {
84
+
background: #ea580c;
85
color: white;
86
border: none;
87
padding: 12px 24px;
···
91
cursor: pointer;
92
margin-top: 16px;
93
width: 100%;
94
+
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
95
}
96
97
.btn-primary:hover {
98
+
background: #c2410c;
99
transform: translateY(-1px);
100
+
box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
101
}
102
103
.btn-primary:active {
···
106
107
.btn-secondary {
108
background: white;
109
+
color: #6b21a8;
110
+
border: 2px solid #6b21a8;
111
padding: 10px 24px;
112
border-radius: 8px;
113
font-size: 14px;
···
119
}
120
121
.btn-secondary:hover {
122
+
background: #faf5ff;
123
}
124
125
.progress {
···
129
.progress-bar {
130
width: 100%;
131
height: 8px;
132
+
background: #f0f9ff;
133
border-radius: 4px;
134
overflow: hidden;
135
margin-bottom: 12px;
···
137
138
.progress-fill {
139
height: 100%;
140
+
background: linear-gradient(90deg, #ea580c 0%, #ec4899 100%);
141
width: 0%;
142
transition: width 0.3s ease;
143
animation: pulse 2s infinite;
···
167
}
168
169
.count-display strong {
170
+
color: #ea580c;
171
font-size: 18px;
172
}
173
···
189
}
190
191
footer a {
192
+
color: #ea580c;
193
text-decoration: none;
194
font-size: 13px;
195
font-weight: 500;