FTUE Dark-mode #636

MelissaAutumn · 2024-09-05T20:56:43Z

Related: #297

The majority of work here was re-organizing the pro services colours. A lot of the components are using an older colour spec. There's some obvious differences from the design due to this, so matched the best I could.

I've also moved bubble-select to the tbpro subdirectory, since it's a pro component.

cc @laurelterlesky

Screenshots

MelissaAutumn · 2024-09-05T20:58:19Z

docker-compose.yml

@@ -19,7 +19,7 @@ services:
    build: ./frontend
    volumes:
      - './frontend:/app'
-      - 'node_modules:/app/node_modules'
+      - '/app/node_modules'


I went back to anon volumes. You can do docker-compose up --build -V to nuke the built node_modules when deps update.

Worked perfectly fine, thanks for the hint!

MelissaAutumn · 2024-09-05T20:59:17Z

frontend/index.html

@@ -1,16 +1,14 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="" data-tbpro-service="apmt">


Used in the css to select the correct service colours. We could also use another solution but I had the .dark class on the brain. Alternatively you can use "send" as the value to get send's colours.

cc @aaspinwall for the future where send has a ui and I've actually split this off into its own repo 😅

laurelterlesky · 2024-09-05T21:29:16Z

Looks great Mel! A few little things I spotted - not sure if you're only looking at colour atm and what I'm listing isn't of focus:

All FTUE screens are missing the faded footer above the support link (footer component)
Create profile screen: missing required (red) stars next to Full Name, Username URL
Connect Calendars page: the check mark selected state should have a primary teal bkg with a black check
Connect Calendars page: Select all btn placement should be lower centered on the link between the header calendar selection area
Set up your appointment availability: missing required (red star) next to select days
Connect video: Zoom logo needs to be white in dark mode
Read to start booking page: bring the copy higher, close to the icons (should be about 24px between bottom of icons to text)

