[css] use bootstrap 5.3.3 icons

ec0253b5 · Przemyslaw Kaminski · 25b6b225 · ec0253b5 · ec0253b5 · ec0253b5
Verified Commit ec0253b5 authored Dec 10, 2024 by Przemyslaw Kaminski
47 changed files
--- a/dist/index.html
+++ b/dist/index.html
@@ -3,8 +3,9 @@
    <head>
        <meta charset="utf-8"/>
        <title>CNRS GarganText</title>
-        <link rel="stylesheet" href="icons/forkawesome.css">
+        <!-- <link rel="stylesheet" href="icons/forkawesome.css"> -->
        <!-- <link href="styles/bootstrap.min.css" rel="stylesheet"> -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 	<link id="bootstrap-css" href="styles/bootstrap-5.3.3.min.css" rel="stylesheet" />
        <link id="bootstrap-css" href="styles/bootstrap-default.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="styles/highlightjs-solarized-light.css" />

--- a/dist/styles/bootstrap-darkster.css
+++ b/dist/styles/bootstrap-darkster.css
--- a/dist/styles/bootstrap-default.css
+++ b/dist/styles/bootstrap-default.css
--- a/dist/styles/bootstrap-greyson.css
+++ b/dist/styles/bootstrap-greyson.css
--- a/dist/styles/bootstrap-herbie.css
+++ b/dist/styles/bootstrap-herbie.css
--- a/dist/styles/bootstrap-monotony.css
+++ b/dist/styles/bootstrap-monotony.css
--- a/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs
+++ b/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs
@@ -210,7 +210,7 @@ component = R.memo' $ R.hooksComponent componentName cpt
                              { className: componentName <> "__header__title" }
                              [ H.text title' ]
                        , iconButton
-                            { name: "times"
+                            { name: "x"
                            , callback: onCloseButtonClick
                            , elevation: Level2
                            , className: componentName <> "__header__close"

--- a/src/Gargantext/Components/Bootstrap/Inline/Icon.purs
+++ b/src/Gargantext/Components/Bootstrap/Inline/Icon.purs
@@ -31,7 +31,7 @@ componentName :: String
 componentName = "b-icon"
 bootstrapName :: String
-bootstrapName = "fa"
+bootstrapName = "bi"
 component :: R.Component Props
 component = R.hooksComponent componentName cpt

--- a/src/Gargantext/Components/Bootstrap/Inline/IconButton.purs
+++ b/src/Gargantext/Components/Bootstrap/Inline/IconButton.purs
@@ -48,7 +48,7 @@ componentName :: String
 componentName = "b-icon-button"
 bootstrapName :: String
-bootstrapName = "fa"
+bootstrapName = "bi"
 component :: R.Component Props
 component = R.hooksComponent componentName cpt

--- a/src/Gargantext/Components/Category.purs
+++ b/src/Gargantext/Components/Category.purs
@@ -289,8 +289,8 @@ icon :: Category -> Boolean -> String
 icon cat b = btn b $ "fa fa-" <> (color $ size b $ icon' cat b)
  where
  icon' :: Category -> Boolean -> String
-  icon' Trash false = "times"
+  icon' Trash false = "trash"
-  icon' Trash true = "times-circle"
+  icon' Trash true = "trash"
  icon' UnRead false = "question"
  icon' UnRead true = "question-circle"

--- a/src/Gargantext/Components/CodeEditor.purs
+++ b/src/Gargantext/Components/CodeEditor.purs
@@ -389,14 +389,13 @@ viewTypeSelectorCpt = here.component "viewTypeSelector" cpt
      , on: { click: \_ -> T.write viewType state }
      , type: "button"
      }
-      [ H.i { className: "fa " <> (icon viewType) } []
+      [ B.icon { name: icon viewType } ]
-      ]
    where
    active = if viewType == state' then " active" else ""
-  icon Preview = "fa-eye"
+  icon Preview = "eye"
-  icon Both = "fa-columns"
+  icon Both = "columns"
-  icon Code = "fa-pencil"
+  icon Code = "pencil"
 type Controls =
  ( codeElRef :: R.Ref (Nullable Element)

--- a/src/Gargantext/Components/Corpus/CodeSection.purs
+++ b/src/Gargantext/Components/Corpus/CodeSection.purs
@@ -307,7 +307,7 @@ renameableTextCpt = here.component "renameableTextCpt" cpt
              { className: "btn input-group-append"
              , on: { click: submit state' }
              }
-              [ H.span { className: "fa fa-floppy-o" } []
+              [ B.icon { name: "floppy" }
              ]
          ]
      else
@@ -322,7 +322,7 @@ renameableTextCpt = here.component "renameableTextCpt" cpt
              { className: "btn input-group-append"
              , on: { click: \_ -> T.write_ true isEditing }
              }
-              [ H.span { className: "fa fa-pencil" } []
+              [ B.icon { name: "pencil" }
              ]
          ]
    where
@@ -521,10 +521,10 @@ viewTypeSelectorCpt = here.component "viewTypeSelector" cpt
      , on: { click: \_ -> T.write viewType state }
      , type: "button"
      }
-      [ H.i { className: "fa " <> (icon viewType) } []
+      [ B.icon { name: icon viewType }
      ]
    where
    active = if viewType == state' then " active" else ""
-  icon Folders = "fa-folder"
+  icon Folders = "folder"
-  icon Code = "fa-code"
+  icon Code = "code"
--- a/src/Gargantext/Components/Corpus/Layout.purs
+++ b/src/Gargantext/Components/Corpus/Layout.purs
@@ -79,7 +79,7 @@ layoutCpt = here.component "layout" cpt
                { className: "node-layout__title__content text-primary" }
                [ B.icon
                    { className: "node-layout__title__icon"
-                    , name: GT.getIcon node_type true
+                    , name: GT.getIcon node_type { open: true }
                    }
                , H.span
                    { className: "node-layout__title__text mx-1" }
@@ -121,11 +121,8 @@ layoutCpt = here.component "layout" cpt
                    , size: SmallSize
                    , variant: ButtonVariant Secondary
                    }
-                    [ B.icon
+                    [ B.icon { name: "code" }
-                        { name: "code" }
+                    , H.span { className: "ms-1" } [ H.text "Code section" ]
-                    , B.wad_
-                        [ "d-inline-block", "virtual-space", "w-1" ]
-                    , H.text "Code section"
                    ]
                ]
            ]

--- a/src/Gargantext/Components/DocsTable.purs
+++ b/src/Gargantext/Components/DocsTable.purs
@@ -202,9 +202,9 @@ docViewCpt = R2.hereComponent here "docView" hCpt
                        { className: "btn btn-light text-primary border-primary"
                        , on: { click: toggleModal }
                        }
-                        [ H.i { className: "fa fa-plus mr-1" } []
+                        [ B.icon { name: "plus", className: "mr-1" }
                        , H.text "Add a document"
-                        , H.i { className: "fa fa-newspaper-o ml-1" } []
+                        , B.icon { name: "newspaper", className: "ml-1" }
                        ]
                    ]
                , H.div { className: "form-group" }
@@ -343,14 +343,14 @@ searchBarCpt = here.component "searchBar" cpt
      , on: { click: \_ -> T.write_ queryText' query }
      , type: "submit"
      }
-      [ H.span { className: "fa fa-search" } [] ]
+      [ B.icon { name: "search" } ]
  clearButton query =
    H.button
      { className: "input-group-text btn btn-light"
      , on: { click: \_ -> T.write_ "" query }
      }
-      [ H.span { className: "text-danger fa fa-times" } [] ]
+      [ B.icon { name: "x", className: "text-danger" } ]
 mock :: Boolean
 mock = false
@@ -742,7 +742,7 @@ tableRowCpt = here.component "tableRow" cpt
              , type: "Button"
              }
              [ H.text r.title
-              , H.i { className: "fa fa-external-link mx-1 small" } []
+              , B.icon { name: "box-arrow-up-right", className: "mx-1 small" }
              ]
          ]
      , H.div { className: tClassName } [ H.text $ showSource r.source ]

--- a/src/Gargantext/Components/FolderView.purs
+++ b/src/Gargantext/Components/FolderView.purs
@@ -203,7 +203,7 @@ folderCpt = here.component "folderCpt" cpt
        , H.div
            { className: "folder-view-item__settings" }
            [ B.iconButton
-                { name: "flower-7"
+                { name: "gear-fill"
                , callback: \_ -> T.write_ true isBoxVisible
                , title:
                    "Each node of the Tree can perform some actions.\n"
@@ -240,8 +240,8 @@ folderCpt = here.component "folderCpt" cpt
    | otherwise = appPath $ getFolderPath nType sId lId
  icon :: FolderStyle -> GT.NodeType -> String
-  icon FolderUp _ = "folder-open"
+  icon FolderUp _ = "folder2-open"
-  icon _ nt = GT.getIcon nt true
+  icon _ nt = GT.getIcon nt { open: true }
  getFolderPath :: GT.NodeType -> GT.SessionId -> Int -> AppRoute
  getFolderPath nodeType sid nodeId = fromMaybe Home $ nodeTypeAppRoute nodeType sid nodeId
@@ -260,7 +260,7 @@ backButtonCpt = here.component "backButton" cpt
        { className: "btn btn-primary"
        , on: { click: \_ -> goToPreviousPage unit }
        }
-        [ H.i { className: "fa fa-arrow-left", title: "Previous view" } []
+        [ H.span { title: "Previous view" } [ B.icon { name: "arrow-left" } ]
        ]
 backButtonSmart :: R2.Component (nodeId :: Int, session :: Session)
@@ -295,7 +295,7 @@ backButtonSmartMainCpt = here.component "backButtonSmartMain" cpt
        { className: "btn btn-primary"
        , on: { click: action rootId node.parent_id handlers }
        }
-        [ H.i { className: "fa fa-arrow-left", title: "Previous view" } []
+        [ H.span { title: "Previous view" } [ B.icon { name: "arrow-left" } ]
        ]
    where
    action rootId pId handlers

--- a/src/Gargantext/Components/FolderView/Box.purs
+++ b/src/Gargantext/Components/FolderView/Box.purs
@@ -50,7 +50,7 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
          [ "d-flex", "align-items-center" ]
          [ H.div
              { className: "w-3/12" }
-              [ H.span { className: GT.fldr nodeType true } [] -- TODO fix names
+              [ H.span { className: GT.fldr nodeType { open: true } } [] -- TODO fix names
              , B.span' { className: "ml-1 h5" } $ GT.prettyNodeType nodeType
              ]
          , B.wad
@@ -65,7 +65,7 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
                  { callback: closeBox props
                  , title: "Close"
                  , elevation: Level1
-                  , name: "times"
+                  , name: "x"
                  }
              ]
          ]

--- a/src/Gargantext/Components/Forest/Breadcrumb.purs
+++ b/src/Gargantext/Components/Forest/Breadcrumb.purs
@@ -270,7 +270,7 @@ breadcrumbItemCpt = here.component "breadcrumbItemCpt" cpt
                [ H.span { className: "" }
                    [ B.icon
                        { className: ""
-                        , name: GT.getIcon nodeType true
+                        , name: GT.getIcon nodeType { open: true }
                        }
                    ]
                , if nodeType == GT.NodeUser then
@@ -297,7 +297,7 @@ breadcrumbItemCpt = here.component "breadcrumbItemCpt" cpt
                      -- B.icon { name: "folder-open-o" } 
                      B.icon
                        { className: ""
-                        , name: GT.getIcon nodeType true
+                        , name: GT.getIcon nodeType { open: true }
                        }
                    ]
                , H.text text

--- a/src/Gargantext/Components/Forest/Tree/Node.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node.purs
@@ -363,7 +363,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
                      , elevation: Level1
                      }
                  , B.iconButton
-                      { name: "flower-7"
+                      { name: "gear-fill"
                      , className: "mainleaf__settings-icon"
                      , callback: \_ -> T.write_ true isBoxVisible
                      , title:
@@ -447,7 +447,7 @@ nodeIconCpt = here.component "nodeIcon" cpt
          { className: "mainleaf__node-icon" }
      $
        [ B.iconButton
-            { name: GT.getIcon nodeType true
+            { name: GT.getIcon nodeType { open: true }
            , callback
            , status: isLeaf ? Idled $ Enabled
            , variant: isSelected ? Primary $ Secondary
@@ -503,7 +503,7 @@ folderIconCpt = here.component "folderIcon" cpt
    pure $
      B.iconButton
        { className: "mainleaf__folder-icon"
-        , name: isOpened ? "angle-down" $ handedPartClassName handed'
+        , name: isOpened ? "chevron-down" $ handedPartClassName handed'
        , overlay: false
        , callback
        }
@@ -585,7 +585,7 @@ nodeTooltipCpt = here.component "nodeTooltip" cpt
      [ H.b
          {}
          [ B.icon
-              { name: GT.getIcon nodeType true }
+              { name: GT.getIcon nodeType { open: true } }
          , B.span_ $
              GT.prettyNodeType nodeType
          ]

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Add.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Add.purs
@@ -162,7 +162,7 @@ print withIconFlag nt =
  in
    if withIconFlag then
-      charCodeIcon nt true
+      charCodeIcon nt { open: true }
        --- as we are printing within an HTML text node,
        -- margins will directly rely on content text spacing
        <> nbsp 4

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Documentation.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Documentation.purs
@@ -27,7 +27,7 @@ actionDocCpt = here.component "actionDoc" cpt
      Tools.panelNoFooter { mError: Nothing }
        ( [ H.div { style: { margin: "10px" } }
              [ H.h3 {} [ H.text "Documentation about " ]
-              , H.h3 { className: GT.fldr nodeType true }
+              , H.h3 { className: GT.fldr nodeType { open: true } }
                  [ H.span { className: "font-family-theme mx-1" }
                      [ H.text $ show nodeType ]
                  ]

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/ManageTeam.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/ManageTeam.purs
@@ -4,6 +4,7 @@ import Data.Array (filter, null, (:))
 import Data.Either (Either(..))
 import Data.Maybe (Maybe(..))
 import Effect.Aff (runAff_)
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Forest.Tree.Node.Tools as Tools
 import Gargantext.Components.GraphQL.Endpoints (deleteTeamMembership, getTeam)
 import Gargantext.Components.GraphQL.Team (Team, TeamMember)
@@ -96,12 +97,12 @@ teamLayoutRowsCpt = here.component "teamLayoutRows" cpt
      H.div { className: "from-group row" }
        [ H.div { className: "col-8" } [ H.text username ]
        , H.a
-            { className: "text-danger col-2 fa fa-times"
+            { className: "text-danger col-2"
            , title: "Remove user from team"
            , type: "button"
            , on: { click: submit shared_folder_id }
            }
-            []
+            [ B.icon { name: "x" } ]
        ]
    makeLeader username =

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Search/SearchField.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Search/SearchField.purs
@@ -13,6 +13,7 @@ import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
 import Gargantext.AsyncTasks as GAT
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Forest.Tree.Node.Action.Search.Frame (searchIframes)
 import Gargantext.Components.Forest.Tree.Node.Action.Search.Types (DataField(..), Database(..), IMT_org(..), Org(..), SearchQuery(..), allOrgs, dataFields, defaultSearchQuery, doc, performSearch, datafield2database, Search, dbFromInputValue, dbToInputValue)
 import Gargantext.Components.GraphQL.Endpoints (getIMTSchools, getUser)
@@ -128,11 +129,10 @@ componentYearsCpt = here.component "componentYears" cpt
    yearCpt (Tuple idx year) =
      H.div {}
        [ H.span {} [ H.text year ]
-        , H.span
+        , B.iconButton
-            { className: "btn btn-danger fa fa-times"
+            { name: "times"
-            , on: { click: clickRemove idx search }
+            , callback: const $ clickRemove idx search
            }
-            []
        ]
 type ComponentIMTProps =

--- a/src/Gargantext/Components/Forest/Tree/Node/Box.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Box.purs
@@ -80,7 +80,7 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
          [ B.wad
              [ "w-2/12" ]
              [ H.span
-                  { className: GT.fldr nodeType true }
+                  { className: GT.fldr nodeType { open: true } }
                  [] -- TODO fix names
              -- ,
              --   B.span' { className: "small" } $ prettyNodeType nodeType
@@ -109,7 +109,7 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
              , B.iconButton
                  { callback: const $ p.closeCallback unit
                  , title: "Close"
-                  , name: "times"
+                  , name: "x"
                  , elevation: Level2
                  }
              ]
@@ -185,20 +185,17 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
          { className: "panel-actions" }
          [ H.div
              { className: "panel-actions__ok-to-use" }
-              [ B.icon
+              [ B.icon { name: "circle-fill" }
-                  { name: "circle" }
              , B.span_ "usable"
              ]
          , H.div
              { className: "panel-actions__almost-useable" }
-              [ B.icon
+              [ B.icon { name: "circle-fill" }
-                  { name: "circle" }
              , B.span_ "almost useable"
              ]
          , H.div
              { className: "panel-actions__development-in-progress" }
-              [ B.icon
+              [ B.icon { name: "circle-fill" }
-                  { name: "circle" }
              , B.span_ "development in progress"
              ]
          ]
@@ -273,7 +270,7 @@ buttonClickCpt = here.component "buttonClick" cpt
            }
        , B.icon
            { className: "popup-container__cta__icon"
-            , name: "circle"
+            , name: "circle-fill"
            }
        ]

--- a/src/Gargantext/Components/Forest/Tree/Node/Settings.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Settings.purs
@@ -83,25 +83,25 @@ instance Show NodeAction where
 glyphiconNodeAction :: NodeAction -> String
 glyphiconNodeAction (Add _) = "plus"
-glyphiconNodeAction AddingContact = "user-plus"
+glyphiconNodeAction AddingContact = "person-plus"
-glyphiconNodeAction CloseNodePopover = "close"
+glyphiconNodeAction CloseNodePopover = "x"
 glyphiconNodeAction Config = "wrench"
 glyphiconNodeAction Delete = "trash"
 glyphiconNodeAction (Documentation _) = "question-circle"
 glyphiconNodeAction Download = "download"
-glyphiconNodeAction (Link _) = "arrows-h"
+glyphiconNodeAction (Link _) = "arrow-left-right"
-glyphiconNodeAction ManageTeam = "users"
+glyphiconNodeAction ManageTeam = "people"
-glyphiconNodeAction (Merge _) = "random"
+glyphiconNodeAction (Merge _) = "sign-merge-left"
-glyphiconNodeAction (Move _) = "share-square-o"
+glyphiconNodeAction (Move _) = "arrow-90deg-right"
-glyphiconNodeAction (Publish _) = fldr FolderPublic true
+glyphiconNodeAction (Publish _) = fldr FolderPublic { open: true }
-glyphiconNodeAction Reconstruct = "cogs"
+glyphiconNodeAction Reconstruct = "gear-wide-connected"
-glyphiconNodeAction Refresh = "refresh"
+glyphiconNodeAction Refresh = "arrow-clockwise"
-glyphiconNodeAction ReloadWithSettings = "reload-with-settings"
+glyphiconNodeAction ReloadWithSettings = "arrow-clockwise"
 glyphiconNodeAction SearchBox = "search"
-glyphiconNodeAction ShareURL = "share-alt"
+glyphiconNodeAction ShareURL = "share"
-glyphiconNodeAction Share = "user-plus"
+glyphiconNodeAction Share = "person-plus"
 glyphiconNodeAction Upload = "upload"
-glyphiconNodeAction WriteNodesDocuments = "bars"
+glyphiconNodeAction WriteNodesDocuments = "list"
 glyphiconNodeAction _ = ""
 ------------------------------------------------------------------------

--- a/src/Gargantext/Components/Forest/Tree/Node/Tools.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Tools.purs
@@ -179,7 +179,7 @@ textInputBoxCpt = here.component "textInputBox" cpt
        { callback: const $ T.write_ false isOpen
        , variant: Danger
        , title: "Cancel"
-        , name: "times"
+        , name: "x"
        }
    submit ref _ = do

--- a/src/Gargantext/Components/Forest/Tree/Node/Tools/SubTree.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Tools/SubTree.purs
@@ -158,7 +158,7 @@ subTreeTreeViewCpt = here.ntComponent "subTreeTreeView" cpt
                { className: "subtree__node__icons"
                , on: { click: expandCbk }
                }
-                [ H.span { className: GT.fldr nodeType true } []
+                [ H.span { className: GT.fldr nodeType { open: true } } []
                , R2.when hasChild $
                    if isExpanded then

--- a/src/Gargantext/Components/GraphExplorer/Frame/DocFocus.purs
+++ b/src/Gargantext/Components/GraphExplorer/Frame/DocFocus.purs
@@ -94,7 +94,7 @@ docFocusCpt = R2.hereComponent here "main" hCpt
                        H.div
                          { className: "graph-doc-focus__header" }
                          [ B.iconButton
-                              { name: "times"
+                              { name: "x"
                              , elevation: Level2
                              , callback: closeCallback
                              }

--- a/src/Gargantext/Components/GraphExplorer/Sidebar.purs
+++ b/src/Gargantext/Components/GraphExplorer/Sidebar.purs
@@ -96,7 +96,7 @@ sidebarCpt = here.component "sidebar" cpt
        [
          -- Close CTA
          B.iconButton
-            { name: "times"
+            { name: "x"
            , elevation: Level2
            , callback: closeCallback
            , className: "graph-sidebar__close"

--- a/src/Gargantext/Components/GraphExplorer/Toolbar/Controls.purs
+++ b/src/Gargantext/Components/GraphExplorer/Toolbar/Controls.purs
@@ -253,7 +253,7 @@ controlsCpt = R.memo' $ here.component "controls" cpt
                        , aria: { expanded: false, controls: "graph-toolbar__advanced" }
                        }
                        [ H.text "Advanced"
-                        , B.icon { name: "angle-down", className: "mx-1" }
+                        , B.icon { name: "chevron-down", className: "mx-1" }
                        ]
                    ]
                , H.div

--- a/src/Gargantext/Components/GraphExplorer/Topbar/TopBar.purs
+++ b/src/Gargantext/Components/GraphExplorer/Topbar/TopBar.purs
@@ -41,7 +41,7 @@ component = here.component "topBar" cpt
        { className: "node-topbar graph-topbar bg-primary h-100" }
        [ H.div
            { className: "node-topbar__title graph-topbar__title align-self-center px-1 text-light" }
-            [ B.icon { name: "hubzilla" }
+            [ B.icon { name: "diagram-3" }
            , H.text $ nbsp 1
            , H.text "Graph"
            ]

--- a/src/Gargantext/Components/ListSelection.purs
+++ b/src/Gargantext/Components/ListSelection.purs
@@ -105,7 +105,7 @@ listTreeCpt = here.component "listTree" cpt
  cpt { name, nodeType, root, selection, session } _ = do
    pure $ H.div { className: "tree" }
      [ H.div { className: "root" }
-          [ H.i { className: fldr nodeType true } []
+          [ H.i { className: fldr nodeType { open: true } } []
          , H.text $ "[" <> show root <> "] " <> name
          ]
      , listTreeChildren
@@ -202,7 +202,7 @@ renderListElementCpt = here.component "renderListElement" cpt
          , on: { click: click ids }
          , type: "checkbox"
          }
-      , H.i { className: fldr NodeList true } []
+      , H.i { className: fldr NodeList { open: true } } []
      , H.text $ "[" <> show id <> "] " <> name
      ]
    where

--- a/src/Gargantext/Components/NgramsTable/Search.purs
+++ b/src/Gargantext/Components/NgramsTable/Search.purs
@@ -87,7 +87,7 @@ searchButtonCpt = here.component "searchButton" cpt
                  , className: "input-group-text"
                  }
                  [ B.icon
-                      { name: "times"
+                      { name: "x"
                      , className: "text-danger"
                      }
                  ]

--- a/src/Gargantext/Components/Nodes/Annuaire/User.purs
+++ b/src/Gargantext/Components/Nodes/Annuaire/User.purs
@@ -10,6 +10,7 @@ import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
 import Gargantext.Components.App.Store as AppStore
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.GraphQL (getClient)
 import Gargantext.Components.GraphQL.Endpoints (getUserInfo, getUser, updateUserPubmedAPIKey, updateUserEPOAPIUser, updateUserEPOAPIToken)
 import Gargantext.Components.GraphQL.User (UserInfo, _ui_cwCity, _ui_cwCountry, _ui_cwFirstName, _ui_cwLabTeamDeptsFirst, _ui_cwLastName, _ui_cwOffice, _ui_cwOrganizationFirst, _ui_cwRole, _ui_cwTouchMail, _ui_cwTouchPhone, _ui_cwDescription)
@@ -440,7 +441,7 @@ itemNotEditingCpt = here.component "itemEditing" cpt
          , disabled: true
          }
      , H.div { className: "btn input-group-append", on: { click } }
-          [ H.div { className: "input-group-text fa fa-pencil" } [] ]
+          [ B.icon { name: "pencil", className: "input-group-text" } ]
      ]
    where
    click _ = T.write_ true isEditing

--- a/src/Gargantext/Components/Nodes/Lists.purs
+++ b/src/Gargantext/Components/Nodes/Lists.purs
@@ -145,7 +145,7 @@ sidePanelCpt = here.component "sidePanel" cpt
          [
            -- Close CTA
            B.iconButton
-              { name: "times"
+              { name: "x"
              , callback: closeSidePanel
              , className: "graph-sidebar__close"
              }

--- a/src/Gargantext/Components/Nodes/Texts.purs
+++ b/src/Gargantext/Components/Nodes/Texts.purs
@@ -483,7 +483,7 @@ textsSidePanelCpt = here.component "textsSidePanel" cpt
            [ H.div
                { className: "texts-sidepanel__header" }
                [ B.iconButton
-                    { name: "times"
+                    { name: "x"
                    , elevation: Level2
                    , callback: closeSidePanel
                    }

--- a/src/Gargantext/Components/PhyloExplorer/Frame/DocFocus.purs
+++ b/src/Gargantext/Components/PhyloExplorer/Frame/DocFocus.purs
@@ -94,7 +94,7 @@ docFocusCpt = R2.hereComponent here "main" hCpt
                        H.div
                          { className: "phylo-doc-focus__header" }
                          [ B.iconButton
-                              { name: "times"
+                              { name: "x"
                              , elevation: Level2
                              , callback: closeCallback
                              }

--- a/src/Gargantext/Components/PhyloExplorer/Sidebar/SideBar.purs
+++ b/src/Gargantext/Components/PhyloExplorer/Sidebar/SideBar.purs
@@ -60,7 +60,7 @@ component = R.hooksComponent componentName cpt
        [
          -- Close CTA
          B.iconButton
-            { name: "times"
+            { name: "x"
            , elevation: Level2
            , callback: closeCallback
            , className: "phylo-sidebar__close"

--- a/src/Gargantext/Components/Renameable.purs
+++ b/src/Gargantext/Components/Renameable.purs
@@ -210,7 +210,7 @@ editingCpt = here.component "editing" cpt
              --     }
              --     [
              --       B.icon
-              --       { name: "times"
+              --       { name: "x"
              --       , className: "text-danger"
              --       }
              --     ]

--- a/src/Gargantext/Components/Table.purs
+++ b/src/Gargantext/Components/Table.purs
@@ -357,8 +357,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                    }
                    [ H.div
                        { className: "form-group__label" }
-                        [ B.icon
+                        [ B.icon { name: "book" }
-                            { name: "book" }
                        ]
                    , H.div
                        { className: intercalate " "
@@ -383,7 +382,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                                      Enabled
                                }
                                [ B.icon
-                                    { name: "floppy-o"
+                                    { name: "floppy"
                                    , className: "text-darker"
                                    }
                                ]
@@ -400,8 +399,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                    }
                    [ H.div
                        { className: "form-group__label" }
-                        [ B.icon
+                        [ B.icon { name: "border-width" }
-                            { name: "header" }
                        ]
                    , H.div
                        { className: intercalate " "
@@ -426,7 +424,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                                      Enabled
                                }
                                [ B.icon
-                                    { name: "floppy-o"
+                                    { name: "floppy"
                                    , className: "text-darker"
                                    }
                                ]
@@ -443,8 +441,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                    }
                    [ H.div
                        { className: "form-group__label" }
-                        [ B.icon
+                        [ B.icon { name: "info" }
-                            { name: "info" }
                        ]
                    , H.div
                        { className: intercalate " "
@@ -469,7 +466,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                                      Enabled
                                }
                                [ B.icon
-                                    { name: "floppy-o"
+                                    { name: "floppy"
                                    , className: "text-darker"
                                    }
                                ]
@@ -489,8 +486,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                    }
                    [ H.div
                        { className: "form-group__label" }
-                        [ B.icon
+                        [ B.icon { name: "zoom-in" }
-                            { name: "search-plus" }
                        ]
                    , H.div
                        { className: intercalate " "
@@ -515,7 +511,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                                      Enabled
                                }
                                [ B.icon
-                                    { name: "floppy-o"
+                                    { name: "floppy"
                                    , className: "text-darker"
                                    }
                                ]
@@ -532,9 +528,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                    }
                    [ H.div
                        { className: "form-group__label" }
-                        [ B.icon
+                        [ B.icon { name: "person" } ]
-                            { name: "user" }
-                        ]
                    , H.div
                        { className: intercalate " "
                            [ "form-group__field"
@@ -558,7 +552,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                                      Enabled
                                }
                                [ B.icon
-                                    { name: "floppy-o"
+                                    { name: "floppy"
                                    , className: "text-darker"
                                    }
                                ]
@@ -575,8 +569,7 @@ tableHeaderEditionBlockCpt = here.component "tableHeaderEditionBlock" cpt
                    }
                    [ H.div
                        { className: "form-group__label" }
-                        [ B.icon
+                        [ B.icon { name: "calendar" }
-                            { name: "calendar" }
                        ]
                    , H.div
                        { className: intercalate " "
@@ -658,7 +651,7 @@ tableHeaderLayoutCpt = here.component "tableHeaderLayout" cpt
                  , H.text $ " " <> desc
                  ]
              , H.p {}
-                  [ H.span { className: "fa fa-search-plus" } []
+                  [ H.span { className: "bi bi-zoom-in" } []
                  , H.text $ " " <> query
                  ]
              , H.p
@@ -671,7 +664,7 @@ tableHeaderLayoutCpt = here.component "tableHeaderLayout" cpt
              ]
          , H.div { className: "col-md-4 content" }
              [ H.p {}
-                  [ H.span { className: "fa fa-user" } []
+                  [ B.icon { name: "person" }
                  , H.text $ " " <> user
                  ]
              , H.p {}

--- a/src/Gargantext/Components/Tile.purs
+++ b/src/Gargantext/Components/Tile.purs
@@ -8,6 +8,7 @@ import Gargantext.Prelude
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Gargantext.Components.App.Store (Boxes)
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Routes (Tile)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
@@ -37,11 +38,10 @@ tileBlockCpt = here.component "tileBlock" cpt
        [ H.div
            { className: "tile-block" }
            [ H.div { className: "tile-block__header" }
-                [ H.i
+                [ B.iconButton
-                    { className: "btn fa fa-times"
+                    { name: "x"
-                    , on: { click: closeCallback }
+                    , callback: closeCallback
                    }
-                    []
                ]
            , H.div { className: "tile-block__body" }
                children

--- a/src/Gargantext/Components/TileMenu.purs
+++ b/src/Gargantext/Components/TileMenu.purs
@@ -10,6 +10,7 @@ import Data.Nullable (null)
 import Data.UUID as UUID
 import Effect (Effect)
 import Gargantext.Components.App.Store (Boxes)
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Hooks.LinkHandler (useLinkHandler)
 import Gargantext.Routes (AppRoute, Tile)
 import Gargantext.Utils.Popover as Popover
@@ -67,7 +68,7 @@ tileMenuCpt = here.component "tileMenu" cpt
            }
            [ R.fragment children
            , H.div { className: "tile-menu__popover" }
-                [ H.ul {}
+                [ H.ul { style: { "padding-left": "0px" } }
                    [
                      -- Current Tile
                      case props.currentTile of
@@ -82,8 +83,8 @@ tileMenuCpt = here.component "tileMenu" cpt
                                        Popover.setOpen popoverRef false
                                    }
                                }
-                                [ H.i { className: "fa fa-share" } []
+                                [ B.icon { name: "share" }
-                                , H.text "open on current tile"
+                                , H.span { className: "ms-1" } [ H.text "open on current tile" ]
                                ]
                            ]
                    ,
@@ -100,8 +101,8 @@ tileMenuCpt = here.component "tileMenu" cpt
                                        Popover.setOpen popoverRef false
                                    }
                                }
-                                [ H.i { className: "fa fa-caret-square-o-right" } []
+                                [ B.icon { name: "caret-right-square" }
-                                , H.text "open from a new tile"
+                                , H.span { className: "ms-1" } [ H.text "open from a new tile" ]
                                ]
                            ]
                    ,
@@ -118,8 +119,8 @@ tileMenuCpt = here.component "tileMenu" cpt
                                        Popover.setOpen popoverRef false
                                    }
                                }
-                                [ H.i { className: "fa fa-caret-square-o-down" } []
+                                [ B.icon { name: "caret-down-square" }
-                                , H.text "open from a new tile"
+                                , H.span { className: "ms-1" } [ H.text "open from a new tile" ]
                                ]
                            ]
                    ]

--- a/src/Gargantext/Components/TopBar.purs
+++ b/src/Gargantext/Components/TopBar.purs
@@ -71,9 +71,8 @@ componentCpt = here.component "main" cpt
            }
            [ H.a
                { className: "nav-link navbar-text" }
-                [ H.span
+                [ B.icon
-                    { className: "fa fa-question-circle-o" }
+                    { name: "question-circle" }
-                    []
                ]
            ]
        , H.li { className: "nav-item" }
@@ -89,7 +88,7 @@ componentCpt = here.component "main" cpt
                    else "Show Tree"
                }
                [ B.icon
-                    { name: "sidebar"
+                    { name: "layout-sidebar"
                    , className: ""
                    }
                -- , 
@@ -171,7 +170,7 @@ divDropdownLeftCpt = here.component "divDropdownLeft" cpt
  menuElement = LiNav
    { title: "GarganText"
    , href: "#"
-    , icon: "fa fa-navicon"
+    , icon: "list"
    , text: "GarganText"
    }
@@ -179,25 +178,25 @@ divDropdownLeftCpt = here.component "divDropdownLeft" cpt
    [ [ LiNav
          { title: "User documentation"
          , href: "https://write.frame.gargantext.org/s/649a6d7e1db3b365d6d0b1430d9700cc0bb4fdb1348dd1040a94c95f98979abe"
-          , icon: "fa fa-lightbulb-o"
+          , icon: "lightbulb"
          , text: "User documentation"
          }
      , LiNav
          { title: "GargTools"
          , href: "https://gargtools.iscpif.fr"
-          , icon: "fa fa-gears"
+          , icon: "gear"
          , text: "Format your data with GargTools!"
          }
      , LiNav
          { title: "Chat"
          , href: "https://matrix.to/#/#GarganText:matrix.org"
-          , icon: "fa fa-weixin"
+          , icon: "chat"
          , text: "Chat"
          }
      , LiNav
          { title: "Forums"
          , href: "https://discourse.iscpif.fr/c/gargantext"
-          , icon: "fa fa-bullhorn"
+          , icon: "megaphone"
          , text: "Forum"
          }
      -- , LiNav { title : "Report bug here"
@@ -210,7 +209,7 @@ divDropdownLeftCpt = here.component "divDropdownLeft" cpt
      [ LiNav
          { title: "Learn with us!"
          , href: "https://iscpif.fr/gargantext/formation/"
-          , icon: "fa fa-graduation-cap"
+          , icon: "mortarboard"
          , text: "Register for a training session"
          }
      ]
@@ -218,7 +217,7 @@ divDropdownLeftCpt = here.component "divDropdownLeft" cpt
      [ LiNav
          { title: "Changelog"
          , href: "https://gitlab.iscpif.fr/gargantext/main/blob/master/CHANGELOG.md"
-          , icon: "fa fa-clock-o"
+          , icon: "clock"
          , text: "Versions change"
          }
      {-, LiNav { title : "Code documentation"
@@ -229,13 +228,13 @@ divDropdownLeftCpt = here.component "divDropdownLeft" cpt
      , LiNav
          { title: "API documentation"
          , href: "https://cnrs.gargantext.org/swagger-ui"
-          , icon: "fa fa-code-fork"
+          , icon: "git"
          , text: "API documentation"
          }
      , LiNav
          { title: "Source code"
          , href: "https://gitlab.iscpif.fr/gargantext/main"
-          , icon: "fa fa-code"
+          , icon: "code"
          , text: "Source Code"
          }
      ]
@@ -244,7 +243,7 @@ divDropdownLeftCpt = here.component "divDropdownLeft" cpt
      [ LiNav
          { title: "Learn more about us"
          , href: "https://gargantext.org"
-          , icon: "fa fa-question"
+          , icon: "question"
          , text: "About"
          }
      ]
@@ -269,7 +268,7 @@ menuButtonCpt = here.component "menuButton" cpt
      , on: { click: \_ -> T.modify_ not show }
      , role: "button"
      }
-      [ H.span { aria: { hidden: true }, className: icon <> " px-1" } []
+      [ H.span { aria: { hidden: true } } [ B.icon { name: icon, className: "px-1" } ]
      , H.text text
      ]
@@ -331,7 +330,7 @@ liNav
      , title: title'
      , href: href'
      }
-      [ H.span { className: icon' } []
+      [ B.icon { name: icon' }
      , H.text $ " " <> text'
      ]
  ]
@@ -354,8 +353,8 @@ handedChooserCpt = here.component "handedChooser" cpt
    -- | Computed
    -- |
    let
-      handedClass LeftHanded = "fa fa-hand-o-left"
+      handedClass LeftHanded = "sign-turn-left"
-      handedClass RightHanded = "fa fa-hand-o-right"
+      handedClass RightHanded = "sign-turn-right"
    -- | Behaviors
    -- |
@@ -368,11 +367,7 @@ handedChooserCpt = here.component "handedChooser" cpt
    -- | Render
    -- |
    pure $
-      H.a
+      H.a { className: "nav-link navbar-text" }
-        { className: "nav-link navbar-text" }
+        [ H.span { on: { click: onClick } }
-        [ H.span
+            [ B.icon { name: handedClass handed' } ]
-            { className: handedClass handed'
-            , on: { click: onClick }
-            }
-            []
        ]
--- a/src/Gargantext/Components/TreeSearch.purs
+++ b/src/Gargantext/Components/TreeSearch.purs
@@ -101,7 +101,7 @@ treeSearchCpt = here.component "treeSearch" cpt
                    , on: { click: submit inputRef query }
                    , type: "submit"
                    }
-                    [ H.span { className: "fa fa-search" } [] ]
+                    [ B.icon { name: "search" } ]
                ]
            ]
        , treeSearchState { visible, query, sessions: sessions' }
@@ -214,7 +214,7 @@ treeSearchRenderCpt = here.component "treeSearchRenderCpt" cpt
                      goToRoute $ getRouteFromSearchResult sd session
                  , variant: ButtonVariant Light
                  }
-                  [ B.icon { name: getIcon sd.type true }
+                  [ B.icon { name: getIcon sd.type { open: true } }
                  , B.wad_ [ "d-inline-block", "w-1" ]
                  , H.text sd.name
                  ]

--- a/src/Gargantext/Types.purs
+++ b/src/Gargantext/Types.purs
@@ -361,66 +361,57 @@ translateEN = case _ of
 ------------------------------------------------------
 -- @NOTE: #379 deprecate the idea of circle/non-circle icons
-getIcon :: NodeType -> Boolean -> String
-getIcon NodeUser false = "user-circle"
+type IconProps = (open :: Boolean)
-getIcon NodeUser true = "user"
+getIcon :: NodeType -> Record IconProps -> String
+getIcon NodeUser _ = "person"
 ------------------------------------------------------
-getIcon Folder false = "folder"
+getIcon Folder _ = "folder"
-getIcon Folder true = "folder-open-o"
 ------------------------------------------------------
-getIcon FolderPrivate true = "lock"
+getIcon FolderPrivate _ = "lock"
-getIcon FolderPrivate false = "lock-circle"
+getIcon FolderShared _ = "share"
-getIcon FolderShared true = "share-alt"
+getIcon Team _ = "people"
-getIcon FolderShared false = "share-circle"
-getIcon Team true = "users"
-getIcon Team false = "users-closed"
-getIcon FolderPublic true = "globe"
+getIcon FolderPublic _ = "globe"
-getIcon FolderPublic false = "globe"
 ------------------------------------------------------
-getIcon Corpus true = "book"
+getIcon Corpus _ = "book"
-getIcon Corpus false = "book-circle"
-getIcon Phylo _ = "code-fork"
+getIcon Phylo _ = "git"
-getIcon Graph _ = "hubzilla"
+getIcon Graph _ = "diagram-3"
-getIcon NodeTexts _ = "newspaper-o"
+getIcon NodeTexts _ = "newspaper"
-getIcon Dashboard _ = "signal"
+getIcon Dashboard _ = "speedometer"
 getIcon NodeList _ = "list"
 getIcon NodeFile _ = "file" -- TODO depending on mime type we can use fa-file-image etc
-getIcon Annuaire true = "address-card-o"
+getIcon Annuaire _ = "person-vcard"
-getIcon Annuaire false = "address-card"
-getIcon NodeContact true = "address-card-o"
+getIcon NodeContact _ = "person-vcard"
-getIcon NodeContact false = "address-card"
-getIcon Notes true = "file-text-o"
+getIcon Notes _ = "file-text"
-getIcon Notes false = "file-text"
-getIcon Calc true = "calculator"
+getIcon Calc _ = "file-spreadsheet"
-getIcon Calc false = "calculator"
-getIcon NodeFrameNotebook true = "file-code-o"
+getIcon NodeFrameNotebook _ = "file-code"
-getIcon NodeFrameNotebook false = "code"
-getIcon NodeFrameVisio true = "video-camera"
+getIcon NodeFrameVisio _ = "webcam"
-getIcon NodeFrameVisio false = "video-camera"
-getIcon (NodePublic nt) b = getIcon nt b
+getIcon (NodePublic nt) p = getIcon nt p
-getIcon _ true = "folder-open"
+getIcon _ { open: false } = "folder2-open"
-getIcon _ false = "folder-o"
+getIcon _ { open: true } = "folder"
 ------------------------------------------------------
-fldr :: NodeType -> Boolean -> String
+fldr :: NodeType -> Record IconProps -> String
-fldr nt flag = classNamePrefix <> getIcon nt flag
+fldr nt p = classNamePrefix <> getIcon nt p
-charCodeIcon :: NodeType -> Boolean -> String
+charCodeIcon :: NodeType -> Record IconProps -> String
-charCodeIcon nt flag = glyphiconToCharCode $ getIcon nt flag
+charCodeIcon nt p = glyphiconToCharCode $ getIcon nt p
 publicize :: NodeType -> NodeType
 publicize (NodePublic nt) = NodePublic nt
@@ -783,7 +774,7 @@ getTabIcon "Authors" = "list"
 getTabIcon "Institutes" = "list"
 getTabIcon "Sources" = "list"
 getTabIcon "Terms" = "list"
-getTabIcon "Documents" = "newspaper-o"
+getTabIcon "Documents" = "newspaper"
 getTabIcon "Trash" = "trash"
 getTabIcon _ = ""

--- a/src/sass/_legacy/_login.sass
+++ b/src/sass/_legacy/_login.sass
@@ -2,7 +2,7 @@
  // making ".thead" small, but not its affiliated ".tbody"
  thead th
-    padding: $table-cell-padding-sm
+    padding: $table-cell-padding-x-sm
  &__active-places

--- a/src/sass/components/_grouped.scss
+++ b/src/sass/components/_grouped.scss
@@ -259,7 +259,7 @@
 .modal-dialog .b-icon, 
 .modal-dialog .fa
 {
-  &:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times) {
+  &:not(.bi-check-circle):not(.bi-exclamation-circle):not(.bi-circle-fill):not(.bi-times) {
    &:before {
        color: $primary;
    }

--- a/src/sass/themes/_base.scss
+++ b/src/sass/themes/_base.scss
@@ -35,10 +35,15 @@
 //                          * `/text`
 //                          * `/visibility`
 //
+@import "../../../node_modules/bootstrap/scss/maps";
+@import "../../../node_modules/bootstrap/scss/utilities";
 @import "../../../node_modules/bootstrap/scss/root";
+@import "../../../node_modules/bootstrap/scss/reboot";
 @import "../../../node_modules/bootstrap/scss/type";
 @import "../../../node_modules/bootstrap/scss/images";
-@import "../../../node_modules/bootstrap/scss/code";
+@import "../../../node_modules/bootstrap/scss/containers";
 @import "../../../node_modules/bootstrap/scss/grid";
 @import "../../../node_modules/bootstrap/scss/tables";
 @import "../../../node_modules/bootstrap/scss/forms";
@@ -46,18 +51,15 @@
 @import "../../../node_modules/bootstrap/scss/transitions";
 @import "../../../node_modules/bootstrap/scss/dropdown";
 @import "../../../node_modules/bootstrap/scss/button-group";
-@import "../../../node_modules/bootstrap/scss/input-group";
-@import "../../../node_modules/bootstrap/scss/custom-forms";
 @import "../../../node_modules/bootstrap/scss/nav";
 @import "../../../node_modules/bootstrap/scss/navbar";
 @import "../../../node_modules/bootstrap/scss/card";
+@import "../../../node_modules/bootstrap/scss/accordion";
 @import "../../../node_modules/bootstrap/scss/breadcrumb";
 @import "../../../node_modules/bootstrap/scss/pagination";
 @import "../../../node_modules/bootstrap/scss/badge";
-@import "../../../node_modules/bootstrap/scss/jumbotron";
 @import "../../../node_modules/bootstrap/scss/alert";
 @import "../../../node_modules/bootstrap/scss/progress";
-@import "../../../node_modules/bootstrap/scss/media";
 @import "../../../node_modules/bootstrap/scss/list-group";
 @import "../../../node_modules/bootstrap/scss/close";
 @import "../../../node_modules/bootstrap/scss/toasts";
@@ -66,13 +68,12 @@
 @import "../../../node_modules/bootstrap/scss/popover";
 @import "../../../node_modules/bootstrap/scss/carousel";
 @import "../../../node_modules/bootstrap/scss/spinners";
-@import "../../../node_modules/bootstrap/scss/print";
+@import "../../../node_modules/bootstrap/scss/offcanvas";
+@import "../../../node_modules/bootstrap/scss/placeholders";
+@import "../../../node_modules/bootstrap/scss/helpers";
-@import "../../../node_modules/bootstrap/scss/utilities/embed";
+@import "../../../node_modules/bootstrap/scss/utilities/api";
-@import "../../../node_modules/bootstrap/scss/utilities/interactions";
-@import "../../../node_modules/bootstrap/scss/utilities/screenreaders";
-@import "../../../node_modules/bootstrap/scss/utilities/shadows";
-@import "../../../node_modules/bootstrap/scss/utilities/stretched-link";
 /// (part 2.2: overriding Bootstrap styles + import project styles)