Merge pull request #1050 from ethereum/refactor/move_styles

separate styles

src/app/editor/contextView.js

@@ -1,57 +1,9 @@
 'use strict'
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
 var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.themeChooser
-var styles = styleGuide.chooser()
 var SourceMappingDecoder = remixLib.SourceMappingDecoder
 
-var css = csjs`
+var css = require('./styles/contextView-styles')
-  .contextview            {
-      opacity           : 0.8;
-    }
-  .container              {
-    padding             : 1px 15px;
-  }
-  .line                   {
-    display             : flex;
-    justify-content     : flex-end;
-    align-items         : center;
-    text-overflow       : ellipsis;
-    overflow            : hidden;
-    white-space         : nowrap;
-    color               : ${styles.editor.text_Primary};
-    font-size           : 11px;
-  }
-  .type                   {
-    font-style        : italic;
-    margin-right      : 5px;
-  }
-  .name                   {
-    font-weight       : bold;
-  }
-  .jump                   {
-    cursor            : pointer;
-    margin            : 0 5px;
-    color             : ${styles.editor.icon_Color_Editor};
-  }
-  .jump:hover              {
-    color             : ${styles.editor.icon_HoverColor_Editor};
-  }
-  .referencesnb           {
-    float             : right;
-    margin-left       : 15px;
-  }
-  .gasEstimation {
-    margin-left: 15px;
-    display: flex;
-    align-items: center;
-  }
-  .gasStationIcon {
-    height: 13px;
-    margin-right: 5px;
-  }
-`
 
 /*
   Display information about the current focused code:

src/app/editor/styles/contextView-styles.js

@@ -0,0 +1,53 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .contextview            {
+      opacity           : 0.8;
+    }
+  .container              {
+    padding             : 1px 15px;
+  }
+  .line                   {
+    display             : flex;
+    justify-content     : flex-end;
+    align-items         : center;
+    text-overflow       : ellipsis;
+    overflow            : hidden;
+    white-space         : nowrap;
+    color               : ${styles.editor.text_Primary};
+    font-size           : 11px;
+  }
+  .type                   {
+    font-style        : italic;
+    margin-right      : 5px;
+  }
+  .name                   {
+    font-weight       : bold;
+  }
+  .jump                   {
+    cursor            : pointer;
+    margin            : 0 5px;
+    color             : ${styles.editor.icon_Color_Editor};
+  }
+  .jump:hover              {
+    color             : ${styles.editor.icon_HoverColor_Editor};
+  }
+  .referencesnb           {
+    float             : right;
+    margin-left       : 15px;
+  }
+  .gasEstimation {
+    margin-left: 15px;
+    display: flex;
+    align-items: center;
+  }
+  .gasStationIcon {
+    height: 13px;
+    margin-right: 5px;
+  }
+`
+
+module.exports = css

src/app/files/file-explorer.js

@@ -1,5 +1,4 @@
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
 var Treeview = require('remix-debugger').ui.TreeView
 var modalDialog = require('../ui/modaldialog')
 var modalDialogCustom = require('../ui/modal-dialog-custom')
@@ -9,49 +8,7 @@ var contextMenu = require('../ui/contextMenu')
 var addTooltip = require('../ui/tooltip')
 var helper = require('../../lib/helper')
 
-var styleGuide = remixLib.ui.themeChooser
+var css = require('./styles/file-explorer-styles')
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .fileexplorer       {
-    box-sizing        : border-box;
-  }
-  input[type="file"] {
-      display: none;
-  }
-  .folder,
-  .file               {
-    font-size         : 14px;
-    cursor            : pointer;
-  }
-  .file               {
-    color             : ${styles.leftPanel.text_Teriary};
-  }
-  .hasFocus           {
-    background-color  : ${styles.leftPanel.backgroundColor_FileExplorer};
-  }
-  .rename             {
-    background-color  : ${styles.leftPanel.backgroundColor_Panel};
-  }
-  .remove             {
-    margin-left       : auto;
-    padding-left      : 5px;
-    padding-right     : 5px;
-  }
-  .activeMode         {
-    display           : flex;
-    width             : 100%;
-    margin-right      : 10px;
-    padding-right     : 19px;
-  }
-  .activeMode > div   {
-    min-width         : 10px;
-  }
-  ul                  {
-    padding           : 0;
-  }
-`
-module.exports = fileExplorer
 
 function fileExplorer (appAPI, files) {
   var self = this
@@ -291,3 +248,5 @@ fileExplorer.prototype.ensureRoot = function (cb) {
     if (cb) cb()
   })
 }
+
+module.exports = fileExplorer

src/app/files/styles/file-explorer-styles.js

@@ -0,0 +1,46 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .fileexplorer       {
+    box-sizing        : border-box;
+  }
+  input[type="file"] {
+      display: none;
+  }
+  .folder,
+  .file               {
+    font-size         : 14px;
+    cursor            : pointer;
+  }
+  .file               {
+    color             : ${styles.leftPanel.text_Teriary};
+  }
+  .hasFocus           {
+    background-color  : ${styles.leftPanel.backgroundColor_FileExplorer};
+  }
+  .rename             {
+    background-color  : ${styles.leftPanel.backgroundColor_Panel};
+  }
+  .remove             {
+    margin-left       : auto;
+    padding-left      : 5px;
+    padding-right     : 5px;
+  }
+  .activeMode         {
+    display           : flex;
+    width             : 100%;
+    margin-right      : 10px;
+    padding-right     : 19px;
+  }
+  .activeMode > div   {
+    min-width         : 10px;
+  }
+  ul                  {
+    padding           : 0;
+  }
+`
+
+module.exports = css

src/app/staticanalysis/staticAnalysisView.js

@@ -4,42 +4,13 @@ var yo = require('yo-yo')
 var $ = require('jquery')
 var remixLib = require('remix-lib')
 var utils = remixLib.util
-var csjs = require('csjs-inject')
 
 var styleGuide = remixLib.ui.themeChooser
 var styles = styleGuide.chooser()
 
-var EventManager = remixLib.EventManager
+var css = require('./styles/staticAnalysisView-styles')
 
-var css = csjs`
+var EventManager = remixLib.EventManager
-  .analysis {
-    display: flex;
-    flex-direction: column;
-  }
-  .result {
-    margin-top: 1%;
-  }
-  .buttons  {
-    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
-    display: flex;
-    align-items: center;
-  }
-  .buttonRun  {
-    ${styles.rightPanel.analysisTab.button_Run_AnalysisTab}
-    margin-right: 1%;
-  }
-  .analysisModulesContainer {
-    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
-    margin-bottom: 1%;
-    line-height: 2em;
-    display: flex;
-    flex-direction: column;
-  }
-  .label {
-    display: flex;
-    align-items: center;
-  }
-`
 
 function staticAnalysisView (appAPI, compilerEvent) {
   this.event = new EventManager()

src/app/staticanalysis/styles/staticAnalysisView-styles.js

@@ -0,0 +1,37 @@
+var remixLib = require('remix-lib')
+var csjs = require('csjs-inject')
+
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .analysis {
+    display: flex;
+    flex-direction: column;
+  }
+  .result {
+    margin-top: 1%;
+  }
+  .buttons  {
+    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
+    display: flex;
+    align-items: center;
+  }
+  .buttonRun  {
+    ${styles.rightPanel.analysisTab.button_Run_AnalysisTab}
+    margin-right: 1%;
+  }
+  .analysisModulesContainer {
+    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
+    margin-bottom: 1%;
+    line-height: 2em;
+    display: flex;
+    flex-direction: column;
+  }
+  .label {
+    display: flex;
+    align-items: center;
+  }
+`
+
+module.exports = css

src/app/ui/dropdown.js

@@ -2,54 +2,9 @@ var yo = require('yo-yo')
 var remixLib = require('remix-lib')
 var EventManager = remixLib.EventManager
 // -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = remixLib.ui.themeChooser
-var styles = styleGuide.chooser()
 
-var css = csjs`
+var css = require('./styles/dropdown-styles')
-  .dropdown           {
+
-    ${styles.terminal.dropdown_Filter_MenuBar}
-    overflow          : visible;
-    position          : relative;
-    display           : flex;
-    flex-direction    : column;
-    margin-right      : 10px;
-  }
-  .selectbox          {
-    display           : flex;
-    align-items       : center;
-    margin            : 3px;
-    cursor            : pointer;
-  }
-  .selected           {
-    display           : inline-block;
-    min-width         : 30ch;
-    max-width         : 30ch;
-    white-space       : nowrap;
-    text-overflow     : ellipsis;
-    overflow          : hidden;
-    padding           : 3px;
-  }
-  .icon               {
-    padding           : 0px 5px;
-  }
-  .options            {
-    position          : absolute;
-    display           : flex;
-    flex-direction    : column;
-    align-items       : end;
-    top               : 24px;
-    left              : 0;
-    width             : 250px;
-    background-color  : ${styles.appProperties.dropdown_BackgroundColor};
-    border            : 1px solid ${styles.appProperties.dropdown_BorderColor};
-    border-radius     : 3px;
-    border-top        : 0;
-  }
-  .option {
-    margin: 0;
-  }
-`
 /* USAGE:
 
   var dropdown = new Dropdown({

src/app/ui/modal-dialog-custom.js

@@ -1,12 +1,7 @@
 var modal = require('./modaldialog.js')
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
+var css = require('./styles/modal-dialog-custom-styles')
 
-var css = csjs`
-  .prompt_text {
-    width: 300px;
-  }
-`
 module.exports = {
   alert: function (text) {
     modal('', yo`<div>${text}</div>`, null, { label: null })

src/app/ui/modaldialog.js

@@ -1,88 +1,5 @@
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
+var css = require('./styles/modaldialog-styles')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 1000; /* Sit on top of everything including the dragbar */
-    left: 0;
-    top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: ${styles.colors.black}; /* Fallback color */
-    background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
-  }
-  .modalHeader {
-    padding: 2px 16px;
-    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
-    display: flex;
-    justify-content: space-between;
-  }
-  .modalBody {
-    background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
-    color: ${styles.remix.modalDialog_text_Primary};
-    padding: 1.5em;
-    line-height: 1.5em;
-  }
-  .modalBody em{
-    color: ${styles.remix.modalDialog_text_Em};
-  }
-  .modalBody a{
-    color: ${styles.remix.modalDialog_text_Link};
-  }
-  .modalFooter {
-    display: flex;
-    justify-content: flex-end;
-    padding: 10px 30px;
-    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
-    text-align: right;
-    font-weight: 700;
-    cursor: pointer;
-  }
-  .modalContent {
-    position: relative;
-    background-color: ${styles.colors.black};
-    margin: auto;
-    padding: 0;
-    line-height: 18px;
-    font-size: 12px;
-    border: 1px solid ${styles.colors.grey};
-    width: 50%;
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-    -webkit-animation-name: animatetop;
-    -webkit-animation-duration: 0.4s;
-    animation-name: animatetop;
-    animation-duration: 0.4s
-  }
-  .modalFooterOk {
-    cursor: pointer;
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
-  }
-  .modalFooterCancel {
-    margin-left: 1em;
-    cursor: pointer;
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
-  }
-  .modalClose {
-    margin: auto 0;
-    color: ${styles.remix.modalDialog_Header_Footer_Color};
-    cursor: pointer;
-  }
-  @-webkit-keyframes animatetop {
-    from {top: -300px; opacity: 0}
-    to {top: 0; opacity: 1}
-  }
-  @keyframes animatetop {
-    from {top: -300px; opacity: 0}
-    to {top: 0; opacity: 1}
-  }
-`
 
 module.exports = (title, content, ok, cancel) => {
   var container = document.querySelector(`.${css.modal}`)

src/app/ui/renderer.js

@@ -2,64 +2,7 @@
 
 var $ = require('jquery')
 var yo = require('yo-yo')
-
+var css = require('./styles/renderer-styles')
-// -------------- styling ----------------------
-// var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = yo`<style>
-.sol.success,
-.sol.error,
-.sol.warning {
-    word-wrap: break-word;
-    cursor: pointer;
-    position: relative;
-    margin: 0.5em 0 1em 0;
-    border-radius: 5px;
-    line-height: 20px;
-    padding: 8px 15px;
-}
-
-.sol.success pre,
-.sol.error pre,
-.sol.warning pre {
-    overflow-y: hidden;
-    background-color: transparent;
-    margin: 0;
-    font-size: 12px;
-    border: 0 none;
-    padding: 0;
-    border-radius: 0;
-}
-
-.sol.success .close,
-.sol.error .close,
-.sol.warning .close {
-    font-weight: bold;
-    position: absolute;
-    color: hsl(0, 0%, 0%); /* black in style-guide.js */
-    top: 0;
-    right: 0;
-    padding: 0.5em;
-}
-
-.sol.error {
-    background-color: ${styles.rightPanel.message_Error_BackgroundColor};
-    border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
-    color: ${styles.rightPanel.message_Error_Color};
-}
-
-.sol.warning {
-  background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
-  color: ${styles.rightPanel.message_Warning_Color};
-}
-
-.sol.success {
-  background-color: ${styles.rightPanel.message_Success_BackgroundColor};
-  border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
-  color: ${styles.rightPanel.message_Success_Color};
-}</style>`
 
 /**
  * After refactor, the renderer is only used to render error/warning

src/app/ui/styles/dropdown-styles.js

@@ -0,0 +1,51 @@
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .dropdown           {
+    ${styles.terminal.dropdown_Filter_MenuBar}
+    overflow          : visible;
+    position          : relative;
+    display           : flex;
+    flex-direction    : column;
+    margin-right      : 10px;
+  }
+  .selectbox          {
+    display           : flex;
+    align-items       : center;
+    margin            : 3px;
+    cursor            : pointer;
+  }
+  .selected           {
+    display           : inline-block;
+    min-width         : 30ch;
+    max-width         : 30ch;
+    white-space       : nowrap;
+    text-overflow     : ellipsis;
+    overflow          : hidden;
+    padding           : 3px;
+  }
+  .icon               {
+    padding           : 0px 5px;
+  }
+  .options            {
+    position          : absolute;
+    display           : flex;
+    flex-direction    : column;
+    align-items       : end;
+    top               : 24px;
+    left              : 0;
+    width             : 250px;
+    background-color  : ${styles.appProperties.dropdown_BackgroundColor};
+    border            : 1px solid ${styles.appProperties.dropdown_BorderColor};
+    border-radius     : 3px;
+    border-top        : 0;
+  }
+  .option {
+    margin: 0;
+  }
+`
+
+module.exports = css

