Skip to content

feat: add logo and favicon#328

Open
arian81 wants to merge 1 commit intomainfrom
03-25-feat_add_logo_and_favicon
Open

feat: add logo and favicon#328
arian81 wants to merge 1 commit intomainfrom
03-25-feat_add_logo_and_favicon

Conversation

@arian81
Copy link
Copy Markdown
Contributor

@arian81 arian81 commented Mar 25, 2026

No description provided.

@arian81 arian81 marked this pull request as ready for review March 25, 2026 22:44
Copy link
Copy Markdown
Contributor Author

arian81 commented Mar 25, 2026

This stack of pull requests is managed by Graphite. Learn more about stacking.

@greptile-apps
Copy link
Copy Markdown

greptile-apps bot commented Mar 25, 2026

Greptile Summary

This PR adds the Leopard brand logo and favicon set — replacing the placeholder "L" text block on the landing page with a new LeopardLogo SVG React component, adding Next.js app-directory icon files (icon0.svg, apple-icon.png, icon1.png, favicon.ico), PWA manifest icons, and the manifest.json file.

Key observations:

  • Missing resolves #issue-id: The PR description does not contain a resolves #issue-id link as required by the PR template and project policy. Please add one before merging.
  • Leftover debug stroke: Both src/components/leopard-logo.tsx (line 33) and src/app/icon0.svg (line 8) contain stroke="#FF0000" / stroke-width="2" on the path inside the alpha mask — an artifact from the design tool. This doesn't visually affect the output in alpha-mask mode, but it should be cleaned up in both assets.
  • Component + page integration in one PR: LeopardLogo is both created and wired into page.tsx in this single PR, which conflicts with the project rule to keep component creation and page integration in separate PRs.
  • Inline style on SVG element: style={{ maskType: "alpha" }} can be expressed as the Tailwind arbitrary class [mask-type:alpha] per project style guidelines.

Confidence Score: 3/5

  • Safe to merge functionally, but two process violations (missing issue link, component+page in same PR) and a cleanup item should be addressed first.
  • The changes are low-risk and the red stroke artifact is invisible to end users in alpha-mask mode. However, the missing resolves #issue-id and the component-integration-in-same-PR rule violations are explicit project policies that the team has opted into, so they should be resolved before merge.
  • apps/nextjs/src/components/leopard-logo.tsx and apps/nextjs/src/app/icon0.svg (remove the red debug stroke from both)

Important Files Changed

Filename Overview
apps/nextjs/src/components/leopard-logo.tsx New SVG React component for the Leopard logo. Contains a leftover stroke="#FF0000" Figma debug artifact on the masked path (also present in icon0.svg), and uses an inline style prop instead of a Tailwind arbitrary class.
apps/nextjs/src/app/page.tsx Replaces the placeholder "L" text block with the new LeopardLogo component; integrates the component in the same PR as its creation, which violates project convention.
apps/nextjs/src/app/layout.tsx Adds appleWebApp.title to the Next.js metadata object — a small, correct addition.
apps/nextjs/src/app/manifest.json New PWA web app manifest referencing the two new PNG icons. Missing a trailing newline at end of file. Consider adding start_url and id fields for a more complete manifest, though they are optional.
apps/nextjs/src/app/icon0.svg New SVG favicon for Next.js app directory. Also contains the same stroke="#FF0000" debug artifact on the masked path.
Prompt To Fix All With AI
This is a comment left during a code review.
Path: apps/nextjs/src/components/leopard-logo.tsx
Line: 32-34

Comment:
**Red debug stroke left in SVG**

The path inside the `mask0_205_66` mask element has `stroke="#FF0000"` and `strokeWidth="2"`, which is a classic Figma "debug outline" artifact. Because the parent mask uses `maskType: "alpha"`, the red color itself doesn't affect visible output (alpha is what drives the mask, and red is fully opaque just like white). However, this is unexpectedly left in the SVG source and will confuse anyone reading or editing this file. The same red stroke is also present in `apps/nextjs/src/app/icon0.svg` (line 8) and should be removed from both assets.

```suggestion
            fill="#FFFEFE"
            strokeWidth="2"
            mask="url(#path-3-inside-1_205_66)"
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: apps/nextjs/src/app/page.tsx
Line: 33-35

Comment:
**Component integrated in same PR as its creation**

`LeopardLogo` is both created (`src/components/leopard-logo.tsx`) and wired into the main landing page in this single PR. Per project convention, components should be developed in isolation and integrated into pages in a separate, follow-up PR. This makes each change independently reviewable and revertable.

**Rule Used:** Keep PRs focused on individual components without ... ([source](https://app.greptile.com/review/custom-context?memory=1468e328-08d6-42d6-9f09-f6b8b663275a))

**Learnt From**
[deltahacks/landing-12#12](https://github.com/deltahacks/landing-12/pull/12)

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: apps/nextjs/src/components/leopard-logo.tsx
Line: 20

Comment:
**Inline style on SVG mask element**

`style={{ maskType: "alpha" }}` is an inline style. The project rule prefers Tailwind CSS classes over inline styles. While `mask-type` has no direct Tailwind utility, you can express it via an arbitrary CSS property using Tailwind's `[mask-type:alpha]` syntax:

```suggestion
          className="[mask-type:alpha]"
          maskUnits="userSpaceOnUse"
