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/koa_v2.0.x.js

@@ -63,31 +63,31 @@ declare module 'koa' {
     // if you meet some error here, temporarily add an additional annotation
     // like: `request.accepts((['json', 'text']:Array<string>))` to fix it.
     ((arg: string, ...args: string[]) => string|false) &
-    ( () => string[] ) , // return the old value.
+    (() => string[]), // return the old value.
 
 //  https://github.com/jshttp/accepts/blob/master/index.js#L153
 //  https://github.com/jshttp/accepts/blob/master/test/charset.js
-    acceptsCharsets: ( (args: string[]) => buffer$Encoding|false)&
+    acceptsCharsets: ((args: string[]) => buffer$Encoding|false)&
     // ToDo: https://github.com/facebook/flow/issues/3009
     // if you meet some error here, see L70.
-    ( (arg: string, ...args: string[]) => buffer$Encoding|false ) &
-    ( () => string[] ),
+    ((arg: string, ...args: string[]) => buffer$Encoding|false) &
+    (() => string[]),
 
 //  https://github.com/jshttp/accepts/blob/master/index.js#L119
 //  https://github.com/jshttp/accepts/blob/master/test/encoding.js
-    acceptsEncodings: ( (args: string[]) => string|false)&
+    acceptsEncodings: ((args: string[]) => string|false)&
     // ToDo: https://github.com/facebook/flow/issues/3009
     // if you meet some error here, see L70.
-    ( (arg: string, ...args: string[]) => string|false ) &
-    ( () => string[] ),
+    ((arg: string, ...args: string[]) => string|false) &
+    (() => string[]),
 
 //  https://github.com/jshttp/accepts/blob/master/index.js#L185
 //  https://github.com/jshttp/accepts/blob/master/test/language.js
-    acceptsLanguages: ( (args: string[]) => string|false) &
+    acceptsLanguages: ((args: string[]) => string|false) &
     // ToDo: https://github.com/facebook/flow/issues/3009
     // if you meet some error here, see L70.
-    ( (arg: string, ...args: string[]) => string|false ) &
-    ( () => string[] ),
+    ((arg: string, ...args: string[]) => string|false) &
+    (() => string[]),
 
     get: (field: string) => string,
 
@@ -98,9 +98,9 @@ declare module 'koa' {
 * If there is no content type, `false` is returned.
 * Otherwise, it returns the first `type` that matches.
 */
-    is: ( (args: string[]) => null|false|string)&
-    ( (arg: string, ...args: string[]) => null|false|string ) &
-    ( () => string ), // should return the mime type
+    is: ((args: string[]) => null|false|string)&
+    ((arg: string, ...args: string[]) => null|false|string) &
+    (() => string), // should return the mime type
 
     toJSON: () => RequestJSON,
     inspect: () => RequestInspect,
@@ -149,9 +149,9 @@ declare module 'koa' {
     get: (field: string) => string,
     // https://github.com/jshttp/type-is/blob/master/test/test.js
     // https://github.com/koajs/koa/blob/v2.x/lib/response.js#L382
-    is: ( (arg: string[]) => false|string) &
-    ( (arg: string, ...args: string[]) => false|string ) &
-    ( () => string ), // should return the mime type
+    is: ((arg: string[]) => false|string) &
+    ((arg: string, ...args: string[]) => false|string) &
+    (() => string), // should return the mime type
     redirect: (url: string, alt?: string) => void,
     remove: (field: string) => void,
     // https://github.com/koajs/koa/blob/v2.x/lib/response.js#L418
@@ -180,7 +180,7 @@ declare module 'koa' {
   declare type CookiesSetOptions = {
     domain: string, // domain of the cookie (no default).
     maxAge: number, // milliseconds from Date.now() for expiry
-    expires?: Date, //cookie's expiration date (expires at the end of session by default).
+    expires?: Date, // cookie's expiration date (expires at the end of session by default).
     path?: string, //  the path of the cookie (/ by default).
     secure?: boolean, // false by default for HTTP, true by default for HTTPS
     httpOnly?: boolean, //  a boolean indicating whether the cookie is only to be sent over HTTP(S),
@@ -192,7 +192,7 @@ declare module 'koa' {
     get: (name: string, options?: {signed: boolean}) => string|void,
     set: ((name: string, value: string, options?: CookiesSetOptions) => Context)&
     // delete cookie (an outbound header with an expired date is used.)
-    ( (name: string) => Context),
+    ((name: string) => Context),
   };
   // The default props of context come from two files
   // `application.createContext` & `context.js`
@@ -215,9 +215,9 @@ declare module 'koa' {
     // if (!(err instanceof Error)) err = new Error(`non-error thrown: ${err}`);
     onerror: (err?: mixed) => void,
     // context.js#L70
-    throw: (( statusOrErr: string|number|Error, errOrStatus?: string|number|Error,
+    throw: ((statusOrErr: string|number|Error, errOrStatus?: string|number|Error,
       opts?: {}) => void) &
-      (( statusOrErr: string|number|Error, opts?: Object) => void),
+      ((statusOrErr: string|number|Error, opts?: Object) => void),
     toJSON(): ContextJSON,
     inspect(): ContextJSON,
 

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

@@ -52,15 +52,15 @@ declare module pg {
     log: Function,
 
     // node-postgres Client ------
-    //database connection string to define some other config parameters
+    // database connection string to define some other config parameters
     connectionString: string,
-    //database user's name
+    // database user's name
     user: string,
-    //name of database to connect
+    // name of database to connect
     database: string,
-    //database user's password
+    // database user's password
     password: string,
-    //database port
+    // database port
     port: number,
     // database host. defaults to localhost
     host?: string,
@@ -89,16 +89,16 @@ declare module pg {
     release(error?: mixed): void,
 
     query:
-    ( <T: QuerySubmittableConfig>(query: T, callback?: QueryCallback) => T ) &
-    ( (query: QueryConfig|string, callback?: QueryCallback) => Query ) &
-    ( (text: string, values: Array<any>, callback?: QueryCallback) => Query ),
+    (<T: QuerySubmittableConfig>(query: T, callback?: QueryCallback) => T) &
+    ((query: QueryConfig|string, callback?: QueryCallback) => Query) &
+    ((text: string, values: Array<any>, callback?: QueryCallback) => Query),
 
     on:
-    ((event: 'drain', listener: () => void) => events$EventEmitter )&
-    ((event: 'error', listener: (err: PG_ERROR) => void) => events$EventEmitter )&
-    ((event: 'notification', listener: (message: any) => void) => events$EventEmitter )&
-    ((event: 'notice', listener: (message: any) => void) => events$EventEmitter )&
-    ((event: 'end', listener: () => void) => events$EventEmitter ),
+    ((event: 'drain', listener: () => void) => events$EventEmitter)&
+    ((event: 'error', listener: (err: PG_ERROR) => void) => events$EventEmitter)&
+    ((event: 'notification', listener: (message: any) => void) => events$EventEmitter)&
+    ((event: 'notice', listener: (message: any) => void) => events$EventEmitter)&
+    ((event: 'end', listener: () => void) => events$EventEmitter),
   }
 
   declare type PoolConnectCallback = (error: PG_ERROR|null,
@@ -117,8 +117,8 @@ declare module pg {
   // And there is a flow(<0.34) issue here, when Array<mixed>,
   // the overloading will not work
     query:
-    ( (query: QueryConfig|string, callback?: QueryCallback) => Promise<ResultSet> ) &
-    ( (text: string, values: Array<any>, callback?: QueryCallback) => Promise<ResultSet>);
+    ((query: QueryConfig|string, callback?: QueryCallback) => Promise<ResultSet>) &
+    ((text: string, values: Array<any>, callback?: QueryCallback) => Promise<ResultSet>);
 
     /* flow issue: https://github.com/facebook/flow/issues/2423
      * When this fixed, this overloading can be used.
@@ -134,7 +134,6 @@ declare module pg {
 
   // <<------------- copy from 'pg-pool' ------------------------------
 
-
   // error
   declare type PG_ERROR = {
     name: string,
@@ -158,13 +157,13 @@ declare module pg {
   };
 
   declare type ClientConfig = {
-    //database user's name
+    // database user's name
     user?: string,
-    //name of database to connect
+    // name of database to connect
     database?: string,
-    //database user's password
+    // database user's password
     password?: string,
-    //database port
+    // database port
     port?: number,
     // database host. defaults to localhost
     host?: string,
@@ -232,9 +231,9 @@ declare module pg {
     ): Promise<U>;
 
     on :
-    ((event: 'row', listener: (row: Row, result: ResultBuilder) => void) => events$EventEmitter )&
-    ((event: 'end', listener: (result: ResultBuilder) => void) => events$EventEmitter )&
-    ((event: 'error', listener: (err: PG_ERROR) => void) => events$EventEmitter );
+    ((event: 'row', listener: (row: Row, result: ResultBuilder) => void) => events$EventEmitter)&
+    ((event: 'end', listener: (result: ResultBuilder) => void) => events$EventEmitter)&
+    ((event: 'error', listener: (err: PG_ERROR) => void) => events$EventEmitter);
   }
 
   /*
@@ -254,16 +253,16 @@ declare module pg {
     escapeIdentifier(str: string): string;
 
     query:
-    ( <T: QuerySubmittableConfig>(query: T, callback?: QueryCallback) => T ) &
-    ( (query: QueryConfig|string, callback?: QueryCallback) => Query ) &
-    ( (text: string, values: Array<any>, callback?: QueryCallback) => Query );
+    (<T: QuerySubmittableConfig>(query: T, callback?: QueryCallback) => T) &
+    ((query: QueryConfig|string, callback?: QueryCallback) => Query) &
+    ((text: string, values: Array<any>, callback?: QueryCallback) => Query);
 
     on:
-    ((event: 'drain', listener: () => void) => this )&
-    ((event: 'error', listener: (err: PG_ERROR) => void) => this )&
-    ((event: 'notification', listener: (message: any) => void) => this )&
-    ((event: 'notice', listener: (message: any) => void) => this )&
-    ((event: 'end', listener: () => void) => this );
+    ((event: 'drain', listener: () => void) => this)&
+    ((event: 'error', listener: (err: PG_ERROR) => void) => this)&
+    ((event: 'notification', listener: (message: any) => void) => this)&
+    ((event: 'notice', listener: (message: any) => void) => this)&
+    ((event: 'end', listener: () => void) => this);
   }
 
   /*
@@ -273,11 +272,11 @@ declare module pg {
   declare type TypeParserBinary = (value: Buffer) => any;
   declare type Types = {
     getTypeParser:
-      ((oid: number, format?: 'text') => TypeParserText )&
-      ((oid: number, format: 'binary') => TypeParserBinary );
+      ((oid: number, format?: 'text') => TypeParserText)&
+      ((oid: number, format: 'binary') => TypeParserBinary);
 
     setTypeParser:
-      ((oid: number, format?: 'text', parseFn: TypeParserText) => void )&
+      ((oid: number, format?: 'text', parseFn: TypeParserText) => void)&
       ((oid: number, format: 'binary', parseFn: TypeParserBinary) => void)&
       ((oid: number, parseFn: TypeParserText) => void),
   }
@@ -289,7 +288,7 @@ declare module pg {
     types: Types;
     Client: Class<Client>;
     Pool: Class<Pool>;
-    Connection: mixed; //Connection is used internally by the Client.
+    Connection: mixed; // Connection is used internally by the Client.
     constructor(client: Client): void;
     native: { // native binding, have the same capability like PG
       types: Types;

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 typeof { compose } from 'redux';
+import type { ActionCreator, StoreEnhancer } 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

@@ -11,12 +11,12 @@ const Button = styled.a`
   color: var(--c-white);
   padding: 0.4em 1em;
   border-radius: 3px;
-  border: 1px solid rgba(0,0,0,0.25);
+  border: 1px solid rgba(0, 0, 0, 0.25);
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  transform: translateY(0px);
+  transform: translateY(0);
   transition: all 0.3s ease-in-out;
   position: relative;
 
@@ -28,22 +28,23 @@ const Button = styled.a`
     left: 0;
     bottom: 0;
     transition: all 0.35s ease-in-out;
-    background-color: hsla(0,0%,100%,0.1);
+    background-color: hsla(0, 0%, 100%, 0.1);
     pointer-events: none;
     opacity: 0;
     z-index: 2;
   }
 
   &:hover {
-    box-shadow: 0 1px 2px rgba(0,0,0,0.75);
+    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

@@ -23,69 +23,67 @@ const getColors = () => {
 }
 
 export default createGlobalStyle`
-body {
+  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" !important;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-  /* prevent FOUC */
     transition: opacity 0.2s ease-in-out;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.font-sans-serif {
-  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);
-}
-
-::-moz-selection {
-  background: var(--c-9);
-  color: var(--c-1);
-}
-
-html {
-  overflow: hidden;
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  padding: 0;
     height: 100%;
     overflow: auto;
     color: var(--c-white);
     background-color: var(--c-1);
-  /* overflow-y: hidden; */
-}
+  }
 
-h1,h2,h3,h4,h5,h6 {
+  * {
+    box-sizing: border-box;
+  }
+
+  .font-sans-serif {
+    font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+
+  ::selection {
+    background: var(--c-9);
+    color: var(--c-1);
+  }
+
+  ::-moz-selection {
+    background: var(--c-9);
+    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%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     color: var(--c-9);
-}
+  }
 
-.fade-element {
+  .fade-element {
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
-}
+  }
 
-.fade {
+  .fade {
     opacity: 0;
-}
-
+  }
 `

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

@@ -25,8 +25,8 @@ const LogoBox = styled.a`
 
 const StyledServerPic = styled(DiscordIcon)`
   border-radius: 100%;
-  box-shadow: 0 0 1px rgba(0,0,0,0.1);
-  border: 1px solid rgba(0,0,0,0.25);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.25);
   height: 35px;
   width: 35px;
   margin-right: 10px;

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);'}
-  position: relative;
+  background-color: ${({ noBackground }: any) => noBackground === false ? 'var(--c-dark)' : 'var(--c-1)'};
   transition: background-color 0.3s ease-in-out;
   position: fixed;
   top: 0;

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

@@ -23,14 +23,14 @@ const LoginButton = styled.a`
 
   &:hover {
     transform: translateY(-1px);
-    box-shadow: 0 1px 2px rgba(0,0,0,0.75);
+    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);
+    border-color: 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-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,39 +34,44 @@ export default styled.div`
     /* padding-top: 4px; */
   }
 
-  &[disabled]:hover {
-    overflow: visible;
+  &[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 {
-    transform: translateY(-1px) rotateZ(0);
-    box-shadow: 0 0 1px rgba(0,0,0,0.75);
-    border-color: var(--role-color-active);
-    clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */
+      border-color: hsl(0, 0%, 40%);
+      transform: none;
+      box-shadow: none;
+    }
   }
 
-  &:active::after {
-    transform: 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;
@@ -84,6 +81,17 @@ export default styled.div`
     `}
   }
 
+  &:hover::after {
+    transform: translateY(-1px) rotateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.75);
+    border-color: var(--role-color-active);
+    clip-path: border-box circle(50.2% at 49.6% 50%); /* firefox fix */
+  }
+
+  &:active::after {
+    transform: none;
+  }
+
   ${(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({
-    md: `text-align: left;`
-  })}
+    ${() => MediaQuery({ 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`
-  /* opacity: ${(props: any) => props.visible ? '1' : '0'}; */
-  /* opacity: 1; */
-  /* transition: opacity 0.15s ease-out; */
-  /* ${(props: any) => props.visible ? '' : 'display: none;'} */
-`
+const Hider = styled.div``
 
 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`
@@ -97,7 +101,7 @@ const SlugWrapper = styled.div`
 const DiscordGuildPic = dynamic(() => import('../../components/discord-guild-pic'))
 const StyledDGP = styled(DiscordGuildPic)`
   border-radius: 100%;
-  border: 2px solid rgba(0,0,0,0.2);
+  border: 2px solid rgba(0, 0, 0, 0.2);
   height: 4em;
   margin-top: 1em;
 `

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

@@ -23,7 +23,7 @@ const DiscordOuter = styled.div`
   padding: 10px;
   text-align: left;
   color: var(--c-white);
-  border: 1px solid rgba(0,0,0,0.25);
+  border: 1px solid rgba(0, 0, 0, 0.25);
   width: 250px;
   margin: 0 auto;
   user-select: none;
@@ -34,7 +34,6 @@ const Collapser = styled.div`
   align-items: center;
   justify-content: center;
   flex-direction: column;
-
   ${() => MediaQuery({
     md: `flex-direction: row;`
   })}