src/app/ui/styles/modal-dialog-custom-styles.js

@@ -0,0 +1,9 @@
+var csjs = require('csjs-inject')
+
+var css = csjs`
+  .prompt_text {
+    width: 300px;
+  }
+`
+
+module.exports = css

src/app/ui/styles/modaldialog-styles.js

@@ -0,0 +1,86 @@
+var csjs = require('csjs-inject')
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1000; /* Sit on top of everything including the dragbar */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: ${styles.colors.black}; /* Fallback color */
+    background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
+  }
+  .modalHeader {
+    padding: 2px 16px;
+    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
+    display: flex;
+    justify-content: space-between;
+  }
+  .modalBody {
+    background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
+    color: ${styles.remix.modalDialog_text_Primary};
+    padding: 1.5em;
+    line-height: 1.5em;
+  }
+  .modalBody em{
+    color: ${styles.remix.modalDialog_text_Em};
+  }
+  .modalBody a{
+    color: ${styles.remix.modalDialog_text_Link};
+  }
+  .modalFooter {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 30px;
+    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
+    text-align: right;
+    font-weight: 700;
+    cursor: pointer;
+  }
+  .modalContent {
+    position: relative;
+    background-color: ${styles.colors.black};
+    margin: auto;
+    padding: 0;
+    line-height: 18px;
+    font-size: 12px;
+    border: 1px solid ${styles.colors.grey};
+    width: 50%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+  }
+  .modalFooterOk {
+    cursor: pointer;
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
+  }
+  .modalFooterCancel {
+    margin-left: 1em;
+    cursor: pointer;
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
+  }
+  .modalClose {
+    margin: auto 0;
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
+    cursor: pointer;
+  }
+  @-webkit-keyframes animatetop {
+    from {top: -300px; opacity: 0}
+    to {top: 0; opacity: 1}
+  }
+  @keyframes animatetop {
+    from {top: -300px; opacity: 0}
+    to {top: 0; opacity: 1}
+  }
+`
+
+module.exports = css

src/app/ui/styles/renderer-styles.js

@@ -0,0 +1,59 @@
+var yo = require('yo-yo')
+
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = yo`<style>
+.sol.success,
+.sol.error,
+.sol.warning {
+    word-wrap: break-word;
+    cursor: pointer;
+    position: relative;
+    margin: 0.5em 0 1em 0;
+    border-radius: 5px;
+    line-height: 20px;
+    padding: 8px 15px;
+}
+
+.sol.success pre,
+.sol.error pre,
+.sol.warning pre {
+    overflow-y: hidden;
+    background-color: transparent;
+    margin: 0;
+    font-size: 12px;
+    border: 0 none;
+    padding: 0;
+    border-radius: 0;
+}
+
+.sol.success .close,
+.sol.error .close,
+.sol.warning .close {
+    font-weight: bold;
+    position: absolute;
+    color: hsl(0, 0%, 0%); /* black in style-guide.js */
+    top: 0;
+    right: 0;
+    padding: 0.5em;
+}
+
+.sol.error {
+    background-color: ${styles.rightPanel.message_Error_BackgroundColor};
+    border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
+    color: ${styles.rightPanel.message_Error_Color};
+}
+
+.sol.warning {
+  background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
+  color: ${styles.rightPanel.message_Warning_Color};
+}
+
+.sol.success {
+  background-color: ${styles.rightPanel.message_Success_BackgroundColor};
+  border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
+  color: ${styles.rightPanel.message_Success_Color};
+}</style>`
+
+module.exports = css

src/app/ui/styles/tooltip-styles.js

@@ -0,0 +1,39 @@
+var csjs = require('csjs-inject')
+var styleGuide = require('remix-lib').ui.themeChooser
+var styles = styleGuide.chooser()
+
+var css = csjs`
+  .tooltip {
+    z-index: 1001;
+    display: inline-block;
+    position: fixed;
+    background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor};
+    color: ${styles.remix.tooltip_CopyToClipboard_Color};
+    min-height: 50px;
+    min-width: 290px;
+    padding: 16px 24px 12px;
+    border-radius: 3px;
+    bottom: -300;
+    left: 40%;
+    font-size: 12px;
+    text-align: center;
+    -webkit-animation-name: animatebottom;
+    -webkit-animation-duration: 6s;
+    animation-name: animatebottom;
+    animation-duration: 6s
+  }
+  @-webkit-keyframes animatebottom  {
+    0% {bottom: -300px}
+    20% {bottom: 0}
+    50% {bottom: 0}
+    100% {bottom: -300px}
+  }
+  @keyframes animatebottom  {
+    0% {bottom: -300px}
+    20% {bottom: 0}
+    50% {bottom: 0}
+    100% {bottom: -300px}
+  }
+`
+
+module.exports = css

src/app/ui/tooltip.js

@@ -1,42 +1,5 @@
 var yo = require('yo-yo')
-// -------------- styling ----------------------
+var css = require('./styles/tooltip-styles')
-var csjs = require('csjs-inject')
-var styleGuide = require('remix-lib').ui.themeChooser
-var styles = styleGuide.chooser()
-
-var css = csjs`
-  .tooltip {
-    z-index: 1001;
-    display: inline-block;
-    position: fixed;
-    background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor};
-    color: ${styles.remix.tooltip_CopyToClipboard_Color};
-    min-height: 50px;
-    min-width: 290px;
-    padding: 16px 24px 12px;
-    border-radius: 3px;
-    bottom: -300;
-    left: 40%;
-    font-size: 12px;
-    text-align: center;
-    -webkit-animation-name: animatebottom;
-    -webkit-animation-duration: 6s;
-    animation-name: animatebottom;
-    animation-duration: 6s
-  }
-  @-webkit-keyframes animatebottom  {
-    0% {bottom: -300px}
-    20% {bottom: 0}
-    50% {bottom: 0}
-    100% {bottom: -300px}
-  }
-  @keyframes animatebottom  {
-    0% {bottom: -300px}
-    20% {bottom: 0}
-    50% {bottom: 0}
-    100% {bottom: -300px}
-  }
-`
 
 module.exports = function addTooltip (tooltipText) {
   var tooltip = yo`<div class=${css.tooltip}>${tooltipText}</div>`