feat: replace legacy emojis with professional lucide icons by KGFCH2 · Pull Request #96 · Dev-Card/DevCard

KGFCH2 · 2026-05-15T13:11:20Z

Related Issue: Closes #95

Summary: Replace legacy emojis with professional Lucide icons.

Copilot

Pull request overview

This PR addresses Issue #95 by replacing legacy emoji-based UI accents in the web app with Lucide SVG icons, improving visual consistency and professionalism.

Changes:

Added lucide-svelte to the web app dependencies and lockfile.
Replaced emoji icons with Lucide icon components in the landing page and user profile page.
Updated call-to-action and navigation affordances to use consistent iconography.

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 6 comments.

File	Description
`pnpm-lock.yaml`	Adds `lucide-svelte` resolution entries; also surfaces a deprecated/vulnerability warning for `@ungap/structured-clone@1.3.0`.
`apps/web/package.json`	Adds `lucide-svelte` dependency for the web app.
`apps/web/src/routes/+page.svelte`	Replaces emojis with Lucide icons on the landing page (theme toggle, logo, CTAs, features).
`apps/web/src/routes/u/[username]/+page.svelte`	Replaces emojis/arrows with Lucide icons on the user page (error state, link tiles, CTA).

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

ShantKhatri · 2026-05-16T20:28:47Z

  '@ungap/structured-clone@1.3.0':
    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher


These are not yet fixed. Please look into these.

ShantKhatri · 2026-05-16T20:28:58Z

        rel="noopener"
      >
-        ⭐ Star on GitHub
+        <Star size={18} fill="currentColor" /> Star on GitHub


ShantKhatri · 2026-05-16T20:29:04Z

