fix-#275: Fixed the redirect icon color to match theme #345

Ashu0216 · 2024-05-23T17:26:06Z

Summary

Fixes for the redirect icon to match the color theme (both light and dark).

##Description

Included appropriate CSS to sync with the theme (dark/ light) to sync the redirect icon color.

Images

Issue(s) Addressed

Closes #275

Prerequisites

Have you followed all the CONTRIBUTING GUIDELINES?

vercel · 2024-05-23T17:26:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wanderlust	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 23, 2024 7:15pm
wanderlust-backend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 23, 2024 7:15pm

github-actions · 2024-05-23T17:26:18Z

Hey @Ashu0216! Thanks for sticking to the guidelines! High five! 🙌🏻

Ashu0216 · 2024-05-23T17:30:07Z

Hi @krishnaacharyaa .
I really enjoyed working on this issue. It was my first time working with SVGs, and I definitely learned a lot in the process.

Kindly review the PR and let me know if any changes are needed.

krishnaacharyaa

Thank you for PR, kindly address the review comments

krishnaacharyaa · 2024-05-23T18:52:11Z

frontend/src/components/latest-post-card.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import linkIcon from '@/assets/svg/link.svg';
+// import linkIcon from '@/assets/svg/link.svg';
 import Post from '@/types/post-type';


Kindly remove the comments, never have code comments in the PR

Will remove the comments

You have not yet removed @Ashu0216

krishnaacharyaa · 2024-05-23T18:52:17Z

frontend/src/components/latest-post-card.tsx

@@ -24,7 +24,14 @@ export default function LatestPostCard({
            <CategoryPill key={`${category}-${index}`} category={category} />
          ))}
        </div>
-        <img src={linkIcon} alt={post.title} className="h-3 w-3" />
+        {/* <img src={linkIcon} alt={post.title} className="h-3 w-3" /> */}
+        <svg


Will remove the comments

krishnaacharyaa · 2024-05-23T18:54:11Z

frontend/src/components/latest-post-card.tsx

