Rebrand#979
Merged
Merged
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Contributor
|
Size Change: +310 B (+0.03%) Total Size: 1.07 MB 📦 View Changed
ℹ️ View Unchanged
|
Deploying livecodes with
|
| Latest commit: |
f589bc7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b4ec6afc.livecodes.pages.dev |
| Branch Preview URL: | https://rebrand.livecodes.pages.dev |
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (8)
📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
WalkthroughThis PR implements a comprehensive 2026 visual rebrand for LiveCodes: fixed brand tokens, updated fonts, refreshed component and page styling, a new icon proposal page, and updated marketing/metadata assets. Changes2026 Brand Rebrand
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/livecodes/styles/app.scss (1)
1-2323:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFix Prettier formatting drift in this file.
CI is failing because this file does not match Prettier output. Please run Prettier on
src/livecodes/styles/app.scssand commit the formatted result.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/livecodes/styles/app.scss` around lines 1 - 2323, Prettier formatting has drifted in the large SCSS file (the one starting with :root and many --variable declarations and meta.load-css includes); run Prettier (using the repo's configured Prettier settings) against that stylesheet to reformat it, stage the updated file, and commit the changes so the file matches Prettier output and CI passes. Ensure you only change formatting (no semantic edits) and include the reformatted file in the commit.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/docs/contribution/new-logo.html`:
- Around line 1-2: The file starts with a <head> element and is missing the
required document type and root <html> element; add the HTML5 doctype
declaration (<!doctype html>) followed by an opening <html lang="en"> before the
existing <head> tag and ensure a matching closing </html> at the end of the
document so the file has a proper root and avoids quirks mode (locate the
existing <head> / <meta charset> lines and wrap them with the new doctype and
html tags).
In `@src/404.html`:
- Around line 139-150: The .error-tag style uses low-opacity background and
muted red text which reduces contrast for small text; update the .error-tag rule
to increase text/background contrast by darkening the color (e.g., stronger red
hex or higher alpha), increasing background opacity, or increasing
font-weight/font-size so small text meets contrast; modify the .error-tag
selector in the stylesheet (look for .error-tag with font-size: 0.9rem and
color: `#ff4a5a` and background: rgba(255, 74, 90, 0.05)) to use a higher-contrast
color or background alpha and/or slightly larger font-weight/size to satisfy
accessibility contrast requirements.
In `@src/livecodes/styles/inc-light.scss`:
- Around line 79-98: The inc-light.scss brand token block (variables like
--brand-bg-deep, --brand-bg-elevated, --brand-cyan, --brand-dot-pattern, etc.)
is failing CI due to Prettier formatting drift; fix it by running your project's
Prettier formatter (e.g., npm run format or npx prettier --write
src/livecodes/styles/inc-light.scss), verify the token block is normalized
(spacing, trailing newline, consistent semicolons), and commit the formatted
file so CI passes.
In `@storybook/index.html`:
- Around line 99-102: The badge styling in storybook/index.html uses background:
rgba(0,200,255,0.1), border: rgba(0,200,255,0.25), color: `#00c8ff` and font-size:
0.7rem which produces insufficient contrast for small text; update the badge CSS
(the rules that set background, border, color, font-size) so the
foreground/background meet at least WCAG AA contrast for small text (4.5:1) —
e.g., darken the text color and/or increase background opacity (or switch to a
darker text like `#007a99` or a darker background rgba with higher alpha) and keep
the 0.7rem size or increase it if needed; ensure the border color is adjusted to
match the new palette and re-test contrast with an accessibility checker.
---
Outside diff comments:
In `@src/livecodes/styles/app.scss`:
- Around line 1-2323: Prettier formatting has drifted in the large SCSS file
(the one starting with :root and many --variable declarations and meta.load-css
includes); run Prettier (using the repo's configured Prettier settings) against
that stylesheet to reformat it, stage the updated file, and commit the changes
so the file matches Prettier output and CI passes. Ensure you only change
formatting (no semantic edits) and include the reformatted file in the commit.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: fe86aa26-b04d-4df3-9060-569b43882c79
⛔ Files ignored due to path filters (83)
docs/static/img/favicon.icois excluded by!**/*.icodocs/static/img/livecodes-logo-transparent.svgis excluded by!**/*.svgdocs/static/img/livecodes-logo.svgis excluded by!**/*.svgdocs/static/img/logo.svgis excluded by!**/*.svgimages/logo/livecodes-logo-animation.svgis excluded by!**/*.svgimages/logo/livecodes-logo-border.pngis excluded by!**/*.pngimages/logo/livecodes-logo-border.svgis excluded by!**/*.svgimages/logo/livecodes-logo-draw-animation-loop-nobg.svgis excluded by!**/*.svgimages/logo/livecodes-logo-draw-animation-loop.svgis excluded by!**/*.svgimages/logo/livecodes-logo-draw-animation-mono.svgis excluded by!**/*.svgimages/logo/livecodes-logo-draw-animation.svgis excluded by!**/*.svgimages/logo/livecodes-logo-flat-nobg.svgis excluded by!**/*.svgimages/logo/livecodes-logo-flat.svgis excluded by!**/*.svgimages/logo/livecodes-logo-glowing-dot.svgis excluded by!**/*.svgimages/logo/livecodes-logo-icon-border.pngis excluded by!**/*.pngimages/logo/livecodes-logo-mono-dark.svgis excluded by!**/*.svgimages/logo/livecodes-logo-mono-light.svgis excluded by!**/*.svgimages/logo/livecodes-logo-mono-nobg-dark.svgis excluded by!**/*.svgimages/logo/livecodes-logo-mono-nobg-light.svgis excluded by!**/*.svgimages/logo/livecodes-logo-nobg.pngis excluded by!**/*.pngimages/logo/livecodes-logo-nobg.svgis excluded by!**/*.svgimages/logo/livecodes-logo-single-path.svgis excluded by!**/*.svgimages/logo/livecodes-logo-src.svgis excluded by!**/*.svgimages/logo/livecodes-logo-text.pngis excluded by!**/*.pngimages/logo/livecodes-logo-text.svgis excluded by!**/*.svgimages/logo/livecodes-logo-transparent.svgis excluded by!**/*.svgimages/logo/livecodes-logo.pngis excluded by!**/*.pngimages/logo/livecodes-logo.svgis excluded by!**/*.svgimages/logo/livecodes-text-logo-border.pngis excluded by!**/*.pngimages/logo/livecodes-text-logo-border.svgis excluded by!**/*.svgimages/logo/livecodes-text-logo-colored.svgis excluded by!**/*.svgimages/logo/livecodes-text-logo-flat-light.svgis excluded by!**/*.svgimages/logo/livecodes-text-logo-light.svgis excluded by!**/*.svgsrc/favicon.icois excluded by!**/*.icosrc/livecodes/assets/images/404.c5e490f0fd3e35509fd80c37ce93c3d4.pngis excluded by!**/*.pngsrc/livecodes/assets/images/404.pngis excluded by!**/*.pngsrc/livecodes/assets/images/android-chrome-192x192.pngis excluded by!**/*.pngsrc/livecodes/assets/images/android-chrome-512x512.pngis excluded by!**/*.pngsrc/livecodes/assets/images/apple-touch-icon.pngis excluded by!**/*.pngsrc/livecodes/assets/images/edit-in-livecodes-button-dark.pngis excluded by!**/*.pngsrc/livecodes/assets/images/edit-in-livecodes-button-dark.svgis excluded by!**/*.svgsrc/livecodes/assets/images/edit-in-livecodes-button.pngis excluded by!**/*.pngsrc/livecodes/assets/images/edit-in-livecodes-button.svgis excluded by!**/*.svgsrc/livecodes/assets/images/edit-in-livecodes-dark.pngis excluded by!**/*.pngsrc/livecodes/assets/images/edit-in-livecodes-dark.svgis excluded by!**/*.svgsrc/livecodes/assets/images/edit-in-livecodes.pngis excluded by!**/*.pngsrc/livecodes/assets/images/edit-in-livecodes.svgis excluded by!**/*.svgsrc/livecodes/assets/images/favicon-16x16.pngis excluded by!**/*.pngsrc/livecodes/assets/images/favicon-32x32.pngis excluded by!**/*.pngsrc/livecodes/assets/images/favicon-96x96.pngis excluded by!**/*.pngsrc/livecodes/assets/images/favicon.icois excluded by!**/*.icosrc/livecodes/assets/images/favicon.svgis excluded by!**/*.svgsrc/livecodes/assets/images/livecodes-logo-nobg.pngis excluded by!**/*.pngsrc/livecodes/assets/images/livecodes-logo-nobg.svgis excluded by!**/*.svgsrc/livecodes/assets/images/livecodes-logo-small.pngis excluded by!**/*.pngsrc/livecodes/assets/images/livecodes-logo-transparent.svgis excluded by!**/*.svgsrc/livecodes/assets/images/livecodes-logo.pngis excluded by!**/*.pngsrc/livecodes/assets/images/livecodes-logo.svgis excluded by!**/*.svgsrc/livecodes/assets/images/livecodes-og.pngis excluded by!**/*.pngsrc/livecodes/assets/images/livecodes-text-logo-nowrap-light.pngis excluded by!**/*.pngsrc/livecodes/assets/images/livecodes-text-logo-nowrap-light.svgis excluded by!**/*.svgsrc/livecodes/assets/images/livecodes-text-logo-nowrap.pngis excluded by!**/*.pngsrc/livecodes/assets/images/livecodes-text-logo-nowrap.svgis excluded by!**/*.svgsrc/livecodes/assets/images/livecodes-text-logo.pngis excluded by!**/*.pngsrc/livecodes/assets/images/livecodes-text-logo.svgis excluded by!**/*.svgsrc/livecodes/assets/images/mstile-144x144.pngis excluded by!**/*.pngsrc/livecodes/assets/images/mstile-150x150.pngis excluded by!**/*.pngsrc/livecodes/assets/images/mstile-310x150.pngis excluded by!**/*.pngsrc/livecodes/assets/images/mstile-310x310.pngis excluded by!**/*.pngsrc/livecodes/assets/images/mstile-70x70.pngis excluded by!**/*.pngsrc/livecodes/assets/images/oembed.pngis excluded by!**/*.pngsrc/livecodes/assets/images/oembed2.pngis excluded by!**/*.pngsrc/livecodes/assets/images/open-graph.pngis excluded by!**/*.pngsrc/livecodes/assets/images/try-in-livecodes-button-dark.pngis excluded by!**/*.pngsrc/livecodes/assets/images/try-in-livecodes-button-dark.svgis excluded by!**/*.svgsrc/livecodes/assets/images/try-in-livecodes-button.pngis excluded by!**/*.pngsrc/livecodes/assets/images/try-in-livecodes-button.svgis excluded by!**/*.svgsrc/livecodes/assets/images/try-in-livecodes-dark.pngis excluded by!**/*.pngsrc/livecodes/assets/images/try-in-livecodes-dark.svgis excluded by!**/*.svgsrc/livecodes/assets/images/try-in-livecodes.pngis excluded by!**/*.pngsrc/livecodes/assets/images/try-in-livecodes.svgis excluded by!**/*.svgsrc/livecodes/assets/images/web-app-manifest-192x192.pngis excluded by!**/*.pngsrc/livecodes/assets/images/web-app-manifest-512x512.pngis excluded by!**/*.png
📒 Files selected for processing (18)
docs/docs/contribution/new-logo.htmldocs/docs/contribution/ui-design-system.mdxdocs/src/components/HomepageFeatures.module.cssdocs/src/components/HomepageFeatures.tsxdocs/src/components/LiveCodes.tsxdocs/src/css/custom.cssfunctions/oembed.tssrc/404.htmlsrc/index.htmlsrc/livecodes/assets/site.webmanifestsrc/livecodes/core.tssrc/livecodes/html/app.htmlsrc/livecodes/styles/app.scsssrc/livecodes/styles/inc-light.scsssrc/livecodes/styles/inc-modal.scsssrc/livecodes/styles/index.csssrc/livecodes/vendors.tsstorybook/index.html
Comment on lines
+139
to
+150
| .error-tag { | ||
| font-size: 0.9rem; | ||
| text-transform: uppercase; | ||
| letter-spacing: 4px; | ||
| color: #ff4a5a; | ||
| font-weight: 600; | ||
| border: 1px solid rgba(255, 74, 90, 0.3); | ||
| padding: 4px 12px; | ||
| border-radius: 20px; | ||
| margin-top: 10px; | ||
| background: rgba(255, 74, 90, 0.05); | ||
| box-shadow: 0 0 15px rgba(255, 74, 90, 0.1); |
Contributor
There was a problem hiding this comment.
Increase .error-tag text contrast for readability.
Line 149 uses a very low-opacity background with muted red text, which can drop below contrast requirements for small text.
Suggested fix
.error-tag {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 4px;
- color: `#ff4a5a`;
+ color: `#ff8a95`;
font-weight: 600;
- border: 1px solid rgba(255, 74, 90, 0.3);
+ border: 1px solid rgba(255, 138, 149, 0.45);
padding: 4px 12px;
border-radius: 20px;
margin-top: 10px;
- background: rgba(255, 74, 90, 0.05);
+ background: rgba(255, 74, 90, 0.12);
box-shadow: 0 0 15px rgba(255, 74, 90, 0.1);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .error-tag { | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| color: #ff4a5a; | |
| font-weight: 600; | |
| border: 1px solid rgba(255, 74, 90, 0.3); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| margin-top: 10px; | |
| background: rgba(255, 74, 90, 0.05); | |
| box-shadow: 0 0 15px rgba(255, 74, 90, 0.1); | |
| .error-tag { | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| color: `#ff8a95`; | |
| font-weight: 600; | |
| border: 1px solid rgba(255, 138, 149, 0.45); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| margin-top: 10px; | |
| background: rgba(255, 74, 90, 0.12); | |
| box-shadow: 0 0 15px rgba(255, 74, 90, 0.1); |
🧰 Tools
🪛 GitHub Check: SonarCloud Code Analysis
[warning] 149-149: Text does not meet the minimal contrast requirement with its background.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/404.html` around lines 139 - 150, The .error-tag style uses low-opacity
background and muted red text which reduces contrast for small text; update the
.error-tag rule to increase text/background contrast by darkening the color
(e.g., stronger red hex or higher alpha), increasing background opacity, or
increasing font-weight/font-size so small text meets contrast; modify the
.error-tag selector in the stylesheet (look for .error-tag with font-size:
0.9rem and color: `#ff4a5a` and background: rgba(255, 74, 90, 0.05)) to use a
higher-contrast color or background alpha and/or slightly larger
font-weight/size to satisfy accessibility contrast requirements.
Comment on lines
+99
to
102
| background: rgba(0, 200, 255, 0.1); | ||
| border: 1px solid rgba(0, 200, 255, 0.25); | ||
| color: #00c8ff; | ||
| font-size: 0.7rem; |
Contributor
There was a problem hiding this comment.
Increase badge text contrast against its background.
The badge foreground/background combo appears below minimum contrast for small text, which hurts readability/accessibility.
Suggested fix
.badge {
display: inline-block;
- background: rgba(0, 200, 255, 0.1);
+ background: rgba(0, 200, 255, 0.18);
border: 1px solid rgba(0, 200, 255, 0.25);
- color: `#00c8ff`;
+ color: `#007aa3`;
font-size: 0.7rem;
font-weight: 600;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| background: rgba(0, 200, 255, 0.1); | |
| border: 1px solid rgba(0, 200, 255, 0.25); | |
| color: #00c8ff; | |
| font-size: 0.7rem; | |
| background: rgba(0, 200, 255, 0.18); | |
| border: 1px solid rgba(0, 200, 255, 0.25); | |
| color: `#007aa3`; | |
| font-size: 0.7rem; |
🧰 Tools
🪛 GitHub Check: SonarCloud Code Analysis
[warning] 101-101: Text does not meet the minimal contrast requirement with its background.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@storybook/index.html` around lines 99 - 102, The badge styling in
storybook/index.html uses background: rgba(0,200,255,0.1), border:
rgba(0,200,255,0.25), color: `#00c8ff` and font-size: 0.7rem which produces
insufficient contrast for small text; update the badge CSS (the rules that set
background, border, color, font-size) so the foreground/background meet at least
WCAG AA contrast for small text (4.5:1) — e.g., darken the text color and/or
increase background opacity (or switch to a darker text like `#007a99` or a darker
background rgba with higher alpha) and keep the 0.7rem size or increase it if
needed; ensure the border color is adjusted to match the new palette and re-test
contrast with an accessibility checker.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
docs/docs/contribution/new-logo.html (1)
481-524: ⚖️ Poor tradeoffConsider extracting repeated SVG icon into a reusable symbol.
The icon SVG is duplicated ~9 times throughout the page (at different sizes) with nearly identical markup except for filter IDs. This creates significant markup repetition (~3KB+).
While the current approach works, you could optimize by:
- Defining the icon once in an SVG
<defs><symbol>block at the top- Using
<use>references with size/filter overrides- Or externalizing to a single SVG file with width/height set via CSS
The current approach is valid for a static demo page, but the optimization would reduce file size and improve maintainability.
Also applies to: 652-689, 713-749, 755-787, 793-826, 831-863, 869-901, 913-945, 990-1022
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/docs/contribution/new-logo.html` around lines 481 - 524, Extract the repeated SVG markup into a single reusable symbol (e.g., create a top-level <defs><symbol id="livecodes-icon"> containing the rects, polylines, circle and the shared defs like linearGradient id="bgG", pattern id="dotP", filter ids "gG" and "dG"), then replace each duplicated SVG instance with a lightweight <svg width="..." height="..." role="img" aria-label="..."><use href="`#livecodes-icon`" /></svg> (or reference the external SVG file if you prefer). Ensure the symbol’s internal ids remain unique site-wide (keep the filters/gradients inside the single defs) or rename them consistently so no duplicate IDs occur; adjust sizes via the outer <svg> attributes or CSS and remove the duplicated markup present in the locations that currently use ids bgG, dotP, gG, and dG.src/livecodes/styles/inc-modal.scss (1)
439-439: 💤 Low valueDocument the magic number in the margin calculation.
The
calc(1rem - 6px)adjustment uses a magic number (-6px) without explanation. Adding a comment would clarify why this specific offset is needed (e.g., "Compensate for X border/padding" or "Align with Y element").📝 Suggested comment
img { margin-bottom: 1rem; - margin-inline-start: calc(1rem - 6px); + margin-inline-start: calc(1rem - 6px); // Offset to align with container edge }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/livecodes/styles/inc-modal.scss` at line 439, The declaration "margin-inline-start: calc(1rem - 6px)" uses a magic offset (-6px) without context; add a concise comment immediately above this declaration explaining why 6px is subtracted (e.g., "Compensates for X border/padding" or "Aligns with Y element baseline") so future readers know the exact layout rationale and can safely adjust or remove it.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/livecodes/styles/inc-modal.scss`:
- Line 256: Remove the unused commented rule and add a clarifying comment:
delete the commented-out "// overflow: auto;" inside the .modal-container block
(scrolling is already handled by `#modal-container` { overflow: scroll; }), and
add a short inline comment next to the .about-logo img rule (the one with
margin-inline-start: calc(1rem - 6px);) explaining that the "-6px" compensates
for the logo's built-in padding/edge offset to visually align the image with
surrounding text.
---
Nitpick comments:
In `@docs/docs/contribution/new-logo.html`:
- Around line 481-524: Extract the repeated SVG markup into a single reusable
symbol (e.g., create a top-level <defs><symbol id="livecodes-icon"> containing
the rects, polylines, circle and the shared defs like linearGradient id="bgG",
pattern id="dotP", filter ids "gG" and "dG"), then replace each duplicated SVG
instance with a lightweight <svg width="..." height="..." role="img"
aria-label="..."><use href="`#livecodes-icon`" /></svg> (or reference the external
SVG file if you prefer). Ensure the symbol’s internal ids remain unique
site-wide (keep the filters/gradients inside the single defs) or rename them
consistently so no duplicate IDs occur; adjust sizes via the outer <svg>
attributes or CSS and remove the duplicated markup present in the locations that
currently use ids bgG, dotP, gG, and dG.
In `@src/livecodes/styles/inc-modal.scss`:
- Line 439: The declaration "margin-inline-start: calc(1rem - 6px)" uses a magic
offset (-6px) without context; add a concise comment immediately above this
declaration explaining why 6px is subtracted (e.g., "Compensates for X
border/padding" or "Aligns with Y element baseline") so future readers know the
exact layout rationale and can safely adjust or remove it.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: c46a3de2-7e21-489a-8076-0181e12179f9
📒 Files selected for processing (3)
docs/docs/contribution/new-logo.htmlsrc/livecodes/html/about.htmlsrc/livecodes/styles/inc-modal.scss
✅ Files skipped from review due to trivial changes (1)
- src/livecodes/html/about.html
| height: 100%; | ||
| margin: 0 auto; | ||
| overflow: auto; | ||
| // overflow: auto; |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if .modal-container has overflow handling in child elements or if parent `#modal` handles it
rg -n -A5 '\.modal-container' src/livecodes/styles/ | rg 'overflow'
rg -n -B3 -A3 '`#modal-container`' src/livecodes/styles/ | rg 'overflow'Repository: live-codes/livecodes
Length of output: 188
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="src/livecodes/styles/inc-modal.scss"
echo "== Context around line 256 =="
nl -ba "$FILE" | sed -n '235,275p'
echo
echo "== Find modal-container blocks and nearby overflow =="
rg -n --fixed-string ".modal-container" "$FILE" || true
rg -n -C2 "overflow" "$FILE" || true
rg -n -C3 --fixed-string "`#modal-container`" "$FILE" || true
echo
echo "== Show any overflow occurrences with surrounding lines =="
rg -n -A4 -B2 "overflow" "$FILE" || trueRepository: live-codes/livecodes
Length of output: 155
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="src/livecodes/styles/inc-modal.scss"
echo "== Context around line 256 =="
cat -n "$FILE" | sed -n '240,270p'
echo
echo "== Find modal-container blocks and nearby overflow =="
rg -n --fixed-string ".modal-container" "$FILE" || true
rg -n -C2 "overflow" "$FILE" || true
rg -n -C3 --fixed-string "`#modal-container`" "$FILE" || true
echo
echo "== Show any overflow occurrences with surrounding lines =="
rg -n -A4 -B2 "overflow" "$FILE" || trueRepository: live-codes/livecodes
Length of output: 8017
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="src/livecodes/styles/inc-modal.scss"
echo "== Lines mentioning modal-container / `#modal` =="
rg -n --fixed-strings ".modal-container" "`#modal`" "$FILE" || true
echo
echo "== Context around .modal-container (80 lines around 252) =="
cat -n "$FILE" | sed -n '215,310p'
echo
echo "== Context around overflow: scroll (~line 77) =="
cat -n "$FILE" | sed -n '40,110p'
echo
echo "== Context around overflow-y: auto (~line 414) =="
cat -n "$FILE" | sed -n '380,460p'
echo
echo "== Context around .about-logo img (~line 439) =="
cat -n "$FILE" | sed -n '420,460p'Repository: live-codes/livecodes
Length of output: 7744
Remove/comment explanation for disabled overflow rule
- In
src/livecodes/styles/inc-modal.scss, delete the commented-out// overflow: auto;in.modal-container(the file already sets scrolling via#modal-container { overflow: scroll; }, so the rationale for keeping it commented is unclear). - Add a short comment for
.about-logo img { margin-inline-start: calc(1rem - 6px); }explaining the-6pxoffset.
🧰 Tools
🪛 GitHub Check: SonarCloud Code Analysis
[warning] 256-256: Remove this commented out code.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/livecodes/styles/inc-modal.scss` at line 256, Remove the unused commented
rule and add a clarifying comment: delete the commented-out "// overflow: auto;"
inside the .modal-container block (scrolling is already handled by
`#modal-container` { overflow: scroll; }), and add a short inline comment next to
the .about-logo img rule (the one with margin-inline-start: calc(1rem - 6px);)
explaining that the "-6px" compensates for the logo's built-in padding/edge
offset to visually align the image with surrounding text.
|
Contributor
i18n ActionsSource PR has been merged into the default branch. Maintainers can comment |
Collaborator
Author
|
.i18n-update-push |
Contributor
i18n Actions:
|
| Name | Description |
|---|---|
| New Branch for i18n | i18n/live-codes/rebrand |
| Last Commit SHA | 1865085 |
Maintainers can comment .i18n-update-pull after translation is done to trigger the i18n pull workflow and pull the changes back to Github.
Collaborator
Author
|
.i18n-update-pull |
Contributor
i18n Actions:
|
| Name | Description |
|---|---|
| i18n Branch | i18n/live-codes/rebrand |
| Last Commit SHA | 0c05382 |
| i18n PR | #981 |
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
2 participants
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.
This PR introduces a rebrand, with mainly a new logo, and slightly updated UI to be consistent with the styles introduced in the logo
The brackets and slash
</>represent code, and the red dot signifies "live" as in broadcastingThis is a comparison between the new and old logos: https://livecodes.io/?x=id/v6tdhbevqs8&mode=result
The design system with brand colors and fonts are documented here: docs/docs/contribution/ui-design-system.mdx
Thanks @draelwakeel for the contribution
Summary by CodeRabbit
Documentation
New Features
Style