Ambassador langs (microsoft#693)

sand4rt · Jul 28, 2022 · ab44e8c · ab44e8c
1 parent 758aaa1
commit ab44e8c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 24 deletions.
diff --git a/src/components/ProfileCard/index.tsx b/src/components/ProfileCard/index.tsx
@@ -11,6 +11,7 @@ type ProfileProps = {
   websiteUrl?: string;
   linkedInUrl?: string;
   imageUrl?: string;
+  languages?: string;
 };
 
 function ProfileCard({
@@ -22,7 +23,8 @@ function ProfileCard({
   twitterUrl,
   websiteUrl,
   linkedInUrl,
-  imageUrl
+  imageUrl,
+  languages
 }: ProfileProps) {
   return (
     <div className={className}>
@@ -37,37 +39,43 @@ function ProfileCard({
           </div>
           <div className={styles.intro}>
             <span className={styles.name}>{name}</span>
-            <div className={styles.location}>
             <p className={styles.city}>{city}</p>
             <p className={styles.country}>{country}</p>
-            </div>
+            <p className={styles.languages}>{languages}</p>
           </div>
         </div>
         <div className={styles.socialLinks}>
           {githubUrl && <a className='header-github-link' href={githubUrl}></a>}
-          {twitterUrl && <a className={styles.twitterLink} href={twitterUrl}></a>}
-          {websiteUrl && <a className={styles.websiteLink} href={websiteUrl}></a>}
-          {linkedInUrl && <a className={styles.linkedInLink} href={linkedInUrl}></a>}
+          {twitterUrl && (
+            <a className={styles.twitterLink} href={twitterUrl}></a>
+          )}
+          {websiteUrl && (
+            <a className={styles.websiteLink} href={websiteUrl}></a>
+          )}
+          {linkedInUrl && (
+            <a className={styles.linkedInLink} href={linkedInUrl}></a>
+          )}
         </div>
       </div>
     </div>
   );
 }
 
-
 export function Team(): JSX.Element {
   return (
     <div className={styles.cards}>
       <ProfileCard
         name="Debbie O'Brien"
         city='Palma de Mallorca'
         country='Spain'
+        languages='English, Spanish'
         githubUrl='https://github.com/debs-obrien'
         twitterUrl='https://twitter.com/debs_obrien'
         linkedInUrl='https://www.linkedin.com/in/debbie-o-brien-1a199975/'
       ></ProfileCard>
       <ProfileCard
         name='Max Schmitt'
+        languages='German, English'
         city='Berlin'
         country='Germany'
         githubUrl='https://github.com/mxschmitt'
@@ -76,6 +84,7 @@ export function Team(): JSX.Element {
       ></ProfileCard>
       <ProfileCard
         name='Ross Wollman'
+        languages='English'
         city='San Francisco'
         country='USA'
         githubUrl='https://github.com/rwoll'
@@ -91,6 +100,7 @@ export function Ambassadors(): JSX.Element {
     <div className={styles.cards}>
       <ProfileCard
         name='Andrew Knight'
+        languages='English'
         city='North Carolina'
         country='USA'
         githubUrl='https://github.com/AutomationPanda'
@@ -99,13 +109,15 @@ export function Ambassadors(): JSX.Element {
       <ProfileCard
         name='Carlos Gauto'
         city='Berazategui'
+        languages='Spanish, English'
         country='Argentina'
         githubUrl='https://github.com/charlyautomatiza'
         twitterUrl='https://twitter.com/char_automatiza'
         websiteUrl='https://linktr.ee/charlyautomatiza'
       ></ProfileCard>
       <ProfileCard
         name='Giovanni Rago'
+        languages='Italian, English'
         city='Berlin'
         country='Germany'
         imageUrl='https://media-exp1.licdn.com/dms/image/C4E03AQHNkQmEbZBVqA/profile-displayphoto-shrink_400_400/0/1517375686271?e=1664409600&v=beta&t=r7M2zqvKeA6Ogd_mHbq2-0YFZfNGGVBQtZK3b9tpFEw'
@@ -114,19 +126,23 @@ export function Ambassadors(): JSX.Element {
       ></ProfileCard>
       <ProfileCard
         name='John Hill'
+        languages='English'
         city='Palo Alto'
         country='USA'
         githubUrl='https://github.com/unlikelyzero'
+        linkedInUrl='https://www.linkedin.com/in/linkedjohnhill'
       ></ProfileCard>
       <ProfileCard
         name='Katrik K. K'
+        languages='English'
         city='Auckland'
         country='New Zealand'
         imageUrl='https://media-exp1.licdn.com/dms/image/C5603AQFvGgrfen7F9Q/profile-displayphoto-shrink_400_400/0/1629605742823?e=1664409600&v=beta&t=yZx1w3KMdPxznERLrH1Rg7cRlNVuomVHzklnR9cMcVU'
         linkedInUrl='https://www.linkedin.com/in/karthikkk/'
       ></ProfileCard>
       <ProfileCard
         name='Stefan Judis'
+        languages='English'
         city='Berlin'
         country='Germany'
         githubUrl='https://github.com/stefanjudis'
@@ -135,17 +151,20 @@ export function Ambassadors(): JSX.Element {
       ></ProfileCard>
       <ProfileCard
         name='Tally Barak'
+        languages='Hebrew, English'
         city='Tel Aviv'
         country='Israel'
         githubUrl='https://github.com/Tallyb'
         twitterUrl='https://twitter.com/TallyBarak'
       ></ProfileCard>
-      <ProfileCard
-        name='Are you the next Ambassador?'
-        city=''
-        country=''
-        imageUrl='https://playwright.dev/img/playwright-logo.svg'
-      ></ProfileCard>
+      <a href='#join-the-program'>
+        <ProfileCard
+          name='Are you the next Ambassador?'
+          city=''
+          country=''
+          imageUrl='https://playwright.dev/img/playwright-logo.svg'
+        ></ProfileCard>
+      </a>
     </div>
   );
 }
diff --git a/src/components/ProfileCard/styles.module.css b/src/components/ProfileCard/styles.module.css
@@ -22,7 +22,6 @@
   display: flex;
   flex-direction: column;
   text-align: center;
-
 }
 .cardBody {
   height: auto;
@@ -38,28 +37,24 @@
 
 .name {
   font-size: large;
-  margin-bottom: 0.5rem;
+ margin-bottom: .5rem;
 }
 
-.location {
+.city, .country, .languages {
   font-weight: normal;
   font-size: medium;
   text-align: center;
   margin: 0;
 }
-.city{
-margin: 0;
-}
-.country{
-  margin:0;
-}
+
 .socialLinks {
+  margin-top:.5rem;
   display: flex;
   justify-content: center;
-  padding-bottom: 2rem;
 }
 .socialLinks a{
-  padding: 16px;
+  margin-top: .5rem;
+  padding: 0 12px;
 }
 
 .websiteLink:before {