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.

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

UI Refactor + Figma Design (Needed) #467

Open
6 tasks
gokulprathin8 opened this issue Mar 5, 2024 · 1 comment
Open
6 tasks

UI Refactor + Figma Design (Needed) #467

gokulprathin8 opened this issue Mar 5, 2024 · 1 comment
Assignees
Labels
CSS Design enhancement New feature or request Figma help wanted Extra attention is needed

Comments

@gokulprathin8
Copy link
Collaborator

gokulprathin8 commented Mar 5, 2024

What is the PR about?

Improvements to the user interface, focusing primarily on CSS changes to enhance the visual appeal and usability of Geoweaver.
This includes overall application level refactor to CSS.

What should be done?

  • Each page should have component / page level CSS that should be ONLY scoped to that file. So we have a page level css and a global level css
  • Use of standard styles and stardazing desgin system for Geoweaver. A better way would be to use TailwindCSS (https://tailwindcss.com/)
  • All the element should be designed in a minimal and clean way. No need to over engineer the entire design. Keep it simple.
  • Font sizes, margins, paddings numbers should be standardized, try to use rem instead of px which scales with resolution on bigger displays
  • No inline styling unless the styling is from a tailwind class. All styles should be moved to a seperate css file
  • Remove unnecessary comments

Design System

image
  • All text should use the color #050505
  • All important highlights should use #004FFF (this also the color that matches geoweaver logo)
  • Secondary color should use #31AFD4
  • Buttons and Clickable objects should be #902D41 as the color
  • Announcements / Objects that need attention should be using the color #FF007F

Need to Figma Design

Design Infomation
Before we proceed with this design we need a design layout that is accpeted by everyone in the team.
We can use Figma or any popular design tool to make our design and proceed to write code ONLY after we finalize on the final design.

Expected Outcome

Clean & Premium User Experience for everyone who uses geoweaver. Make it easy on the eyes to attract more people.

@gokulprathin8 gokulprathin8 added enhancement New feature or request help wanted Extra attention is needed Figma Design CSS labels Mar 5, 2024
@manasa123104 manasa123104 self-assigned this Mar 5, 2024
@gokulprathin8
Copy link
Collaborator Author

gokulprathin8 commented Mar 16, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Design enhancement New feature or request Figma help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants