diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx index ac8bfa70cc..9894d2239f 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')} @@ -106,9 +106,10 @@ export const EventCard = (props: IProps) => ( @@ -130,7 +131,7 @@ export const EventCard = (props: IProps) => ( mr={1} width={1} > - + Go to event 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 { public render() { const tag = this.injectedProps.tagsStore.allTagsByKey[this.props.tagKey] - return tag ? ( - - {tag.label} - - ) : null + return tag ? {`#${tag.label}`} : null } } 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 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()}`