(I can't see active states with the input fields, but in case, they should have primary teal for the outline)

laurelterlesky · 2024-09-05T21:40:42Z

Mel's keen eye caught one more item - the glow under the modal is missing on all screens.

and I'm also wondering - is it possible to show the empty calendar interface / dashboard under a scrim during FTUE modals?

MelissaAutumn · 2024-09-05T21:43:43Z

Fixed underglow and divider, thanks for the spots. I'll fix those up too.

I'll look into adding a page behind the overlay/scrim, it's a little tricky though.

laurelterlesky · 2024-09-05T21:44:57Z

Glow up! Thanks - looks beautiful!

MelissaAutumn · 2024-09-05T22:10:51Z

Added fake dashboard behind the scrim/overlay. That page was built to require data so it's not as easy as making the FTUE a component modal. But I've faked the data and inserted it into the page. It seems to work just fine.

Also the red stars is there, it only shows up if there's no data in the input. I can adjust that if you'd like!

And here's the active ring: (ignore 1password)

laurelterlesky · 2024-09-05T22:17:48Z

Is the active state green outline A3ECE3? (primary green (dark mode) looks like light mode primary atm

And which red are you using for the required state outline? Is it we can use the dark mode text-critical colour for the outline: EF4444

laurelterlesky · 2024-09-05T22:18:12Z

and the dashboard behind the scrim looks AMAZING! Magic wizardy :)

* Move up content on finish page * Checkbox tweaks for synccard.

MelissaAutumn · 2024-09-05T22:43:16Z

Active outline is tailwind messery. I'll try to decouple it, but it might break the old-style elements. The sooner we re-design the entire app, the sooner I can remove a lot of css-hacks 😄

And for the error outline it's the text/icon critical EF4444.

MelissaAutumn · 2024-09-05T22:46:12Z

Additionally there doesn't seem to be a way to adjust the checkbox in css without faking the checkmark. That's...an odd oversight. I can look into that in the future if that's alright!

laurelterlesky · 2024-09-05T23:02:27Z

tailwind misery. No worries - I don't want these little things to block this.

devmount

Looks awesome! Great work Mel!

Just some things I observed (might be out of scope here though):

Google still has the earlier appointment logo when connecting an account:
The input field for the schedule title "My schedule" looks a bit out of place without border radius and the placeholder without left padding:
The "select all" buttons in calendar selection broke out to the bottom for some reason:

We might want to overwrite that inherited top attribute:

devmount · 2024-09-06T12:26:34Z

frontend/src/views/ScheduleView.vue

@@ -103,6 +109,36 @@ const onDateChange = (dateObj: TimeFormatted) => {

 // initially load data when component gets remounted
 onMounted(async () => {
+  // Don't actually load anything during the FTUE


Yes, good catch!

MelissaAutumn · 2024-09-06T14:37:27Z

Looks awesome! Great work Mel!

Just some things I observed (might be out of scope here though):

1. Google still has the earlier appointment logo when connecting an account:
   ![image](https://private-user-images.githubusercontent.com/5441654/365172317-2d74058e-1d62-4c30-b789-8acd57bb4fbc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MzM2MzAsIm5iZiI6MTcyNTYzMzMzMCwicGF0aCI6Ii81NDQxNjU0LzM2NTE3MjMxNy0yZDc0MDU4ZS0xZDYyLTRjMzAtYjc4OS04YWNkNTdiYjRmYmMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDZUMTQzNTMwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9N2VjZTY3NGQzZGUxMDY5MjMwMDNiMTY4OWE2Zjk5ODFmY2ZkNmRhMTllOTMyNDQwZmJlY2QxNDdhMWJhYzAwNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.VmKPnkGtY3i0XDroynMutKbCOPSSKpybHhOsQBpeOWs)

2. The input field for the schedule title "My schedule" looks a bit out of place without border radius and the placeholder without left padding:
   ![image](https://private-user-images.githubusercontent.com/5441654/365172902-9b2c4198-4b7b-40a9-a6cb-6776288bf57d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MzM2MzAsIm5iZiI6MTcyNTYzMzMzMCwicGF0aCI6Ii81NDQxNjU0LzM2NTE3MjkwMi05YjJjNDE5OC00YjdiLTQwYTktYTZjYi02Nzc2Mjg4YmY1N2QucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDZUMTQzNTMwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTc2MTUzNTkwN2I1ZGRmNDk5MmZmZjViNDJmZjM2MzIxYmJlZTQ1NThkNDc0ZjIxM2FlNGQ3MDU0ZDYzMTk2MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.8s2entg0Rewqc-WSjp3xXDojVfz6gd41ijI1PIt32BU)

3. The "select all" buttons in calendar selection broke out to the bottom for some reason:
   ![image](https://private-user-images.githubusercontent.com/5441654/365173253-fd2bd258-dd96-459c-8451-13ae7233dfbe.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MzM2MzAsIm5iZiI6MTcyNTYzMzMzMCwicGF0aCI6Ii81NDQxNjU0LzM2NTE3MzI1My1mZDJiZDI1OC1kZDk2LTQ1OWMtODQ1MS0xM2FlNzIzM2RmYmUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDZUMTQzNTMwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDUxYzVjZDljNDJmY2EwMDNjNzI5OTk3ZDc5ZjNhY2NmYjI4MjVjNDY5NGMzYjg5NzkxYmJiOTBiZGI2NTFkMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.RT4OxPVICf-w5HovK_59ZUYFvY7rFx-XWyP4nA0waiQ)
   We might want to overwrite that inherited top attribute:
   ![image](https://private-user-images.githubusercontent.com/5441654/365173792-a4be9950-72c3-4e19-b9ac-ee50e823967a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU2MzM2MzAsIm5iZiI6MTcyNTYzMzMzMCwicGF0aCI6Ii81NDQxNjU0LzM2NTE3Mzc5Mi1hNGJlOTk1MC03MmMzLTRlMTktYjlhYy1lZTUwZTgyMzk2N2EucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDZUMTQzNTMwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NjRmYTNhMjE4MTdlMWQ3ODhjZmZiNzVjNDYxMDQ1MGZhMzZiNTE5OGVkZWU1NGRhZGRjZDVkMDdlMzc4MTU2MCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.QfF8cR4H1wKaJgLGK8ZnX-wZF2PRNakSXkr-Cmcsvmg)

Thanks for the logo catch! I'll update that, and into the lack of padding.

As for the placement of the Select all button, that's actually how it is designed. 😅

devmount · 2024-09-06T14:57:45Z

Oh haha, but in your initial screenshots the Select all button is positioned more on top 🤔

MelissaAutumn · 2024-09-06T15:14:40Z

Ah yeah it somehow reverted its position, laurel caught it and commented on that button, so i moved it back to the correct split area position.

MelissaAutumn added 3 commits September 5, 2024 10:02

Update colours.css

65192db

Initial pass at dark mode.

1afc523

Small fixes

37489e6

MelissaAutumn requested a review from devmount September 5, 2024 20:56

MelissaAutumn self-assigned this Sep 5, 2024

MelissaAutumn commented Sep 5, 2024

View reviewed changes

Fix missing underglow and missing divider.

9bd7691

MelissaAutumn temporarily deployed to staging September 5, 2024 21:40 — with GitHub Actions Inactive

MelissaAutumn temporarily deployed to staging September 5, 2024 21:41 — with GitHub Actions Inactive

Add a fake dashboard under the scrim/overlay.

b9f231d

MelissaAutumn temporarily deployed to staging September 5, 2024 22:07 — with GitHub Actions Inactive

* Fix zoom logo in dark-mode

4a608c5

* Move up content on finish page * Checkbox tweaks for synccard.

MelissaAutumn temporarily deployed to staging September 5, 2024 22:40 — with GitHub Actions Inactive

devmount approved these changes Sep 6, 2024

View reviewed changes

Fix padding

b42b185

MelissaAutumn temporarily deployed to staging September 6, 2024 15:46 — with GitHub Actions Inactive

MelissaAutumn temporarily deployed to staging September 6, 2024 15:47 — with GitHub Actions Inactive

MelissaAutumn merged commit 83a758f into main Sep 6, 2024
4 checks passed

MelissaAutumn deleted the features/297-ftue-darkmode branch September 6, 2024 15:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FTUE Dark-mode #636

FTUE Dark-mode #636

MelissaAutumn commented Sep 5, 2024

MelissaAutumn Sep 5, 2024

devmount Sep 6, 2024

MelissaAutumn Sep 5, 2024

MelissaAutumn Sep 5, 2024

laurelterlesky commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

MelissaAutumn commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

MelissaAutumn commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

MelissaAutumn commented Sep 5, 2024

MelissaAutumn commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

devmount left a comment

devmount Sep 6, 2024

MelissaAutumn commented Sep 6, 2024

devmount commented Sep 6, 2024 •

edited

Loading

MelissaAutumn commented Sep 6, 2024 •

edited

Loading

FTUE Dark-mode #636

FTUE Dark-mode #636

Conversation

MelissaAutumn commented Sep 5, 2024

Screenshots

MelissaAutumn Sep 5, 2024

Choose a reason for hiding this comment

devmount Sep 6, 2024

Choose a reason for hiding this comment

MelissaAutumn Sep 5, 2024

Choose a reason for hiding this comment

MelissaAutumn Sep 5, 2024

Choose a reason for hiding this comment

laurelterlesky commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

MelissaAutumn commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

MelissaAutumn commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

MelissaAutumn commented Sep 5, 2024

MelissaAutumn commented Sep 5, 2024

laurelterlesky commented Sep 5, 2024

devmount left a comment

Choose a reason for hiding this comment

devmount Sep 6, 2024

Choose a reason for hiding this comment

MelissaAutumn commented Sep 6, 2024

devmount commented Sep 6, 2024 • edited Loading

MelissaAutumn commented Sep 6, 2024 • edited Loading

devmount commented Sep 6, 2024 •

edited

Loading

MelissaAutumn commented Sep 6, 2024 •

edited

Loading