Merge branch 'dev' into 465-dev-graph-explorer-recursion-error

dist/styles/bootstrap-darkster.css

@@ -5945,6 +5945,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;
@@ -5952,11 +5965,15 @@ h3 {
 }
 .b-modal__header {
   background-color: white;
+  align-items: center;
 }
 .b-modal__header__title {
   color: #FF550B;
   font-size: 21px;
 }
+.b-modal__header__close {
+  margin-right: 8px;
+}
 .b-modal__overlay {
   width: 100%;
   height: 100%;
@@ -6108,6 +6125,12 @@ h3 {
 .b-icon-button--disabled.b-icon-button--dark, .b-icon-button--deferred.b-icon-button--dark {
   color: #f2f2f2;
 }
+.b-icon-button--disabled.b-icon-button--level-1:hover::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: initial;
+}
+.b-icon-button--disabled.b-icon-button--level-2::before, .b-icon-button--disabled.b-icon-button--level-2:hover::before, .b-icon-button--deferred.b-icon-button--level-2::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: #434b53;
+}
 
 .b-fieldset {
   position: relative;
@@ -6333,6 +6356,11 @@ img {
   display: block;
 }
 
+a:focus,
+a:hover {
+  cursor: pointer;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -6571,6 +6599,49 @@ a:focus {
   z-index: initial;
 }
 
+.custom-control:not(.custom-switch) .custom-control-label::before {
+  top: 0.05rem;
+}
+.custom-control:not(.custom-switch) .custom-control-label::after {
+  top: 0.05rem;
+}
+
+.custom-control {
+  z-index: initial;
+}
+
+.font-weight-light {
+  font-weight: 300;
+}
+
+.font-weight-lighter {
+  font-weight: lighter;
+}
+
+.font-weight-normal {
+  font-weight: 400;
+}
+
+.font-weight-bold {
+  font-weight: 700;
+}
+
+.font-weight-bolder {
+  font-weight: bolder;
+}
+
+.font-family-base {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.font-family-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.font-family-heading {
+  font-family: "Comfortaa";
+}
+
 .maintree--blank::after {
   top: 0;
   right: 0;
@@ -8975,6 +9046,46 @@ a:focus {
 #portal .hidden {
   visibility: hidden;
 }
+#app .cursor-crosshair,
+#portal .cursor-crosshair {
+  cursor: crosshair;
+}
+#app .cursor-text,
+#portal .cursor-text {
+  cursor: text;
+}
+#app .cursor-move,
+#portal .cursor-move {
+  cursor: move;
+}
+#app .cursor-grab,
+#portal .cursor-grab {
+  cursor: grab;
+}
+#app .cursor-grabbing,
+#portal .cursor-grabbing {
+  cursor: grabbing;
+}
+#app .cursor-not-allowed,
+#portal .cursor-not-allowed {
+  cursor: not-allowed;
+}
+#app .cursor-all-scroll,
+#portal .cursor-all-scroll {
+  cursor: all-scroll;
+}
+#app .cursor-ew-resize,
+#portal .cursor-ew-resize {
+  cursor: ew-resize;
+}
+#app .cursor-ns-resize,
+#portal .cursor-ns-resize {
+  cursor: ns-resize;
+}
+#app .cursor-pointer,
+#portal .cursor-pointer {
+  cursor: pointer;
+}
 #app .virtual-space::after,
 #portal .virtual-space::after {
   content: "​";
@@ -9633,126 +9744,134 @@ input[type=range]:-moz-focusring {
   animation-play-state: running;
 }
 
-#user-page-header {
-  border-bottom: 1px solid black;
-}
-
-#user-page-info {
-  margin-top: 38px;
-}
-
-.tableHeader {
-  color: white;
-}
-
-#toolbar {
-  display: inline;
-}
-#toolbar ul li {
-  display: inline;
-  margin-right: 19px;
+.login-modal thead th {
+  padding: 0.3rem;
 }
-#toolbar ul li form {
-  display: inline;
+.login-modal__active-places__actions {
+  display: flex;
+  gap: 28px;
 }
 
-#horizontal-checkbox ul li {
-  display: inline;
-  float: left;
-  margin-top: 12px;
-  margin-right: 21px;
+.login-modal-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-li#rename #rename-a {
-  display: none;
+.login-modal-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  left: 125px;
+  left: 28px;
 }
-
-#create-node-tooltip {
-  position: absolute;
-  left: 96px;
-  top: -64px;
-  background-color: white;
-  z-index: 4;
+.login-modal-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-#create-node-tooltip .card-body input {
-  min-width: 200px;
+.login-modal-form__separator {
+  padding: 0.75rem calc(2* 1.25rem);
+  position: relative;
 }
-
-#file-type-tooltip {
+.login-modal-form__separator__text {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  background-color: white;
-  z-index: 4;
-}
-
-.glyphitem {
-  top: 0;
   display: inline-block;
-  float: right;
-  opacity: 0.6;
-  padding-right: 5px;
-  cursor: pointer;
-  transition: transform 0.1s ease-out 0s;
-  font-size: 15px;
-  text-align: center;
+  padding-left: 32px;
+  padding-right: 32px;
+  font-family: "Comfortaa";
+  font-size: 24px;
+  background-color: #fff;
 }
