-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Adding new police color for text Named it grey-police, based on S+1 on figma * Adding LinkedIn icon * Adding ContactCard components Structure made, still need to link it to fake data * Adding mockoon file * Adding siteId props to ContactCard * Linking with mocked data - importing services : api, apiInterface, errors - implementing useEffect and useState hooks - fetching data from mockoon * Adding new icons for ContactCard - adding standardized icons for facebook, instagram, linkedIn and X * Fixing data transmission + Adding new social icons - No need for fetch anymore, been done on MapSite just passing the correct props * Styling contact card * Changing the prop passed to ContactCard - from siteId to contact * Merging main to feature/ContactCard branch * Merging (again) main to feature/ContactCard branch * Adding fake link to social media (FB, IG, X, .. ) - Display of social icons depending on their existence, so I added fake links to mockoon file. * Fixing display of social icons * Adjusting size of edit button * Fixing card styling * Armonizing contact card style * Fixing and harmonizing styling issue --------- Co-authored-by: Théo Auffeuvre <[email protected]>
- Loading branch information
1 parent
edf74a6
commit 778eb90
Showing
12 changed files
with
216 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
canopeum_frontend/src/assets/icons/facebook-contact-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions
24
canopeum_frontend/src/assets/icons/instagram-contact-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions
25
canopeum_frontend/src/assets/icons/linkedin-contact-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
canopeum_frontend/src/components/ContactCard/ContactCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import '../ContactCard/contact-card.scss'; | ||
| import '../../pages/Utilities'; | ||
|
|
||
| import facebookLogo from '@assets/icons/facebook-contact-logo.svg'; | ||
| import instagramLogo from '@assets/icons/instagram-contact-logo.svg'; | ||
| import linkedinLogo from '@assets/icons/linkedin-contact-logo.svg'; | ||
| import xLogo from '@assets/icons/x-contact-logo.svg'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import type { Contact } from '../../services/api' | ||
|
|
||
| const ContactCard = ({ contact }:{readonly contact: Contact}) => { | ||
|
|
||
| const renderContactCard = () => ( | ||
| <div className='card rounded px-3 py-2'> | ||
| <div className='card-body'> | ||
| <div className='d-flex justify-content-between align-items-center pb-3'> | ||
| <h2 className='card-title'>Contact</h2> | ||
| <span className='material-symbols-outlined text-primary fs-2'>edit_square</span> | ||
| </div> | ||
| <div className='info-section d-flex flex-column'> | ||
| <div className='card-text adress d-flex align-items-center pb-3'> | ||
| <span className='material-symbols-outlined fs-4'>home_work</span> | ||
| <p className='mb-0'>{contact.address}</p> | ||
| </div> | ||
| <div className='email d-flex align-items-center pb-3'> | ||
| <span className='material-symbols-outlined fs-4'>mail</span> | ||
| <p className='mb-0'>{contact.email}</p> | ||
| </div> | ||
| <div className='phone d-flex align-items-center pb-3'> | ||
| <span className='material-symbols-outlined fs-4'>perm_phone_msg</span> | ||
| <p className='mb-0'>{contact.phone}</p> | ||
| </div> | ||
| </div> | ||
| <div className='social-icons d-flex flex-row-reverse pt-3'> | ||
| {contact.linkedInLink && <Link target='_blank' to={contact.linkedInLink} > | ||
| <img alt='linkedin-logo' className="px-2" src={linkedinLogo} /> | ||
| </Link>} | ||
| {contact.instagramLink && <Link target='_blank' to={contact.instagramLink}> | ||
| <img alt="instagram-logo" className="px-2" src={instagramLogo} /> | ||
| </Link>} | ||
| {contact.xLink && <Link target='_blank' to={contact.xLink}> | ||
| <img alt="x-logo" className="px-2" src={xLogo} /> | ||
| </Link>} | ||
| {contact.facebookLink && <Link target='_blank' to={contact.facebookLink}> | ||
| <img alt='facebook-logo' className="px-2" src={facebookLogo}/> | ||
| </Link>} | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| ) | ||
|
|
||
| return ( | ||
| <div> | ||
| {renderContactCard()} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default ContactCard |
23 changes: 23 additions & 0 deletions
23
canopeum_frontend/src/components/ContactCard/contact-card.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| @import '@assets/styles/theme-variables.scss'; | ||
|
|
||
| .card { | ||
| padding: 20px; | ||
| background-color: $white; | ||
| } | ||
|
|
||
| .card-title { | ||
| font-family: $font-family-sans-serif; | ||
| font-size: $h2-font-size; | ||
| } | ||
|
|
||
| .card-text { | ||
| font-family: $font-family-monospace; | ||
| color: $grey-police; | ||
| } | ||
|
|
||
|
|
||
| .material-symbols-outlined { | ||
| color: $grey-police; | ||
| padding-right: 16px; | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -70,4 +70,5 @@ const SiteSummaryCard = ({ site, viewMode }: Props) => { | |
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default SiteSummaryCard | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters