fix: POS background color optimized in dark mode #36287
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue:
![image](https://private-user-images.githubusercontent.com/65544983/255808954-af2b15df-d9ef-4880-8159-aa177b4935a1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDMzMjAsIm5iZiI6MTcyMTMwMzAyMCwicGF0aCI6Ii82NTU0NDk4My8yNTU4MDg5NTQtYWYyYjE1ZGYtZDllZi00ODgwLTgxNTktYWExNzdiNDkzNWExLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDExNDM0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJhMWY3YTA3OTBjMWE4ZjRiNTIzZTFhNWIzOWEwOTU5ZmQ4ODY2ZTBmNDcyOWI1YjU5YzAyMjQxNTc5NTNkOTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.UmKcNZPN4WU1RhGZKu03tUAS6XC-MSOzdXomPeWSbNQ)
![image](https://private-user-images.githubusercontent.com/65544983/255822955-ede337c2-f2bb-47df-9135-2ae888a8e64d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDMzMjAsIm5iZiI6MTcyMTMwMzAyMCwicGF0aCI6Ii82NTU0NDk4My8yNTU4MjI5NTUtZWRlMzM3YzItZjJiYi00N2RmLTkxMzUtMmFlODg4YThlNjRkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDExNDM0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk4NzI0N2YzZTIwNjgzNDhhNDk1NjFlYzhmMTczN2JhZDc5Yzk2YWFjNTk0MTIzOTFkY2Y2NmY4MGRlZWIyZGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.LNHElTT3VSEt6KWHVeYGTgROIi1wu37aauMq-iq__Xg)
The background color, text color and hover effects were not optimized for Dark Theme.
Reason:
background-color: var(--gray-50);
The above color was hard coded
Solution:
Changed it to
background-color: var(--control-bg);
Result:
Dark Theme:
![image](https://private-user-images.githubusercontent.com/65544983/255811201-4c8c4146-2325-4857-9d77-7f75373b8c7b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDMzMjAsIm5iZiI6MTcyMTMwMzAyMCwicGF0aCI6Ii82NTU0NDk4My8yNTU4MTEyMDEtNGM4YzQxNDYtMjMyNS00ODU3LTlkNzctN2Y3NTM3M2I4YzdiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDExNDM0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY1OTU2OTZkYjEzMTMyZGRjYTlhY2VjYWQ0NzMyNmE4MWYxMTk5NDFmOGFhMjM4MmFmYmE2Mjk0MWU5MGI2MjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.6wbwYu26K0i1V7D79iuVJohQg0qR_oH2axYMx9sTc94)
Light Theme:
![image](https://private-user-images.githubusercontent.com/65544983/255823339-b92cd50c-e190-4e71-80f8-49102597cccd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDMzMjAsIm5iZiI6MTcyMTMwMzAyMCwicGF0aCI6Ii82NTU0NDk4My8yNTU4MjMzMzktYjkyY2Q1MGMtZTE5MC00ZTcxLTgwZjgtNDkxMDI1OTdjY2NkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDExNDM0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc0OGMzMjgxNDNjYzVkOWU5NzAyYjNkNjM1NTkxZTllMmM1ZDE1NmVlYWI0MWU3N2JlNjJiZTQ5MWFmZTVkZGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0._ED8BCgNmscQVZBdGtVDxXCnnhAlbe7JHBm33fiDyUI)
![image](https://private-user-images.githubusercontent.com/65544983/255823431-a72ab04f-6010-407c-8107-01ff57b5d5a7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDMzMjAsIm5iZiI6MTcyMTMwMzAyMCwicGF0aCI6Ii82NTU0NDk4My8yNTU4MjM0MzEtYTcyYWIwNGYtNjAxMC00MDdjLTgxMDctMDFmZjU3YjVkNWE3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE4VDExNDM0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUwMmMwMmZhNGI3YjhkMzBkYTUyYjFmZTZmN2Y0OTZlOGNmY2I3YzJkMDAwNTEyNjg2OTc5MzZiZmM3ZTY5MmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.F6dv7us5x2XYbuijB1pU_8kc2EJwxZrXYA2j4Ayr8tA)