AutoGPT icon indicating copy to clipboard operation
AutoGPT copied to clipboard

feat(platform): Sync on new UI design

Open majdyz opened this issue 1 year ago โ€ข 3 comments

Background

Design reference: https://www.figma.com/design/Oeu3UE3k134biyWQL2UL9B/Simple-updates-to-UI-before-beta?node-id=35-1060&node-type=canvas&t=LHPSt1U9Nu0dVWbu-0)](https://www.figma.com/design/Oeu3UE3k134biyWQL2UL9B/Simple-updates-to-UI-before-beta?node-id=35-1060&node-type=canvas&t=LHPSt1U9Nu0dVWbu-0

This PR brings the current UI one step closer to the design.

Changes ๐Ÿ—๏ธ

Navigation

  • Avoid redirecting to unimplemented /profile, redirect to home / instead.
  • Fix broken zoom-in zoom-out due to the run button covering it.

Layout

  • Make flow-editor full-screen: Remove border and make the whole screen an editor
  • On block listing: top border for scrolling is added, and vertical padding is removed.

Text

  • Add credits text back.

Navbar

  • Align styling, and reduce excessive shadow & radius.
  • Add button highlight on active page.

Button

  • Make the primary button responsive on a smaller screen.
  • Re-order palette buttons, moved save under undo & redo.
  • Align styling on palette buttons.
  • Hide the tutorial button on a smaller screen.
image image image image

Testing ๐Ÿ”

[!NOTE] Only for the new autogpt platform, currently in autogpt_platform/

  • Create from scratch and execute an agent with at least 3 blocks
  • Import an agent from file upload, and confirm it executes correctly
  • Upload agent to marketplace
  • Import an agent from marketplace and confirm it executes correctly
  • Edit an agent from monitor, and confirm it executes correctly

majdyz avatar Sep 26 '24 17:09 majdyz

PR Reviewer Guide ๐Ÿ”

โฑ๏ธย Estimated effort to review: 3 ๐Ÿ”ต๐Ÿ”ต๐Ÿ”ตโšชโšช
๐Ÿงชย No relevant tests
๐Ÿ”’ย No security concerns identified
โšกย Key issues to review

Possible UI Regression
The ControlPanel component has been moved inside the ReactFlow component, which might affect its positioning and visibility. Ensure this change doesn't negatively impact the user interface.

Layout Concern
The flow-container class now sets position to absolute and dimensions to 100vw and 100vh. This might cause layout issues or unexpected behavior in different screen sizes or when used within other components.

qodo-merge-pro[bot] avatar Sep 26 '24 17:09 qodo-merge-pro[bot]

Deploy Preview for auto-gpt-docs canceled.

Name Link
Latest commit 86c05258feccd225d00fce884cbbb541fea7fc82
Latest deploy log https://app.netlify.com/sites/auto-gpt-docs/deploys/66f59b069a90ad0008374a4e

netlify[bot] avatar Sep 26 '24 17:09 netlify[bot]

Deploy Preview for auto-gpt-docs canceled.

Name Link
Latest commit 3f77c407b95a2bad45d835925879c9fcbf48a9cb
Latest deploy log https://app.netlify.com/sites/auto-gpt-docs/deploys/66f650671d73e80008b5e223

netlify[bot] avatar Sep 26 '24 17:09 netlify[bot]