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

feat: UI overhaul + first pass component implementation + Work submission flow #108

Merged
merged 17 commits into from
Mar 28, 2025
Merged

feat: UI overhaul + first pass component implementation + Work submission flow #108

merged 17 commits into from
Mar 28, 2025

Conversation

Cygnusfear
Copy link

@Cygnusfear Cygnusfear commented Mar 26, 2025 •
edited
Loading

Pull Request: Major UI Overhaul with Tailwind 4.0

Overview

This PR implements a comprehensive UI overhaul using Tailwind 4.0, including a reorganization of components and implementation of a complete garden workflow.

Detailed Changes

Architecture and Organization

  1. Component Reorganization

    • Created a new hierarchical UI structure in components/UI
    • Moved form components from top-level to UI subdirectory
    • Restructured views (Gardens → Home, Work → Garden)
    • Implemented proper component naming conventions

  2. Styling System

    • Migrated from previous styling to Tailwind CSS
    • Created dedicated CSS files:
      • colors.css: Comprehensive color system with semantic naming
      • typography.css: Typography scale and text styles
      • animation.css: Custom animations
      • utilities.css: Reusable utility classes

  3. New Component Library

    • Accordion/FAQ: Collapsible content sections with custom icons
    • Avatar: User profile images with multiple variants
    • Badge: Status indicators with various styles
    • Button: Completely rebuilt with variants, modes, and sizes
    • Cards: ActionCard, GardenCard, WorkCard, and base Card
    • Carousel: Image/content slider
    • Form Components: Improved Input, Select, Text, Card, Progress
    • Profile: User profile component with data type mapping
    • Tabs: Tab navigation system
    • UploadModal: Media upload interface

  4. UI Flow Implementation

    • Completed garden workflow with:
      • Introduction screen
      • Details input
      • Media upload
      • Review screens
      • Completed/confirmation stage

  5. Structural Changes

    • Added radix-ui component libraries for accessibility
    • Implemented polymorphic component support
    • Added utility functions for component composition
    • Improved responsive layout across the application

  6. Developer Experience

    • Added consistent VSCode formatter settings
    • Optimized component structure for reusability
    • Implemented proper component metadata and display names

Gotchas and Unfinished Work

  • Commented out code in FormProgress component needs cleanup
  • Color system underwent significant changes after "Marcus export" that might cause inconsistencies
  • Several components like carousel, badges, and cards are WIP

Cygnusfear added 12 commits March 18, 2025 11:19
@Cygnusfear
fix: pnpm filter fix
66f17b3 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
chore: ENV bypass for desktop development
2eb799f 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
wip: convert to TW 4 CSS
6bc43d8 
- exclode contracts/lib
- remove postcss/autoprefixer
- use tailwindcss/vite
- convert existing tv defs -> tailwind utilities
- convert existing typo -> typography.css
- appbar style conform figma
- remove customized tv export, remove customized cn export -> tailwind CSS classes now first class
- remove padding from root + add to appView

Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
wip: retooling base
371bff9 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
feat(client): initial components, profile + garden screen
fbba68e 
Custom based off radix/shadcn, lowlevel components with tv variants:

- accordion
- avatar
- badge
- card
- profile
- tabs

Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
style: profile, faq, cards, accordion, typography
6a72b21 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
wip: carousel, badges, actioncard, gardencard
87e791b 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
wip: broke all the colors after receiving Marcus export
abcb083 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
style: carousel, garden card, workcard, actioncard
1103b56 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
fix: typography error
da29176 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
feat: garden (work) full flow
49a33ec 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
chore: remove debug flag
e676faf 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@github-project-automation github-project-automation bot moved this to Backlog in Green Goods Mar 26, 2025
@vercel Vercel
Copy link

vercel bot commented Mar 26, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
green-goods ❌ Failed (Inspect) Mar 26, 2025 2:33pm

@Cygnusfear Cygnusfear changed the title fix: pnpm filter fix feat: UI overhaul + first pass component implementation + Work submission flow Mar 26, 2025
@Cygnusfear Cygnusfear linked an issue Mar 26, 2025 that may be closed by this pull request
Gardener Work Capture Components #38
Closed
2 tasks
@Cygnusfear
fix: strokee -> stroke
1631f04 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear
chore(media): put preview modal back in (but doesn’t work)
bf3fcb8 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@Cygnusfear Cygnusfear marked this pull request as ready for review March 28, 2025 06:55
@Cygnusfear Cygnusfear requested a review from Oba-One March 28, 2025 06:55
@github-project-automation github-project-automation bot moved this from Backlog to Done in Green Goods Mar 28, 2025
Oba-One
Oba-One requested changes Mar 28, 2025
View reviewed changes
Copy link
Member

@Oba-One Oba-One left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure app is building, seems to have type errors blocking build

@github-project-automation github-project-automation bot moved this from Done to In progress in Green Goods Mar 28, 2025
@Cygnusfear
fix: ts errors
d3b2e22 
Signed-off-by: Alexander Mangel <cygnusfear@gmail.com>
@github-project-automation github-project-automation bot moved this from In progress to Done in Green Goods Mar 28, 2025
@Oba-One Oba-One merged commit 4046de7 into develop Mar 28, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Oba-One Oba-One Oba-One approved these changes

Assignees
No one assigned
Labels
None yet
Projects
Green Goods
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Gardener Work Capture Components
2 participants
@Cygnusfear @Oba-One