Skip to content

Commit 3e7add0

Browse files
murdercodemurdercode
committed
feat: unify session types to focus; update related components and styles for consistency
1 parent 0439d4e commit 3e7add0

File tree

7 files changed

+276
-230
lines changed

7 files changed

+276
-230
lines changed

‎src/components/update-notification.js‎

Lines changed: 131 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -82,211 +82,215 @@ export class UpdateNotification {
8282
styles.id = 'update-notification-styles';
8383
styles.textContent = `
8484
.update-notification-container {
85-
position: fixed;
86-
top: 44px;
87-
left: 0;
88-
right: 0;
89-
z-index: 10000;
90-
transform: translateY(-100%);
91-
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
85+
position: fixed;
86+
top: 44px;
87+
left: 80px;
88+
right: 0;
89+
z-index: 10000;
90+
transform: translateY(-100%);
91+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
9292
}
9393
9494
.update-notification-container.visible {
95-
transform: translateY(0);
95+
transform: translateY(0);
9696
}
9797
9898
.update-notification {
99-
background: var(--accent-color, #007AFF);
100-
color: white;
101-
padding: 8px 16px;
102-
display: flex;
103-
align-items: center;
104-
gap: 12px;
105-
font-size: 14px;
106-
line-height: 1.4;
107-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
99+
background: var(--accent-color, #007AFF);
100+
color: white;
101+
padding: 8px 16px;
102+
display: flex;
103+
align-items: center;
104+
gap: 12px;
105+
font-size: 14px;
106+
line-height: 1.4;
107+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
108108
}
109109
110110
.update-content {
111-
display: flex;
112-
align-items: center;
113-
gap: 12px;
114-
flex: 1;
115-
min-width: 0;
111+
display: flex;
112+
align-items: center;
113+
gap: 12px;
114+
flex: 1;
115+
min-width: 0;
116116
}
117117
118118
.update-icon {
119-
color: white;
120-
flex-shrink: 0;
121-
display: flex;
122-
align-items: center;
119+
color: white;
120+
flex-shrink: 0;
121+
display: flex;
122+
align-items: center;
123123
}
124124
125125
.update-message {
126-
font-weight: 500;
127-
white-space: nowrap;
126+
font-weight: 500;
127+
white-space: nowrap;
128128
}
129129
130130
.update-version {
131-
font-size: 13px;
132-
opacity: 0.9;
133-
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
134-
margin-left: 8px;
131+
font-size: 13px;
132+
opacity: 0.9;
133+
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
134+
margin-left: 8px;
135135
}
136136
137137
.update-actions {
138-
display: flex;
139-
gap: 8px;
140-
margin-left: auto;
141-
flex-shrink: 0;
138+
display: flex;
139+
gap: 8px;
140+
margin-left: auto;
141+
flex-shrink: 0;
142142
}
143143
144144
.update-btn {
145-
padding: 4px 12px;
146-
border-radius: 4px;
147-
font-size: 13px;
148-
font-weight: 500;
149-
border: none;
150-
cursor: pointer;
151-
transition: all 0.2s ease;
152-
white-space: nowrap;
145+
padding: 4px 12px;
146+
border-radius: 4px;
147+
font-size: 13px;
148+
font-weight: 500;
149+
border: none;
150+
cursor: pointer;
151+
transition: all 0.2s ease;
152+
white-space: nowrap;
153153
}
154154
155155
.update-btn-primary {
156-
background: rgba(255, 255, 255, 0.2);
157-
color: white;
158-
border: 1px solid rgba(255, 255, 255, 0.3);
156+
background: rgba(255, 255, 255, 0.2);
157+
color: white;
158+
border: 1px solid rgba(255, 255, 255, 0.3);
159159
}
160160
161161
.update-btn-primary:hover {
162-
background: rgba(255, 255, 255, 0.3);
163-
border-color: rgba(255, 255, 255, 0.4);
162+
background: rgba(255, 255, 255, 0.3);
163+
border-color: rgba(255, 255, 255, 0.4);
164164
}
165165
166166
.update-btn-secondary {
167-
background: transparent;
168-
color: white;
169-
border: 1px solid rgba(255, 255, 255, 0.3);
167+
background: transparent;
168+
color: white;
169+
border: 1px solid rgba(255, 255, 255, 0.3);
170170
}
171171
172172
.update-btn-secondary:hover {
173-
background: rgba(255, 255, 255, 0.1);
174-
border-color: rgba(255, 255, 255, 0.4);
173+
background: rgba(255, 255, 255, 0.1);
174+
border-color: rgba(255, 255, 255, 0.4);
175175
}
176176
177177
.update-close {
178-
background: transparent;
179-
border: none;
180-
padding: 4px;
181-
cursor: pointer;
182-
color: white;
183-
opacity: 0.8;
184-
transition: opacity 0.2s ease;
185-
border-radius: 3px;
186-
margin-left: 8px;
187-
flex-shrink: 0;
178+
background: transparent;
179+
border: none;
180+
padding: 4px;
181+
cursor: pointer;
182+
color: white;
183+
opacity: 0.8;
184+
transition: opacity 0.2s ease;
185+
border-radius: 3px;
186+
margin-left: 8px;
187+
flex-shrink: 0;
188188
}
189189
190190
.update-close:hover {
191-
opacity: 1;
192-
background: rgba(255, 255, 255, 0.1);
191+
opacity: 1;
192+
background: rgba(255, 255, 255, 0.1);
193193
}
194194
195195
.update-progress-container {
196-
display: flex;
197-
align-items: center;
198-
gap: 12px;
199-
flex: 1;
200-
min-width: 0;
196+
display: flex;
197+
align-items: center;
198+
gap: 12px;
199+
flex: 1;
200+
min-width: 0;
201201
}
202202
203203
.update-progress-icon {
204-
flex-shrink: 0;
205-
display: flex;
206-
align-items: center;
204+
flex-shrink: 0;
205+
display: flex;
206+
align-items: center;
207207
}
208208
209209
.spinner {
210-
width: 16px;
211-
height: 16px;
212-
border: 2px solid rgba(255, 255, 255, 0.3);
213-
border-top: 2px solid white;
214-
border-radius: 50%;
215-
animation: spin 1s linear infinite;
210+
width: 16px;
211+
height: 16px;
212+
border: 2px solid rgba(255, 255, 255, 0.3);
213+
border-top: 2px solid white;
214+
border-radius: 50%;
215+
animation: spin 1s linear infinite;
216216
}
217217
218218
@keyframes spin {
219-
0% { transform: rotate(0deg); }
220-
100% { transform: rotate(360deg); }
219+
0% { transform: rotate(0deg); }
220+
100% { transform: rotate(360deg); }
221221
}
222222
223223
.update-progress-message {
224-
font-weight: 500;
225-
white-space: nowrap;
224+
font-weight: 500;
225+
white-space: nowrap;
226226
}
227227
228228
.update-progress-bar {
229-
background: rgba(255, 255, 255, 0.2);
230-
border-radius: 3px;
231-
height: 4px;
232-
position: relative;
233-
overflow: hidden;
234-
flex: 1;
235-
min-width: 100px;
236-
margin: 0 12px;
229+
background: rgba(255, 255, 255, 0.2);
230+
border-radius: 3px;
231+
height: 4px;
232+
position: relative;
233+
overflow: hidden;
234+
flex: 1;
235+
min-width: 100px;
236+
margin: 0 12px;
237237
}
238238
239239
.update-progress-fill {
240-
background: white;
241-
height: 100%;
242-
width: 0%;
243-
transition: width 0.3s ease;
244-
border-radius: 3px;
240+
background: white;
241+
height: 100%;
242+
width: 0%;
243+
transition: width 0.3s ease;
244+
border-radius: 3px;
245245
}
246246
247247
.update-progress-text {
248-
font-size: 12px;
249-
font-weight: 600;
250-
color: white;
251-
opacity: 0.9;
252-
white-space: nowrap;
253-
flex-shrink: 0;
248+
font-size: 12px;
249+
font-weight: 600;
250+
color: white;
251+
opacity: 0.9;
252+
white-space: nowrap;
253+
flex-shrink: 0;
254254
}
255255
256256
/* Responsive */
257257
@media (max-width: 768px) {
258-
.update-notification {
259-
padding: 6px 12px;
260-
font-size: 13px;
261-
}
258+
.update-notification-container {
259+
left: 0;
260+
}
261+
262+
.update-notification {
263+
padding: 6px 12px;
264+
font-size: 13px;
265+
}
262266
263-
.update-btn {
264-
padding: 3px 8px;
265-
font-size: 12px;
266-
}
267+
.update-btn {
268+
padding: 3px 8px;
269+
font-size: 12px;
270+
}
267271
268-
.update-version {
269-
display: none;
270-
}
272+
.update-version {
273+
display: none;
274+
}
271275
272-
.update-progress-bar {
273-
min-width: 80px;
274-
margin: 0 8px;
275-
}
276+
.update-progress-bar {
277+
min-width: 80px;
278+
margin: 0 8px;
279+
}
276280
}
277281
278282
@media (max-width: 480px) {
279-
.update-actions {
280-
gap: 6px;
281-
}
283+
.update-actions {
284+
gap: 6px;
285+
}
282286
283-
.update-btn {
284-
padding: 3px 6px;
285-
}
287+
.update-btn {
288+
padding: 3px 6px;
289+
}
286290
287-
.update-close {
288-
margin-left: 4px;
289-
}
291+
.update-close {
292+
margin-left: 4px;
293+
}
290294
}
291295
`;
292296

‎src/index.html‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -373,7 +373,6 @@ <h3>Session History</h3>
373373
<th>Time</th>
374374
<th>Duration</th>
375375
<th>Tags</th>
376-
<th>Type</th>
377376
<th>Actions</th>
378377
</tr>
379378
</thead>
@@ -956,15 +955,6 @@ <h3 id="session-modal-title">Add Session</h3>
956955
</div>
957956
<form class="session-form" id="session-form">
958957
<div class="form-group">
959-
<label for="session-type">Session Type</label>
960-
<select id="session-type" name="type">
961-
<option value="focus">Focus Session (25m)</option>
962-
<option value="break">Short Break (5m)</option>
963-
<option value="longBreak">Long Break (20m)</option>
964-
<option value="custom">Custom Duration</option>
965-
</select>
966-
</div>
967-
<div class="form-group" id="custom-duration-group" style="display: none;">
968958
<label for="session-duration">Duration (minutes)</label>
969959
<input type="number" id="session-duration" name="duration" min="1" max="120" value="25">
970960
</div>
@@ -973,8 +963,8 @@ <h3 id="session-modal-title">Add Session</h3>
973963
<input type="time" id="session-start-time" name="startTime" required>
974964
</div>
975965
<div class="form-group">
976-
<label for="session-notes">Notes (optional)</label>
977-
<input type="text" id="session-notes" name="notes" placeholder="What did you work on?">
966+
<label for="session-end-time">End Time</label>
967+
<input type="time" id="session-end-time" name="endTime" required>
978968
</div>
979969
<div class="modal-actions">
980970
<button type="button" class="btn-secondary" id="cancel-session-btn">Cancel</button>

0 commit comments

Comments
 (0)