Saifadin

printWidth: 140
trailingComma: "es5"
jsxBracketSameLine: true
singleQuote: true
esLintIntegration: true

Saifadin

class NavigationBar extends React.Component {
  state = {
    scroll: window.pageYOffset,
    navContainer: null,
    active: false,
  };

  componentDidMount() {
    this.setState({
      navContainer: document.getElementById('NavContainer').offsetTop,

Saifadin

.button {
  /** to override bootstrap styling */
  compose: unstyled-btn from '../../styles/button.scss';
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #66aacc;
  background: transparent;
  // ...
}

Saifadin

import styled from 'styled-components';

export const Button = styled('button')`
  display: block;
  align-items: center;
  color: ${({ primary}) => primary ? 'blue' : 'white'};
  ...
`;

...

Saifadin

import styled from 'react-emotion';
import { NavLink } from 'react-router-dom';
import { Icon } from '@homelike/ui-kit';

export const Header = styled('header')`
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  padding: 0 ${({ theme: { spacing } }) => spacing * 2}px;
`;

Saifadin

import React from 'react';
import { Translate } from 'react-redux-i18n';

import { Header, Logo, Menu, MenuItem, Spacer } from './styles';

const Navigation = ({ email }) => {
  return (
    <Header>
      <Logo name="logo-small" fill="primary" color="primary" size="large" />
      <Menu>

Saifadin

export const Panel = styled('div')`
  max-width: 1200px;
  width: 100%;
  margin-bottom: ${({ theme: { spacing } }) => spacing}px;
  @media screen and (max-width: 768px) {
    max-width: 400px;
  }
`;

Saifadin

import React from 'react';

import { Email, Container, Row, Column, Header, FullWidth, Footer, Text, Link, PostonentsProvider } from 'postonents';

// Data here represents the Example Data we might get passed to from the backend.
// This can be anything and you need, you have to define it beforehand
const VerificationEmail = ({ lang, data }) => {
  const { verifyToken, email } = data;
  return (
    <PostonentsProvider theme={{ typo: { fontFamily: 'Roboto, sans-serif' } }}>

Saifadin

import { renderEmail } from 'postonents';
import VerificationCodeMail from './templates/VerificationCode';

...

// Get your email templates, pass it as the entry point for the server side rendering
// data in this case should align with the data needed in the template
const html = renderEmail(VerificationCodeMail, { lang: 'en', data });

// This is just a generic send function

Saifadin

import React from 'react';

import { getEmail } from './utils';

/** utils.js
import { AccountUserDeleted } from './emails';

export const getEmail = name => {
  switch (name) {
    case 'ACCOUNT_USER_DELETED':