scientist-softserv / webstore-component-library

A React component library intended for use with WebStore applications.

https://www.npmjs.com/package/@scientist-softserv/webstore-component-library

2 stars 0 forks source link

194 footer component update #195

Closed summer-cook closed 11 months ago

summer-cook commented 11 months ago

Story

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

Screenshot

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 commented 11 months ago

@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 commented 11 months ago

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

alishaevn commented 11 months ago

@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.

alishaevn commented 11 months ago

194

alishaevn commented 11 months ago

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](https://github.com/scientist-softserv/webstore-component-library/assets/29032869/486ed088-9369-490c-90b5-c46435006ad3)

summer-cook commented 11 months ago

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!