diff --git a/package-lock.json b/package-lock.json index dfe9e7f3..20895f3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1140,6 +1140,43 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.35", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz", + "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.35", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz", + "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz", + "integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz", + "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.14", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz", + "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -3068,6 +3105,15 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz", "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==" }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "block-stream": { "version": "0.0.9", "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", @@ -6078,6 +6124,12 @@ "schema-utils": "^2.5.0" } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "filesize": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz", @@ -7733,6 +7785,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } } @@ -14107,6 +14160,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, @@ -14369,6 +14423,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, diff --git a/package.json b/package.json index 43f5e125..50a6079b 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-brands-svg-icons": "^5.15.3", + "@fortawesome/free-solid-svg-icons": "^5.15.3", + "@fortawesome/react-fontawesome": "^0.1.14", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", diff --git a/public/images/social_media/discord.svg b/public/images/social_media/discord.svg deleted file mode 100644 index d7460b5c..00000000 --- a/public/images/social_media/discord.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/public/images/social_media/discordDark.svg b/public/images/social_media/discordDark.svg deleted file mode 100644 index be77b920..00000000 --- a/public/images/social_media/discordDark.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/public/images/social_media/facebook.svg b/public/images/social_media/facebook.svg deleted file mode 100644 index ab316d14..00000000 --- a/public/images/social_media/facebook.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - diff --git a/public/images/social_media/facebookDark.svg b/public/images/social_media/facebookDark.svg deleted file mode 100644 index 83a9f115..00000000 --- a/public/images/social_media/facebookDark.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - diff --git a/public/images/social_media/github.svg b/public/images/social_media/github.svg deleted file mode 100644 index 3361797c..00000000 --- a/public/images/social_media/github.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/public/images/social_media/githubDark.svg b/public/images/social_media/githubDark.svg deleted file mode 100644 index c9cab299..00000000 --- a/public/images/social_media/githubDark.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/public/images/social_media/instagram.svg b/public/images/social_media/instagram.svg deleted file mode 100644 index 8282e5f1..00000000 --- a/public/images/social_media/instagram.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/public/images/social_media/instagramDark.svg b/public/images/social_media/instagramDark.svg deleted file mode 100644 index c2cef18e..00000000 --- a/public/images/social_media/instagramDark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/images/social_media/medium.svg b/public/images/social_media/medium.svg deleted file mode 100644 index 516c2027..00000000 --- a/public/images/social_media/medium.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - -Monogram -Created with Sketch. - - - - diff --git a/public/images/social_media/mediumDark.svg b/public/images/social_media/mediumDark.svg deleted file mode 100644 index 6f89d01f..00000000 --- a/public/images/social_media/mediumDark.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - -Monogram -Created with Sketch. - - - - diff --git a/public/images/social_media/twitter.svg b/public/images/social_media/twitter.svg deleted file mode 100755 index b88a6eea..00000000 --- a/public/images/social_media/twitter.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/public/images/social_media/twitterDark.svg b/public/images/social_media/twitterDark.svg deleted file mode 100644 index 027ea687..00000000 --- a/public/images/social_media/twitterDark.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - diff --git a/public/images/social_media/websiteDark.svg b/public/images/social_media/websiteDark.svg deleted file mode 100644 index 5e812029..00000000 --- a/public/images/social_media/websiteDark.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/public/images/social_media/youtube.svg b/public/images/social_media/youtube.svg deleted file mode 100644 index 5073c64b..00000000 --- a/public/images/social_media/youtube.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - -Created by potrace 1.10, written by Peter Selinger 2001-2011 - - - - - diff --git a/public/images/social_media/youtubeDark.svg b/public/images/social_media/youtubeDark.svg deleted file mode 100644 index 12794fa9..00000000 --- a/public/images/social_media/youtubeDark.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - -Created by potrace 1.10, written by Peter Selinger 2001-2011 - - - - - diff --git a/src/components/Committees/CommitteeSections/CommitteeSectionIntro/CommitteeSectionIntro.js b/src/components/Committees/CommitteeSections/CommitteeSectionIntro/CommitteeSectionIntro.js index 25fcc386..a0c3f93b 100644 --- a/src/components/Committees/CommitteeSections/CommitteeSectionIntro/CommitteeSectionIntro.js +++ b/src/components/Committees/CommitteeSections/CommitteeSectionIntro/CommitteeSectionIntro.js @@ -1,5 +1,50 @@ +import { + faFacebook, + faInstagram, + faDiscord, + faTwitter, + faGithub, +} from '@fortawesome/free-brands-svg-icons'; +import { faLink } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; +function CommitteeIconLink({committee, link}) { + const committeeStr = `acm ${committee.name}`; + const iconStr = link.platform === 'website' ? `${committeeStr}'s website` : `${committeeStr} on ${link.platform}`; + return ( + + + + ); +} + +function CommitteeIcon({platform}) { + // see https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility#web-fonts-semantic + // for more on accessibility + switch(platform) { + case 'discord': + return ; + case 'facebook': + return ; + case 'github': + return ; + case 'instagram': + return ; + case 'twitter': + return ; + case 'website': + default: + return ; + } +} + function CommitteeSectionIntro(props) { return (
@@ -12,7 +57,9 @@ function CommitteeSectionIntro(props) {

{props.committee.mission}

Learn More

- { props.committee.links.map(link =>
) } + {props.committee.links.map(link => + , + )}
diff --git a/src/components/Committees/CommitteeSections/CommitteeSectionIntro/style.scss b/src/components/Committees/CommitteeSections/CommitteeSectionIntro/style.scss index fa46d6f1..27409637 100644 --- a/src/components/Committees/CommitteeSections/CommitteeSectionIntro/style.scss +++ b/src/components/Committees/CommitteeSections/CommitteeSectionIntro/style.scss @@ -13,87 +13,34 @@ letter-spacing: .8em; } -.learn-more .icon { - height: 40px; - width: 40px; - border-radius: 11.2px; - margin: 0 10px 0; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; - - &#website { - background-color: transparent; - background-size: cover; - height: 50px; - width: 50px; - margin: 0 10px -5px; - } - &#facebook { - -webkit-mask: url(/images/social_media/facebookDark.svg); - mask: url(/images/social_media/facebookDark.svg); - } - &#twitter { - -webkit-mask: url(/images/social_media/twitterDark.svg); - mask: url(/images/social_media/twitterDark.svg); - } - &#github { - -webkit-mask: url(/images/social_media/githubDark.svg); - mask: url(/images/social_media/githubDark.svg); - } - &#medium { - -webkit-mask: url(/images/social_media/mediumDark.svg); - mask: url(/images/social_media/mediumDark.svg); - } - &#instagram { - -webkit-mask: url(/images/social_media/instagramDark.svg); - mask: url(/images/social_media/instagramDark.svg); - } - &#discord { - -webkit-mask: url(/images/social_media/discordDark.svg); - mask: url(/images/social_media/discordDark.svg); - } - &#youtube { - -webkit-mask: url(/images/social_media/youtubeDark.svg); - mask: url(/images/social_media/youtubeDark.svg); - } - - &.hack { - background-color: $hack-purple; - background-image: url(/images/diamonds/hack_diamond.svg); - } - &.ai { - background-color: $ai-arctic; - background-image: url(/images/diamonds/ai_diamond.svg); - } - &.w { - background-color: $w-teal; - background-image: url(/images/diamonds/w_diamond.svg); - } - &.cyber { - background-color: $cyber-amber; - background-image: url(/images/diamonds/cyber_diamond.svg); - } - &.studio { - background-color: $studio-raspberry; - background-image: url(/images/diamonds/studio_diamond.svg); - } - &.icpc { - background-color: $icpc-tangerine; - background-image: url(/images/diamonds/icpc_diamond.svg); - } - &.design { - background-color: $design-orange; - background-image: url(/images/diamonds/design_diamond.svg); - } - &.teachla { - background-color: $teachla-green; - background-image: url(/images/diamonds/teachLA_diamond.svg); - } - - &:hover { - transform: scale(1.05); - cursor: pointer; +.learn-more .icon-link { + font-size: 2.5rem; + :hover { + color: black; + } + &.hack { + color: $hack-purple; + } + &.ai { + color: $ai-arctic; + } + &.w { + color: $w-teal; + } + &.cyber { + color: $cyber-amber; + } + &.studio { + color: $studio-raspberry; + } + &.icpc { + color: $icpc-tangerine; + } + &.design { + color: $design-orange; + } + &.teachla { + color: $teachla-green; } } @@ -119,16 +66,13 @@ .show-mobile { display: none; } - + .learn-more { font-size: .9em; h3 { margin: 0 0 20px 0; } - .icon { - margin: 0 10px 0 0; - } } h2 { @@ -144,4 +88,4 @@ display: table; clear: both; } -} \ No newline at end of file +} diff --git a/src/components/Events/Event.js b/src/components/Events/Event.js index cb6ea730..dc17f704 100644 --- a/src/components/Events/Event.js +++ b/src/components/Events/Event.js @@ -10,7 +10,9 @@ export default class Events extends React.Component {

Our Events

-

Our events are open to everyone, regardless of major, background, or experience! Come find us on

+

+ Our events are open to everyone, regardless of major, background, or experience! Come find us on YouTube! +



diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 9b63a0f9..2a65c823 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -13,7 +13,7 @@ function Footer(){

Reach us at

- acm@ucla.edu + acm@ucla.edu
{/* the paddingTop is a magic number that replaces a previous empty

tag previously used for spacing. should be replaced later. @@ -30,7 +30,7 @@ function Footer(){

diff --git a/src/components/Footer/style.scss b/src/components/Footer/style.scss index a697969e..d173ec8d 100644 --- a/src/components/Footer/style.scss +++ b/src/components/Footer/style.scss @@ -56,7 +56,7 @@ padding: 10px 0px; } - span { + span.footer-text { font-weight: 300; color: white; font-size: 1em; @@ -105,4 +105,4 @@ line-height: 20px; } } -} \ No newline at end of file +} diff --git a/src/components/SocialMedia/SocialMedia.js b/src/components/SocialMedia/SocialMedia.js index 15185062..29fd9dda 100644 --- a/src/components/SocialMedia/SocialMedia.js +++ b/src/components/SocialMedia/SocialMedia.js @@ -1,16 +1,40 @@ +import { + faGithub, + faFacebook, + faInstagram, + faDiscord, + faYoutube, + faMediumM, +} from '@fortawesome/free-brands-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; + function SocialMedia(props){ const iconType = props.type ? props.type : ''; + // see https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility#web-fonts-semantic + // for more on accessibility return ( - -
-
-
-
-
-
- + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/components/SocialMedia/style.scss b/src/components/SocialMedia/style.scss index bf6c65da..a05416d0 100644 --- a/src/components/SocialMedia/style.scss +++ b/src/components/SocialMedia/style.scss @@ -1,40 +1,18 @@ -.sm-icon { - height: 30px; - width: 30px; - border-radius: 2px; - margin: 0px 3px; - display: inline-block; - - &#facebook { background-image: url(/images/social_media/facebookDark.svg); } - &#twitter { background-image: url(/images/social_media/twitterDark.svg); } - &#github { background-image: url(/images/social_media/githubDark.svg); } - &#medium { background-image: url(/images/social_media/mediumDark.svg); } - &#instagram { background-image: url(/images/social_media/instagramDark.svg); } - &#discord { background-image: url(/images/social_media/discordDark.svg); } - &#youtube { background-image: url(/images/social_media/youtubeDark.svg); } - +.icon-link{ + color: $acm-cobalt; &:hover { - transform: scale(1.02); cursor: pointer; + color: $acm-black; } } - - -.sm-icon.light { - &#facebook { background-image: url(/images/social_media/facebook.svg); } - &#twitter { background-image: url(/images/social_media/twitter.svg); } - &#github { background-image: url(/images/social_media/github.svg); } - &#medium { background-image: url(/images/social_media/medium.svg); } - &#instagram { background-image: url(/images/social_media/instagram.svg); } - &#discord { background-image: url(/images/social_media/discord.svg); } - &#youtube { background-image: url(/images/social_media/youtube.svg); } - - - &:hover { - background-color: $acm-black; - cursor: pointer; +.social-media-icon-container { + font-size: 2.5rem; + &.light > .icon-link { + color: white; + :hover { + color: $acm-cobalt; + } } - }