Fixed #1149

Fixed styling issues on the community meetup card list

Author: Ryan Cordell

src/components/Link.js

@@ -8,6 +8,7 @@ import { languageMetadata } from "../utils/translations"
 // TODO set globally to apply to markdown files
 const ExternalLink = styled.a`
   &:after {
+    color: ${(props) => props.theme.colors.primary};
     margin-left: 0.125em;
     margin-right: 0.3em;
     display: inline-block;

src/components/MeetupList.js

@@ -246,6 +246,8 @@ const Table = styled.div`
 `
 
 const Item = styled(Link)`
+  flex-direction: row;
+  justify-content: space-between;
   color: ${(props) => props.theme.colors.text} !important;
   box-shadow: 0 1px 1px ${(props) => props.theme.colors.tableItemBoxShadow};
   margin-bottom: 1px;
@@ -268,10 +270,25 @@ const ItemNumber = styled.div`
 const ItemTitle = styled.div``
 const ItemDesc = styled.p`
   margin-bottom: 0;
-  margin-left: auto;
+  opacity: 0.6;
+`
+
+const Flag = styled(Twemoji)`
+  margin-right: 0.5rem;
+`
+
+const RightContainer = styled.div`
+  display: flex;
+  align-items: right;
+  align-content: flex-start;
+  width: 25%;
+  margin-right: 1rem;
+  flex-wrap: wrap;
 `
 const LeftContainer = styled.div`
   display: flex;
+  width: 75%;
+  margin-right: 2rem;
 `
 // TODO create generalized CardList / TableCard
 // TODO prop if ordered list or unordered
@@ -285,9 +302,10 @@ const MeetupList = () => {
               <ItemNumber>{idx + 1}</ItemNumber>
               <ItemTitle>{meetup.title}</ItemTitle>
             </LeftContainer>
-            <ItemDesc>
-              <Twemoji svg text={meetup.emoji} /> {meetup.location}
-            </ItemDesc>
+            <RightContainer>
+              <Flag svg text={meetup.emoji} />
+              <ItemDesc>{meetup.location}</ItemDesc>
+            </RightContainer>
           </Item>
         )
       })}