PromucFlow_constructor/app/client/src/constants/Fonts.tsx
arunvjn ea1787ae41
fix: Visual changes to code inside appsmith (#22652)
## Description
This PR contains some UI changes for code in Appsmith.
- Sets font-family as ui-monospace for text in code editors and JSON
viewer (used in evaluated value popup and debugger).
- Sets font-size of text in code editors to 13px.
- Set font-size for text in autocomplete to 11px.
- Added line highlight to indicate the active line. This will be the
focus state of JS Editor going forward.
- Removed border-bottom for Tabs in JS Editor to keep it consistent with
rest of the pages.
- Introduces new colors as mentioned in this
[doc](https://www.notion.so/appsmith/Visual-changes-to-code-in-Appsmith-8bb530c60ee844e5b44adec039bf9280#d99e8450f022439f845b5a0d7deb1d3f).

> Add a TL;DR when description is extra long (helps content team)

Fixes #22992 


Media


## Type of change
- New feature (non-breaking change which adds functionality)

## How Has This Been Tested?
- Manual
- Jest

### Test Plan
1. Verified JSeditor - variable functions keywords numbers operators
arguments function properties font and colour
2. Verified Property pane font and colour
3. Verified above in mac and windows machine

### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)


## Checklist:
### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

---------

Co-authored-by: Ravi Kumar Prasad <ravi@appsmith.com>
2023-05-11 23:08:10 +05:30

5 lines
454 B
TypeScript

export const TextFonts =
"-apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif";
export const CodeFonts =
'ui-monospace, Menlo, Monaco, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", Consolas, "Courier New", monospace';