-        <img src={linkIcon} alt={post.title} className="h-3 w-3" />
+        {/* <img src={linkIcon} alt={post.title} className="h-3 w-3" /> */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"


Instead of embedding this as a svg, create file and import from there, like the existing linkIcon.
Ideally rename the existing linkIcon to link-light-icon and have a new one link-dark-icon

I did try having it in assets itself, but the classes that I added on the svg were not reflecting the color on UI. I also did try to change the img styling but didnt seem to work .So I referred the tailwind Doc and therefore did it this way.
Here is the method I followed : SVGstyling.

Yes, ideally it should be two different SVGs (one for light and another for dark theme). But then this would involve lifting up the state from Toggle > Header > Home page and then passing it down till LatestPostCard. Hence I thought instead of unncessary passing of state we could use svg properties to deal with this.

I can give containing SVG in assests and use it like the previous embedded linkIcon one more try.

We don't prefer embedding and about the 2nd point
Just use this hook useThemeClass from utils

And conditionally rendor light and dark svg

Hi @krishnaacharyaa , I tried adopting this approach, added two separate svgs and conditionally rendered them using the useThemeClass.
But there is an issue in this, the theme is not updated dynamically when the theme-toggle-button updates the theme. As a solution , I would propose that we can use ThemeContext which would define the theme for the entire app. And accordingly modify the theme-toggle component ti use the method of ThemeContext to update the theme which can then be accessed by any children component.

We can't use context api, as it renders every component beneath, we can use zustand state management instead, if you can stick to the contributing guidelines and do nice refactoring @Ashu0216

Sure, will try to utilize zutsand, and will keep you updated of the progress @krishnaacharyaa

krishnaacharyaa · 2024-05-23T18:54:30Z

frontend/src/components/latest-post-card.tsx

+          className="text-primary h-3 w-3 fill-current dark:text-dark-primary"
+          viewBox="0 0 515.283 515.283"
+        >
+          <path d="M372.149 515.283H85.881c-22.941 0-44.507-8.934-60.727-25.155S.001 452.34.001 429.402V143.134c0-22.94 8.934-44.506 25.154-60.726s37.786-25.154 60.727-25.154h114.507c15.811 0 28.627 12.816 28.627 28.627s-12.816 28.627-28.627 28.627H85.881c-7.647 0-14.835 2.978-20.241 8.384s-8.385 12.595-8.385 20.242v286.268c0 7.647 2.978 14.835 8.385 20.243 5.406 5.405 12.594 8.384 20.241 8.384h286.267c7.647 0 14.835-2.978 20.242-8.386 5.406-5.406 8.384-12.595 8.384-20.242V314.895c0-15.811 12.817-28.626 28.628-28.626s28.628 12.816 28.628 28.626v114.507c0 22.94-8.934 44.505-25.155 60.727-16.221 16.22-37.788 25.154-60.726 25.154zm-171.76-171.762c-7.327 0-14.653-2.794-20.242-8.384-11.179-11.179-11.179-29.306 0-40.485L417.544 57.254H314.896c-15.811 0-28.626-12.816-28.626-28.627S299.085 0 314.896 0h171.761a28.542 28.542 0 0 1 19.997 8.144l.002.002.056.056.017.016.044.044.029.029.032.032.062.062.062.062.031.032.029.029a.62.62 0 0 1 .06.061l.056.057.002.002a28.55 28.55 0 0 1 8.144 19.998v171.761c0 15.811-12.817 28.627-28.628 28.627s-28.626-12.816-28.626-28.627V97.739l-237.4 237.399c-5.585 5.59-12.911 8.383-20.237 8.383z" />


I see the icon is just replaced, How will it be different based on the theme?

I have added the fill current class to the svg with the colors mentioned for both light and dark theme (referenced the figma desgin for the required colors) that will make the color change whenever the theme changes.

github-actions · 2024-05-23T19:05:54Z

Umm... did someone forget to read the style guide? Fix that PR title and let's try again! @krishnaacharyaa
Don't worry, it happens to the best of us! Check out our contributor guidelines for more details.

github-actions · 2024-05-23T19:14:41Z

Hey @krishnaacharyaa! Thanks for sticking to the guidelines! High five! 🙌🏻

github-actions · 2024-05-23T19:20:25Z

Hey @krishnaacharyaa! Thanks for sticking to the guidelines! High five! 🙌🏻

github-actions · 2024-05-23T19:21:52Z

Hey @krishnaacharyaa! Thanks for sticking to the guidelines! High five! 🙌🏻

krishnaacharyaa · 2024-05-24T17:39:10Z

frontend/src/components/latest-post-card.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import linkIcon from '@/assets/svg/link.svg';
+// import linkIcon from '@/assets/svg/link.svg';
 import Post from '@/types/post-type';


You have not yet removed @Ashu0216

krishnaacharyaa · 2024-05-24T17:39:17Z

frontend/src/components/latest-post-card.tsx

@@ -24,7 +24,14 @@ export default function LatestPostCard({
            <CategoryPill key={`${category}-${index}`} category={category} />
          ))}
        </div>
-        <img src={linkIcon} alt={post.title} className="h-3 w-3" />
+        {/* <img src={linkIcon} alt={post.title} className="h-3 w-3" /> */}
+        <svg


krishnaacharyaa · 2024-05-24T17:42:25Z

frontend/src/components/latest-post-card.tsx