```

**Rule Used:** Use Tailwind CSS classes instead of inline styles ... ([source](https://app.greptile.com/review/custom-context?memory=0b2b635d-cbb8-42e2-a38c-193803fa0968))

**Learnt From**
[deltahacks/landing-12#12](https://github.com/deltahacks/landing-12/pull/12)

How can I resolve this? If you propose a fix, please make it concise.

Reviews (1): Last reviewed commit: "feat: add logo and favicon" | Re-trigger Greptile

Comment on lines +32 to +34
fill="#FFFEFE"
stroke="#FF0000"
strokeWidth="2"
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Red debug stroke left in SVG

The path inside the mask0_205_66 mask element has stroke="#FF0000" and strokeWidth="2", which is a classic Figma "debug outline" artifact. Because the parent mask uses maskType: "alpha", the red color itself doesn't affect visible output (alpha is what drives the mask, and red is fully opaque just like white). However, this is unexpectedly left in the SVG source and will confuse anyone reading or editing this file. The same red stroke is also present in apps/nextjs/src/app/icon0.svg (line 8) and should be removed from both assets.

Suggested change
fill="#FFFEFE"
stroke="#FF0000"
strokeWidth="2"
fill="#FFFEFE"
strokeWidth="2"
mask="url(#path-3-inside-1_205_66)"
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/nextjs/src/components/leopard-logo.tsx
Line: 32-34

Comment:
**Red debug stroke left in SVG**

The path inside the `mask0_205_66` mask element has `stroke="#FF0000"` and `strokeWidth="2"`, which is a classic Figma "debug outline" artifact. Because the parent mask uses `maskType: "alpha"`, the red color itself doesn't affect visible output (alpha is what drives the mask, and red is fully opaque just like white). However, this is unexpectedly left in the SVG source and will confuse anyone reading or editing this file. The same red stroke is also present in `apps/nextjs/src/app/icon0.svg` (line 8) and should be removed from both assets.

```suggestion
            fill="#FFFEFE"
            strokeWidth="2"
            mask="url(#path-3-inside-1_205_66)"
```

How can I resolve this? If you propose a fix, please make it concise.

Comment on lines +33 to 35
<div className="w-15 overflow-hidden rounded-lg">
<LeopardLogo className="h-full w-full" />
</div>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Component integrated in same PR as its creation

LeopardLogo is both created (src/components/leopard-logo.tsx) and wired into the main landing page in this single PR. Per project convention, components should be developed in isolation and integrated into pages in a separate, follow-up PR. This makes each change independently reviewable and revertable.

Rule Used: Keep PRs focused on individual components without ... (source)

Learnt From
deltahacks/landing-12#12

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/nextjs/src/app/page.tsx
Line: 33-35

Comment:
**Component integrated in same PR as its creation**

`LeopardLogo` is both created (`src/components/leopard-logo.tsx`) and wired into the main landing page in this single PR. Per project convention, components should be developed in isolation and integrated into pages in a separate, follow-up PR. This makes each change independently reviewable and revertable.

**Rule Used:** Keep PRs focused on individual components without ... ([source](https://app.greptile.com/review/custom-context?memory=1468e328-08d6-42d6-9f09-f6b8b663275a))

**Learnt From**
[deltahacks/landing-12#12](https://github.com/deltahacks/landing-12/pull/12)

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

/>
<mask
id="mask0_205_66"
style={{ maskType: "alpha" }}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Inline style on SVG mask element

style={{ maskType: "alpha" }} is an inline style. The project rule prefers Tailwind CSS classes over inline styles. While mask-type has no direct Tailwind utility, you can express it via an arbitrary CSS property using Tailwind's [mask-type:alpha] syntax:

Suggested change
style={{ maskType: "alpha" }}
className="[mask-type:alpha]"
maskUnits="userSpaceOnUse"

Rule Used: Use Tailwind CSS classes instead of inline styles ... (source)

Learnt From
deltahacks/landing-12#12

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/nextjs/src/components/leopard-logo.tsx
Line: 20

Comment:
**Inline style on SVG mask element**

`style={{ maskType: "alpha" }}` is an inline style. The project rule prefers Tailwind CSS classes over inline styles. While `mask-type` has no direct Tailwind utility, you can express it via an arbitrary CSS property using Tailwind's `[mask-type:alpha]` syntax:

```suggestion
          className="[mask-type:alpha]"
          maskUnits="userSpaceOnUse"
```

**Rule Used:** Use Tailwind CSS classes instead of inline styles ... ([source](https://app.greptile.com/review/custom-context?memory=0b2b635d-cbb8-42e2-a38c-193803fa0968))

**Learnt From**
[deltahacks/landing-12#12](https://github.com/deltahacks/landing-12/pull/12)

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant