Merge branch 'dev' into dev-frame-fixes

dist/styles/sass.css

@@ -723,6 +723,11 @@ ul li {
   border: 0;
 }
 
+.join-button {
+  padding-bottom: 100px;
+  padding-top: 100px;
+}
+
 .range {
   width: 400px;
   /* some space for the right knob */

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC3IA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACrFV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAGF;EACE;;;AC5EJ;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACzBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBALyB;;AAiC3B;EA7BE;EACA,kBANqB;;AAqCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBALyB;;AA2C3B;EAvCE;EACA,kBANqB;;AA+CvB;EA1CE;EACA,kBAJoB","file":"sass.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACrFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC3IA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACrFV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAGF;EACE;;;AAEJ;EACE;EACA;;;AChFF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACzBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBALyB;;AAiC3B;EA7BE;EACA,kBANqB;;AAqCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBALyB;;AA2C3B;EAvCE;EACA,kBANqB;;AA+CvB;EA1CE;EACA,kBAJoB","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/Annotation/AnnotatedField.purs

@@ -11,22 +11,23 @@
 -- | 2. We will need a more ambitious search algorithm for skipgrams.
 module Gargantext.Components.Annotation.AnnotatedField where
 
-import Prelude
 import Data.Maybe ( Maybe(..), maybe )
-import Data.Tuple ( Tuple )
-import Data.Tuple.Nested ( (/\) )
 --import DOM.Simple.Console (log2)
 import DOM.Simple.Event as DE
+import Data.Tuple ( Tuple )
+import Data.Tuple.Nested ( (/\) )
 import Effect ( Effect )
 import Reactix as R
 import Reactix.DOM.HTML as HTML
 import Reactix.SyntheticEvent as E
 
-import Gargantext.Types (CTabNgramType(..), TermList)
-import Gargantext.Components.Annotation.Utils ( termBootstrapClass, termClass )
-import Gargantext.Components.NgramsTable.Core
-import Gargantext.Components.Annotation.Menu ( annotationMenu, MenuType(..) )
+import Gargantext.Prelude
+
+import Gargantext.Components.Annotation.Menu ( annotationMenu, AnnotationMenu, MenuType(..) )
+import Gargantext.Components.Annotation.Utils (termClass)
+import Gargantext.Components.NgramsTable.Core (NgramsTable, NgramsTerm, findNgramTermList, highlightNgrams, normNgram)
 import Gargantext.Utils.Selection as Sel
+import Gargantext.Types (CTabNgramType(..), TermList)
 
 thisModule :: String
 thisModule = "Gargantext.Components.Annotation.AnnotatedField"
@@ -48,57 +49,16 @@ annotatedField p = R.createElement annotatedFieldComponent p []
 annotatedFieldComponent :: R.Component Props
 annotatedFieldComponent = R.hooksComponentWithModule thisModule "annotatedField" cpt
   where
-    cpt {ngrams,setTermList,text: fieldText} _ = do
+    cpt {ngrams, setTermList, text: fieldText} _ = do
       (_ /\ setRedrawMenu) <- R.useState' false
 
-      menuRef <- R.useRef Nothing
+      menuRef <- R.useRef (Nothing :: Maybe AnnotationMenu)
 
       let wrapperProps = { className: "annotated-field-wrapper" }
 
-          redrawMenu = setRedrawMenu not
-
-          hideMenu = do
-            R.setRef menuRef Nothing
-            redrawMenu
-
-          showMenu { event, text, getList, menuType } = do
-            let x = E.clientX event
-                y = E.clientY event
-                n = normNgram CTabTerms text
-                list = getList n
-                setList t = do
-                  setTermList n list t
-                  hideMenu
-            E.preventDefault event
-            --range <- Sel.getRange sel 0
-            --log2 "[showMenu] selection range" $ Sel.rangeToTuple range
-            let menu = Just
-                  { x
-                  , y
-                  , list
-                  , menuType
-                  , onClose: hideMenu
-                  , setList
-                  }
-            R.setRef menuRef menu
-            redrawMenu
-
-          onSelect :: String -> Maybe TermList -> MouseEvent -> Effect Unit
-          onSelect text mList event =
-            case mList of
-              Just list ->
-                showMenu { event, text, getList: const (Just list), menuType: SetTermListItem }
-              Nothing -> do
-                s <- Sel.getSelection
-                case s of
-                  Just sel -> do
-                    case Sel.selectionToString sel of
-                      "" -> hideMenu
-                      sel' -> do
-                        showMenu { event, text: sel', getList: findNgramTermList ngrams, menuType: NewNgram }
-                  Nothing -> hideMenu
-
-          wrap (text /\ list) = {text, list, onSelect}
+          wrap (text /\ list) = { list
+                               , onSelect: onAnnotationSelect { menuRef, ngrams, setRedrawMenu, setTermList }
+                               , text }
 
       pure $ HTML.div wrapperProps
         [ maybe (HTML.div {} []) annotationMenu $ R.readRef menuRef
@@ -113,6 +73,60 @@ compile ngrams = maybe [] (highlightNgrams CTabTerms ngrams)
 
 -- Runs
 
+onAnnotationSelect { menuRef, ngrams, setRedrawMenu, setTermList } text mList event =
+  case mList of
+    Just list ->
+      showMenu { event
+                , getList: const (Just list)
+                , menuRef
+                , menuType: SetTermListItem
+                , setRedrawMenu
+                , setTermList
+                , text }
+    Nothing -> do
+      s <- Sel.getSelection
+      case s of
+        Just sel -> do
+          case Sel.selectionToString sel of
+            "" -> hideMenu { menuRef, setRedrawMenu }
+            sel' -> do
+              showMenu { event
+                        , getList: findNgramTermList ngrams
+                        , menuRef
+                        , menuType: NewNgram
+                        , setRedrawMenu
+                        , setTermList
+                        , text: sel' }
+        Nothing -> hideMenu { menuRef, setRedrawMenu }
+
+showMenu { event, getList, menuRef, menuType, setRedrawMenu, setTermList, text } = do
+  let x = E.clientX event
+      y = E.clientY event
+      n = normNgram CTabTerms text
+      list = getList n
+      redrawMenu = setRedrawMenu not
+      setList t = do
+        setTermList n list t
+        hideMenu { menuRef, setRedrawMenu }
+  E.preventDefault event
+  --range <- Sel.getRange sel 0
+  --log2 "[showMenu] selection range" $ Sel.rangeToTuple range
+  let menu = Just
+        { x
+        , y
+        , list
+        , menuType
+        , onClose: hideMenu { menuRef, setRedrawMenu }
+        , setList
+        }
+  R.setRef menuRef menu
+  redrawMenu
+
+hideMenu { menuRef, setRedrawMenu } = do
+  let redrawMenu = setRedrawMenu not
+  R.setRef menuRef Nothing
+  redrawMenu
+
 type Run =
   ( list :: (Maybe TermList)
   , onSelect :: String -> Maybe TermList -> MouseEvent -> Effect Unit

src/Gargantext/Components/Category.purs

@@ -71,10 +71,14 @@ ratingCpt = R.hooksComponentWithModule thisModule "rating" cpt
                                   else "fa fa-star"
 
           onClick score c = \_-> do
-            setLocalCategories $ Map.insert r._id c
+            let c' = if score == c
+                      then clickAgain c
+                      else c
+
+            setLocalCategories $ Map.insert r._id c'
             void $ launchAff
                  $ putRating session nodeId
-                 $ RatingQuery {nodeIds: [r._id], rating: c}
+                 $ RatingQuery {nodeIds: [r._id], rating: c'}
 
 newtype RatingQuery =
   RatingQuery { nodeIds :: Array Int

src/Gargantext/Components/Category/Types.purs

@@ -41,6 +41,12 @@ star2score Star_2 = 2
 star2score Star_3 = 3
 star2score Star_4 = 4
 
+
+clickAgain :: Star -> Star
+clickAgain Star_0 = Star_1
+clickAgain s      = decodeStar (star2score s - 1)
+
+
 ------------------------------------------------------------------------
 data Category = Trash | UnRead | Checked | Topic | Favorite
 

src/Gargantext/Components/DocsTable.purs

@@ -374,7 +374,7 @@ pagePaintRawCpt = R.hooksComponentWithModule thisModule "pagePaintRawCpt" cpt wh
       where
         sid = sessionId session
         gi Star_1  = "fa fa-star"
-        gi _ = "fa fa-star-empty"
+        gi _       = "fa fa-star-empty"
         trashClassName Star_0 _ = "trash"
         trashClassName _ true = "active"
         trashClassName _ false = ""
@@ -389,23 +389,26 @@ pagePaintRawCpt = R.hooksComponentWithModule thisModule "pagePaintRawCpt" cpt wh
             row dv@(DocumentsView r) =
               { row:
                 T.makeRow [ -- H.div {} [ H.a { className, style, on: {click: click Favorite} } [] ]
-                            H.div { className: "" } [ docChooser { listId, mCorpusId, nodeId: r._id, selected, sidePanelTriggers, tableReload: reload } []
+                            H.div { className: "" }
+                                  [ docChooser { listId, mCorpusId, nodeId: r._id, selected, sidePanelTriggers, tableReload: reload } []
                                                                    ]
                           --, H.div { className: "column-tag flex" } [ caroussel { category: cat, nodeId, row: dv, session, setLocalCategories } [] ]
-                          , H.div { className: "column-tag flex" } [ rating { score: cat, nodeId, row: dv, session, setLocalCategories } [] ]
+                          , H.div { className: "column-tag flex" }
+                                  [ rating { score: cat, nodeId, row: dv, session, setLocalCategories } [] ]
                 --, H.input { type: "checkbox", defaultValue: checked, on: {click: click Trash} }
                 -- TODO show date: Year-Month-Day only
                 , H.div { className: tClassName } [ R2.showText r.date ]
-                , H.div { className: tClassName } [
-                   H.a { href: url frontends $ corpusDocument r._id, target: "_blank"} [ H.text r.title ]
-                 ]
+                , H.div { className: tClassName }
+                        [ H.a { href: url frontends $ corpusDocument r._id, target: "_blank"}
+                              [ H.text r.title ]
+                        ]
                 , H.div { className: tClassName } [ H.text $ if r.source == "" then "Source" else r.source ]
                 , H.div {} [ H.text $ maybe "-" show r.ngramCount ]
                 ]
               , delete: true }
               where
                 cat         = getCategory lc r
-                checked    = Star_1 == cat
+                -- checked    = Star_1 == cat
                 tClassName = trashClassName cat selected
                 className  = gi cat
                 selected   = R.readRef currentDocIdRef == Just r._id

src/Gargantext/Components/Nodes/Home.purs

@@ -292,10 +292,7 @@ homeLayoutCpt = R.hooksComponentWithModule thisModule "homeLayout" cpt
                                    } [H.text "Sorry your browser is not compatible: use Firefox or Chromium instead."]
                                    ]
 
-        joinButton = H.div { className:"flex-space-around d-flex justify-content-center" 
-                       , paddingTop: "100px"
-                       , paddingBottom: "100px"
-                       }
+        joinButton = H.div { className:"flex-space-around d-flex justify-content-center join-button" }
                        [ H.button { className: "btn btn-primary my-2"
                                   , on : {click}
                                   , title: "Connect to the server"

src/sass/_styles.sass

@@ -75,3 +75,7 @@ ul
 .frame
   iframe
     border: 0
+
+.join-button
+  padding-bottom: 100px
+  padding-top: 100px