+      {#if theme === 'light'}
+        <Moon size={20} />
+      {:else}
+        <Sun size={20} />
+      {/if}
    </button>
-    <div class="logo">⚡</div>
+    <div class="logo">
+      <Zap size={64} strokeWidth={2.5} fill="currentColor" />
+    </div>


ShantKhatri · 2026-05-16T20:29:09Z

+    <div class="logo">
+      <Zap size={64} strokeWidth={2.5} fill="currentColor" />
+    </div>


ShantKhatri · 2026-05-16T20:29:15Z

+      <div class="error-emoji"><Frown size={64} /></div>
      <h1>User Not Found</h1>
      <p>This DevCard doesn't exist or has been removed.</p>
-      <a href="/" class="home-link">← Back to DevCard</a>
+      <a href="/" class="home-link"><ArrowLeft size={18} style="display: inline; vertical-align: middle; margin-right: 4px;" /> Back to DevCard</a>


      <h1>User Not Found</h1>
      <p>This DevCard doesn't exist or has been removed.</p>
-      <a href="/" class="home-link">← Back to DevCard</a>
+      <a href="/" class="home-link"><ArrowLeft size={18} style="display: inline; vertical-align: middle; margin-right: 4px;" /> Back to DevCard</a>


ShantKhatri · 2026-05-16T19:10:18Z

@KGFCH2 Please look into the review by co-pilot, as some are very critical. Also kindly solve conflicts.

KGFCH2 · 2026-05-16T20:22:22Z

Okay...

Signed-off-by: Babin Bid <144826118+KGFCH2@users.noreply.github.com>

KGFCH2 · 2026-05-16T20:24:41Z

Please check once...

ShantKhatri · 2026-05-20T09:49:05Z

Please check once...

not fixed yet, please look into these.

Signed-off-by: Babin Bid <144826118+KGFCH2@users.noreply.github.com>

KGFCH2 · 2026-05-22T19:40:19Z

Now??

Copilot

Pull request overview

Copilot reviewed 3 out of 4 changed files in this pull request and generated 7 comments.

Comments suppressed due to low confidence (1)

apps/web/src/routes/+page.svelte:139

The footer GitHub link opens in a new tab but uses rel="noopener" only. Use rel="noopener noreferrer" for the same security/privacy reasons as other external links.

      Apache 2.0 License • <a
        href="https://github.com/Dev-Card/DevCard"
        target="_blank"
        rel="noopener">GitHub</a
      >

      <a
        href="https://github.com/Dev-Card/DevCard"
-        class="btn-primary"
+        class="btn btn-primary"
        target="_blank"
        rel="noopener"
      >


+    <button
+      id="theme-toggle"
+      class="theme-toggle"
+      on:click={toggleTheme}
+      aria-label="Toggle theme"
+    >
+      {#if theme === 'light'}
+        <Moon size={20} />
+      {:else}
+        <Sun size={20} />
+      {/if}
+    </button>
+    <div class="logo">
+      <Zap size={64} strokeWidth={2.5} fill="currentColor" />
+    </div>


+    <h1>DevCard</h1>
+    <p class="tagline">One Tap. Every Profile. Every Platform.</p>
    <p class="description">
-      The open-source standard for developer networking. Put all your profiles—GitHub, LinkedIn, LeetCode, and more—into a single, high-impact digital card.
+      Stop sharing LinkedIn, GitHub, and Twitter one by one.<br />
+      DevCard puts every profile in one shareable QR code.
    </p>
    <div class="cta-group">
      <a
        href="https://github.com/Dev-Card/DevCard"
-        class="btn-primary"
+        class="btn btn-primary"
        target="_blank"
        rel="noopener"
      >
-        ⭐ Star on GitHub
+        <Star size={18} fill="currentColor" /> Star on GitHub
+      </a>
+      <a href="#features" class="btn btn-secondary">
+        Learn More <ChevronDown size={18} />
      </a>
-      <a href="/u/devcard-demo" class="btn-secondary">View Demo Profile →</a>
    </div>
  </section>

  <section id="features" class="features">
-    <div class="feature-card glass">
-      <div class="feature-icon">🔗</div>
-      <h3>Unified Identity</h3>
-      <p>Combine your fragmented online presence into a cohesive professional identity.</p>
+    <div class="feature-card">
+      <div class="feature-icon"><Link size={32} /></div>
+      <h3>One Card, All Profiles</h3>
+      <p>
+        GitHub, LinkedIn, Twitter/X, Devfolio, GitLab, LeetCode, and 10+ more —
+        all in one card.
+      </p>


+      <div class="error-emoji"><Frown size={64} /></div>
+      <h1>User Not Found</h1>
+      <p>This DevCard doesn't exist or has been removed.</p>
+      <a href="/" class="home-link"><ArrowLeft size={18} style="display: inline; vertical-align: middle; margin-right: 4px;" /> Back to DevCard</a>


+              <span class="tile-username">{link.username}</span>
            </div>
-            <span class="arrow">→</span>
+            <span class="tile-arrow"><ArrowRight size={18} /></span>


 	"dependencies": {
-		"@devcard/shared": "workspace:*"
+		"@devcard/shared": "workspace:*",
+		"lucide-svelte": "^1.0.1"


+{#if error || !profile}
+  <main class="error-page">
+    <div class="error-content">
+      <div class="error-emoji"><Frown size={64} /></div>
+      <h1>User Not Found</h1>
+      <p>This DevCard doesn't exist or has been removed.</p>
+      <a href="/" class="home-link"><ArrowLeft size={18} style="display: inline; vertical-align: middle; margin-right: 4px;" /> Back to DevCard</a>
    </div>
-  {:else}
-    <div class="profile-card glass" style="--accent: {profile.accentColor}">
-      <header class="profile-header">
-        <div class="avatar-wrapper">
-          {#if profile.avatarUrl}
-            <img src={profile.avatarUrl} alt={profile.displayName} class="avatar" />
-          {:else}
-            <div class="avatar avatar-placeholder" style="background: {profile.accentColor}">
-              {profile.displayName.charAt(0).toUpperCase()}
-            </div>
-          {/if}
-          <div class="avatar-glow" style="background: {profile.accentColor}"></div>
-        </div>
-
+  </main>
+{:else}
+  <main class="profile-page">
+    <div class="profile-card" style="--accent: {profile.accentColor}">
+      <!-- Avatar & Header -->
+      <div class="profile-header">
+        {#if profile.avatarUrl}
+          <img src={profile.avatarUrl} alt={profile.displayName} class="avatar" />
+        {:else}
+          <div class="avatar avatar-placeholder" style="background: {profile.accentColor}">
+            {profile.displayName.charAt(0).toUpperCase()}
+          </div>
+        {/if}
        <h1 class="display-name">{profile.displayName}</h1>
+        {#if profile.pronouns}
+          <span class="pronouns">{profile.pronouns}</span>
+        {/if}
        {#if profile.role}
-          <div class="role-badge">
+          <p class="role">
            {profile.role}{profile.company ? ` @ ${profile.company}` : ''}
-          </div>
+          </p>
        {/if}
-
        {#if profile.bio}
          <p class="bio">{profile.bio}</p>
        {/if}
-      </header>
+      </div>

-      <div class="links-grid">
-        {#each profile.links as link, i}
+      <!-- Platform Links -->
+      <div class="links-section">
+        <p class="links-label">Connect with {profile.displayName.split(' ')[0]}</p>
+        {#each profile.links as link}
          {@const platform = PLATFORMS[link.platform]}
          {@const color = platformColors[link.platform] || '#6366f1'}
          <a
            href={link.url || getProfileUrl(link.platform, link.username)}
            target="_blank"
            rel="noopener noreferrer"
-            class="link-tile glass"
-            style="--delay: {i * 0.1}s"
+            class="platform-tile"
          >
            <div class="tile-icon" style="background: {color}">
-              <span class="platform-initial">{platform?.name.charAt(0) || '?'}</span>
+              {platform?.name.charAt(0) || '?'}
            </div>
-            <div class="tile-content">
-              <span class="platform-name">{platform?.name || link.platform}</span>
-              <span class="username">@{link.username}</span>
+            <div class="tile-info">
+              <span class="tile-name">{platform?.name || link.platform}</span>
+              <span class="tile-username">{link.username}</span>
            </div>
-            <span class="arrow">→</span>
+            <span class="tile-arrow"><ArrowRight size={18} /></span>
          </a>
        {/each}
      </div>
-
-      <footer class="card-footer">
-        <p>Verified Developer Profile</p>
-        <div class="logo-sm">⚡ DevCard</div>
-      </footer>
    </div>

-    <div class="get-your-own">
-      <p>Want a card like this?</p>
-      <div class="profile-actions">
-        <a href="/" class="gradient-text get-devcard-link">Create your DevCard ⚡</a>
-        <button type="button" class="copy-link-button" onclick={copyProfileUrl}>
-          Copy Link
-        </button>
-      </div>
-      <p class="copy-message {copyStatus}" aria-live="polite">
-        {copyMessage}
-      </p>
+    <!-- Get DevCard CTA -->
+    <div class="get-devcard">
+      <p>Want your own DevCard?</p>
+      <a href="/" class="cta-link">
+        Get your DevCard <Zap size={18} style="display: inline; vertical-align: middle; margin-left: 2px;" fill="currentColor" />
+      </a>
    </div>
-  {/if}
-</main>

-<style>
-  .bg-gradient {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(circle at 50% 0%, var(--accent), transparent 50%),
-                #020617;
-    opacity: 0.18;
-    z-index: -1;
-  }
+    <footer class="footer">
+      Powered by <a href="/">DevCard</a> — Open Source Developer Profiles
+    </footer>
+  </main>


ShantKhatri · 2026-05-23T15:23:20Z

Now??

At the same state, now we have extra changes.

KGFCH2 · 2026-05-24T21:52:16Z

@ShantKhatri Check it once...

ShantKhatri · 2026-05-28T08:51:54Z

@@ -32,9 +32,6 @@ importers:
      '@fastify/multipart':
        specifier: ^9.0.0
        version: 9.4.0
-      '@fastify/rate-limit':


Hey @KGFCH2 , please look into this, so mane dependancies and dev-dependancies removed here.

feat: replace legacy emojis with professional lucide icons

2fe4362

Copilot AI review requested due to automatic review settings May 15, 2026 13:11

Copilot started reviewing on behalf of KGFCH2 May 15, 2026 13:12 View session

Copilot AI reviewed May 15, 2026

View reviewed changes

Merge branch 'main' into feat/replace-emojis-with-icons

11ddee7

Signed-off-by: Babin Bid <144826118+KGFCH2@users.noreply.github.com>

Harxhit added the gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. label May 17, 2026

Merge branch 'main' into feat/replace-emojis-with-icons

4c341cd

Signed-off-by: Babin Bid <144826118+KGFCH2@users.noreply.github.com>

Copilot AI review requested due to automatic review settings May 22, 2026 19:40

Copilot started reviewing on behalf of KGFCH2 May 22, 2026 19:40 View session

Copilot AI reviewed May 22, 2026

View reviewed changes

chore: resolve merge conflicts

7fcf8f7

ShantKhatri requested changes May 28, 2026

View reviewed changes

ShantKhatri closed this Jun 3, 2026

Conversation

KGFCH2 commented May 15, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

ShantKhatri May 16, 2026

Choose a reason for hiding this comment

Uh oh!

ShantKhatri May 20, 2026

Choose a reason for hiding this comment

Uh oh!

ShantKhatri May 16, 2026

Choose a reason for hiding this comment

Uh oh!

ShantKhatri May 16, 2026

Choose a reason for hiding this comment

Uh oh!

ShantKhatri May 16, 2026

Choose a reason for hiding this comment

Uh oh!

ShantKhatri May 16, 2026

Choose a reason for hiding this comment

Uh oh!

ShantKhatri commented May 16, 2026

Uh oh!

KGFCH2 commented May 16, 2026

Uh oh!

KGFCH2 commented May 16, 2026

Uh oh!

ShantKhatri commented May 20, 2026

Uh oh!

KGFCH2 commented May 22, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

ShantKhatri commented May 23, 2026

Uh oh!

KGFCH2 commented May 24, 2026

Uh oh!

ShantKhatri May 28, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants