[HOLD for payment 2022-12-20] [$1000] (Dark Theme) Tab highlight color is not correct. #13256

kavimuru · 2022-12-02T00:55:56Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Open the app on web.
Click on the search icon on LHN.
Use Escape key to close the page.
Press Tab multiple times until first item on the LHN is highlighted.

Expected Result:

The Highlight outline should be #5AB0FF, and ensure we use this regardless of dark or light mode.

Actual Result:

The highlight outline is blue which is part of light theme and should match the dark theme

Workaround:

unknown

Platform:

Where is this issue occurring?

Web
Desktop App

Version Number: 1.2.35-0
Reproducible in staging?: y
Reproducible in production?: y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Recording.1038.mp4

Expensify/Expensify Issue URL:
Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1669646862849829

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~015b64bc84249fb93c
Upwork Job ID: 1599743407521079296

melvin-bot · 2022-12-02T00:56:01Z

Triggered auto assignment to @michaelhaxhiu (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

dhairyasenjaliya · 2022-12-02T06:22:22Z

Proposal

We need to change the color on the below file to focus-visible & focus[data-focusvisible-polyfill] property box-shadow to greenHover: '#00C271',
This greenHover color looks neat & clean and but might we need to confirm the color with the design team

App/web/index.html

Lines 35 to 42 in a8e3cb5

    
           :focus-visible { 
        
               outline: 0; 
        
               box-shadow: inset 0px 0px 0px 1px #0185ff; 
        
           } 
        
           :focus[data-focusvisible-polyfill] { 
        
               outline: 0; 
        
               box-shadow: inset 0px 0px 0px 1px #0185ff; 
        
           }

        :focus-visible {
            outline: 0;
-            box-shadow: inset 0px 0px 0px 1px #0185ff;
+            box-shadow: inset 0px 0px 0px 1px #00C271;
        }
        :focus[data-focusvisible-polyfill] {
            outline: 0;
-            box-shadow: inset 0px 0px 0px 1px #0185ff;
+            box-shadow: inset 0px 0px 0px 1px #00C271;
        }

Result

sketchydroide · 2022-12-02T12:02:02Z

picking this up myself

parasharrajat · 2022-12-02T12:05:23Z

I would suggest discussing this first with Design team to decide if this is really needed. I had doubt on this as I posted on slack.

Note: Please discuss this issue if we really need to change the outline color.

sketchydroide · 2022-12-02T12:08:47Z

@Expensify/design any input here?

michaelhaxhiu · 2022-12-02T12:27:16Z

Hm I'm not convinced this is a bug as it stands.

The Expected Result section needs to be more specific too, as right now it's open ended:

Expected Result:

The Highlight outline should match the dark theme.

What would matching the dark theme actually mean?

parasharrajat · 2022-12-02T14:06:38Z

What would matching the dark theme actually mean?

This is where the design team kicks in.

michaelhaxhiu · 2022-12-02T14:34:31Z

Understood. I'm not going to export this job to Upwork until we define/agree on the Expected Result.

https://expensify.slack.com/archives/C049HHMV9SM/p1669986622516479?thread_ts=1669646862.849829&cid=C049HHMV9SM

shawnborton · 2022-12-02T20:26:19Z

Cool, commenting over in Slack.

sketchydroide · 2022-12-05T10:41:25Z

seem like @shawnborton has decided on a blue color, the one from the links on the app, which I think it's still different from this one. So this GH still makes some sense

michaelhaxhiu · 2022-12-05T12:19:53Z

Can we delineate which blue we have now, vs the blue we want to use? I want to make sure the expected solution is accurate before we work on this further.

Also - @sketchydroide do you agree this is still external.

melvin-bot · 2022-12-05T12:32:02Z

Current assignee @michaelhaxhiu is eligible for the External assigner, not assigning anyone new.

melvin-bot · 2022-12-05T12:32:08Z

Job added to Upwork: https://www.upwork.com/jobs/~015b64bc84249fb93c

melvin-bot · 2022-12-05T12:32:14Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)

melvin-bot · 2022-12-05T12:32:17Z

Current assignee @sketchydroide is eligible for the External assigner, not assigning anyone new.

michaelhaxhiu · 2022-12-05T12:32:45Z