-.glyphitem:hover {
-  display: inline-block;
-  opacity: 1;
-  transform: scale(1.4);
+.login-modal-form__request-access {
+  margin-top: calc(3 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 1rem;
+  width: 200px;
+  display: block;
+  font-weight: bold;
 }
-
-#sp-container {
-  -webkit-transition: width 2s;
-  transition: width 2s;
+.login-modal-form__log-in {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.nooverflow {
-  max-width: 300px;
-  height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.login-modal-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-.nooverflow:hover {
-  overflow: visible;
-  height: auto;
+.login-modal-form__error {
+  margin-bottom: 24px;
+  color: #FF304F;
+  text-align: center;
 }
 
-.nopadding {
-  padding: 0 !important;
-  margin: 0 !important;
+.forgot-password-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-.tab-pane .reload-btn {
-  padding-right: 6px;
+.forgot-password-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  left: 28px;
 }
-
-.flex {
-  display: flex;
+.forgot-password-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-
-.flex-end {
-  display: flex;
-  justify-content: flex-end;
+.forgot-password-form__subtitle {
+  padding-top: calc(2 * 0.75rem);
+  padding-left: calc(2* 1.25rem);
+  padding-right: calc(2* 1.25rem);
+  padding-bottom: 0.75rem;
+  text-align: center;
+  font-family: "Comfortaa";
+  font-size: 24px;
 }
-
-.flex-center {
-  display: flex;
-  flew-wrap: wrap;
-  justify-content: center;
+.forgot-password-form__submit {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.flex-space-between, .flex-center {
-  display: flex;
-  justify-content: space-between;
+.forgot-password-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-
-a:focus, a:hover {
-  cursor: pointer;
+.forgot-password-form__error {
+  margin-bottom: 24px;
+  color: #FF304F;
+  text-align: center;
+}
+.forgot-password-form__success {
+  margin-bottom: 24px;
+  color: #015668;
+  text-align: center;
 }
 
 .maintree {
@@ -10274,6 +10393,15 @@ a:focus, a:hover {
   border-top: 1px solid rgba(0, 0, 0, 0.6);
 }
 
+.file-type-tooltip {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  background-color: white;
+  z-index: 4;
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;
@@ -10677,6 +10805,23 @@ select.form-control {
   font-size: 12px;
 }
 
+.glyphitem {
+  top: 0;
+  display: inline-block;
+  float: right;
+  opacity: 0.6;
+  padding-right: 5px;
+  cursor: pointer;
+  transition: transform 0.1s ease-out 0s;
+  font-size: 15px;
+  text-align: center;
+}
+.glyphitem:hover {
+  display: inline-block;
+  opacity: 1;
+  transform: scale(1.4);
+}
+
 .table tr td {
   height: 48px;
 }
@@ -11679,6 +11824,20 @@ select.form-control {
 .code-section-item .card-header .b-icon-button--disabled {
   opacity: 0.2;
 }
+.code-section-item [aria-expanded=true] {
+  transform: rotate(180deg);
+}
+
+.page-annuaire__nooverflow {
+  max-width: 300px;
+  height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.page-annuaire__nooverflow:hover {
+  overflow: visible;
+  height: auto;
+}
 
 .navbar-dark.bg-primary {
   background-color: #111111 !important;
@@ -11688,10 +11847,6 @@ select.form-control {
   color: #ccccc5;
 }
 
-#sp-container .table tr td a {
-  color: #005a9aff;
-}
-
 .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
   background-color: #495057;
   color: #DEE2E6;

dist/styles/bootstrap-default.css

@@ -5899,6 +5899,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;
@@ -5906,11 +5919,15 @@ h3 {
 }
 .b-modal__header {
   background-color: rgba(0, 0, 0, 0.03);
+  align-items: center;
 }
 .b-modal__header__title {
   color: #005a9a;
   font-size: 21px;
 }
+.b-modal__header__close {
+  margin-right: 8px;
+}
 .b-modal__overlay {
   width: 100%;
   height: 100%;
@@ -6062,6 +6079,12 @@ h3 {
 .b-icon-button--disabled.b-icon-button--dark, .b-icon-button--deferred.b-icon-button--dark {
   color: #434b53;
 }
+.b-icon-button--disabled.b-icon-button--level-1:hover::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: initial;
+}
+.b-icon-button--disabled.b-icon-button--level-2::before, .b-icon-button--disabled.b-icon-button--level-2:hover::before, .b-icon-button--deferred.b-icon-button--level-2::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: white;
+}
 
 .b-fieldset {
   position: relative;
@@ -6286,6 +6309,11 @@ img {
   display: block;
 }
 
+a:focus,
+a:hover {
+  cursor: pointer;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -6524,6 +6552,45 @@ a:focus {
   z-index: initial;
 }
 
+.custom-control:not(.custom-switch) .custom-control-label::before {
+  top: 0.05rem;
+}
+.custom-control:not(.custom-switch) .custom-control-label::after {
+  top: 0.05rem;
+}
+
+.custom-control {
+  z-index: initial;
+}
+
+.font-weight-light {
+  font-weight: 300;
+}
+
+.font-weight-lighter {
+  font-weight: lighter;
+}
+
+.font-weight-normal {
+  font-weight: 400;
+}
+
+.font-weight-bold {
+  font-weight: 700;
+}
+
+.font-weight-bolder {
+  font-weight: bolder;
+}
+
+.font-family-base {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.font-family-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .maintree--blank::after {
   top: 0;
   right: 0;
@@ -8928,6 +8995,46 @@ a:focus {
 #portal .hidden {
   visibility: hidden;
 }
+#app .cursor-crosshair,
+#portal .cursor-crosshair {
+  cursor: crosshair;
+}
+#app .cursor-text,
+#portal .cursor-text {
+  cursor: text;
+}
+#app .cursor-move,
+#portal .cursor-move {
+  cursor: move;
+}
+#app .cursor-grab,
+#portal .cursor-grab {
+  cursor: grab;
+}
+#app .cursor-grabbing,
+#portal .cursor-grabbing {
+  cursor: grabbing;
+}
+#app .cursor-not-allowed,
+#portal .cursor-not-allowed {
+  cursor: not-allowed;
+}
+#app .cursor-all-scroll,
+#portal .cursor-all-scroll {
+  cursor: all-scroll;
+}
+#app .cursor-ew-resize,
+#portal .cursor-ew-resize {
+  cursor: ew-resize;
+}
+#app .cursor-ns-resize,
+#portal .cursor-ns-resize {
+  cursor: ns-resize;
+}
+#app .cursor-pointer,
+#portal .cursor-pointer {
+  cursor: pointer;
+}
 #app .virtual-space::after,
 #portal .virtual-space::after {
   content: "​";
@@ -9586,126 +9693,132 @@ input[type=range]:-moz-focusring {
   animation-play-state: running;
 }
 
-#user-page-header {
-  border-bottom: 1px solid black;
-}
-
-#user-page-info {
-  margin-top: 38px;
-}
-
-.tableHeader {
-  color: white;
-}
-
-#toolbar {
-  display: inline;
-}
-#toolbar ul li {
-  display: inline;
-  margin-right: 19px;
+.login-modal thead th {
+  padding: 0.3rem;
 }
-#toolbar ul li form {
-  display: inline;
+.login-modal__active-places__actions {
+  display: flex;
+  gap: 28px;
 }
 
-#horizontal-checkbox ul li {
-  display: inline;
-  float: left;
-  margin-top: 12px;
-  margin-right: 21px;
+.login-modal-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-li#rename #rename-a {
-  display: none;
+.login-modal-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  left: 125px;
+  left: 28px;
 }
-
-#create-node-tooltip {
-  position: absolute;
-  left: 96px;
-  top: -64px;
-  background-color: white;
-  z-index: 4;
+.login-modal-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-#create-node-tooltip .card-body input {
-  min-width: 200px;
+.login-modal-form__separator {
+  padding: 0.75rem calc(2* 1.25rem);
+  position: relative;
 }
-
-#file-type-tooltip {
+.login-modal-form__separator__text {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  background-color: white;
-  z-index: 4;
-}
-
-.glyphitem {
-  top: 0;
   display: inline-block;
-  float: right;
-  opacity: 0.6;
-  padding-right: 5px;
-  cursor: pointer;
-  transition: transform 0.1s ease-out 0s;
-  font-size: 15px;
-  text-align: center;
+  padding-left: 32px;
+  padding-right: 32px;
+  font-size: 24px;
+  background-color: #fff;
 }
-.glyphitem:hover {
-  display: inline-block;
-  opacity: 1;
-  transform: scale(1.4);
+.login-modal-form__request-access {
+  margin-top: calc(3 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 1rem;
+  width: 200px;
+  display: block;
+  font-weight: bold;
 }
-
-#sp-container {
-  -webkit-transition: width 2s;
-  transition: width 2s;
+.login-modal-form__log-in {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.nooverflow {
-  max-width: 300px;
-  height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.login-modal-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-.nooverflow:hover {
-  overflow: visible;
-  height: auto;
+.login-modal-form__error {
+  margin-bottom: 24px;
+  color: #dc3545;
+  text-align: center;
 }
 
-.nopadding {
-  padding: 0 !important;
-  margin: 0 !important;
+.forgot-password-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-.tab-pane .reload-btn {
-  padding-right: 6px;
+.forgot-password-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  left: 28px;
 }
-
-.flex {
-  display: flex;
+.forgot-password-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-
-.flex-end {
-  display: flex;
-  justify-content: flex-end;
+.forgot-password-form__subtitle {
+  padding-top: calc(2 * 0.75rem);
+  padding-left: calc(2* 1.25rem);
+  padding-right: calc(2* 1.25rem);
+  padding-bottom: 0.75rem;
+  text-align: center;
+  font-size: 24px;
 }
-
-.flex-center {
-  display: flex;
-  flew-wrap: wrap;
-  justify-content: center;
+.forgot-password-form__submit {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.flex-space-between, .flex-center {
-  display: flex;
-  justify-content: space-between;
+.forgot-password-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-
-a:focus, a:hover {
-  cursor: pointer;
+.forgot-password-form__error {
+  margin-bottom: 24px;
+  color: #dc3545;
+  text-align: center;
+}
+.forgot-password-form__success {
+  margin-bottom: 24px;
+  color: #28a745;
+  text-align: center;
 }
 
 .maintree {
@@ -10227,6 +10340,15 @@ a:focus, a:hover {
   border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
+.file-type-tooltip {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  background-color: white;
+  z-index: 4;
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;
@@ -10630,6 +10752,23 @@ select.form-control {
   font-size: 12px;
 }
 
+.glyphitem {
+  top: 0;
+  display: inline-block;
+  float: right;
+  opacity: 0.6;
+  padding-right: 5px;
+  cursor: pointer;
+  transition: transform 0.1s ease-out 0s;
+  font-size: 15px;
+  text-align: center;
+}
+.glyphitem:hover {
+  display: inline-block;
+  opacity: 1;
+  transform: scale(1.4);
+}
+
 .table tr td {
   height: 48px;
 }
@@ -11628,6 +11767,20 @@ select.form-control {
 .code-section-item .card-header .b-icon-button--disabled {
   opacity: 0.2;
 }
+.code-section-item [aria-expanded=true] {
+  transform: rotate(180deg);
+}
+
+.page-annuaire__nooverflow {
+  max-width: 300px;
+  height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.page-annuaire__nooverflow:hover {
+  overflow: visible;
+  height: auto;
+}
 
 .btn-secondary,
 .btn-secondary:hover,

dist/styles/bootstrap-greyson.css

@@ -5654,6 +5654,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;
@@ -5661,11 +5674,15 @@ h3 {
 }
 .b-modal__header {
   background-color: rgba(0, 0, 0, 0.03);
+  align-items: center;
 }
 .b-modal__header__title {
   color: #2f3c48;
   font-size: 21px;
 }
+.b-modal__header__close {
+  margin-right: 8px;
+}
 .b-modal__overlay {
   width: 100%;
   height: 100%;
@@ -5817,6 +5834,12 @@ h3 {
 .b-icon-button--disabled.b-icon-button--dark, .b-icon-button--deferred.b-icon-button--dark {
   color: #434b53;
 }
+.b-icon-button--disabled.b-icon-button--level-1:hover::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: initial;
+}
+.b-icon-button--disabled.b-icon-button--level-2::before, .b-icon-button--disabled.b-icon-button--level-2:hover::before, .b-icon-button--deferred.b-icon-button--level-2::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: white;
+}
 
 .b-fieldset {
   position: relative;
@@ -6042,6 +6065,11 @@ img {
   display: block;
 }
 
+a:focus,
+a:hover {
+  cursor: pointer;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -6280,6 +6308,49 @@ a:focus {
   z-index: initial;
 }
 
+.custom-control:not(.custom-switch) .custom-control-label::before {
+  top: 0.05rem;
+}
+.custom-control:not(.custom-switch) .custom-control-label::after {
+  top: 0.05rem;
+}
+
+.custom-control {
+  z-index: initial;
+}
+
+.font-weight-light {
+  font-weight: 300;
+}
+
+.font-weight-lighter {
+  font-weight: lighter;
+}
+
+.font-weight-normal {
+  font-weight: 400;
+}
+
+.font-weight-bold {
+  font-weight: 700;
+}
+
+.font-weight-bolder {
+  font-weight: bolder;
+}
+
+.font-family-base {
+  font-family: "Muli";
+}
+
+.font-family-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.font-family-heading {
+  font-family: "Oswald";
+}
+
 .maintree--blank::after {
   top: 0;
   right: 0;
@@ -8684,6 +8755,46 @@ a:focus {
 #portal .hidden {
   visibility: hidden;
 }
+#app .cursor-crosshair,
+#portal .cursor-crosshair {
+  cursor: crosshair;
+}
+#app .cursor-text,
+#portal .cursor-text {
+  cursor: text;
+}
+#app .cursor-move,
+#portal .cursor-move {
+  cursor: move;
+}
+#app .cursor-grab,
+#portal .cursor-grab {
+  cursor: grab;
+}
+#app .cursor-grabbing,
+#portal .cursor-grabbing {
+  cursor: grabbing;
+}
+#app .cursor-not-allowed,
+#portal .cursor-not-allowed {
+  cursor: not-allowed;
+}
+#app .cursor-all-scroll,
+#portal .cursor-all-scroll {
+  cursor: all-scroll;
+}
+#app .cursor-ew-resize,
+#portal .cursor-ew-resize {
+  cursor: ew-resize;
+}
+#app .cursor-ns-resize,
+#portal .cursor-ns-resize {
+  cursor: ns-resize;
+}
+#app .cursor-pointer,
+#portal .cursor-pointer {
+  cursor: pointer;
+}
 #app .virtual-space::after,
 #portal .virtual-space::after {
   content: "​";
@@ -9342,126 +9453,134 @@ input[type=range]:-moz-focusring {
   animation-play-state: running;
 }
 
-#user-page-header {
-  border-bottom: 1px solid black;
-}
-
-#user-page-info {
-  margin-top: 38px;
-}
-
-.tableHeader {
-  color: white;
-}
-
-#toolbar {
-  display: inline;
-}
-#toolbar ul li {
-  display: inline;
-  margin-right: 19px;
+.login-modal thead th {
+  padding: 0.3rem;
 }
-#toolbar ul li form {
-  display: inline;
+.login-modal__active-places__actions {
+  display: flex;
+  gap: 28px;
 }
 
-#horizontal-checkbox ul li {
-  display: inline;
-  float: left;
-  margin-top: 12px;
-  margin-right: 21px;
+.login-modal-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-li#rename #rename-a {
-  display: none;
+.login-modal-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  left: 125px;
+  left: 28px;
 }
-
-#create-node-tooltip {
-  position: absolute;
-  left: 96px;
-  top: -64px;
-  background-color: white;
-  z-index: 4;
+.login-modal-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-#create-node-tooltip .card-body input {
-  min-width: 200px;
+.login-modal-form__separator {
+  padding: 0.75rem calc(2* 1.25rem);
+  position: relative;
 }
-
-#file-type-tooltip {
+.login-modal-form__separator__text {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  background-color: white;
-  z-index: 4;
-}
-
-.glyphitem {
-  top: 0;
   display: inline-block;
-  float: right;
-  opacity: 0.6;
-  padding-right: 5px;
-  cursor: pointer;
-  transition: transform 0.1s ease-out 0s;
-  font-size: 15px;
-  text-align: center;
+  padding-left: 32px;
+  padding-right: 32px;
+  font-family: "Oswald";
+  font-size: 24px;
+  background-color: #fff;
 }
-.glyphitem:hover {
-  display: inline-block;
-  opacity: 1;
-  transform: scale(1.4);
+.login-modal-form__request-access {
+  margin-top: calc(3 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 1rem;
+  width: 200px;
+  display: block;
+  font-weight: bold;
 }
-
-#sp-container {
-  -webkit-transition: width 2s;
-  transition: width 2s;
+.login-modal-form__log-in {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.nooverflow {
-  max-width: 300px;
-  height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.login-modal-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-.nooverflow:hover {
-  overflow: visible;
-  height: auto;
+.login-modal-form__error {
+  margin-bottom: 24px;
+  color: #cc330d;
+  text-align: center;
 }
 
-.nopadding {
-  padding: 0 !important;
-  margin: 0 !important;
+.forgot-password-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-.tab-pane .reload-btn {
-  padding-right: 6px;
+.forgot-password-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  left: 28px;
 }
-
-.flex {
-  display: flex;
+.forgot-password-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-
-.flex-end {
-  display: flex;
-  justify-content: flex-end;
+.forgot-password-form__subtitle {
+  padding-top: calc(2 * 0.75rem);
+  padding-left: calc(2* 1.25rem);
+  padding-right: calc(2* 1.25rem);
+  padding-bottom: 0.75rem;
+  text-align: center;
+  font-family: "Oswald";
+  font-size: 24px;
 }
-
-.flex-center {
-  display: flex;
-  flew-wrap: wrap;
-  justify-content: center;
+.forgot-password-form__submit {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.flex-space-between, .flex-center {
-  display: flex;
-  justify-content: space-between;
+.forgot-password-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-
-a:focus, a:hover {
-  cursor: pointer;
+.forgot-password-form__error {
+  margin-bottom: 24px;
+  color: #cc330d;
+  text-align: center;
+}
+.forgot-password-form__success {
+  margin-bottom: 24px;
+  color: #3e4d59;
+  text-align: center;
 }
 
 .maintree {
@@ -9983,6 +10102,15 @@ a:focus, a:hover {
   border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
+.file-type-tooltip {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  background-color: white;
+  z-index: 4;
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;
@@ -10386,6 +10514,23 @@ select.form-control {
   font-size: 12px;
 }
 
+.glyphitem {
+  top: 0;
+  display: inline-block;
+  float: right;
+  opacity: 0.6;
+  padding-right: 5px;
+  cursor: pointer;
+  transition: transform 0.1s ease-out 0s;
+  font-size: 15px;
+  text-align: center;
+}
+.glyphitem:hover {
+  display: inline-block;
+  opacity: 1;
+  transform: scale(1.4);
+}
+
 .table tr td {
   height: 48px;
 }
@@ -11388,5 +11533,19 @@ select.form-control {
 .code-section-item .card-header .b-icon-button--disabled {
   opacity: 0.2;
 }
+.code-section-item [aria-expanded=true] {
+  transform: rotate(180deg);
+}
+
+.page-annuaire__nooverflow {
+  max-width: 300px;
+  height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.page-annuaire__nooverflow:hover {
+  overflow: visible;
+  height: auto;
+}
 
 /*# sourceMappingURL=bootstrap-greyson.css.map */

dist/styles/bootstrap-herbie.css

@@ -5902,6 +5902,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;
@@ -5909,11 +5922,15 @@ h3 {
 }
 .b-modal__header {
   background-color: rgba(0, 0, 0, 0.03);
+  align-items: center;
 }
 .b-modal__header__title {
   color: #083358;
   font-size: 21px;
 }
+.b-modal__header__close {
+  margin-right: 8px;
+}
 .b-modal__overlay {
   width: 100%;
   height: 100%;
@@ -6065,6 +6082,12 @@ h3 {
 .b-icon-button--disabled.b-icon-button--dark, .b-icon-button--deferred.b-icon-button--dark {
   color: #434b53;
 }
+.b-icon-button--disabled.b-icon-button--level-1:hover::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: initial;
+}
+.b-icon-button--disabled.b-icon-button--level-2::before, .b-icon-button--disabled.b-icon-button--level-2:hover::before, .b-icon-button--deferred.b-icon-button--level-2::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: white;
+}
 
 .b-fieldset {
   position: relative;
@@ -6290,6 +6313,11 @@ img {
   display: block;
 }
 
+a:focus,
+a:hover {
+  cursor: pointer;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -6528,6 +6556,49 @@ a:focus {
   z-index: initial;
 }
 
+.custom-control:not(.custom-switch) .custom-control-label::before {
+  top: 0.05rem;
+}
+.custom-control:not(.custom-switch) .custom-control-label::after {
+  top: 0.05rem;
+}
+
+.custom-control {
+  z-index: initial;
+}
+
+.font-weight-light {
+  font-weight: 300;
+}
+
+.font-weight-lighter {
+  font-weight: lighter;
+}
+
+.font-weight-normal {
+  font-weight: 400;
+}
+
+.font-weight-bold {
+  font-weight: 700;
+}
+
+.font-weight-bolder {
+  font-weight: bolder;
+}
+
+.font-family-base {
+  font-family: "Nunito";
+}
+
+.font-family-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.font-family-heading {
+  font-family: "Crete Round";
+}
+
 .maintree--blank::after {
   top: 0;
   right: 0;
@@ -8932,6 +9003,46 @@ a:focus {
 #portal .hidden {
   visibility: hidden;
 }
+#app .cursor-crosshair,
+#portal .cursor-crosshair {
+  cursor: crosshair;
+}
+#app .cursor-text,
+#portal .cursor-text {
+  cursor: text;
+}
+#app .cursor-move,
+#portal .cursor-move {
+  cursor: move;
+}
+#app .cursor-grab,
+#portal .cursor-grab {
+  cursor: grab;
+}
+#app .cursor-grabbing,
+#portal .cursor-grabbing {
+  cursor: grabbing;
+}
+#app .cursor-not-allowed,
+#portal .cursor-not-allowed {
+  cursor: not-allowed;
+}
+#app .cursor-all-scroll,
+#portal .cursor-all-scroll {
+  cursor: all-scroll;
+}
+#app .cursor-ew-resize,
+#portal .cursor-ew-resize {
+  cursor: ew-resize;
+}
+#app .cursor-ns-resize,
+#portal .cursor-ns-resize {
+  cursor: ns-resize;
+}
+#app .cursor-pointer,
+#portal .cursor-pointer {
+  cursor: pointer;
+}
 #app .virtual-space::after,
 #portal .virtual-space::after {
   content: "​";
@@ -9590,126 +9701,134 @@ input[type=range]:-moz-focusring {
   animation-play-state: running;
 }
 
-#user-page-header {
-  border-bottom: 1px solid black;
-}
-
-#user-page-info {
-  margin-top: 38px;
-}
-
-.tableHeader {
-  color: white;
-}
-
-#toolbar {
-  display: inline;
-}
-#toolbar ul li {
-  display: inline;
-  margin-right: 19px;
+.login-modal thead th {
+  padding: 0.3rem;
 }
-#toolbar ul li form {
-  display: inline;
+.login-modal__active-places__actions {
+  display: flex;
+  gap: 28px;
 }
 
-#horizontal-checkbox ul li {
-  display: inline;
-  float: left;
-  margin-top: 12px;
-  margin-right: 21px;
+.login-modal-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-li#rename #rename-a {
-  display: none;
+.login-modal-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  left: 125px;
+  left: 28px;
 }
-
-#create-node-tooltip {
-  position: absolute;
-  left: 96px;
-  top: -64px;
-  background-color: white;
-  z-index: 4;
+.login-modal-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-#create-node-tooltip .card-body input {
-  min-width: 200px;
+.login-modal-form__separator {
+  padding: 0.75rem calc(2* 1.25rem);
+  position: relative;
 }
-
-#file-type-tooltip {
+.login-modal-form__separator__text {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  background-color: white;
-  z-index: 4;
-}
-
-.glyphitem {
-  top: 0;
   display: inline-block;
-  float: right;
-  opacity: 0.6;
-  padding-right: 5px;
-  cursor: pointer;
-  transition: transform 0.1s ease-out 0s;
-  font-size: 15px;
-  text-align: center;
+  padding-left: 32px;
+  padding-right: 32px;
+  font-family: "Crete Round";
+  font-size: 24px;
+  background-color: #fff;
 }
-.glyphitem:hover {
-  display: inline-block;
-  opacity: 1;
-  transform: scale(1.4);
+.login-modal-form__request-access {
+  margin-top: calc(3 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 1rem;
+  width: 200px;
+  display: block;
+  font-weight: bold;
 }
-
-#sp-container {
-  -webkit-transition: width 2s;
-  transition: width 2s;
+.login-modal-form__log-in {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.nooverflow {
-  max-width: 300px;
-  height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.login-modal-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-.nooverflow:hover {
-  overflow: visible;
-  height: auto;
+.login-modal-form__error {
+  margin-bottom: 24px;
+  color: #FF4057;
+  text-align: center;
 }
 
-.nopadding {
-  padding: 0 !important;
-  margin: 0 !important;
+.forgot-password-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-.tab-pane .reload-btn {
-  padding-right: 6px;
+.forgot-password-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  left: 28px;
 }
-
-.flex {
-  display: flex;
+.forgot-password-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-
-.flex-end {
-  display: flex;
-  justify-content: flex-end;
+.forgot-password-form__subtitle {
+  padding-top: calc(2 * 0.75rem);
+  padding-left: calc(2* 1.25rem);
+  padding-right: calc(2* 1.25rem);
+  padding-bottom: 0.75rem;
+  text-align: center;
+  font-family: "Crete Round";
+  font-size: 24px;
 }
-
-.flex-center {
-  display: flex;
-  flew-wrap: wrap;
-  justify-content: center;
+.forgot-password-form__submit {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.flex-space-between, .flex-center {
-  display: flex;
-  justify-content: space-between;
+.forgot-password-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-
-a:focus, a:hover {
-  cursor: pointer;
+.forgot-password-form__error {
+  margin-bottom: 24px;
+  color: #FF4057;
+  text-align: center;
+}
+.forgot-password-form__success {
+  margin-bottom: 24px;
+  color: #0074E4;
+  text-align: center;
 }
 
 .maintree {
@@ -10231,6 +10350,15 @@ a:focus, a:hover {
   border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
+.file-type-tooltip {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  background-color: white;
+  z-index: 4;
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;
@@ -10634,6 +10762,23 @@ select.form-control {
   font-size: 12px;
 }
 
+.glyphitem {
+  top: 0;
+  display: inline-block;
+  float: right;
+  opacity: 0.6;
+  padding-right: 5px;
+  cursor: pointer;
+  transition: transform 0.1s ease-out 0s;
+  font-size: 15px;
+  text-align: center;
+}
+.glyphitem:hover {
+  display: inline-block;
+  opacity: 1;
+  transform: scale(1.4);
+}
+
 .table tr td {
   height: 48px;
 }
@@ -11636,5 +11781,19 @@ select.form-control {
 .code-section-item .card-header .b-icon-button--disabled {
   opacity: 0.2;
 }
+.code-section-item [aria-expanded=true] {
+  transform: rotate(180deg);
+}
+
+.page-annuaire__nooverflow {
+  max-width: 300px;
+  height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.page-annuaire__nooverflow:hover {
+  overflow: visible;
+  height: auto;
+}
 
 /*# sourceMappingURL=bootstrap-herbie.css.map */

dist/styles/bootstrap-monotony.css

@@ -5903,6 +5903,19 @@ h3 {
   box-shadow: unset;
 }
 
+.b-form-checkbox {
+  cursor: pointer;
+}
+.b-form-checkbox:focus {
+  outline: 0;
+}
+.b-form-checkbox--disabled, .b-form-checkbox--deferred, .b-form-checkbox--idled {
+  cursor: default;
+}
+.b-form-checkbox--disabled:focus, .b-form-checkbox--deferred:focus, .b-form-checkbox--idled:focus {
+  outline: 0;
+}
+
 .b-modal__content {
   background-color: #fff;
   margin-left: 1.75rem;
@@ -5910,11 +5923,15 @@ h3 {
 }
 .b-modal__header {
   background-color: rgba(0, 0, 0, 0.03);
+  align-items: center;
 }
 .b-modal__header__title {
   color: #222222;
   font-size: 21px;
 }
+.b-modal__header__close {
+  margin-right: 8px;
+}
 .b-modal__overlay {
   width: 100%;
   height: 100%;
@@ -6066,6 +6083,12 @@ h3 {
 .b-icon-button--disabled.b-icon-button--dark, .b-icon-button--deferred.b-icon-button--dark {
   color: #434b53;
 }
+.b-icon-button--disabled.b-icon-button--level-1:hover::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: initial;
+}
+.b-icon-button--disabled.b-icon-button--level-2::before, .b-icon-button--disabled.b-icon-button--level-2:hover::before, .b-icon-button--deferred.b-icon-button--level-2::before, .b-icon-button--deferred.b-icon-button--level-2:hover::before {
+  background-color: white;
+}
 
 .b-fieldset {
   position: relative;
@@ -6291,6 +6314,11 @@ img {
   display: block;
 }
 
+a:focus,
+a:hover {
+  cursor: pointer;
+}
+
 .form-group {
   position: relative;
   margin-bottom: 24px;
@@ -6529,6 +6557,49 @@ a:focus {
   z-index: initial;
 }
 
+.custom-control:not(.custom-switch) .custom-control-label::before {
+  top: 0.05rem;
+}
+.custom-control:not(.custom-switch) .custom-control-label::after {
+  top: 0.05rem;
+}
+
+.custom-control {
+  z-index: initial;
+}
+
+.font-weight-light {
+  font-weight: 300;
+}
+
+.font-weight-lighter {
+  font-weight: lighter;
+}
+
+.font-weight-normal {
+  font-weight: 400;
+}
+
+.font-weight-bold {
+  font-weight: 700;
+}
+
+.font-weight-bolder {
+  font-weight: bolder;
+}
+
+.font-family-base {
+  font-family: "Montserrat";
+}
+
+.font-family-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.font-family-heading {
+  font-family: "Open Sans";
+}
+
 .maintree--blank::after {
   top: 0;
   right: 0;
@@ -8933,6 +9004,46 @@ a:focus {
 #portal .hidden {
   visibility: hidden;
 }
+#app .cursor-crosshair,
+#portal .cursor-crosshair {
+  cursor: crosshair;
+}
+#app .cursor-text,
+#portal .cursor-text {
+  cursor: text;
+}
+#app .cursor-move,
+#portal .cursor-move {
+  cursor: move;
+}
+#app .cursor-grab,
+#portal .cursor-grab {
+  cursor: grab;
+}
+#app .cursor-grabbing,
+#portal .cursor-grabbing {
+  cursor: grabbing;
+}
+#app .cursor-not-allowed,
+#portal .cursor-not-allowed {
+  cursor: not-allowed;
+}
+#app .cursor-all-scroll,
+#portal .cursor-all-scroll {
+  cursor: all-scroll;
+}
+#app .cursor-ew-resize,
+#portal .cursor-ew-resize {
+  cursor: ew-resize;
+}
+#app .cursor-ns-resize,
+#portal .cursor-ns-resize {
+  cursor: ns-resize;
+}
+#app .cursor-pointer,
+#portal .cursor-pointer {
+  cursor: pointer;
+}
 #app .virtual-space::after,
 #portal .virtual-space::after {
   content: "​";
@@ -9591,126 +9702,134 @@ input[type=range]:-moz-focusring {
   animation-play-state: running;
 }
 
-#user-page-header {
-  border-bottom: 1px solid black;
-}
-
-#user-page-info {
-  margin-top: 38px;
-}
-
-.tableHeader {
-  color: white;
-}
-
-#toolbar {
-  display: inline;
-}
-#toolbar ul li {
-  display: inline;
-  margin-right: 19px;
+.login-modal thead th {
+  padding: 0.3rem;
 }
-#toolbar ul li form {
-  display: inline;
+.login-modal__active-places__actions {
+  display: flex;
+  gap: 28px;
 }
 
-#horizontal-checkbox ul li {
-  display: inline;
-  float: left;
-  margin-top: 12px;
-  margin-right: 21px;
+.login-modal-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-li#rename #rename-a {
-  display: none;
+.login-modal-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  left: 125px;
+  left: 28px;
 }
-
-#create-node-tooltip {
-  position: absolute;
-  left: 96px;
-  top: -64px;
-  background-color: white;
-  z-index: 4;
+.login-modal-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-#create-node-tooltip .card-body input {
-  min-width: 200px;
+.login-modal-form__separator {
+  padding: 0.75rem calc(2* 1.25rem);
+  position: relative;
 }
-
-#file-type-tooltip {
+.login-modal-form__separator__text {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
-  background-color: white;
-  z-index: 4;
-}
-
-.glyphitem {
-  top: 0;
   display: inline-block;
-  float: right;
-  opacity: 0.6;
-  padding-right: 5px;
-  cursor: pointer;
-  transition: transform 0.1s ease-out 0s;
-  font-size: 15px;
-  text-align: center;
+  padding-left: 32px;
+  padding-right: 32px;
+  font-family: "Open Sans";
+  font-size: 24px;
+  background-color: #fff;
 }
-.glyphitem:hover {
-  display: inline-block;
-  opacity: 1;
-  transform: scale(1.4);
+.login-modal-form__request-access {
+  margin-top: calc(3 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 1rem;
+  width: 200px;
+  display: block;
+  font-weight: bold;
 }
-
-#sp-container {
-  -webkit-transition: width 2s;
-  transition: width 2s;
+.login-modal-form__log-in {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.nooverflow {
-  max-width: 300px;
-  height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.login-modal-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-.nooverflow:hover {
-  overflow: visible;
-  height: auto;
+.login-modal-form__error {
+  margin-bottom: 24px;
+  color: #434343;
+  text-align: center;
 }
 
-.nopadding {
-  padding: 0 !important;
-  margin: 0 !important;
+.forgot-password-form__title {
+  position: relative;
+  background-color: #dee2e6;
+  padding: 0.75rem 1.25rem;
+  text-align: center;
+  margin-top: -1rem;
+  margin-left: -1rem;
+  margin-right: -1rem;
 }
-
-.tab-pane .reload-btn {
-  padding-right: 6px;
+.forgot-password-form__title__return {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  left: 28px;
 }
-
-.flex {
-  display: flex;
+.forgot-password-form__title__text {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 20px;
+  font-weight: bold;
 }
-
-.flex-end {
-  display: flex;
-  justify-content: flex-end;
+.forgot-password-form__subtitle {
+  padding-top: calc(2 * 0.75rem);
+  padding-left: calc(2* 1.25rem);
+  padding-right: calc(2* 1.25rem);
+  padding-bottom: 0.75rem;
+  text-align: center;
+  font-family: "Open Sans";
+  font-size: 24px;
 }
-
-.flex-center {
-  display: flex;
-  flew-wrap: wrap;
-  justify-content: center;
+.forgot-password-form__submit {
+  padding: 0.5rem 1rem;
+  width: 200px;
+  margin-bottom: calc(2 * 0.75rem);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.75rem;
+  display: block;
+  font-weight: bold;
 }
-
-.flex-space-between, .flex-center {
-  display: flex;
-  justify-content: space-between;
+.forgot-password-form__form {
+  margin: 0 auto;
+  width: 520px;
 }
-
-a:focus, a:hover {
-  cursor: pointer;
+.forgot-password-form__error {
+  margin-bottom: 24px;
+  color: #434343;
+  text-align: center;
+}
+.forgot-password-form__success {
+  margin-bottom: 24px;
+  color: #333333;
+  text-align: center;
 }
 
 .maintree {
@@ -10232,6 +10351,15 @@ a:focus, a:hover {
   border-top: 1px solid rgba(0, 0, 0, 0.125);
 }
 
+.file-type-tooltip {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  background-color: white;
+  z-index: 4;
+}
+
 .code-editor .editor .code-area {
   flex-grow: 1;
   max-height: 200px;
@@ -10635,6 +10763,23 @@ select.form-control {
   font-size: 12px;
 }
 
+.glyphitem {
+  top: 0;
+  display: inline-block;
+  float: right;
+  opacity: 0.6;
+  padding-right: 5px;
+  cursor: pointer;
+  transition: transform 0.1s ease-out 0s;
+  font-size: 15px;
+  text-align: center;
+}
+.glyphitem:hover {
+  display: inline-block;
+  opacity: 1;
+  transform: scale(1.4);
+}
+
 .table tr td {
   height: 48px;
 }
@@ -11637,5 +11782,19 @@ select.form-control {
 .code-section-item .card-header .b-icon-button--disabled {
   opacity: 0.2;
 }
+.code-section-item [aria-expanded=true] {
+  transform: rotate(180deg);
+}
+
+.page-annuaire__nooverflow {
+  max-width: 300px;
+  height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.page-annuaire__nooverflow:hover {
+  overflow: visible;
+  height: auto;
+}
 
 /*# sourceMappingURL=bootstrap-monotony.css.map */

package.json

 {
     "name": "Gargantext",
-    "version": "0.0.6.8.5",
+    "version": "0.0.6.8.5.1",
     "scripts": {
         "generate-purs-packages-nix": "./nix/generate-purs-packages.nix",
         "generate-psc-packages-nix": "./nix/generate-packages-json.bash",

src/Gargantext/Components/Bootstrap/Bootstrap.purs

@@ -9,6 +9,7 @@ import Gargantext.Components.Bootstrap.Caveat(caveat) as Exports
 import Gargantext.Components.Bootstrap.Cloak (cloak) as Exports
 import Gargantext.Components.Bootstrap.ContextMenu(contextMenu, contextMenuItem) as Exports
 import Gargantext.Components.Bootstrap.Fieldset(fieldset) as Exports
+import Gargantext.Components.Bootstrap.FormCheckbox(formCheckbox) as Exports
 import Gargantext.Components.Bootstrap.FormInput(formInput) as Exports
 import Gargantext.Components.Bootstrap.FormSelect(formSelect, formSelect') as Exports
 import Gargantext.Components.Bootstrap.FormTextarea(formTextarea) as Exports
@@ -36,4 +37,6 @@ import Gargantext.Components.Bootstrap.Shortcut(
   , code', code_
   , label', label_
   , p', p_
+  , td', td_
+  , th', th_
   ) as Exports

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs

@@ -11,7 +11,8 @@ import Data.Maybe (Maybe(..))
 import Data.UUID as UUID
 import Effect (Effect)
 import Effect.Uncurried (EffectFn2, runEffectFn2)
-import Gargantext.Components.Bootstrap.Types (ModalSizing(..))
+import Gargantext.Components.Bootstrap.IconButton (iconButton)
+import Gargantext.Components.Bootstrap.Types (Elevation(..), ModalSizing(..))
 import Gargantext.Hooks.UpdateEffect (useUpdateEffect1')
 import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
@@ -188,17 +189,12 @@ component = R.memo' $ R.hooksComponent componentName cpt where
                     { className: componentName <> "__header__title" }
                     [ H.text title' ]
                 ,
-                  H.button
-                  { type: "button"
+                  iconButton
+                  { name: "times"
+                  , callback: onCloseButtonClick
+                  , elevation: Level2
+                  , className: componentName <> "__header__close"
                   }
-                  [
-                    H.a
-                    {
-                      on: { click: onCloseButtonClick }
-                    , className: "btn fa fa-times"
-                    }
-                    []
-                  ]
                 ]
             ,
               -- Body

src/Gargantext/Components/Bootstrap/Form/FormCheckbox.purs

+module Gargantext.Components.Bootstrap.FormCheckbox (formCheckbox) where
+
+import Gargantext.Prelude
+
+import Data.Foldable (elem, intercalate)
+import Effect (Effect)
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Unsafe.Coerce (unsafeCoerce)
+
+type Props =
+  ( callback    :: Boolean -> Effect Unit
+  , value       :: Boolean
+  | Options
+  )
+
+type Options =
+  ( status      :: ComponentStatus
+  , className   :: String
+  )
+
+options :: Record Options
+options =
+  { status      : Enabled
+  , className   : ""
+  }
+
+-- | Structural Component for an <input type="checkbox">
+-- |
+-- |    - not using "bootstrap" here, as their checkbox does not have many
+-- |      feature (sizing, colour variant), and their use of checkbox/label
+-- |      is far too opinionated
+formCheckbox :: forall r. R2.OptLeaf Options Props r
+formCheckbox = R2.optLeaf component options
+
+componentName :: String
+componentName = "b-form-checkbox"
+
+component :: R.Component Props
+component = R.hooksComponent componentName cpt where
+  cpt props@{ callback
+            , status
+            } _ = do
+    -- Computed
+    className <- pure $ intercalate " "
+      -- provided custom className
+      [ props.className
+      -- BEM classNames
+      , componentName
+      , componentName <> "--" <> show status
+      ]
+
+    change <- pure $ onChange status callback
+    -- Render
+    pure $
+
+      H.input
+      { className
+      , on: { change }
+      , type: "checkbox"
+      , disabled: elem status [ Disabled ]
+      , readOnly: elem status [ Idled ]
+      , value: props.value
+      , checked: props.value
+      }
+
+-- | * Change event will effectively be triggered according to the
+-- | component status props
+-- | * Also directly returns the newly input value
+-- | (usage not so different from `targetValue` of ReactBasic)
+onChange :: forall event.
+     ComponentStatus
+  -> (Boolean -> Effect Unit)
+  -> event
+  -> Effect Unit
+onChange status callback event = do
+  if   status == Enabled
+  then callback $ (unsafeCoerce event).target.checked
+  else pure unit

src/Gargantext/Components/Bootstrap/Shortcut.purs

@@ -12,6 +12,8 @@ module Gargantext.Components.Bootstrap.Shortcut
   , code', code_
   , label', label_
   , p', p_
+  , td', td_
+  , th', th_
   ) where
 
 import Reactix as R
@@ -121,3 +123,19 @@ p' props content = H.p props [ H.text content ]
 -- | Shorthand for using HTML <p> without writing its text node nor props
 p_ :: String -> R.Element
 p_ content = H.p {} [ H.text content ]
+
+-- | Shorthand for using HTML <td> without writing its text node
+td' :: forall r. Record r -> String -> R.Element
+td' props content = H.td props [ H.text content ]
+
+-- | Shorthand for using HTML <td> without writing its text node nor props
+td_ :: String -> R.Element
+td_ content = H.td {} [ H.text content ]
+
+-- | Shorthand for using HTML <th> without writing its text node
+th' :: forall r. Record r -> String -> R.Element
+th' props content = H.th props [ H.text content ]
+
+-- | Shorthand for using HTML <th> without writing its text node nor props
+th_ :: String -> R.Element
+th_ content = H.th {} [ H.text content ]

src/Gargantext/Components/Category.purs

@@ -120,7 +120,7 @@ carousselCpt :: R.Component CarousselProps
 carousselCpt = here.component "caroussel" cpt
   where
     cpt { category, nodeId, row: DocumentsView r, session, setLocalCategories } _ = do
-      pure $ H.div {className:"flex"} divs
+      pure $ H.div {className:"d-flex"} divs
       where
         divs = map (\c -> if category == c
                             then

src/Gargantext/Components/FacetsTable.purs

@@ -18,7 +18,6 @@ import Data.Show.Generic (genericShow)
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Aff (launchAff_)
-import Effect.Class (liftEffect)
 import Gargantext.Components.Category (CategoryQuery(..), putCategories)
 import Gargantext.Components.Category.Types (Category(..), decodeCategory, favCategory)
 import Gargantext.Components.DocsTable.Types (showSource)

src/Gargantext/Components/Forms.purs

-module Gargantext.Components.Forms where
-
-import Record as Record
-import Reactix as R
-import Reactix.DOM.HTML as H
-import Gargantext.Utils.Reactix as R2
-
-clearfix :: R.Element
-clearfix = H.div { className: "clearfix" } []
-
-formGroup :: Array R.Element -> R.Element
-formGroup = H.div { className: "form-group" }
-
-center :: Array R.Element -> R.Element
-center = H.div { className: "center" }
-
-card :: Array R.Element -> R.Element
-card = H.div { className: "card" }
-
-cardBlock :: Array R.Element -> R.Element
-cardBlock = H.div { className: "card-block" }
-
-cardGroup :: Array R.Element -> R.Element
-cardGroup = H.div { className: "card-group" }

src/Gargantext/Components/GraphExplorer/Sidebar.purs

@@ -725,19 +725,7 @@ sendPatch termList session (GET.MetaData metaData) node = do
 
 
 
-------------------------------------------------------------------------
-
-            {-, H.div { className: "col-md-12", id: "horizontal-checkbox" }
-              [ H.ul {}
-                [ checkbox "Pubs"
-                , checkbox "Projects"
-                , checkbox "Patents"
-                , checkbox "Others"
-                ]
-              ]
-              -}
---------------------------------------------------------------------------
-
+-----------------------------------------------------
 documentation :: Lang -> R.Element
 documentation _ =
 

src/Gargantext/Components/Login/ForgotPassword.purs

-module Gargantext.Components.Login.ForgotPassword where
-
-import Gargantext.Prelude
-
-import DOM.Simple.Event as DE
-import Data.Either (Either(..))
-import Effect (Effect)
-import Effect.Aff (launchAff_)
-import Effect.Class (liftEffect)
-import Formula as F
-import Gargantext.Components.Forms (formGroup)
-import Gargantext.Ends (Backend)
-import Gargantext.Sessions (Sessions, postForgotPasswordRequest)
-import Gargantext.Utils.Reactix as R2
-import Reactix as R
-import Reactix.DOM.HTML as H
-import Reactix.SyntheticEvent as E
-import Toestand as T
-
-here :: R2.Here
-here = R2.here "Gargantext.Components.Login.ForgotPassword"
-
-type Email = String
-
-type Props =
-  ( backend :: Backend
-  , sessions :: T.Box Sessions )
-
-forgotPassword :: R2.Leaf Props
-forgotPassword = R2.leaf forgotPasswordCpt
-forgotPasswordCpt :: R.Component Props
-forgotPasswordCpt = here.component "forgotPassword" cpt where
-  cpt { backend, sessions } _ = do
-    email <- T.useBox ""
-    message <- T.useBox ""
-    disabled <- T.useBox false
-    
-    pure $ H.div { className: "row" }
-      [ H.form { className: "text-center col-md-12" }
-        [ H.h4 {} [ H.text "Forgot password" ]
-        , messageDisplay { message }
-        , formGroup
-          [ emailInput { email, disabled} ]
-        , submitButton { backend, email, sessions, message, disabled }
-        ]
-      ]
-
-emailInput :: R2.Leaf (email :: T.Box Email, disabled :: T.Box Boolean)
-emailInput = R2.leaf emailInputCpt
-
-emailInputCpt :: R.Component (email :: T.Box Email, disabled :: T.Box Boolean)
-emailInputCpt = here.component "emailInput" cpt where
-  cpt { email, disabled } _ = do
-    disabled' <- T.useLive T.unequal disabled  
-    pure $ F.bindInput { value: email
-                  , type: "email"
-                  , className: "form-control"
-                  , id: "id_email"
-                  , placeholder: "email"
-                  , name: "email"
-                  , maxLength: "254"
-                  , disabled: disabled' }
-
-type SubmitButtonProps =
-  ( email    :: T.Box Email
-  , message  :: T.Box String
-  , disabled :: T.Box Boolean
-  | Props )
-
-submitButton :: R2.Leaf SubmitButtonProps
-submitButton = R2.leafComponent submitButtonCpt
-submitButtonCpt :: R.Component SubmitButtonProps
-submitButtonCpt = here.component "submitButton" cpt where
-  cpt { backend, email, sessions, message, disabled} _ = do
-    email' <- T.useLive T.unequal email
-    disabled' <- T.useLive T.unequal disabled
-    
-    pure $ H.div {className: "form-group text-center"} 
-      [ H.button { className: "btn btn-primary"
-                 , disabled: disabled'
-                 , on: { click: click email' }}
-        [ H.text "Submit" ]
-      ]
-    where
-      click :: Email -> R.SyntheticEvent DE.MouseEvent -> Effect Unit
-      click email' e = do
-        liftEffect $ T.write_ true disabled
-        E.preventDefault e
-        here.log2 "email" email'
-        here.log2 "backend" backend
-        here.log2 "sessions" sessions
-        launchAff_ $ do
-          res <- postForgotPasswordRequest backend email'
-          liftEffect $ here.log2 "res" res
-          liftEffect $ case res of
-            Left s -> do
-              T.write_ false disabled
-              T.write_ s message
-            Right _ -> T.write_ "Request sent!" message
-
-messageDisplay :: R2.Leaf (message :: T.Box String)
-messageDisplay = R2.leafComponent messageDisplayCpt
-
-messageDisplayCpt :: R.Component (message :: T.Box String)
-messageDisplayCpt = here.component "messageDisplay" cpt where
-  cpt {message} _ = do
-    message' <- T.useLive T.unequal message
-
-    pure $ H.p {} [H.text message']
\ No newline at end of file

src/Gargantext/Components/Login/Form.purs

-module Gargantext.Components.Login.Form where
-
-import Prelude (Unit, bind, discard, not, notEq, pure, show, unit, ($), (&&), (*>), (<>))
-import Data.Either (Either(..))
-import DOM.Simple.Event as DE
-import Effect (Effect)
-import Effect.Aff (launchAff_)
-import Effect.Class (liftEffect)
-import Formula as F
-import Reactix as R
-import Reactix.SyntheticEvent as E
-import Reactix.DOM.HTML as H
-import Toestand as T
-import Toestand (useFocusedFields)
-import Data.String as String
-
-import Gargantext.Components.Forms (clearfix, formGroup)
-import Gargantext.Components.Login.Types (AuthRequest(..), FormType(..))
-import Gargantext.Ends (Backend)
-import Gargantext.Sessions as Sessions
-import Gargantext.Sessions (Sessions, postAuthRequest)
-import Gargantext.Utils (csrfMiddlewareToken)
-import Gargantext.Utils.Reactix as R2
-
-here :: R2.Here
-here = R2.here "Gargantext.Components.Login.Form"
-
-type Form =
-  { error    :: String
-  , username :: String
-  , password :: String
-  , agreed   :: Boolean
-  }
-
-emptyForm :: Form
-emptyForm = { error: "", username: "", password: "", agreed: false }
-
-type Boxes =
-  { error    :: T.Box String
-  , username :: T.Box String
-  , password :: T.Box String
-  , agreed   :: T.Box Boolean }
-
-formBoxes :: T.Box Form -> R.Hooks Boxes
-formBoxes box = useFocusedFields box {}
-
-type Props s v =
-  ( backend  :: Backend
-  , formType :: T.Box FormType
-  , sessions :: s
-  , visible  :: v
-  )
-
-form :: forall s v. T.ReadWrite s Sessions => T.ReadWrite v Boolean
-     => Record (Props s v) -> R.Element
-form props = R.createElement formCpt props []
-formCpt :: forall s v. T.ReadWrite s Sessions => T.ReadWrite v Boolean
-        => R.Component (Props s v)
-formCpt = here.component "form" cpt where
-  cpt { backend, formType, sessions, visible } _ = do
-    cell    <- T.useBox emptyForm
-    cursors <- useFocusedFields cell {}
-    pure $ R2.row
-      [ H.form { className: "col-md-12" }
-        [ formLoginLink backend
-        , requestAccessLink
-        , csrfTokenInput
-        , formGroup
-          [ H.p {} [ F.viewText { text: cursors.error } ]
-          , usernameInput cursors.username ]
-        , formGroup
-          [ passwordInput cursors.password
-          , clearfix ]
-        , termsCheckbox cursors.agreed
-        , submitButton { backend, formType, sessions, visible, cell }
-        , forgotPassword { formType }
-        ]]
-
--- might be wrong, all we care about is preventDefault
-type ChangeEvent = R.SyntheticEvent DE.MouseEvent
-
-formLoginLink :: Backend -> R.Element
-formLoginLink backend =
-  H.h4 { className: "text-center" } {-className: "text-muted"-}
-  [ H.text $ "Login to garg://" <> show backend ]
-
-type SubmitButtonProps s v = ( cell :: T.Box Form | Props s v )
-
-submitButton :: forall s v. T.ReadWrite s Sessions => T.Write v Boolean
-             => R2.Leaf (SubmitButtonProps s v)
-submitButton = R2.leafComponent submitButtonCpt
-
-submitButtonCpt :: forall s v. T.ReadWrite s Sessions => T.Write v Boolean
-                => R.Component (SubmitButtonProps s v)
-submitButtonCpt = here.component "submitButton" cpt where
-  cpt { backend, formType, sessions, visible, cell } _ = do
-    { agreed, username, password } <- T.useLive T.unequal cell
-    let isValid = agreed && (username `notEq` "") && (password `notEq` "")
-    pure $ H.div { className: "text-center" }
-           [ loginSubmit isValid $ submitForm { backend, formType, sessions, visible } cell ]
-
--- Attempts to submit the form
-submitForm :: forall s v. T.ReadWrite s Sessions => T.Write v Boolean
-           => Record (Props s v) -> T.Box Form -> ChangeEvent -> Effect Unit
-submitForm { backend, sessions, visible } cell e = do
-  E.preventDefault e
-  state <- T.read cell
-  launchAff_ $ do
-    res <- postAuthRequest backend (req state)
-    _ <- case res of
-      Left message -> liftEffect $ T.write (state { error = message }) cell
-      Right sess ->
-        liftEffect $
-          Sessions.change (Sessions.Login sess) sessions
-          *> T.write false visible
-          *> T.write (state { error = "" }) cell
-    pure unit
-    where
-      -- User usually copy space before or after the username and password
-      req { username, password } = AuthRequest {username:cleanString username, password:cleanString password }
-      -- req { username, password } = AuthRequest {username, password }
-
-cleanString :: String -> String
-cleanString str = String.replace (String.Pattern " ")
-                                 (String.Replacement "") str
-
-
-csrfTokenInput :: R.Element -- TODO hard-coded CSRF token
-csrfTokenInput = H.input { type: "hidden", name, value } where
-  name = "csrfmiddlewaretoken"
-  value = csrfMiddlewareToken
-
-termsCheckbox :: forall cell. T.ReadWrite cell Boolean => cell -> R.Element
-termsCheckbox checked =
-  H.div { className: "form-group form-check text-center" }
-  [ F.bindCheckbox { checked, className: "form-check-input" }
-  , H.label { className: "form-check-label" }
-    [ H.text "I hereby accept the "
-    , H.a { target: "_blank", href: termsUrl }
-      [ H.text "terms of use" ] ]]
-  where termsUrl = "http://gitlab.iscpif.fr/humanities/tofu/tree/master"
-
-requestAccessLink :: R.Element
-requestAccessLink =
-  H.div { className: "text-center" }
-  [ H.a { href, target: "_blank" } [ H.text "request access" ] ]
-  where href = "https://iscpif.fr/apply-for-a-services-account/"
-
-usernameInput :: forall cell. T.ReadWrite cell String => cell -> R.Element
-usernameInput value =
-  F.bindInput
-  { value
-  , type: "text",         className:   "form-control"
-  , id:   "id_username",  placeholder: "username"
-  , name: "username",     maxLength:   "254"
-  }
-
-passwordInput :: forall cell. T.ReadWrite cell String => cell -> R.Element
-passwordInput value =
-  F.bindInput
-  { value
-  , type: "password",     className:   "form-control"
-  , name: "password",     placeholder: "password"
-  , id:   "id_password"
-  }
-
-loginSubmit :: Boolean -> (ChangeEvent -> Effect Unit) -> R.Element
-loginSubmit isEnabled click =
-  H.button { id
-           , className
-           , disabled: not isEnabled
-           , type: "submit"
-           , on: { click } }
-  [ H.text "Login" ] where
-    id = "login-button"
-    className = "btn btn-primary btn-rounded"
-
-type ForgotPasswordProps =
-  ( formType :: T.Box FormType )
-
-forgotPassword :: R2.Leaf ForgotPasswordProps
-forgotPassword = R2.leaf forgotPasswordCpt
-forgotPasswordCpt :: R.Component ForgotPasswordProps
-forgotPasswordCpt = here.component "forgotPassword" cpt where
-  cpt { formType } _ = do
-    pure $ H.div { className: "" }
-      [ H.a { className: "",
-        on: { click } } [ H.text "Forgot password?" ]
-      ]
-    where
-      click _ = T.write_ ForgotPassword formType

src/Gargantext/Components/Login/LoginForm.purs

+module Gargantext.Components.Login.LoginForm
+  ( component
+  ) where
+
+import Gargantext.Prelude
+
+import Data.Either (Either(..))
+import Data.Foldable (foldl, intercalate)
+import Data.Maybe (Maybe(..))
+import Data.String as String
+import Data.Tuple.Nested ((/\))
+import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
+import Effect.Class (liftEffect)
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Elevation(..), Sizing(..), Variant(..))
+import Gargantext.Components.Login.Types (AuthRequest(..), FormType(..))
+import Gargantext.Ends (Backend)
+import Gargantext.Hooks.FormValidation (VForm, useFormValidation)
+import Gargantext.Hooks.FormValidation.Unboxed as FV
+import Gargantext.Hooks.StateRecord (useStateRecord)
+import Gargantext.Sessions (Session, Sessions, postAuthRequest)
+import Gargantext.Sessions as Sessions
+import Gargantext.Utils ((?))
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Record as Record
+import Record.Unsafe (unsafeSet)
+import Toestand as T
+
+here :: R2.Here
+here = R2.here "Gargantext.Components.Login.Form"
+
+type Props =
+  ( backend  :: Backend
+  , formType :: T.Box FormType
+  , sessions :: T.Box Sessions
+  , visible  :: T.Box Boolean
+  )
+
+component :: R2.Leaf Props
+component = R2.leaf componentCpt
+componentCpt :: R.Component Props
+componentCpt = here.component "main" cpt where
+  cpt { backend
+      , formType
+      , sessions
+      , visible
+      } _ = do
+    -- | States
+    -- |
+    error' /\ error
+      <- R2.useBox' (Nothing :: Maybe String)
+
+    onPending' /\ onPending
+      <- R2.useBox' false
+
+    -- | Hooks
+    -- |
+    { state
+    , bindStateKey
+    , stateBox
+    } <- useStateRecord (defaultData :: FormData)
+
+    fv <- useFormValidation
+
+    -- | Behaviors
+    -- |
+    let
+      onReturnClick :: Unit -> Effect Unit
+      onReturnClick _ = T.write_ (Manager) formType
+
+      onPasswordForgottenClick :: Unit -> Effect Unit
+      onPasswordForgottenClick _ = T.write_ (ForgotPassword) formType
+
+      onSubmit :: Unit -> Effect Unit
+      onSubmit _ = do
+
+        result <- fv.try (\_ -> formValidation state)
+
+        case result of
+
+          Left err -> here.log3 "validation error" state err
+
+          Right _  -> do
+            T.write_ true onPending
+            launchAff_
+              $   signin backend state
+              >>= case _ of
+
+                Left err -> liftEffect
+                  $   here.warn3 "request error" state err
+                  *>  T.write_ (Just err) error
+
+                Right session_ -> liftEffect
+                  $   Sessions.change (Sessions.Login session_) sessions
+                  *>  T.write_ false visible
+
+            T.write_ false onPending
+
+      -- @XXX StateRecord with distinct value types
+      onAgreedCheckboxChange :: Boolean -> Effect Unit
+      onAgreedCheckboxChange value = T.modify_
+        (\prev -> unsafeSet "agreed" value prev)
+        stateBox
+
+      -- @XXX StateRecord with distinct value types
+      onAgreedLabelClick :: Unit -> Effect Unit
+      onAgreedLabelClick _ = T.modify_
+        (\prev -> unsafeSet "agreed" (not state.agreed) prev)
+        stateBox
+
+    -- | Render
+    -- |
+    pure $
+
+      H.div
+      { className: "login-modal-form" }
+      [
+        H.div
+        { className: "login-modal-form__title" }
+        [
+          B.iconButton
+          { name: "arrow-left"
+          , className: "login-modal-form__title__return"
+          , elevation: Level2
+          , callback: onReturnClick
+          }
+        ,
+          H.span
+          { className: "login-modal-form__title__text" }
+          [
+            H.text $ "garg://" <> show backend
+          ]
+        ]
+      ,
+        H.a
+        { href: "https://iscpif.fr/apply-for-a-services-account/"
+        , target: "_blank"
+        , className: intercalate " "
+            [ "login-modal-form__request-access"
+            , "btn btn-primary"
+            ]
+        }
+        [
+          B.icon
+          { name: "hand-o-right" }
+        ,
+          B.wad_
+          [ "d-inline-block", "virtual-space", "w-2" ]
+        ,
+          H.text "Request access"
+        ]
+      ,
+        H.div
+        { className: "login-modal-form__separator" }
+        [
+          H.hr
+          {}
+        ,
+          H.span
+          { className: "login-modal-form__separator__text" }
+          [ H.text "or" ]
+        ]
+      ,
+        H.form
+        { className: "login-modal-form__form" }
+        [
+          -- (?) never used?
+          -- H.input
+          -- { type: "hidden"
+          -- , name: "csrfmiddlewaretoken"
+          -- , value: csrfMiddlewareToken
+          -- }
+
+          -- Username
+          H.div
+          { className: intercalate " "
+              [ "form-group"
+              , (fv.hasError' "username") ?
+                  "form-group--error" $
+                  mempty
+              ]
+          }
+          [
+            H.div { className: "form-group__label" }
+            [
+              H.label {} [ H.text "Username" ]
+            ]
+          ,
+            H.div { className: "form-group__field" }
+            [
+              B.formInput $
+              { size: LargeSize
+              } `Record.merge` bindStateKey "username"
+            ]
+          ]
+        ,
+          -- Password
+          H.div
+          { className: intercalate " "
+              [ "form-group"
+              , (fv.hasError' "password") ?
+                  "form-group--error" $
+                  mempty
+              ]
+          }
+          [
+            H.div { className: "form-group__label" }
+            [
+              H.label {} [ H.text "Password" ]
+            ]
+          ,
+            H.div { className: "form-group__field" }
+            [
+              B.formInput $
+              { size: LargeSize
+              , type: "password"
+              } `Record.merge` bindStateKey "password"
+            ,
+              H.a
+              { on: { click: onPasswordForgottenClick }
+              , className: "font-size-95 text-decoration-underline float-right"
+              }
+              [ H.text "Password forgotten" ]
+            ]
+          ]
+        ,
+          -- Agreed
+          H.div
+          { className: intercalate " "
+              [ "form-group"
+              , (fv.hasError' "agreed") ?
+                  "form-group--error" $
+                  mempty
+              , "d-flex"
+              ]
+          }
+          [
+            H.div
+            { className: "form-group__field" }
+            [
+              B.formCheckbox
+              { value: state.agreed
+              , callback: onAgreedCheckboxChange
+              }
+            ]
+          ,
+            H.div
+            { className: intercalate " "
+                [ "form-group__label"
+                , "px-1"
+                ]
+            }
+            [
+              H.label
+              { on: { click: onAgreedLabelClick }
+              , className: "cursor-pointer"
+              }
+              [
+                H.text "I hereby accept the "
+              ,
+                H.a
+                { target: "_blank"
+                , className: "text-decoration-underline"
+                , href: "http://gitlab.iscpif.fr/humanities/tofu/tree/master"
+                }
+                [ H.text "terms of use" ]
+              ]
+            ]
+          ]
+        ,
+          -- Error
+          R2.fromMaybe error' $
+
+            B.div'
+            { className: "login-modal-form__error" }
+        ,
+          -- Submit
+          B.button
+          { callback: onSubmit
+          , status: onPending' ? Deferred $ Enabled
+          , variant: ButtonVariant Primary
+          , type: "submit"
+          , className: "login-modal-form__log-in"
+          }
+          [
+            B.icon
+            { name: "sign-in" }
+          ,
+            B.wad_
+            [ "d-inline-block", "virtual-space", "w-1" ]
+          ,
+            H.text "Log in"
+          ]
+        ]
+      ]
+
+type FormData =
+  { username  :: String
+  , password  :: String
+  , agreed    :: Boolean
+  }
+
+defaultData :: FormData
+defaultData =
+  { username  : ""
+  , password  : ""
+  , agreed    : false
+  }
+
+formValidation :: FormData -> Effect VForm
+formValidation r = foldl append mempty rules
+  where
+    rules =
+      [ FV.nonEmpty "username" r.username
+      , FV.nonEmpty "password" r.password
+      , FV.equals "agreed" true r.agreed
+      ]
+
+-----------------------------------------------
+
+signin ::
+      Backend
+  ->  FormData
+  ->  Aff (Either String Session)
+signin backend { username, password } = postAuthRequest backend request
+  where
+    -- (?) is `cleanString` necessary?
+    request
+      = AuthRequest { username: cleanString username
+                    , password: cleanString password
+                    }
+
+cleanString :: String -> String
+cleanString str =
+  String.replace (String.Pattern " ")
+                 (String.Replacement "") str

src/Gargantext/Components/Login/PasswordForm.purs

+module Gargantext.Components.Login.PasswordForm
+  ( component
+  ) where
+
+import Gargantext.Prelude
+
+import Data.Either (Either(..))
+import Data.Foldable (foldl, intercalate)
+import Data.Maybe (Maybe(..))
+import Data.Tuple.Nested ((/\))
+import Effect (Effect)
+import Effect.Aff (Aff, launchAff_)
+import Effect.Class (liftEffect)
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Elevation(..), Sizing(..), Variant(..))
+import Gargantext.Components.Login.Types (FormType(..))
+import Gargantext.Ends (Backend)
+import Gargantext.Hooks.FormValidation (VForm, useFormValidation)
+import Gargantext.Hooks.FormValidation.Unboxed as FV
+import Gargantext.Hooks.StateRecord (useStateRecord)
+import Gargantext.Sessions (postForgotPasswordRequest)
+import Gargantext.Utils ((?))
+import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Record as Record
+import Toestand as T
+
+here :: R2.Here
+here = R2.here "Gargantext.Components.Login.ForgotPassword"
+
+type Props =
+  ( backend   :: Backend
+  , formType  :: T.Box FormType
+  )
+
+component :: R2.Leaf Props
+component = R2.leaf componentCpt
+componentCpt :: R.Component Props
+componentCpt = here.component "main" cpt where
+  cpt { backend
+      , formType
+      } _ = do
+    -- | States
+    -- |
+    error' /\ error
+      <- R2.useBox' (Nothing :: Maybe String)
+
+    success' /\ success
+      <- R2.useBox' (Nothing :: Maybe String)
+
+    onPending' /\ onPending
+      <- R2.useBox' false
+
+    -- | Hooks
+    -- |
+    { state
+    , bindStateKey
+    } <- useStateRecord (defaultData :: FormData)
+
+    fv <- useFormValidation
+
+    -- | Behaviors
+    -- |
+    let
+      onReturnClick :: Unit -> Effect Unit
+      onReturnClick _ = T.write_ (Login) formType
+
+      onSubmit :: Unit -> Effect Unit
+      onSubmit _ = do
+
+        result <- fv.try (\_ -> formValidation state)
+
+        case result of
+
+          Left err -> here.log3 "validation error" state err
+
+          Right _ -> do
+
+            T.write_ true onPending
+            launchAff_
+              $   sendEmail backend state
+              >>= case _ of
+
+                Left err -> liftEffect
+                  $   here.warn3 "request error" state err
+                  *>  T.write_ (Just err) error
+                  *>  T.write_ false onPending
+
+                Right _ -> liftEffect
+                  $   T.write_ (Just "Request sent!") success
+
+    -- | Render
+    -- |
+    pure $
+
+      H.div
+      { className: "forgot-password-form" }
+      [
+        H.div
+        { className: "forgot-password-form__title" }
+        [
+          B.iconButton
+          { name: "arrow-left"
+          , className: "forgot-password-form__title__return"
+          , elevation: Level2
+          , callback: onReturnClick
+          }
+        ,
+          H.span
+          { className: "forgot-password-form__title__text" }
+          [
+            H.text $ "garg://" <> show backend
+          ]
+        ]
+      ,
+        B.div'
+        { className: "forgot-password-form__subtitle" }
+        "Password forgotten"
+      ,
+        H.form
+        { className: "forgot-password-form__form" }
+        [
+          -- Username
+          H.div
+          { className: intercalate " "
+              [ "form-group"
+              , (fv.hasError' "email") ?
+                  "form-group--error" $
+                  mempty
+              ]
+          }
+          [
+            H.div { className: "form-group__label" }
+            [
+              H.label {} [ H.text "Email" ]
+            ]
+          ,
+            H.div { className: "form-group__field" }
+            [
+              B.formInput $
+              { size: LargeSize
+              } `Record.merge` bindStateKey "email"
+            ,
+              R2.when (fv.hasError' "email") $
+
+                B.div'
+                { className: "form-group__error" }
+                "Invalid email format"
+            ]
+          ]
+        ,
+          -- Error
+          R2.fromMaybe error' $
+
+            B.div'
+            { className: "forgot-password-form__error" }
+        ,
+          -- Suvvess
+          R2.fromMaybe success' $
+
+            B.div'
+            { className: "forgot-password-form__success" }
+        ,
+          -- Submit
+          B.button
+          { callback: onSubmit
+          , status: onPending' ? Disabled $ Enabled
+          , variant: ButtonVariant Primary
+          , type: "submit"
+          , className: "forgot-password-form__submit"
+          }
+          [ H.text "Submit" ]
+        ]
+      ]
+
+type FormData =
+  { email :: String
+  }
+
+defaultData :: FormData
+defaultData =
+  { email: ""
+  }
+
+formValidation :: FormData -> Effect VForm
+formValidation r = foldl append mempty rules
+  where
+    rules =
+      [ FV.email "email" r.email
+      ]
+
+-------------------------------------------------------
+
+sendEmail ::
+      Backend
+  ->  FormData
+  ->  Aff (Either String { status :: String })
+sendEmail backend { email } = postForgotPasswordRequest backend email

src/Gargantext/Components/Login/Types.purs

@@ -55,6 +55,6 @@ instance Eq AuthData where
 _AuthData :: Iso' AuthData { token :: Token, tree_id :: TreeId, user_id :: UserId }
 _AuthData = iso (\(AuthData v) -> v) AuthData
 
-data FormType = Login | ForgotPassword
+data FormType = Login | ForgotPassword | Manager
 derive instance Generic FormType _
 derive instance Eq FormType

src/Gargantext/Components/Nodes/Annuaire.purs

@@ -170,14 +170,21 @@ pageCpt = here.component "page" cpt
       pagePath' <- T.useLive T.unequal pagePath
       params <- T.useFocused (_.params) (\a b -> b { params = a }) pagePath
 
-      pure $ TT.table { colNames
-                      , container
-                      , params
-                      , rows: rows pagePath'
-                      , syncResetButton : [ H.div {} [] ]
-                      , totalRecords
-                      , wrapColElts
-                      }
+      pure $
+
+        H.div
+        { className: "page-annuaire" }
+        [
+          TT.table
+          { colNames
+          , container
+          , params
+          , rows: rows pagePath'
+          , syncResetButton : [ H.div {} [] ]
+          , totalRecords
+          , wrapColElts
+          }
+        ]
       where
         rows pagePath' = (row pagePath') <$> Seq.fromFoldable docs
         row { nodeId } contact = { row: contactCells { annuaireId: nodeId, frontends, contact, session }
@@ -207,7 +214,7 @@ contactCellsCpt = here.component "contactCells" cpt where
       --, H.a { href, target: "blank" } [ H.text $ fromMaybe "name" contact.title ]
     , H.text "No ContactWhere"
     , H.text "No ContactWhereDept"
-    , H.div { className: "nooverflow" }
+    , H.div { className: "page-annuaire__nooverflow" }
       [ H.text "No ContactWhereRole" ]
     ]
   cpt { annuaireId, frontends, session

src/Gargantext/Components/Nodes/Corpus/Chart/Utils.purs

@@ -26,7 +26,7 @@ reloadButtonWrap setReload el = H.div {} [
 
 reloadButton :: T2.ReloadS -> R.Element
 reloadButton reloadS = H.a { className, on: { click }, title: "Reload" } [] where
-  className = "reload-btn fa fa-refresh"
+  className = "pr-1 fa fa-refresh"
   click _ = T2.reload reloadS
 
 

src/Gargantext/Components/Nodes/Home/Public.purs

@@ -116,7 +116,7 @@ tableau (PublicData { title, abstract, img, url, date, database, author }) =
     , H.p { className: "card-text"} [ H.text $ (take 252 abstract) <> "..." ]
     , H.div { className: "center justify-content-between align-items-center" }
       [ H.div { className: "btn-group" }
-        [ H.div { className : "small text-muted flex-end" }
+        [ H.div { className : "small text-muted d-flex justify-content-flex-end" }
           [ H.text
             $  "Made by " <> author
             <> " on "     <> date

src/Gargantext/Components/PhyloExplorer/Sidebar/DocList.purs

@@ -27,8 +27,6 @@ import Gargantext.Routes as Routes
 import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Utils (getter, (?))
 import Gargantext.Utils.Reactix as R2
-import Gargantext.Utils.Toestand as T2
-import Partial.Unsafe (unsafePartial)
 import React.SyntheticEvent as SE
 import Reactix as R
 import Reactix.DOM.HTML as H

src/Gargantext/Hooks/FormValidation/Boxed.purs

@@ -61,6 +61,17 @@ instance maximumString :: Maximum String where
       | (length input) > max -> pure $ invalid [ field /\ "maximum" ]
       | otherwise            -> pure $ pure unit
 
+-- Regarding Boolean field value
+
+instance equalsBoolean :: Equals Boolean where
+  equals field box box' = do
+    input  <- T.read box
+    input' <- T.read box'
+    case unit of
+      _
+        | (not eq input input') -> pure $ invalid [ field /\ "equals" ]
+        | otherwise             -> pure $ pure unit
+
 uppercase :: Field -> T.Box String -> Effect VForm
 uppercase field = T.read >=> case _ of
   input

src/Gargantext/Hooks/FormValidation/Unboxed.purs

@@ -52,6 +52,13 @@ instance maximumString :: Maximum String where
     | (length input) > max = pure $ invalid [ field /\ "maximum" ]
     | otherwise            = pure $ pure unit
 
+-- Regarding Boolean field value
+
+instance equalsBoolean :: Equals Boolean where
+  equals field input input'
+    | (not eq input input') = pure $ invalid [ field /\ "equals" ]
+    | otherwise             = pure $ pure unit
+
 uppercase :: Field -> String -> Effect VForm
 uppercase field input
   | (toLower input) == input = pure $ invalid [ field /\ "uppercase" ]

src/Gargantext/Hooks/StateRecord/Unboxed.purs

@@ -13,6 +13,10 @@ import Prim.RowList (class RowToList)
 import Reactix as R
 import Toestand as T
 
+-- @XXX StateRecord with distinct value types → eg. conflicts when "string" and
+--      "boolean" are coexisting as value on the same hook
+--        ↳ workaround is to manually bind the input (copying `setStateKey`
+--          method)
 
 type Methods r a =
   -- | Every provided props will be available within the `formFields` proxy

src/sass/_legacy.sass

@@ -11,3 +11,4 @@
 @import "./_legacy/_document"
 @import "./_legacy/_folder"
 @import "./_legacy/_corpus"
+@import "./_legacy/_annuaire"

src/sass/_legacy/_annuaire.sass

+.page-annuaire
+
+  &__nooverflow
+    max-width: 300px
+    height : 24px
+    overflow: hidden
+    text-overflow: ellipsis
+
+    &:hover
+      overflow: visible
+      height: auto

src/sass/_legacy/_corpus.sass

@@ -72,3 +72,7 @@
   // accentuate disabled icon effect
   .card-header .b-icon-button--disabled
     opacity: 0.2
+
+  // using "bootstrap" Element change to alter the caret icon
+  [aria-expanded="true"]
+    transform: rotate(180deg)

src/sass/_legacy/_login.sass

-//.logoSmall
-//  line-height: 15px
-  // height: 10px
-  // padding: 10px 10px
-
-
-#user-page-header
-  border-bottom : 1px solid black
-
-#user-page-info
-  margin-top : 38px
-
-.tableHeader
-  color: white
-
-
-#toolbar
-  display: inline
-  ul
-    li
-      display: inline
-      margin-right : 19px
-      form
-        display: inline
-
-#horizontal-checkbox
-  ul
-    li
-      display : inline
-      float : left
-      margin-top: 12px
-      margin-right : 21px
-
-
-
-li#rename
-  #rename-a
-    display: none
-    position: absolute
-    left: 125px
-
-#create-node-tooltip
-  position: absolute
-  left: 96px
-  top: -64px
-  background-color: white
-  z-index: z-index('main', 'floaty')
-
-  .card-body
-    input
-      min-width: 200px
-
-#file-type-tooltip
-  @include centered
-
-  position: absolute
-  background-color: white
-  z-index: z-index('main', 'floaty')
-
-.glyphitem
-  top: 0
-  display: inline-block
-  float: right
-  opacity: 0.6
-  padding-right: 5px
-  cursor: pointer
-  transition: transform 0.1s ease-out 0s
-  font-size: 15px
-  text-align: center
-
-  &:hover
-    display: inline-block
-    opacity: 1
-    transform: scale(1.4)
-
-#sp-container
-  -webkit-transition: width 2s  // For Safari 3.1 to 6.0
-  transition: width 2s
-
-
-.nooverflow
-  max-width: 300px
-  height : 24px
-  overflow: hidden
-  text-overflow: ellipsis
-  &:hover
-    overflow: visible
-    height: auto
-
-
-.nopadding
-    padding: 0 !important
-    margin: 0 !important
-
-.tab-pane
-  .reload-btn
-    padding-right: 6px
-
-.flex
-  display: flex
-
-.flex-end
-  display: flex
-  justify-content: flex-end
-
-.flex-center
-  display: flex
-  flew-wrap: wrap
-  justify-content: center
-
-.flex-space-between,.flex-center
-  display: flex
-  justify-content: space-between
-
-a:focus, a:hover
-  cursor: pointer
+.login-modal
+
+  // making ".thead" small, but not its affiliated ".tbody"
+  thead th
+    padding: $table-cell-padding-sm
+
+  &__active-places
+
+    &__actions
+      display: flex
+      gap: space-x(3.5)
+
+//////////////////////////////////:
+
+.login-modal-form
+  $cta-width: 200px
+  $form-width: 520px
+
+  &__title
+    position: relative
+    background-color: $border-color
+    padding: $card-spacer-y $card-spacer-x
+    text-align: center
+    // (?) dirty negative margins to overlap the ".modal-body" paddings
+    margin-top: - $modal-inner-padding
+    margin-left: - $modal-inner-padding
+    margin-right: - $modal-inner-padding
+
+    &__return
+      @include centered
+      position: absolute
+      left: space-x(3.5)
+
+    &__text
+      font-family: $font-family-monospace
+      font-size: 20px
+      font-weight: bold
+
+
+  &__separator
+    padding: $card-spacer-y calc(2* #{ $card-spacer-x })
+    position: relative
+
+    &__text
+      @include centered
+      position: absolute
+      display: inline-block
+      padding-left: space-x(4)
+      padding-right: space-x(4)
+      font-family: $headings-font-family
+      font-size: 24px
+      background-color: $modal-content-bg
+
+  &__request-access
+    margin-top: calc(3 * #{ $card-spacer-y})
+    margin-left: auto
+    margin-right: auto
+    margin-bottom: $card-spacer-y
+    padding: $btn-padding-y-lg $btn-padding-x-lg
+    width: $cta-width
+    display: block
+    font-weight: bold
+
+  &__log-in
+    padding: $btn-padding-y-lg $btn-padding-x-lg
+    width: $cta-width
+    margin-bottom: calc(2 * #{ $card-spacer-y})
+    margin-left: auto
+    margin-right: auto
+    margin-top: $card-spacer-y
+    display: block
+    font-weight: bold
+
+  &__form
+    margin: 0 auto
+    width: $form-width
+
+  &__error
+    margin-bottom: $form-group-margin-bottom
+    color: $danger
+    text-align: center
+
+//////////////////////////////////////////////////////////
+
+.forgot-password-form
+  $cta-width: 200px
+  $form-width: 520px
+
+
+  &__title
+    position: relative
+    background-color: $border-color
+    padding: $card-spacer-y $card-spacer-x
+    text-align: center
+    // (?) dirty negative margins to overlap the ".modal-body" paddings
+    margin-top: - $modal-inner-padding
+    margin-left: - $modal-inner-padding
+    margin-right: - $modal-inner-padding
+
+    &__return
+      @include centered
+      position: absolute
+      left: space-x(3.5)
+
+    &__text
+      font-family: $font-family-monospace
+      font-size: 20px
+      font-weight: bold
+
+  &__subtitle
+    padding-top: calc(2 * #{ $card-spacer-y})
+    padding-left: calc(2* #{ $card-spacer-x })
+    padding-right: calc(2* #{ $card-spacer-x })
+    padding-bottom: $card-spacer-y
+    text-align: center
+    font-family: $headings-font-family
+    font-size: 24px
+
+  &__submit
+    padding: $btn-padding-y-lg $btn-padding-x-lg
+    width: $cta-width
+    margin-bottom: calc(2 * #{ $card-spacer-y})
+    margin-left: auto
+    margin-right: auto
+    margin-top: $card-spacer-y
+    display: block
+    font-weight: bold
+
+  &__form
+    margin: 0 auto
+    width: $form-width
+
+  &__error
+    margin-bottom: $form-group-margin-bottom
+    color: $danger
+    text-align: center
+
+  &__success
+    margin-bottom: $form-group-margin-bottom
+    color: $success
+    text-align: center

src/sass/_legacy/_styles.sass

@@ -303,3 +303,19 @@ select.form-control
     font-size: 12px
 
 /////////////////////////////////////////////
+
+.glyphitem
+  top: 0
+  display: inline-block
+  float: right
+  opacity: 0.6
+  padding-right: 5px
+  cursor: pointer
+  transition: transform 0.1s ease-out 0s
+  font-size: 15px
+  text-align: center
+
+  &:hover
+    display: inline-block
+    opacity: 1
+    transform: scale(1.4)

src/sass/_legacy/_tree.sass

@@ -619,3 +619,12 @@ $node-popup-width: 544px
     color: $card-cap-color
     background-color: $card-cap-bg
     border-top: $card-border-width solid $card-border-color
+
+////////////////////////////////////////
+
+.file-type-tooltip
+  @include centered
+
+  position: absolute
+  background-color: white
+  z-index: z-index('main', 'floaty')

src/sass/base/_bootstrap.scss

@@ -9,3 +9,33 @@
 .input-group-prepend .btn, .input-group-append .btn {
   z-index: initial;
 }
+
+
+/// vue-bootstrap "_form-checkbox.scss"
+/// wrong equation
+.custom-control:not(.custom-switch) {
+
+  .custom-control-label {
+    &::before { top: 0.05rem; }
+    &::after  { top: 0.05rem; }
+  }
+}
+
+/// Bootstrap "_custom-forms.scss"
+/// strange rule
+.custom-control {
+  z-index: initial;
+}
+
+/// Bootstrap "_text.scss"
+/// (cf "~/assets/sass/base/_all.scss": remove file, keep below rules)
+.font-weight-light   { font-weight: $font-weight-light ; }
+.font-weight-lighter { font-weight: $font-weight-lighter ; }
+.font-weight-normal  { font-weight: $font-weight-normal ; }
+.font-weight-bold    { font-weight: $font-weight-bold ; }
+.font-weight-bolder  { font-weight: $font-weight-bolder ; }
+
+/// Extend our own "utilities" module with Bootstrap rule
+.font-family-base           { font-family: $font-family-base; }
+.font-family-monospace      { font-family: $font-family-monospace; }
+.font-family-heading        { font-family: $headings-font-family; }

src/sass/base/_form.scss

@@ -45,7 +45,6 @@
   label { color: $danger; }
 
   .b-form-input { @include inputError; }
-
 }
 
 .form-group {

src/sass/base/_general.scss

@@ -14,8 +14,8 @@ img {
   display: block;
 }
 
-/// Remove hyperlink very first interaction (not including in "_reset.scss"
-/// as this interaction came as an intricated-native feature)
-// a:focus,a:visited,a:active{
-  // outline: none;
-// }
+/// Opiniotated
+a:focus,
+a:hover {
+  cursor: pointer;
+}

src/sass/base/_reset.scss

 // Most simple reset ever found
 // @link https://meiert.com/en/blog/stop-using-resets/#comment-240548
-html{
+html {
   box-sizing: border-box;
-  height: 100%
+  height: 100%;
 }
 
 *,
 :after,
-:before{
+:before {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
-  box-sizing: inherit
+  box-sizing: inherit;
 }
 
-::-moz-focus-inner{
+::-moz-focus-inner {
   border: 0;
 }
 
-body{
+body {
   position:relative;
 }
 
-a{
+a {
   text-decoration: none;
-  color: inherit
+  color: inherit;
 }
 
-a:focus{
+a:focus {
   outline: 0;
 }
 
-ul{
+ul {
   list-style:none;
 }

src/sass/base/_utilities.scss

@@ -328,6 +328,23 @@
   .visible  { visibility: visible; }
   .hidden   { visibility: hidden;  }
 
+  /// Cursor
+  $cursors:
+    crosshair,
+    text,
+    move,
+    grab,
+    grabbing,
+    not-allowed,
+    all-scroll,
+    ew-resize,
+    ns-resize,
+    pointer;
+
+  @each $value in $cursors {
+    .cursor-#{$value} { cursor: $value; }
+  }
+
   /// Content helpers
   .virtual-space {
     &::after {

src/sass/components/_grouped.scss

@@ -22,6 +22,19 @@
   }
 }
 
+/// Checkbox
+///-----------------------------------------------------------------------------
+
+.b-form-checkbox {
+  @include clickable();
+
+  &--disabled,
+  &--deferred,
+  &--idled {
+    @include unclickable();
+  }
+}
+
 /// Modal
 ///-----------------------------------------------------------------------------
 
@@ -37,11 +50,18 @@
 
   &__header {
     background-color: $card-cap-bg;
+    align-items: center;
 
     &__title {
       color: $primary;
       font-size: 21px;
     }
+
+    &__close {
+      // better positioning due to button overlay
+      $offset-x: 8px;
+      margin-right: $offset-x;
+    }
   }
 
   // @XXX Bootstrap not removing some modal elements on "hide" method
@@ -205,6 +225,16 @@
     &#{ $self }--secondary  { color: lighten($secondary, 15%); }
     &#{ $self }--dark       { color: lighten($body-color, 15%); }
   }
+  &--disabled#{$self}--level-1:hover::before,
+  &--deferred#{$self}--level-2:hover::before {
+    background-color: initial;
+  }
+  &--disabled#{$self}--level-2::before,
+  &--disabled#{$self}--level-2:hover::before,
+  &--deferred#{$self}--level-2::before,
+  &--deferred#{$self}--level-2:hover::before {
+    background-color: lighten($gray-100, 15%);
+  }
 }
 
 /// Fieldset

src/sass/themes/darkster.scss

@@ -161,7 +161,6 @@ $input-disabled-bg: $gray-100;
 
 .navbar-dark.bg-primary {background-color:#111111 !important;}
 .table.able {color:#ccccc5}
-#sp-container .table tr td a { color: #005a9aff; }
 
 .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
   background-color: $gray-300;