UI changes

.storybook/theme-decorator.tsx

@@ -1,8 +1,6 @@
-import { RenderFunction } from '@storybook/react'
-import * as React from 'react'
-import { ThemeProvider } from 'styled-components'
-import theme from '../src/themes/styled.theme'
+import { RenderFunction } from '@storybook/react';
+import * as React from 'react';
+import { ThemeProvider } from 'styled-components';
+import theme from 'src/themes/styled.theme';
 
-export default (storyFn: RenderFunction) => (
-  <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
-)
+export default (storyFn: RenderFunction) => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>;

public/fonts/fonts.css

@@ -1,6 +1,28 @@
 @font-face {
-  font-family: 'Karla-Regular';
+  font-family: 'Varela Round';
+  src: url('./VarelaRound-Regular.eot');
+  src: url('./VarelaRound-Regular.woff') format('woff'),
+    url('./VarelaRound-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
-  src: url('./Karla-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./Inter-Regular.otf');
+  src: url('./Inter-Regular.woff') format('woff'),
+    url('./Inter-Regular.woff2') format('woff2'),
+    url('./Inter-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./Inter-Medium.otf');
+  src: url('./Inter-Medium.woff') format('woff'),
+    url('./Inter-Medium.woff2') format('woff2'),
+    url('./Inter-Medium.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
 }

src/components/Button/index.tsx

@@ -1,37 +1,75 @@
 import React from 'react'
 import { Icon, IGlyphs } from 'src/components/Icons'
-import styled from 'styled-components'
 import {
   Button as RebassButton,
   ButtonProps as RebassButtonProps,
 } from 'rebass'
-import { colors } from 'src/themes/styled.theme'
-
-import theme, { ButtonVariants } from 'src/themes/styled.theme'
+import theme from 'src/themes/styled.theme'
 import Text from 'src/components/Text'
+import styled from 'styled-components'
+import { IBtnProps } from './index'
 
 // extend to allow any default button props (e.g. onClick) to also be passed
 export interface IBtnProps extends React.ButtonHTMLAttributes<HTMLElement> {
   icon?: keyof IGlyphs
   disabled?: boolean
-  variant?: ButtonVariants
+  translateY?: boolean
+  small?: boolean
+  medium?: boolean
+  large?: boolean
 }
+export const small = (props: IBtnProps) =>
+  props.small
+    ? {
+        padding: '8px 10px',
+        fontSize: '12px',
+      }
+    : null
+
+export const medium = (props: IBtnProps) =>
+  props.medium
+    ? {
+        padding: '10px',
+      }
+    : null
+
+export const large = (props: IBtnProps) =>
+  props.large
+    ? {
+        padding: '10px',
+      }
+    : null
+
+export const translateY = (props: IBtnProps) =>
+  props.translateY
+    ? {
+        '&:hover': {
+          transform: 'translateY(-5px)',
+        },
+        '&:focus': {
+          outline: 'none',
+        },
+      }
+    : null
 
 type BtnProps = IBtnProps & RebassButtonProps
 
+const BaseButton = styled(RebassButton)`
+  ${translateY}
+  ${small}
+  ${medium}
+  ${large}
+
+`
+
 export const Button = (props: BtnProps) => (
-  <RebassButton {...props}>
+  <BaseButton {...props}>
     {props.icon && <Icon glyph={props.icon} marginRight="4px" />}
-    <Text regular medium>
-      {props.children}
-    </Text>
-  </RebassButton>
+    <Text>{props.children}</Text>
+  </BaseButton>
 )
 
 Button.defaultProps = {
-  color: colors.black,
-  transition: '.2s ease',
-  variant: 'primary',
   type: 'button',
   theme,
 }

src/components/Editor/ui/Dialog.tsx

@@ -2,8 +2,32 @@ import React, { useState, FunctionComponent } from 'react'
 import Dialog from '@material-ui/core/Dialog'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogTitle from '@material-ui/core/DialogTitle'
+import theme from 'src/themes/styled.theme'
+import { DialogActions } from '@material-ui/core'
+import { Button } from 'src/components/Button'
+import styled from 'styled-components'
 import { TEXT } from '../common'
-import { CancelButton, ConfirmButton, DialogButtons } from './elements.js'
+
+const DialogText = styled(DialogTitle)`
+  width: 600px;
+  border-radius: 0 !important;
+`
+
+const DialogButtons = styled(DialogActions)`
+  padding: 10px;
+  justify-content: center !important;
+`
+
+const CancelButton = styled(Button)`
+  width: 112px;
+  height: 60px;
+`
+const ConfirmButton = styled(Button)`
+  background-color: ${props =>
+    props.disabled ? theme.colors.grey : theme.colors.blue};
+  width: 112px;
+  height: 60px;
+`
 
 interface IFormDialog {
   onCancel: () => void

src/components/EventCard/EventCard.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { Link as ExternalLink, Button } from 'rebass'
+import Flex from 'src/components/Flex'
+import Text from 'src/components/Text'
+import styled from 'styled-components'
+import TagDisplay from 'src/components/Tags/TagDisplay/TagDisplay'
+import FlagIconEvents from 'src/components/Icons/FlagIcon/FlagIcon'
+import ImageTargetBlank from 'src/assets/icons/link-target-blank.svg'
+import { IEvent } from '../../models/events.models'
+import { getMonth, getDay } from 'src/utils/helpers'
+import Heading from 'src/components/Heading'
+
+const GoToEventLink = styled(ExternalLink)`
+  padding-right: 30px;
+  position: relative;
+  &:after {
+    content: '';
+    background-image: url(${ImageTargetBlank});
+    width: 20px;
+    height: 20px;
+    z-index: 0;
+    background-size: contain;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: -5px;
+    right: 0px;
+  }
+`
+
+interface IProps {
+  event: IEvent
+}
+
+export const EventCard = (props: IProps) => (
+  <Flex
+    card
+    littleRadius
+    littleScale
+    px={3}
+    mt={4}
+    py={3}
+    flex={1}
+    key={props.event._id}
+    flexDirection={['column', 'initial']}
+  >
+    <Flex flexWrap={'wrap'} flex={'1'}>
+      <Heading txtcenter medium width={1}>
+        {getDay(new Date(props.event.date))}
+      </Heading>
+      <Heading txtcenter medium width={1}>
+        {getMonth(new Date(props.event.date))}
+      </Heading>
+    </Flex>
+    <Flex flexWrap={'wrap'} flex={'2'} px={4}>
+      <Heading small color="black" width={1}>
+        {props.event.title}
+      </Heading>
+      <Text auxiliary width={1}>
+        By {props.event._createdBy}
+      </Text>
+    </Flex>
+    <Flex flexWrap={'nowrap'} alignItems={'center'} flex={'1'}>
+      <FlagIconEvents code={props.event.location.countryCode} />
+      <Text auxiliary width={1} ml={2}>
+        {props.event.location.name},{' '}
+        <Text inline auxiliary uppercase>
+          {props.event.location.countryCode}
+        </Text>
+      </Text>
+    </Flex>
+    <Flex flexWrap={'nowrap'} alignItems={'center'} flex={'1'}>
+      {props.event.tags &&
+        Object.keys(props.event.tags).map(tag => {
+          return <TagDisplay key={tag} tagKey={tag} />
+        })}
+    </Flex>
+    <Flex flexWrap={'nowrap'} alignItems={'center'} flex={'1'}>
+      <GoToEventLink
+        target="_blank"
+        href={props.event.url}
+        color={'black'}
+        mr={1}
+        width={1}
+      >
+        <Text auxiliary width={1}>
+          Go to event
+        </Text>
+      </GoToEventLink>
+    </Flex>
+  </Flex>
+)
+
+export default EventCard

src/components/FileInfo/FileDetails.tsx

@@ -5,7 +5,6 @@ import Text from '../Text'
 import { IUploadedFileMeta } from 'src/stores/storage'
 import styled from 'styled-components'
 import theme from 'src/themes/styled.theme'
-import { maxWidth } from 'styled-system'
 
 interface IProps {
   file: File | IUploadedFileMeta

src/components/FileInput/FileInput.tsx

@@ -6,7 +6,6 @@ import { DashboardModal } from '@uppy/react'
 import { Button } from '../Button'
 import { UPPY_CONFIG } from './UppyConfig'
 import { Flex } from 'rebass'
-import theme from 'src/themes/styled.theme'
 import { FileInfo } from '../FileInfo/FileInfo'
 
 interface IUppyFiles {

src/components/Flex/index.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import theme from 'src/themes/styled.theme'
+import { Flex as RebassFlex, FlexProps as RebassFlexProps } from 'rebass'
+
+export interface IFlexProps {
+  border?: boolean
+  littleRadius?: boolean
+  mediumRadius?: boolean
+  largeRadius?: boolean
+  card?: boolean
+  cardHeading?: boolean
+  littleScale?: boolean
+  mediumScale?: boolean
+}
+
+export const card = (props: IFlexProps) =>
+  props.card
+    ? { border: '2px solid black', overflow: 'hidden', background: 'white' }
+    : null
+
+export const cardHeading = (props: IFlexProps) =>
+  props.cardHeading
+    ? {
+        border: '2px solid black',
+        overflow: 'hidden',
+        background: theme.colors.blue,
+      }
+    : null
+
+export const border = (props: IFlexProps) =>
+  props.border ? { border: '2px solid black', overflow: 'hidden' } : null
+
+export const littleRadius = (props: IFlexProps) =>
+  props.littleRadius ? { borderRadius: '5px' } : null
+
+export const mediumRadius = (props: IFlexProps) =>
+  props.mediumRadius ? { borderRadius: '10px' } : null
+
+export const largeRadius = (props: IFlexProps) =>
+  props.largeRadius ? { borderRadius: '15px' } : null
+
+export const littleScale = (props: IFlexProps) =>
+  props.littleScale
+    ? {
+        transition: '.2s ease-in-out',
+        '&:hover': {
+          transform: 'scale(1.01)',
+        },
+      }
+    : null
+
+export const mediumScale = (props: IFlexProps) =>
+  props.mediumScale
+    ? {
+        transition: '.2s ease-in-out',
+        '&:hover': {
+          transform: 'scale(1.02)',
+        },
+      }
+    : null
+
+export const BaseFlex = styled(RebassFlex)`
+  ${border}
+  ${littleRadius}
+  ${mediumRadius}
+  ${largeRadius}
+  ${card}
+  ${cardHeading}
+  ${littleScale}
+  ${mediumScale}
+`
+
+type FlexProps = IFlexProps & RebassFlexProps
+
+// TODO - incorporate custom css into rebass props to allow things like below to be passed
+export const Flex = (props: FlexProps) => (
+  <BaseFlex {...props}>{props.children}</BaseFlex>
+)
+
+export default Flex

src/components/Header/Header.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { Flex } from 'rebass'
 import styled from 'styled-components'
 import Profile from 'src/pages/common/Header/Profile/Profile'
-import MenuDesktop from 'src/pages/common/Header/Menu/MenuDesktop'
-import Logo from 'src/pages/common/Header/Logo/Logo'
+import MenuDesktop from 'src/components/Menu/MenuDesktop'
+import Logo from 'src/components/Logo/Logo'
 
 const FlexHeader = styled(Flex)`
   height: 60px;