Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

194 footer component update #195

Merged
merged 7 commits into from
Nov 15, 2023
Merged

194 footer component update #195

merged 7 commits into from
Nov 15, 2023

Conversation

summer-cook
Copy link
Contributor

@summer-cook summer-cook commented Nov 10, 2023 •
edited
Loading

Story

  • Update the footer component styling
  • add a linkedin icon to the SocialIcon component for user in the footer

Screenshot

image

Acceptance

  • linkedIn is added to the iconsList object in SocialIcon.jsx
  • the 3 section columns in the middle are made smaller
    • the title is size 13
    • the links are size 13
  • a link titled "Legal Notices" is placed on the left hand side underneath the copyright info (font-size: 13px)
  • copyright info gets reduced to an h6
  • the margin top/bottom of the footer is reduced

@summer-cook
Copy link
Contributor Author

summer-cook commented Nov 10, 2023 •
edited
Loading

@alishaevn do you have a subscription to Flaticon pro? I was not able to find an icon that is the exact same as the pre-existing ones because flaticon does not let you download SVGs without premium, and finding a circle linkedin svg with transparent lettering elsewhere was tricky. the "in" in the linkedin svg has a fill, which is not ideal, so it will always be black even if on a different background whereas the others are all transparent. I suppose we could pass it the background color of the footer but if you have a flaticon login that would be easier. i guess as a last resort we could edit it on illustrator or something.

@summer-cook
Copy link
Contributor Author

summer-cook commented Nov 10, 2023 •
edited
Loading

also the acceptance criteria of

  • the margin top/bottom of the footer is reduced

would probably need to be done in the webstore. the component does not have margin built in & would have needed to be given margin upon import to the home page. I reduced the top/bottom padding slightly inside the footer though to go along with the smaller text sizes

@summer-cook summer-cook marked this pull request as ready for review November 10, 2023 20:26
@summer-cook summer-cook marked this pull request as draft November 13, 2023 14:50
@alishaevn
Copy link
Member

@alishaevn do you have a subscription to Flaticon pro? I was not able to find an icon that is the exact same as the pre-existing ones because flaticon does not let you download SVGs without premium, and finding a circle linkedin svg with transparent lettering elsewhere was tricky. the "in" in the linkedin svg has a fill, which is not ideal, so it will always be black even if on a different background whereas the others are all transparent. I suppose we could pass it the background color of the footer but if you have a flaticon login that would be easier. i guess as a last resort we could edit it on illustrator or something.

hmmmm. I don't have a pro subscription either. let me see if I can find anything though.

@summer-cook summer-cook mentioned this pull request Nov 15, 2023
Closed
3 tasks
@alishaevn
Copy link
Member

#194

@alishaevn
Copy link
Member

re: the linked in svg

I wound up downloading a png and converting it to an svg. (see below). I also use https://react-svgr.com/playground/ to convert an svg to a react component. (in case you didn't have some other way you use, or it's a difficult way)

open this

linked-in

@summer-cook
Copy link
Contributor Author

re: the linked in svg

I wound up downloading a png and converting it to an svg. (see below). I also use https://react-svgr.com/playground/ to convert an svg to a react component. (in case you didn't have some other way you use, or it's a difficult way)

open this

great, that worked perfectly!
image

@summer-cook summer-cook marked this pull request as ready for review November 15, 2023 21:32
alishaevn
alishaevn suggested changes Nov 15, 2023
View reviewed changes
src/assets/img/thank-you.md Outdated
@@ -11,3 +11,4 @@ Our icons were sourced from the following:
* [Twitter social badge icons created by Freepik - Flaticon](https://www.flaticon.com/free-icons/twitter-social-badge)
* [Vimeo icons created by Md Tanvirul Haque - Flaticon](https://www.flaticon.com/free-icons/vimeo)
* [Youtube icons created by Freepik - Flaticon](https://www.flaticon.com/free-icons/youtube)
* [Linkedin icons created by IconScout](https://iconscout.com/free-icon/linkedin-48)
Copy link
Member

Choose a reason for hiding this comment

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

what's icon scout? the png I converted came from Mass media icons created by mohammed mahdi - Flaticon

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ooops i forgot to change this as well! the one from before was from icon scout.

src/assets/svg/Linkedin.jsx Outdated
height={height}
width={height}
fill={fill}
viewBox="0 0 144 144"
Copy link
Member

Choose a reason for hiding this comment

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

can you change all the quotes here to singles? surprised lint didn't catch it. or maybe it's not checking these files.

src/assets/svg/Linkedin.jsx Outdated
@@ -0,0 +1,15 @@
import * as React from 'react'

const Linkedin = ({ height, fill }) => (
Copy link
Member

Choose a reason for hiding this comment

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

suuuuuuuuuper nit picky, but can this file and variable name be changed to LinkedIn?

@summer-cook summer-cook merged commit 3d7b3cc into main Nov 15, 2023
@summer-cook summer-cook linked an issue Nov 16, 2023 that may be closed by this pull request
update the Footer component #194
Closed
5 tasks
@alishaevn alishaevn deleted the 194-footer-component-update branch February 27, 2024 21:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alishaevn alishaevn alishaevn approved these changes

Assignees
No one assigned
Labels
Cap:Webstore patch-ver
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

update the Footer component
3 participants
@summer-cook @alishaevn @cpetersen