[ui] add media query template literals, convert everything to the superior.

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

@@ -1,8 +1,9 @@
+// @flow
 import * as React from 'react'
 import moment from 'moment'
 import Typist from 'react-typist'
 import styled from 'styled-components'
-import MediaQuery from '../../kit/media'
+import { sm } from '../../kit/media'
 import demoRoles from '../../config/demo'
 
 const Outer = styled.div`
@@ -15,7 +16,7 @@ const Outer = styled.div`
 const Chat = styled.div`
   padding: 10px 0;
   font-size: 0.8em;
-  ${() => MediaQuery({ sm: 'font-size: 1em;' })}
+  ${sm`font-size: 1em;`}
 
   & span {
     display: inline-block;
@@ -28,7 +29,7 @@ const TextArea = styled.div`
   border-radius: 5px;
   padding: 10px;
   font-size: 0.8em;
-  ${() => MediaQuery({ sm: 'font-size: 1em;' })}
+  ${sm`font-size: 1em;`}
 
   & .Typist .Cursor {
     display: inline-block;

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import MediaQuery from '../../kit/media'
+import { md } from '../../kit/media'
 
 export default styled.div`
   border: solid 1px var(--role-color-outline);
@@ -92,20 +92,22 @@ export default styled.div`
     transform: none;
   }
 
-  ${(props: any) => MediaQuery({
-    md: `
+  ${md`
       font-size: 1em;
       text-shadow: none;
       padding-left: 32px;
-      ${(props.active) ? `box-shadow: none;` : ''}
       &::after {
-        ${(props.active) ? `background-color: var(--role-color-base);` : ''}
         display: block;
       }
-
+  `}
+  ${(props: any) => props.active
+    ? md`
+      box-shadow: none;
       &:hover::after {
-        ${(props.active) ? `background-color: var(--role-color-active);` : ''}
+        background-color: var(--role-color-active);
       }
-    `
-  })}
+      &::after {
+        background-color: var(--role-color-base);
+      }`
+    : ''}
 `

packages/roleypoly-ui/components/tooltip.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import MediaQuery from '../kit/media'
+import { md } from '../kit/media'
 
 export default styled.div`
   position: absolute;
@@ -15,7 +15,7 @@ export default styled.div`
   overflow: auto;
   pointer-events: none;
   white-space: normal;
-  ${() => MediaQuery({ md: `
-    white-space: nowrap;  `
-  })}
+  ${md`
+    white-space: nowrap;
+  `}
 `