While this is externally resolvable, @sketchydroide is electing to work on it and self assigned for that reason. C+ is assigned for the PR review.

sketchydroide · 2022-12-05T16:00:12Z

the color would be blueLink: '#5AB0FF',

michaelhaxhiu · 2022-12-05T16:02:07Z

quick / stupid question - do we have light mode anymore? I don't see it in my preferences/settings. I don't miss it yet 😂 but just asking for sake up updating GH

aimane-chnaif · 2022-12-05T16:08:28Z

quick / stupid question - do we have light mode anymore? I don't see it in my preferences/settings. I don't miss it yet 😂 but just asking for sake up updating GH

We're using only dark theme for now. Switching between light an dark theme will be worked on as a follow up.
https://expensify.slack.com/archives/C01GTK53T8Q/p1669226733259059

sketchydroide · 2022-12-06T13:04:54Z

I created the PR

shawnborton · 2022-12-06T15:24:06Z

Should we follow up with a PR to round the corners, and particularly, match the roundness of buttons?

sketchydroide · 2022-12-06T15:25:21Z

we were just mentioning that on slack https://expensify.slack.com/archives/C049HHMV9SM/p1669646862849829

sketchydroide · 2022-12-07T10:50:28Z

the PR has been merged

michaelhaxhiu · 2022-12-08T10:51:54Z

Noice

sketchydroide · 2022-12-09T10:55:54Z

maybe it will go in the next release 🤞🏼

michaelhaxhiu · 2022-12-09T14:59:51Z

kewl

michaelhaxhiu · 2022-12-09T14:59:58Z

nice work moving fast :)

sketchydroide · 2022-12-13T13:03:36Z

this is in prod, Ithink we can close it, unless we need to pay something, @michaelhaxhiu

michaelhaxhiu · 2022-12-13T13:32:17Z

Issue reported by: @parasharrajat

$250 for rajat catching & reporting this

parasharrajat · 2022-12-13T13:35:25Z

I applied for the job 5 days back. @michaelhaxhiu can you please look into that? https://www.upwork.com/jobs/~01cf116c84fb1d9f8a

michaelhaxhiu · 2022-12-13T13:44:39Z

Accepted, waiting for you to confirm next. Drop me a comment here when you do.

aimane-chnaif · 2022-12-13T14:11:21Z

@michaelhaxhiu Also, C+ payment for PR review

parasharrajat · 2022-12-13T14:13:19Z

Accepted.

michaelhaxhiu · 2022-12-13T15:10:44Z

@aimane-chnaif yep, don't worry! :) I will dispatch you payment in 2 days via https://www.upwork.com/jobs/~012a0e934343a83aee

Invited you to that job ^

aimane-chnaif · 2022-12-13T16:45:58Z

Invited you to that job ^

Accepted. Thanks @michaelhaxhiu

michaelhaxhiu · 2022-12-13T20:37:33Z

Cool, hired!

melvin-bot · 2022-12-13T22:06:44Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.38-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Dark Mode Focused state correct colour #13328

If no regressions arise, payment will be issued on 2022-12-20. 🎊

After the hold period, please check if any of the following need payment for this issue, and if so check them off after paying:

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2022-12-13T22:06:46Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@aimane-chnaif / @sketchydroide] The PR that introduced the bug has been identified. Link to the PR:
[@aimane-chnaif / @sketchydroide] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@aimane-chnaif / @sketchydroide] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@michaelhaxhiu] A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here:

sketchydroide · 2022-12-14T12:26:48Z

I don't think there is an offending PR here, it's jus that the UI changes made this apparent, maybe it was forgotten, IDK

michaelhaxhiu · 2022-12-14T18:18:46Z

Agreed, this isn't a bug or error in our process. Checking the final box.

michaelhaxhiu · 2022-12-20T16:55:40Z

All paid.

kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Dec 2, 2022

melvin-bot bot assigned michaelhaxhiu Dec 2, 2022

sketchydroide self-assigned this Dec 2, 2022

melvin-bot bot added the Overdue label Dec 5, 2022

melvin-bot bot removed the Overdue label Dec 5, 2022

michaelhaxhiu added the External Added to denote the issue can be worked on by a contributor label Dec 5, 2022

