Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhance Field Type Page with Icons and Breadcrumb Update #6950

Open
Bonapara opened this issue Sep 9, 2024 · 2 comments
Open

Enhance Field Type Page with Icons and Breadcrumb Update #6950

Bonapara opened this issue Sep 9, 2024 · 2 comments
Assignees
@anamarn
Labels
good first issue Good for newcomers prio: med scope: front Issues that are affecting the frontend side only size: short type: design improvement

Comments

@Bonapara
Copy link
Member

Bonapara commented Sep 9, 2024

Current behavior

When we add a new field to an object, we first need to choose the field type we want to add. There are two things to improve on this page:

  • The field-type cards have no illustrations

CleanShot 2024-09-09 at 14 21 35

  • The Breadcrumb Step selector is a 32px high Select element that displays the entire step name.

CleanShot 2024-09-09 at 14 29 32

Desired Behavior

  • Add an illustration before each field type (dark and light mode). Ideally, use SVGs from Figma; otherwise, use the PNGs from the zip file below.

Icons.zip

image

  • The breadcrumb step selector should be a 24px light icon button (tertiary).

CleanShot 2024-09-09 at 14 31 28

Figma

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=36855-123514&node-type=FRAME&t=geQxFuEOuhKoYhCr-11
@Bonapara Bonapara added scope: front Issues that are affecting the frontend side only size: short for experienced contributor good first issue Good for newcomers and removed for experienced contributor labels Sep 9, 2024
@anamarn anamarn self-assigned this Sep 9, 2024
@dev13-suthar
Copy link

dev13-suthar commented Sep 10, 2024 •
edited
Loading

can i work on this

@Bonapara
Copy link
Member Author

Sorry @dev13-suthar, @anamarn will handle it!

@anamarn anamarn mentioned this issue Sep 11, 2024
Merged
anamarn added a commit that referenced this issue Sep 13, 2024
@anamarn
add field config new icons (#6996)
cf8b116 
#6950
Add new icons to Object Fields Data types.

Before:

![image](https://github.com/user-attachments/assets/55697e31-841d-435e-8c70-13ff1c59268d)


After:

![image](https://github.com/user-attachments/assets/bd43f0ec-d3f7-4ecf-a95f-87a030f68e24)

![image](https://github.com/user-attachments/assets/369893a9-35be-43f8-bfcb-55149effa78a)
@anamarn anamarn mentioned this issue Sep 17, 2024
Merged
anamarn added a commit that referenced this issue Sep 18, 2024
@anamarn
Add SettingsCard for Config Data Type and Accounts Settings (#7093)
cac3e11 
#6950
Add new Settings Card for Config Data Type and accounts Settings
Before:
<img width="707" alt="Screenshot 2024-09-11 at 17 43 16"
src="https://github.com/user-attachments/assets/63ff9373-fa86-4b22-8e8b-21483039c3be">
After:
<img width="755" alt="Screenshot 2024-09-17 at 14 15 18"
src="https://github.com/user-attachments/assets/213c24a1-dc1c-4ffb-8890-7c1f63ed376c">
<img width="755" alt="Screenshot 2024-09-17 at 14 15 38"
src="https://github.com/user-attachments/assets/0fc12d19-b92a-493d-80fa-0064cf491fbc">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@anamarn anamarn

Labels
good first issue Good for newcomers prio: med scope: front Issues that are affecting the frontend side only size: short type: design improvement
Projects
Product development ✅
Status: 🏗 In progress
Milestone
No milestone
Development

No branches or pull requests
4 participants
@FelixMalfait @Bonapara @anamarn @dev13-suthar