fix: add collapsible function to templates and fix design bugs (#4305)

* Updated colors

* Fixed design for small screens

* Change border radius

* Changed size of text on templates description

* Fix shine effect on small screens

* Fixed icons on starter templates

* Updated mono font to JetBrains

* Updated icon hit area for X

* Added gradient wrapper and x-gradient

* Changed colors and font weights for nav component

* Added zoom on hover of gradient

* Fixed input size

* Fixed all templates to show everything

* Hide scrollbar

* Change text size of card

* Removed title of the categories

* Removed unused currentTab from templatecategory

* Updated position of search icon

* Updated style of inputs

* Updated search clear button

* Fixed bug on small screens

* Added no results query

* Fixed background on get started cards

* Added focus ring on nav component

* Added tab index to search and sidebar buttons

* Added keyboard navigation to templates

* Updated templatesModal to use ShadCN Sidebar

* Implemented collapsible sidebar

* Fix collapsible to work on mobile but be overlaying content

* Added noise to styleUtils

* Updated padding and sizes for mobile

* Updated text size

* Updated font family to inter

* Made get started components fetch title and description from the flow

* Updated description on get started component

* Updated naming of sidebar

* Updated description of start from scratch

* Updated color of selected sidebar item

* Changed text color for sidebar not active items

* changed description sizes

* changed to line clamp

* Reduced gap between icon and category text

* Fixed no results state

* Fixed X icon only appearing on hover

* Fix auto focus issue

* fixed hover color of primary button

* Fixed gradients to use stops if it exists and stop using random gradient

* removed random gradient

* Fixed design of cards in templates

* Updated nav to go through tests

* Fixed focus on input

* [autofix.ci] apply automated fixes

* New color

* fix testes

* Fixed starter projects test

* ✨ (starter-projects.spec.ts): add Page import to test function parameters for better code readability and maintainability
📝 (starter-projects.spec.ts): refactor test to include a function for waiting for template visibility, improving code readability and reducing duplication

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Lucas Oliveira 2024-10-31 16:39:58 -03:00 • committed by GitHub
commit 3279b8a1e8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 1312 additions and 283 deletions

View file

@ -186,8 +186,8 @@ const config = {
DEFAULT: "hsl(var(--inner-yellow))",
foreground: "hsl(var(--inner-foreground-yellow))",
muted: "hsl(var(--inner-yellow-muted-foreground))",
},
"inner-blue": {
},
"inner-blue": {
DEFAULT: "hsl(var(--inner-blue))",
foreground: "hsl(var(--inner-foreground-blue))",
muted: "hsl(var(--inner-blue-muted-foreground))",
@ -244,28 +244,12 @@ const config = {
sm: "calc(var(--radius) - 4px)",
},
borderWidth: {
'1.75': '1.75px',
'1.5': '1.5px',
1.75: "1.75px",
1.5: "1.5px",
},
fontFamily: {
sans: [
"Inter",
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
],
jetbrains: ["JetBrains Mono", "monospace"],
sans: ["var(--font-sans)", ...fontFamily.sans],
mono: ["var(--font-mono)", ...fontFamily.mono],
},
boxShadow: {
"frozen-ring": "0 0 10px 2px rgba(128, 190, 230, 0.5)",