-        <img src={linkIcon} alt={post.title} className="h-3 w-3" />
+        {/* <img src={linkIcon} alt={post.title} className="h-3 w-3" /> */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"


We don't prefer embedding and about the 2nd point
Just use this hook useThemeClass from utils

And conditionally rendor light and dark svg

krishnaacharyaa · 2024-05-28T17:49:41Z

@Ashu0216 any progress?!

Ashu0216 · 2024-05-29T05:00:14Z

@Ashu0216 any progress?!

Hi @krishnaacharyaa , Apologies for the delay. I have my exams going on right now. Would you please mind giving me this week's time to get back to you with all the changes suggested. I'll try to get it done as soon as possible .Thank you for your patience.

krishnaacharyaa · 2024-06-18T00:56:43Z

Closing as inactive

fix-krishnaacharyaa#275: Fixed the redirect icon color to match theme

2e99beb

vercel bot deployed to Preview – wanderlust-backend May 23, 2024 17:26 View deployment

vercel bot deployed to Preview – wanderlust May 23, 2024 17:27 View deployment

krishnaacharyaa requested changes May 23, 2024

View reviewed changes

Merge branch 'main' into bugfix/275-redirect-icon-not-matches-theme

d0b5ed9

krishnaacharyaa changed the title ~~fix-#275: Fixed the redirect icon color to match theme~~ fixing-#275: Fixed the redirect icon color to match theme May 23, 2024

github-actions bot added the Title needs formatting label May 23, 2024

vercel bot deployed to Preview – wanderlust-backend May 23, 2024 19:05 View deployment

vercel bot deployed to Preview – wanderlust May 23, 2024 19:06 View deployment

Merge branch 'main' into bugfix/275-redirect-icon-not-matches-theme

e2b3830

krishnaacharyaa changed the title ~~fixing-#275: Fixed the redirect icon color to match theme~~ fix-#275: Fixed the redirect icon color to match theme May 23, 2024

github-actions bot removed the Title needs formatting label May 23, 2024

vercel bot deployed to Preview – wanderlust May 23, 2024 19:15 View deployment

vercel bot deployed to Preview – wanderlust-backend May 23, 2024 19:15 View deployment

krishnaacharyaa requested changes May 24, 2024

View reviewed changes

krishnaacharyaa closed this Jun 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix-#275: Fixed the redirect icon color to match theme #345

fix-#275: Fixed the redirect icon color to match theme #345

Ashu0216 commented May 23, 2024 •

edited by krishnaacharyaa

Loading

vercel bot commented May 23, 2024 •

edited

Loading

github-actions bot commented May 23, 2024

Ashu0216 commented May 23, 2024

krishnaacharyaa left a comment

krishnaacharyaa May 23, 2024

Ashu0216 May 24, 2024

krishnaacharyaa May 24, 2024

krishnaacharyaa May 23, 2024

Ashu0216 May 24, 2024

krishnaacharyaa May 24, 2024

krishnaacharyaa May 23, 2024

Ashu0216 May 24, 2024

Ashu0216 May 24, 2024

krishnaacharyaa May 24, 2024

Ashu0216 Jun 3, 2024

krishnaacharyaa Jun 4, 2024

Ashu0216 Jun 4, 2024

krishnaacharyaa May 23, 2024

Ashu0216 May 24, 2024

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

krishnaacharyaa May 24, 2024

krishnaacharyaa May 24, 2024

krishnaacharyaa May 24, 2024

krishnaacharyaa commented May 28, 2024

Ashu0216 commented May 29, 2024 •

edited

Loading

krishnaacharyaa commented Jun 18, 2024

fix-#275: Fixed the redirect icon color to match theme #345

fix-#275: Fixed the redirect icon color to match theme #345

Conversation

Ashu0216 commented May 23, 2024 • edited by krishnaacharyaa Loading

Summary

Images

Issue(s) Addressed

Prerequisites

vercel bot commented May 23, 2024 • edited Loading

github-actions bot commented May 23, 2024

Ashu0216 commented May 23, 2024

krishnaacharyaa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

krishnaacharyaa commented May 28, 2024

Ashu0216 commented May 29, 2024 • edited Loading

krishnaacharyaa commented Jun 18, 2024

Ashu0216 commented May 23, 2024 •

edited by krishnaacharyaa

Loading

vercel bot commented May 23, 2024 •

edited

Loading

Ashu0216 commented May 29, 2024 •

edited

Loading