fix a load of linting issues

flow-typed/npm/chalk_v2.x.x.js

@@ -3,7 +3,7 @@
 
 // From: https://github.com/chalk/chalk/blob/master/index.js.flow
 
-declare module "chalk" {
+declare module 'chalk' {
   declare type TemplateStringsArray = $ReadOnlyArray<string>;
 
   declare type Level = $Values<{

flow-typed/npm/color_vx.x.x.js

@@ -23,7 +23,6 @@ declare module 'color' {
  * needed.
  */
 
-
 // Filename aliases
 declare module 'color/index' {
   declare module.exports: $Exports<'color'>;

flow-typed/npm/enzyme_v3.x.x.js

@@ -1,7 +1,7 @@
 // flow-typed signature: f6bad512110ebc6da85b1ddda297fe3d
 // flow-typed version: f04d291d8b/enzyme_v3.x.x/flow_>=v0.53.x
 
-declare module "enzyme" {
+declare module 'enzyme' {
   declare type PredicateFunction<T: Wrapper<*>> = (
     wrapper: T,
     index: number

flow-typed/npm/flow-bin_v0.x.x.js

@@ -1,6 +1,6 @@
 // flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583
 // flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x
 
-declare module "flow-bin" {
+declare module 'flow-bin' {
   declare module.exports: string;
 }

flow-typed/npm/glob_v7.1.x.js

@@ -1,7 +1,7 @@
 // flow-typed signature: 7c09aef8ac07163d6ef9e3f50c6bc35c
 // flow-typed version: a12a42a747/glob_v7.1.x/flow_>=v0.42.x
 
-declare module "glob" {
+declare module 'glob' {
   declare type MinimatchOptions = {|
     debug?: boolean,
     nobrace?: boolean,

flow-typed/npm/keygrip_vx.x.x.js

@@ -23,7 +23,6 @@ declare module 'keygrip' {
  * needed.
  */
 
-
 // Filename aliases
 declare module 'keygrip/index' {
   declare module.exports: $Exports<'keygrip'>;

flow-typed/npm/koa-bodyparser_v4.x.x.js

@@ -1,7 +1,7 @@
 // flow-typed signature: db2ab32952e719c6656cef681be04c96
 // flow-typed version: e969a7af52/koa-bodyparser_v4.x.x/flow_>=v0.56.x
 
-declare module "koa-bodyparser" {
+declare module 'koa-bodyparser' {
   declare type Context = Object;
 
   declare type Middleware = (

flow-typed/npm/lru-cache_vx.x.x.js

@@ -23,7 +23,6 @@ declare module 'lru-cache' {
  * needed.
  */
 
-
 // Filename aliases
 declare module 'lru-cache/index' {
   declare module.exports: $Exports<'lru-cache'>;

flow-typed/npm/moment_v2.x.x.js

@@ -373,6 +373,6 @@ declare class moment$Moment {
   static invalid(object: any): moment$Moment;
 }
 
-declare module "moment" {
+declare module 'moment' {
   declare module.exports: Class<moment$Moment>;
 }

flow-typed/npm/pg_v7.x.x.js

@@ -134,7 +134,6 @@ declare module pg {
 
   // <<------------- copy from 'pg-pool' ------------------------------
 
-
   // error
   declare type PG_ERROR = {
     name: string,

flow-typed/npm/react-test-renderer_v16.x.x.js

@@ -47,7 +47,7 @@ type TestRendererOptions = {
   createNodeMock(element: React$Element<any>): any
 };
 
-declare module "react-test-renderer" {
+declare module 'react-test-renderer' {
   declare export type ReactTestRenderer = {
     toJSON(): null | ReactTestRendererJSON,
     toTree(): null | ReactTestRendererTree,
@@ -69,7 +69,7 @@ declare module "react-test-renderer" {
   declare function act(callback: () => void): Thenable;
 }
 
-declare module "react-test-renderer/shallow" {
+declare module 'react-test-renderer/shallow' {
   declare export default class ShallowRenderer {
     static createRenderer(): ShallowRenderer;
     getMountedInstance(): ReactTestInstance;

flow-typed/npm/redux-devtools-extension_v2.x.x.js

@@ -1,8 +1,8 @@
 // flow-typed signature: 263123e4b3d2cb666a60f721c2da5354
 // flow-typed version: e1af06321a/redux-devtools-extension_v2.x.x/flow_>=v0.47.x
 
-import type { ActionCreator, StoreEnhancer } from 'redux';
+import type { ActionCreator, StoreEnhancer } from 'redux'
-import typeof { compose } from 'redux';
+import typeof { compose } from 'redux'
 
 declare type $npm$ReduxDevtoolsExtension$DevToolsOptions = {
   name?: string,

flow-typed/npm/styled-components_v4.x.x.js

@@ -4,7 +4,6 @@
 // @flow
 
 declare module 'styled-components' {
-
   declare export type Interpolation =
                                     | (<P: {}>(executionContext: P) => string)
                                     | CSSRules
@@ -12,7 +11,6 @@ declare module 'styled-components' {
                                     | string
                                     | number
 
-
   declare export type CSSRules = Interpolation[]
 
   // This is not exported on purpose, since it's an implementation detail
@@ -94,7 +92,6 @@ declare module 'styled-components' {
   declare type InjectedProps = { theme : Theme | void }
   declare export function withTheme<Props : {}, Component: React$ComponentType<Props>>(WrappedComponent: Component) : React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
 
-
   // @HACK This is a cheat to hide that the underlying type is "just a string"
   //       once we know of a better way, we should be able to update this accordingly.
   //       I don't think there _is_ a good way, currently.
@@ -248,10 +245,7 @@ declare module 'styled-components' {
   };
 }
 
-
-
 declare module 'styled-components/native' {
-
   declare export type Interpolation =
                                     | (<P: {}>(executionContext: P) => string)
                                     | CSSRules
@@ -259,7 +253,6 @@ declare module 'styled-components/native' {
                                     | string
                                     | number
 
-
   declare export type CSSRules = Interpolation[]
 
   // This is not exported on purpose, since it's an implementation detail
@@ -341,7 +334,6 @@ declare module 'styled-components/native' {
   declare type InjectedProps = { theme : Theme | void }
   declare export function withTheme<Props : {}, Component: React$ComponentType<Props>>(WrappedComponent: Component) : React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
 
-
   // @HACK This is a cheat to hide that the underlying type is "just a string"
   //       once we know of a better way, we should be able to update this accordingly.
   //       I don't think there _is_ a good way, currently.

flow-typed/npm/zlib-sync_vx.x.x.js

@@ -23,7 +23,6 @@ declare module 'zlib-sync' {
  * needed.
  */
 
-
 // Filename aliases
 declare module 'zlib-sync/index' {
   declare module.exports: $Exports<'zlib-sync'>;

packages/roleypoly-server/bot/index.js

@@ -10,6 +10,4 @@ export default class Bot {
     this.svc = DS
     this.log = log
   }
-
-
 }

packages/roleypoly-ui/components/demos/typing.js

@@ -16,6 +16,7 @@ const Chat = styled.div`
   padding: 10px 0;
   font-size: 0.8em;
   ${() => MediaQuery({ sm: 'font-size: 1em;' })}
+
   & span {
     display: inline-block;
     margin-left: 5px;
@@ -23,21 +24,19 @@ const Chat = styled.div`
 `
 
 const TextArea = styled.div`
-  background-color: hsla(218,5%,47%,.3);
+  background-color: hsla(218, 5%, 47%, 0.3);
   border-radius: 5px;
   padding: 10px;
   font-size: 0.8em;
   ${() => MediaQuery({ sm: 'font-size: 1em;' })}
 
   & .Typist .Cursor {
-
     display: inline-block;
     color: transparent;
     border-left: 1px solid var(--c-white);
     user-select: none;
 
     &--blinking {
-
       opacity: 1;
       animation: blink 2s ease-in-out infinite;
 
@@ -45,9 +44,11 @@ const TextArea = styled.div`
         0% {
           opacity: 1;
         }
+
         50% {
           opacity: 0;
         }
+
         100% {
           opacity: 1;
         }
@@ -58,7 +59,7 @@ const TextArea = styled.div`
 
 const Timestamp = styled.span`
   font-size: 0.7em;
-  color: hsla(0,0%,100%,.2);
+  color: hsla(0, 0%, 100%, 0.2);
 `
 
 const Username = styled.span`

packages/roleypoly-ui/components/discord-button.js

@@ -16,7 +16,7 @@ const Button = styled.a`
   display: flex;
   align-items: center;
   justify-content: center;
-  transform: translateY(0px);
+  transform: translateY(0);
   transition: all 0.3s ease-in-out;
   position: relative;
 
@@ -37,13 +37,14 @@ const Button = styled.a`
   &:hover {
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
     transform: translateY(-1px);
+
     &::after {
       opacity: 1;
     }
   }
 
   &:active {
-    transform: translateY(0px);
+    transform: translateY(0);
     box-shadow: none;
   }
 `

packages/roleypoly-ui/components/discord-guild-pic.js

@@ -18,7 +18,6 @@ const Fallback = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-
   background-color: var(--fallback-color);
 `
 

packages/roleypoly-ui/components/global-colors.js

@@ -30,8 +30,11 @@ body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-  /* prevent FOUC */
     transition: opacity 0.2s ease-in-out;
+    height: 100%;
+    overflow: auto;
+    color: var(--c-white);
+    background-color: var(--c-1);
   }
 
   * {
@@ -42,14 +45,6 @@ body {
     font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   }
 
-:root {
-  ${() => getColors()}
-  --not-quite-black: #23272A;
-  --dark-but-not-black: #2C2F33;
-  --greyple: #99AAB5;
-  --blurple: var(--c-discord);
-}
-
   ::selection {
     background: var(--c-9);
     color: var(--c-1);
@@ -60,22 +55,26 @@ body {
     color: var(--c-1);
   }
 
+  :root {
+    ${() => getColors()}
+
+    --not-quite-black: #23272a;
+    --dark-but-not-black: #2c2f33;
+    --greyple: #99aab5;
+    --blurple: var(--c-discord);
+  }
+
   html {
     overflow: hidden;
     height: 100%;
   }
 
-body {
+  h1,
-  margin: 0;
+  h2,
-  padding: 0;
+  h3,
-  height: 100%;
+  h4,
-  overflow: auto;
+  h5,
-  color: var(--c-white);
+  h6 {
-  background-color: var(--c-1);
-  /* overflow-y: hidden; */
-}
-
-h1,h2,h3,h4,h5,h6 {
     color: var(--c-9);
   }
 
@@ -87,5 +86,4 @@ h1,h2,h3,h4,h5,h6 {
   .fade {
     opacity: 0;
   }
-
 `

packages/roleypoly-ui/components/header/common.js

@@ -10,8 +10,7 @@ export type CommonProps = {
 }
 
 const Header = styled.div`
-  background-color: ${({ noBackground }: any) => noBackground === false ? 'var(--c-dark);' : 'var(--c-1);'}
+  background-color: ${({ noBackground }: any) => noBackground === false ? 'var(--c-dark)' : 'var(--c-1)'};
-  position: relative;
   transition: background-color 0.3s ease-in-out;
   position: fixed;
   top: 0;

packages/roleypoly-ui/components/header/unauth.js

@@ -26,11 +26,11 @@ const LoginButton = styled.a`
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
     background-color: var(--c-green);
     border-color: rgba(0, 0, 0, 0.25);
-    text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
   }
 
   &:active {
-    transform: translateY(0px);
+    transform: translateY(0);
     box-shadow: none;
   }
 `

packages/roleypoly-ui/components/layout.js

@@ -7,9 +7,11 @@ import { type User } from '../stores/user'
 import styled from 'styled-components'
 
 const LayoutWrapper = styled.div`
-  transition: opacity: 0.1s ease-out;
+  transition: opacity 0.1s ease-out;
   opacity: 0;
-  .wf-active &, .force-active & {
+
+  .wf-active &,
+  .force-active & {
     opacity: 1;
   }
 `
@@ -20,7 +22,6 @@ const ContentBox = styled.div`
   max-width: 100vw;
   padding: 5px;
   padding-top: 50px;
-  /* max-height: calc(100vh - 50px); */
 `
 
 const Layout = ({ children, user, noBackground, router }: {children: React.Element<any>, user: User, noBackground: boolean, router: * }) => <>

packages/roleypoly-ui/components/role/role.styled.js

@@ -4,10 +4,8 @@ import MediaQuery from '../../kit/media'
 export default styled.div`
   border: solid 1px var(--role-color-outline);
   border-radius: 1.2em;
-
   box-sizing: border-box;
   cursor: pointer;
-
   position: relative;
   display: flex;
   overflow: hidden;
@@ -15,24 +13,18 @@ export default styled.div`
   justify-content: flex-start;
   flex-wrap: wrap;
   flex-direction: column;
-
   font-size: 1.2em;
   line-height: 20px;
-
   margin: 0.3em;
   padding: 4px 0.5em;
-
   min-height: 32px;
   max-width: 90vw;
-
   transition: box-shadow 0.3s ease-in-out;
-
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
   text-overflow: ellipsis;
   user-select: none;
   white-space: nowrap;
   transform: rotateZ(0);
-
   ${(props: any) => (props.active) ? `
     box-shadow: inset 0 0 0 3em var(--role-color-outline-alt);
   ` : `
@@ -42,10 +34,53 @@ export default styled.div`
     /* padding-top: 4px; */
   }
 
+  &[disabled] {
+    border-color: hsl(0, 0%, 40%);
+    color: hsla(0, 0%, 40%, 0.7);
+    cursor: default;
+    box-shadow: none;
+    ${(props: any) => (props.active)
+    ? `box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);
+       background-color: hsl(0,0%,40%);`
+    : ``}
+
+    &::after {
+      border-color: hsl(0, 0%, 40%);
+    }
+
+    &:hover::after {
+      border-color: hsl(0, 0%, 40%);
+      transform: none;
+      box-shadow: none;
+    }
+  }
+
   &[disabled]:hover {
     overflow: visible;
   }
 
+  &::after {
+    content: '';
+    display: none;
+    box-sizing: border-box;
+    position: absolute;
+    left: 4px;
+    bottom: 2px;
+    top: 4px;
+    width: 22px;
+    height: 22px;
+    border: 1px solid var(--role-color-base);
+    border-radius: 100%;
+    clip-path: border-box circle(50.2% at 50% 50%); /* this is just for you, firefox. */
+    transform: rotateZ(0);
+    ${(props: any) => (props.active) ? `
+      transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 1ms ease-in-out 0.29s;
+      border-left-width: 21px;
+    ` : `
+      transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 0.3s ease-in-out;
+    `}
+  }
+
   &:hover::after {
     transform: translateY(-1px) rotateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.75);
@@ -57,33 +92,6 @@ export default styled.div`
     transform: none;
   }
 
-  &::after {
-    content: '';
-    display: none;
-    box-sizing: border-box;
-
-    position: absolute;
-    left: 4px;
-    bottom: 2px;
-    top: 4px;
-
-    width: 22px;
-    height: 22px;
-
-    border: 1px solid var(--role-color-base);
-    border-radius: 100%;
-
-    clip-path: border-box circle(50.2% at 50% 50%); /* this is just for you, firefox. */
-
-    transform: rotateZ(0);
-    ${(props: any) => (props.active) ? `
-      transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 1ms ease-in-out 0.29s;
-      border-left-width: 21px;
-    ` : `
-      transition: border 0.3s ease-in-out, transform 0.1s ease-in-out, background-color 0.3s ease-in-out;
-    `}
-  }
-
   ${(props: any) => MediaQuery({
     md: `
       font-size: 1em;
@@ -100,25 +108,4 @@ export default styled.div`
       }
     `
   })}
-
-  &[disabled] {
-    border-color: hsl(0,0%,40%);
-    color: hsla(0,0%,40%,0.7);
-    cursor: default;
-    box-shadow: none;
-    ${(props: any) => (props.active) ? `
-      box-shadow: inset 0 0 0 3em hsla(0,0%,40%,0.1);
-      background-color: hsl(0,0%,40%);`
-    : ``};
-
-    &::after {
-      border-color: hsl(0,0%,40%);
-    }
-
-    &:hover::after {
-      border-color: hsl(0,0%,40%);
-      transform: none;
-      box-shadow: none;
-    }
-  }
 `

packages/roleypoly-ui/components/tooltip.js

@@ -5,7 +5,7 @@ export default styled.div`
   position: absolute;
   bottom: 35px;
   font-size: 0.9em;
-  background-color: rgba(0,0,0,0.50);
+  background-color: rgba(0, 0, 0, 0.5);
   padding: 5px;
   color: var(--c-red);
   border-radius: 3px;
@@ -14,7 +14,6 @@ export default styled.div`
   opacity: 0.99;
   overflow: auto;
   pointer-events: none;
-  /* max-width: 50vw; */
   white-space: normal;
   ${() => MediaQuery({ md: `
     white-space: nowrap;  `

packages/roleypoly-ui/kit/debug-breakpoints.js

@@ -5,7 +5,7 @@ import MediaQuery, { breakpoints } from './media'
 
 const BreakpointDebugFloat = styled.div`
   position: absolute;
-  bottom: 0em;
+  bottom: 0;
   left: 0;
   pointer-events: none;
   height: 1.4em;

packages/roleypoly-ui/pages/_error.js

@@ -23,7 +23,6 @@ const ResponsiveSplitter = styled.div`
   line-height: 1.6;
   font-size: 1.3em;
   flex-direction: column;
-
   ${() => MediaQuery({
     md: `flex-direction: row; min-height: 100vh; position: relative; top: -50px;`
   })}
@@ -34,9 +33,7 @@ const ResponsiveSplitter = styled.div`
 
   & section {
     text-align: center;
-  ${() => MediaQuery({
+    ${() => MediaQuery({ md: `text-align: left;` })}
-    md: `text-align: left;`
-  })}
   }
 `
 

packages/roleypoly-ui/pages/_internal/_server.js

@@ -24,13 +24,7 @@ const mapStateToProps = (state, { router: { query: { id } } }) => {
 }
 
 const Category = styled.div``
-
+const Hider = styled.div``
-const Hider = styled.div`
-  /* opacity: ${(props: any) => props.visible ? '1' : '0'}; */
-  /* opacity: 1; */
-  /* transition: opacity 0.15s ease-out; */
-  /* ${(props: any) => props.visible ? '' : 'display: none;'} */
-`
 
 const RoleHolder = styled.div`
   display: flex;

packages/roleypoly-ui/pages/auth/login.js

@@ -6,7 +6,8 @@ import DiscordButton from '../../components/discord-button'
 import RPC from '../../config/rpc'
 import redirect from '../../lib/redirect'
 import dynamic from 'next/dynamic'
-import type { PageProps, ServerSlug } from '../../types'
+import type { PageProps } from '../../types'
+import type { ServerSlug } from '@roleypoly/types'
 import getConfig from 'next/config'
 const { publicRuntimeConfig: { BOT_HANDLE } } = getConfig()
 
@@ -54,21 +55,24 @@ const SecretCode = styled.input`
   appearance: none;
   transition: all 0.3s ease-in-out;
 
-  &:focus, &:active, &:hover {
-    background-color: var(--c-3);
-  }
-
-  &:focus, &:active {
-    & ::placeholder {
-      color: transparent;
-    }
-  }
-
   & ::placeholder {
     transition: all 0.3s ease-in-out;
     color: var(--c-7);
     text-align: center;
   }
+
+  &:focus,
+  &:active,
+  &:hover {
+    background-color: var(--c-3);
+  }
+
+  &:focus,
+  &:active {
+    & ::placeholder {
+      color: transparent;
+    }
+  }
 `
 
 const HiderButton = styled.button`

packages/roleypoly-ui/pages/help/why-no-roles.js

@@ -34,7 +34,6 @@ const Collapser = styled.div`
   align-items: center;
   justify-content: center;
   flex-direction: column;
-
   ${() => MediaQuery({
     md: `flex-direction: row;`
   })}