Refine Connect your tools visual mock to match Linear reference#17
Merged
NguyenCuong1989 merged 2 commits intoMay 17, 2026
Merged
Conversation
Review Summary by QodoRefine Connect your tools visual to match Linear reference
WalkthroughsDescription• Refined gradient colors and angles to match Linear reference design • Simplified Linear icon from complex gradient to repeating stripe pattern • Unified CSS variable naming and responsive sizing with clamp functions • Synchronized both demo files with identical markup and responsive behavior Diagramflowchart LR
A["Gradient Colors<br/>Updated RGB values"] --> B["Visual Refinement"]
C["Icon Redesign<br/>Stripe pattern"] --> B
D["CSS Simplification<br/>Clamp sizing"] --> B
E["File Synchronization<br/>Both demos unified"] --> B
B --> F["Improved Design<br/>Matches reference"]
File Changes1. connect-your-tools.html
|
Code Review by Qodo🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)
Great, no issues found!Qodo reviewed your code and found no material issues that require reviewⓘ The new review experience is currently in Beta. Learn more |
Hướng dẫn dành cho người reviewTinh chỉnh hình ảnh hero “Connect your tools” để khớp với bản tham chiếu của Linear hơn bằng cách đồng bộ các file HTML gốc và ví dụ, cập nhật hiệu ứng gradient và styling icon, đồng thời đơn giản hóa markup icon và tên class để responsive tốt hơn và nhất quán hơn. Sơ đồ lớp cho cấu trúc HTML/CSS Connect your tools đã cập nhậtclassDiagram
class RootDocument {
+style : :root CSS variables
+body : full viewport grid center
+background : linear-gradient
+font-family : system sans stack
}
class Icons {
+display : flex
+align-items : center
+justify-content : center
+gap : clamp(46px, 6.5vw, 100px)
+transform : translateY(12px)
+aria-label : Connected tools illustration
}
class Circle {
+width : clamp(124px, 10.8vw, 220px)
+aspect-ratio : 1
+border-radius : 50%
+background : var(--icon-fill)
+position : relative
+overflow : hidden
+aria-hidden : true
}
class Linear {
+pseudo : ::before
+position : absolute
+left : -14%
+bottom : 0
+width : 74%
+height : 76%
+background : repeating-linear-gradient(-46deg, var(--icon-accent) 0 10px, transparent 10px 24px)
+opacity : 0.98
}
class Plus {
+pseudo_before : ::before
+pseudo_after : ::after
+position : absolute
+top : 50%
+left : 50%
+width : clamp(54px, 4.8vw, 98px)
+height : clamp(14px, 1.2vw, 24px)
+border-radius : 999px
+background : var(--icon-accent)
+transform : translate(-50%, -50%)
+after-transform : translate(-50%, -50%) rotate(90deg)
}
class MediaQueryMax680 {
+target : max-width 680px
+icons-gap : clamp(24px, 8vw, 42px)
+icons-transform : none
}
RootDocument o-- Icons : contains
Icons o-- Circle : contains
Circle <|-- Linear : modifier
Circle <|-- Plus : modifier
RootDocument .. MediaQueryMax680 : responsive_rules
Thay đổi ở cấp độ file
Mẹo và câu lệnhTương tác với Sourcery
Tùy chỉnh trải nghiệm của bạnTruy cập dashboard để:
Nhận hỗ trợ
Original review guide in EnglishReviewer's GuideRefines the "Connect your tools" hero visual to more closely match Linear’s reference by synchronizing the root and examples HTML files, updating gradient and icon styling, and simplifying the icon markup and class naming for better responsiveness and consistency. Class diagram for updated Connect your tools HTML/CSS structureclassDiagram
class RootDocument {
+style : :root CSS variables
+body : full viewport grid center
+background : linear-gradient
+font-family : system sans stack
}
class Icons {
+display : flex
+align-items : center
+justify-content : center
+gap : clamp(46px, 6.5vw, 100px)
+transform : translateY(12px)
+aria-label : Connected tools illustration
}
class Circle {
+width : clamp(124px, 10.8vw, 220px)
+aspect-ratio : 1
+border-radius : 50%
+background : var(--icon-fill)
+position : relative
+overflow : hidden
+aria-hidden : true
}
class Linear {
+pseudo : ::before
+position : absolute
+left : -14%
+bottom : 0
+width : 74%
+height : 76%
+background : repeating-linear-gradient(-46deg, var(--icon-accent) 0 10px, transparent 10px 24px)
+opacity : 0.98
}
class Plus {
+pseudo_before : ::before
+pseudo_after : ::after
+position : absolute
+top : 50%
+left : 50%
+width : clamp(54px, 4.8vw, 98px)
+height : clamp(14px, 1.2vw, 24px)
+border-radius : 999px
+background : var(--icon-accent)
+transform : translate(-50%, -50%)
+after-transform : translate(-50%, -50%) rotate(90deg)
}
class MediaQueryMax680 {
+target : max-width 680px
+icons-gap : clamp(24px, 8vw, 42px)
+icons-transform : none
}
RootDocument o-- Icons : contains
Icons o-- Circle : contains
Circle <|-- Linear : modifier
Circle <|-- Plus : modifier
RootDocument .. MediaQueryMax680 : responsive_rules
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - mình đã để lại một vài phản hồi tổng quan:
- Vì
connect-your-tools.htmlvàexamples/connect-your-tools.htmlđược dự định luôn đồng bộ với nhau, hãy cân nhắc trích xuất phần style/markup dùng chung ra một nguồn duy nhất (hoặc CSS dùng chung) để tránh những sai khác nhỏ trong tương lai giữa hai file. - Bạn đã chuyển các vòng tròn riêng lẻ từ các phần tử có nhãn sang
aria-hidden="true"; nếu các icon Linear và dấu cộng được dùng để thể hiện ý nghĩa về thương hiệu/tích hợp hơn là chỉ mang tính trang trí, hãy cân nhắc khôi phục phần nhãn cụ thể, hỗ trợ truy cập thay vì ẩn chúng khỏi các công nghệ hỗ trợ.
Prompt cho AI Agents
Please address the comments from this code review:
## Overall Comments
- Since `connect-your-tools.html` and `examples/connect-your-tools.html` are intended to stay in sync, consider extracting the shared styles/markup into a single source (or shared CSS) to avoid subtle future drift between the two files.
- You’ve switched the individual circles from labeled elements to `aria-hidden="true"`; if the Linear and plus icons are intended to convey brand/integration meaning rather than being purely decorative, consider restoring more specific, accessible labeling instead of hiding them from assistive technologies.Sourcery miễn phí cho mã nguồn mở - nếu bạn thấy các review này hữu ích, hãy cân nhắc chia sẻ chúng ✨
Original comment in English
Hey - I've left some high level feedback:
- Since
connect-your-tools.htmlandexamples/connect-your-tools.htmlare intended to stay in sync, consider extracting the shared styles/markup into a single source (or shared CSS) to avoid subtle future drift between the two files. - You’ve switched the individual circles from labeled elements to
aria-hidden="true"; if the Linear and plus icons are intended to convey brand/integration meaning rather than being purely decorative, consider restoring more specific, accessible labeling instead of hiding them from assistive technologies.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Since `connect-your-tools.html` and `examples/connect-your-tools.html` are intended to stay in sync, consider extracting the shared styles/markup into a single source (or shared CSS) to avoid subtle future drift between the two files.
- You’ve switched the individual circles from labeled elements to `aria-hidden="true"`; if the Linear and plus icons are intended to convey brand/integration meaning rather than being purely decorative, consider restoring more specific, accessible labeling instead of hiding them from assistive technologies.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Refines the “Connect your tools” static hero visual to better match Linear’s reference and keeps the root and examples/ demo pages in sync.
Changes:
- Updates gradient colors/angles and introduces shared CSS variables for background and icon styling.
- Rebuilds the Linear-style mark with a
repeating-linear-gradientstripe treatment and adjusts plus icon sizing withclamp(). - Renames the icon lockup structure/classes to
.icons/.circleand adds a small-screen media query for balance.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| examples/connect-your-tools.html | Updates the example demo’s CSS/markup to match the refined visual and new .icons / .circle structure. |
| connect-your-tools.html | Applies the refined visual/layout and class renames to the root demo page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
200
to
202
| <main class="logos" aria-label="Connected tools illustration"> | ||
| <div class="logo linear" aria-label="Linear logo"></div> | ||
| <div class="logo plus" aria-label="Add integration"></div> |
|
|
||
| .plus::before, | ||
| .plus::after { | ||
| .logo.linear::before { |
Comment on lines
+9
to
16
| --bg-start: #6646da; | ||
| --bg-mid: #9d54b2; | ||
| --bg-end: #ec6f69; | ||
| --icon-fill: #f2f2f3; | ||
| --icon-accent: #b4579f; | ||
| --bg-start: #6544dc; | ||
| --bg-mid: #9a54b5; | ||
| --bg-end: #ec6d74; |
Comment on lines
142
to
144
| .logo.plus::after { | ||
| width: 10%; | ||
| height: 46%; |
Comment on lines
+81
to
96
| .linear::before { | ||
| content: ""; | ||
| position: absolute; | ||
| left: -14%; | ||
| bottom: 0; | ||
| width: 74%; | ||
| height: 76%; | ||
| background: repeating-linear-gradient( | ||
| -46deg, | ||
| var(--icon-accent) 0 10px, | ||
| transparent 10px 24px | ||
| ); | ||
| opacity: 0.98; | ||
| inset: 0; | ||
| border-radius: 50%; | ||
| background: linear-gradient( |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
examples/entry that designers and contributors can open locally for review.Description
connect-your-tools.htmlandexamples/connect-your-tools.htmlby tuning the gradient colors, gradient angle, CSS variable names, and overall layout spacing to better match the reference image.repeating-linear-gradientstripe treatment and adjusted the right plus icon proportions with clamped sizing for responsive scaling..icons/.circleand added a media query for small screens so the composition stays balanced at narrow widths.connect-your-tools.htmlandexamples/connect-your-tools.htmlpresent identical markup and styles.Testing
curl -L --max-time 15 -s https://linear.app/integrations | head -n 20and it completed successfully.HTMLParserscript (python3 - <<'PY' ... HTMLParser().feed(...) ... PY) and parsing succeeded.git diff --checkand committed the changes withgit commit -m "refine connect-your-tools visual to match reference"without issues.python3 -m http.server 4173 --bind 0.0.0.0and confirmedcurl -I --max-time 5 http://127.0.0.1:4173/connect-your-tools.html | headreturnedHTTP/1.0 200 OK, and captured a Playwright screenshot successfully.Codex Task
Summary by Sourcery
Căn chỉnh hình ảnh hero “Connect your tools” với tham chiếu Linear và thống nhất phần triển khai demo ở root và examples.
Tính năng mới:
examples/connect-your-tools.htmlđược đồng bộ hóa, phản chiếu minh họa chính của “Connect your tools”.Cải tiến:
Original summary in English
Summary by Sourcery
Align the Connect your tools hero visual with the Linear reference and unify the root and examples demo implementations.
New Features:
Enhancements: