force rename all UI folders to it's alway lowercase

ui/components/global-colors.js

@@ -0,0 +1,91 @@
+// @flow
+// import * as React from 'react'
+import { createGlobalStyle } from 'styled-components'
+
+export const colors = {
+  white: '#efefef',
+  c9: '#EBD6D4',
+  c7: '#ab9b9a',
+  c5: '#756867',
+  c3: '#5d5352',
+  c1: '#453e3d',
+  dark: '#332d2d',
+  green: '#46b646',
+  red: '#e95353',
+  discord: '#7289da'
+}
+
+const getColors = () => {
+  return Object.keys(colors).map(key => {
+    const nk = key.replace(/c([0-9])/, '$1')
+    return `--c-${nk}: ${colors[key]};`
+  }).join('  \n')
+}
+
+export default createGlobalStyle`
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "source-han-sans-japanese", "Source Sans Pro", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* prevent FOUC */
+  transition: opacity 0.2s ease-in-out;
+  opacity: 0;
+}
+
+.wf-active body {
+  opacity: 1;
+}
+
+// FOUC guard if we take too long
+.force-active body {
+  opacity: 1;
+}
+
+.font-sans-serif {
+  font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+:root {
+  ${() => getColors()}
+}
+
+::selection {
+  background: var(--c-9);
+  color: var(--c-1);
+}
+
+::-moz-selection {
+  background: var(--c-9);
+  color: var(--c-1);
+}
+
+html {
+  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  overflow: auto;
+  color: var(--c-white);
+  background-color: var(--c-1);
+  overflow-y: hidden;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  color: var(--c-9);
+}
+
+.fade-element {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.fade {
+  opacity: 0;
+}
+
+`

ui/components/head.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import NextHead from 'next/head'
+import { string } from 'prop-types'
+
+const defaultDescription = ''
+const defaultOGURL = ''
+const defaultOGImage = ''
+
+const Head = props => (
+  <NextHead>
+    <meta charSet="UTF-8" />
+    <title>{props.title || ''}</title>
+    <meta
+      name="description"
+      content={props.description || defaultDescription}
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" sizes="192x192" href="/static/touch-icon.png" />
+    <link rel="apple-touch-icon" href="/static/touch-icon.png" />
+    <link rel="mask-icon" href="/static/favicon-mask.svg" color="#49B882" />
+    <link rel="icon" href="/static/favicon.ico" />
+    <meta property="og:url" content={props.url || defaultOGURL} />
+    <meta property="og:title" content={props.title || ''} />
+    <meta
+      property="og:description"
+      content={props.description || defaultDescription}
+    />
+    <meta name="twitter:site" content={props.url || defaultOGURL} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={props.ogImage || defaultOGImage} />
+    <meta property="og:image" content={props.ogImage || defaultOGImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+  </NextHead>
+)
+
+Head.propTypes = {
+  title: string,
+  description: string,
+  url: string,
+  ogImage: string
+}
+
+export default Head

ui/components/header/auth.js

@@ -0,0 +1,14 @@
+// @flow
+import * as React from 'react'
+import HeaderBarCommon from './common'
+import { type User } from '../../containers/user'
+
+const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User }> = ({ user }) => (
+  <HeaderBarCommon>
+    <div>
+      Hey there, {user.username}#{user.discriminator}
+    </div>
+  </HeaderBarCommon>
+)
+
+export default HeaderBarAuth

ui/components/header/common.js

@@ -0,0 +1,24 @@
+// @flow
+import * as React from 'react'
+import DebugBreakpoints from '../../kit/debug-breakpoints'
+import styled from 'styled-components'
+
+export type CommonProps = {
+  children: React.Element<any>
+}
+
+const Header = styled.div`
+`
+
+const HeaderInner = styled.div``
+
+const HeaderBarCommon = ({ children }: CommonProps) => (
+  <Header>
+    <HeaderInner>
+      { (process.env.NODE_ENV === 'development') && <DebugBreakpoints />}
+      { children }
+    </HeaderInner>
+  </Header>
+)
+
+export default HeaderBarCommon

ui/components/header/unauth.js

@@ -0,0 +1,13 @@
+// @flow
+import * as React from 'react'
+import HeaderBarCommon from './common'
+
+const HeaderBarUnauth: React.StatelessFunctionalComponent<{}> = () => (
+  <HeaderBarCommon>
+    <div>
+      Hey stranger.
+    </div>
+  </HeaderBarCommon>
+)
+
+export default HeaderBarUnauth

ui/components/layout.js

@@ -0,0 +1,17 @@
+// @flow
+import * as React from 'react'
+import GlobalColors from './global-colors'
+import SocialCards from './social-cards'
+import HeaderBar from '../containers/header-bar'
+import { type User } from '../containers/user'
+
+const Layout = ({ children, user }: {children: React.Element<any>, user: User }) => <>
+  <GlobalColors />
+  <SocialCards />
+  <div>
+    <HeaderBar user={user} />
+    {children}
+  </div>
+</>
+
+export default Layout

ui/components/nav.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import Link from 'next/link'
+
+const links = [
+  { href: 'https://github.com/segmentio/create-next-app', label: 'Github' }
+].map(link => {
+  link.key = `nav-link-${link.href}-${link.label}`
+  return link
+})
+
+const Nav = () => (
+  <nav>
+    <ul>
+      <li>
+        <Link prefetch href="/">
+          <a>Home</a>
+        </Link>
+      </li>
+      <ul>
+        {links.map(({ key, href, label }) => (
+          <li key={key}>
+            <Link href={href}>
+              <a>{label}</a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </ul>
+
+    <style jsx>{`
+      :global(body) {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
+          Helvetica, sans-serif;
+      }
+      nav {
+        text-align: center;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+      }
+      nav > ul {
+        padding: 4px 16px;
+      }
+      li {
+        display: flex;
+        padding: 6px 8px;
+      }
+      a {
+        color: #067df7;
+        text-decoration: none;
+        font-size: 13px;
+      }
+    `}</style>
+  </nav>
+)
+
+export default Nav

ui/components/social-cards.js

@@ -0,0 +1,36 @@
+// @flow
+import * as React from 'react'
+import NextHead from 'next/head'
+
+export type SocialCardProps = {
+  title?: string,
+  description?: string,
+  image?: string,
+  imageSize?: number
+}
+
+const defaultProps: SocialCardProps = {
+  title: 'Roleypoly',
+  description: 'Tame your Discord roles.',
+  image: 'https://rp.kat.cafe/static/social.png',
+  imageSize: 200
+}
+
+const SocialCards: React.StatelessFunctionalComponent<SocialCardProps> = (props) => {
+  props = {
+    ...defaultProps,
+    ...props
+  }
+
+  return <NextHead>
+    <meta key='og:title' property='og:title' content={props.title} />
+    <meta key='og:description' property='og:description' content={props.description} />
+    <meta key='twitter:card' name='twitter:card' content='summary_large_image' />
+    <meta key='twitter:image' name='twitter:image' content={props.image} />
+    <meta key='og:image' property='og:image' content={props.image} />
+    <meta key='og:image:width' property='og:image:width' content={props.imageSize} />
+    <meta key='og:image:height' property='og:image:height' content={props.imageSize} />
+  </NextHead>
+}
+
+export default SocialCards