From 6a2f4e96b9a14ce698eb46287bebf9f937712313 Mon Sep 17 00:00:00 2001
From: Dryden Williams <dryden@fika.studio>
Date: Thu, 17 Oct 2019 14:40:09 +0200
Subject: [PATCH 1/3] Adding flex wrap to the tags so they break on each line

---
 src/components/EventCard/EventCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index ac8bfa70cc..a80a84fa78 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -106,9 +106,9 @@ export const EventCard = (props: IProps) => (
       </Text>
     </Flex>
     <Flex
-      flexWrap={'nowrap'}
-      alignItems={'center'}
-      flex={'1'}
+      flexWrap="wrap"
+      alignItems="center"
+      flex="1"
       order={[4, 4, 4]}
       mb={[2, 2, 0]}
     >

From 2cfb6114851ad1a1f62adf421e6dee8d508a544c Mon Sep 17 00:00:00 2001
From: Dryden Williams <dryden@fika.studio>
Date: Thu, 17 Oct 2019 14:55:34 +0200
Subject: [PATCH 2/3] Fixing EventCard date and tag styling. Closes #667

---
 src/components/EventCard/EventCard.tsx        |  7 ++++---
 src/components/Tags/TagDisplay/TagDisplay.tsx | 17 ++---------------
 src/utils/helpers.ts                          |  4 ++--
 3 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index a80a84fa78..cbf8ecf39c 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -70,7 +70,7 @@ export const EventCard = (props: IProps) => (
           textAlign={'center'}
           width={['auto', 'auto', 1]}
         >
-          {getMonth(new Date(props.event.date))}
+          {getMonth(new Date(props.event.date), 'short')}
         </Text>
       </Flex>
     </Flex>
@@ -106,9 +106,10 @@ export const EventCard = (props: IProps) => (
       </Text>
     </Flex>
     <Flex
-      flexWrap="wrap"
-      alignItems="center"
       flex="1"
+      alignItems="flex-start"
+      justifyContent="center"
+      flexDirection="column"
       order={[4, 4, 4]}
       mb={[2, 2, 0]}
     >
diff --git a/src/components/Tags/TagDisplay/TagDisplay.tsx b/src/components/Tags/TagDisplay/TagDisplay.tsx
index 1454c63141..6dcb741bcb 100644
--- a/src/components/Tags/TagDisplay/TagDisplay.tsx
+++ b/src/components/Tags/TagDisplay/TagDisplay.tsx
@@ -17,16 +17,7 @@ interface InjectedProps extends IProps {
 
 const TagContainer = Styled(Text)`
 	position: relative;
-	display: inline;
-	padding-left: 8px;
-
-  ::before {
-    content: '#';
-    position: absolute;
-    left: 0px;
-    top: 0px;
-  }
-
+  margin-bottom: 4px;
 `
 
 @inject('tagsStore')
@@ -42,10 +33,6 @@ export default class TagDisplay extends React.Component<IProps> {
   public render() {
     const tag = this.injectedProps.tagsStore.allTagsByKey[this.props.tagKey]
 
-    return tag ? (
-      <TagContainer tags mr={2}>
-        {tag.label}
-      </TagContainer>
-    ) : null
+    return tag ? <TagContainer tags>{`#${tag.label}`}</TagContainer> : null
   }
 }
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 8ac8199abb..b24ed50f97 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -40,9 +40,9 @@ export const timestampToYear = (timestamp: number) => {
   return date.getFullYear()
 }
 
-export const getMonth = (d: Date) => {
+export const getMonth = (d: Date, monthType: string = 'long') => {
   // use ECMAScript Internationalization API to return month
-  return `${d.toLocaleString('en-us', { month: 'long' })}`
+  return `${d.toLocaleString('en-us', { month: monthType })}`
 }
 export const getDay = (d: Date) => {
   return `${d.getDate()}`

From 500c4f4e83196ae17571146ed4b483da0d62432a Mon Sep 17 00:00:00 2001
From: Dryden Williams <dryden@fika.studio>
Date: Fri, 18 Oct 2019 11:19:41 +0200
Subject: [PATCH 3/3] Aligning the text to the right

---
 src/components/EventCard/EventCard.tsx | 2 +-
 src/components/Text/index.tsx          | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index cbf8ecf39c..9894d2239f 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -131,7 +131,7 @@ export const EventCard = (props: IProps) => (
         mr={1}
         width={1}
       >
-        <Text auxiliary width={1}>
+        <Text auxiliary width={1} txtRight>
           Go to event
         </Text>
       </GoToEventLink>
diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
index 996b3c3499..cbe3372cc3 100644
--- a/src/components/Text/index.tsx
+++ b/src/components/Text/index.tsx
@@ -13,6 +13,7 @@ export interface ITextProps {
   txtcenter?: boolean
   capitalize?: boolean
   bold?: boolean
+  txtRight?: boolean
 
   large?: boolean
   medium?: boolean
@@ -41,6 +42,9 @@ export const inline = (props: ITextProps) =>
 export const txtcenter = (props: ITextProps) =>
   props.txtcenter ? { textAlign: 'center' } : null
 
+export const txtRight = (props: ITextProps) =>
+  props.txtRight ? { textAlign: 'right' } : null
+
 export const regular = (props: ITextProps) =>
   props.regular ? { fontWeight: 400 } : null
 
@@ -104,6 +108,7 @@ export const BaseText = styled(RebassText)`
 	${tags}
 	${auxiliary}
 	${paragraph}
+  ${txtRight}
 `
 
 type TextProps = ITextProps & RebassTextProps