Make main container fluid

packages.dhall

@@ -163,7 +163,7 @@ in upstream
       , "validation", "web-html"
       ]
       "https://github.com/paluh/purescript-react-bootstrap.git"
-      "c00b215c1a9d51f08d67051d2c6cc3a4dccda0f1"
+      "e872f63d8d69dd62baf7c97e63b083eade6fb88d"
   with datetime-iso =
       mkPackage
         [ "aff"

public/style.scss

@@ -18,6 +18,10 @@ $link-color: #511CF7;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
 
+.large-switch {
+  font-size: 20px;
+}
+
 .shadow-bottom {
   box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
 }
@@ -26,15 +30,10 @@ $link-color: #511CF7;
   box-shadow: 0 -4px 2px -2px rgba(0, 0, 0, 0.1);
 }
 
-
 .font-weight-bold {
   font-weight: 600 !important;
 }
 
-.large-switch {
-  font-size: 20px;
-}
-
 .text-truncate {
   white-space: nowrap;
   overflow: hidden;
@@ -59,7 +58,7 @@ $link-color: #511CF7;
 
 .danger-color {
   color: $danger;
-} 
+}
 
 .loading {
   animation: pulse 1s infinite;
@@ -92,10 +91,10 @@ $link-color: #511CF7;
   overflow: hidden;
   height: 100%;
 }
-.form-control {
-  height: 46px;
-}
 
+// .form-control {
+//   height: 46px;
+// }
 
 $utilities: map-merge(
   $utilities, (
@@ -104,6 +103,26 @@ $utilities: map-merge(
       state: hover,
       values: none underline line-through,
     ),
+    // * We use original color classes like `text-mute`, `text-reset`.
+    // * We add on hover versions of the above plus version for primary color.
+    // * We add `text-color-primary` without hover as well.
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          ("primary": $primary),
+        ),
+      ),
+    ),
+    "color-hover": (
+      property: color,
+      class: text,
+      state: hover,
+      values: map-merge(
+        map-get(map-get($utilities, "color"), "values"),
+        ("primary": $primary)
+      ),
+    ),
     "background-color": (
       property: background-color,
       class: bg,

src/Component/App.purs

@@ -99,9 +99,7 @@ autoConnectWallet walletBrand onSuccess = liftEffect (window >>= Wallet.cardano)
 
 -- | Use this switch to autoconnect the wallet for testing.
 debugWallet :: Maybe WalletBrand
-debugWallet = Just Eternl -- Nami -- Nothing
-
--- debugWallet = Nothing
+debugWallet = Just Nami -- Eternl -- Nami -- Nothing
 
 data DisplayOption = Default | About
 
@@ -304,11 +302,11 @@ mkApp = do
                 , inModal: true
                 }
             jsx
-        , DOM.div { className: "container-xl" } do
+        , do
             let
-              -- renderTab props children = tab props $ DOM.div { className: "row pt-4" } children
               contractArray = Array.fromFoldable contracts
             subcomponents.contractListComponent { contracts: contractArray, connectedWallet: possibleWalletInfo }
+              -- renderTab props children = tab props $ DOM.div { className: "row pt-4" } children
 
         --          [ tabs { fill: true, justify: true, defaultActiveKey: "contracts" }
         --              [ renderTab