melvin-bot bot changed the title ~~(Dark Theme) Tab highlight color is not correct.~~ [$1000] (Dark Theme) Tab highlight color is not correct. Dec 5, 2022

melvin-bot bot assigned aimane-chnaif Dec 5, 2022

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Dec 5, 2022

michaelhaxhiu removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Dec 5, 2022

sketchydroide mentioned this issue Dec 5, 2022

Dark Mode Focused state correct colour #13328

Merged

49 tasks

JmillsExpensify added the Reviewing Has a PR in review label Dec 7, 2022

mvtglobally mentioned this issue Dec 8, 2022

Deploy Checklist: New Expensify 2022-12-07 #13431

Closed

72 tasks

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Daily KSv2 labels Dec 13, 2022

melvin-bot bot changed the title ~~[$1000] (Dark Theme) Tab highlight color is not correct.~~ [HOLD for payment 2022-12-20] [$1000] (Dark Theme) Tab highlight color is not correct. Dec 13, 2022

michaelhaxhiu closed this as completed Dec 20, 2022

[HOLD for payment 2022-12-20] [$1000] (Dark Theme) Tab highlight color is not correct. #13256

[HOLD for payment 2022-12-20] [$1000] (Dark Theme) Tab highlight color is not correct. #13256

Comments

kavimuru commented Dec 2, 2022 • edited by michaelhaxhiu Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Upwork Automation - Do Not Edit

melvin-bot bot commented Dec 2, 2022

dhairyasenjaliya commented Dec 2, 2022 • edited Loading

sketchydroide commented Dec 2, 2022

parasharrajat commented Dec 2, 2022

sketchydroide commented Dec 2, 2022

michaelhaxhiu commented Dec 2, 2022 • edited Loading

Expected Result:

parasharrajat commented Dec 2, 2022

michaelhaxhiu commented Dec 2, 2022

shawnborton commented Dec 2, 2022

sketchydroide commented Dec 5, 2022

michaelhaxhiu commented Dec 5, 2022

melvin-bot bot commented Dec 5, 2022

melvin-bot bot commented Dec 5, 2022

melvin-bot bot commented Dec 5, 2022

melvin-bot bot commented Dec 5, 2022

michaelhaxhiu commented Dec 5, 2022

sketchydroide commented Dec 5, 2022

michaelhaxhiu commented Dec 5, 2022

aimane-chnaif commented Dec 5, 2022

sketchydroide commented Dec 6, 2022

shawnborton commented Dec 6, 2022

sketchydroide commented Dec 6, 2022 • edited Loading

sketchydroide commented Dec 7, 2022

michaelhaxhiu commented Dec 8, 2022

sketchydroide commented Dec 9, 2022

michaelhaxhiu commented Dec 9, 2022

michaelhaxhiu commented Dec 9, 2022

sketchydroide commented Dec 13, 2022

michaelhaxhiu commented Dec 13, 2022

parasharrajat commented Dec 13, 2022 • edited Loading

michaelhaxhiu commented Dec 13, 2022

aimane-chnaif commented Dec 13, 2022

parasharrajat commented Dec 13, 2022

michaelhaxhiu commented Dec 13, 2022

aimane-chnaif commented Dec 13, 2022

michaelhaxhiu commented Dec 13, 2022

melvin-bot bot commented Dec 13, 2022 • edited by michaelhaxhiu Loading

melvin-bot bot commented Dec 13, 2022 • edited by michaelhaxhiu Loading

sketchydroide commented Dec 14, 2022

michaelhaxhiu commented Dec 14, 2022

michaelhaxhiu commented Dec 20, 2022

kavimuru commented Dec 2, 2022 •

edited by michaelhaxhiu

Loading

dhairyasenjaliya commented Dec 2, 2022 •

edited

Loading

michaelhaxhiu commented Dec 2, 2022 •

edited

Loading

sketchydroide commented Dec 6, 2022 •

edited

Loading

parasharrajat commented Dec 13, 2022 •

edited

Loading

melvin-bot bot commented Dec 13, 2022 •

edited by michaelhaxhiu

Loading

melvin-bot bot commented Dec 13, 2022 •

edited by michaelhaxhiu

Loading