Restyle wallet screen

backend/sass/common.blocks/_page.scss

@@ -33,7 +33,6 @@
 
 .page__content {
   display: none;
-  margin: 2rem;
   flex-grow: 1;
 }
 

backend/sass/common.blocks/_wallet.scss

@@ -0,0 +1,38 @@
+/*********************************************************************************
+   Ensure classes and structure are created in accordance with the BEM methodology.
+   For more info: https://en.bem.info/methodology/quick-start/
+
+*********************************************************************************/
+
+@import '../include/defs';
+
+.keys-list {
+  margin-top: 20px;
+  margin-left: 22px;
+}
+
+.wallet__table-row {
+  border-style: $std-border-style;
+  border-color: $std-border-color;
+  border-width: $std-border-width;
+}
+
+.wallet__table-heading {
+  @extend .table__heading;
+  padding-left: $medium-padding;
+  padding-right: $medium-padding;
+}
+
+.wallet__table-cell {
+  padding: $medium-padding;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.wallet__table-button {
+  padding: 0 $medium-padding;
+  margin-right: $medium-margin;
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

backend/sass/index.scss

@@ -63,4 +63,4 @@
 @import 'common.blocks/error-list';
 @import 'common.blocks/signal';
 @import 'common.blocks/transaction-status';
-
+@import 'common.blocks/wallet';

frontend/src/Frontend/UI/Button.hs

@@ -42,6 +42,8 @@ module Frontend.UI.Button
   , refreshButton
   , confirmButton
   , cancelButton
+  , receiveButton
+  , sendButton
   , copyToClipboard
   -- ** Images in buttons
   , btnTextIcon
@@ -271,6 +273,15 @@ cancelButton :: StaticButtonConstraints t m => UiButtonCfg -> Text -> m (Event t
 cancelButton cfg msg =
     uiButton (cfg & uiButtonCfg_class <>~ "button_type_tertiary") $ text msg
 
+receiveButton :: StaticButtonConstraints t m => UiButtonCfg -> m (Event t ())
+receiveButton cfg =
+  uiButton (cfg & uiButtonCfg_class <>~ "button_type_secondary" <> "button_type_secondary") $
+    btnTextIcon (static @"img/receive.svg") "Receive" blank >> text "Receive"
+
+sendButton :: StaticButtonConstraints t m => UiButtonCfg -> m (Event t ())
+sendButton cfg =
+  uiButton (cfg & uiButtonCfg_class <>~ "button_type_secondary" <> "button_type_secondary") $
+    btnTextIcon (static @"img/send.svg") "Send" blank >> text "Send"
 
 -- | Create HTML element attributes from config.
 toBtnAttrs :: UiButtonCfg -> Map Text Text

frontend/src/Frontend/UI/Wallet.hs

@@ -130,20 +130,21 @@ uiKeyItems aWallet = do
         <> "class" =: "wallet table"
     events <- elAttr "table" tableAttrs $ do
       el "colgroup" $ do
+        elAttr "col" ("style" =: "width: 16%") blank
+        elAttr "col" ("style" =: "width: 16%") blank
+        elAttr "col" ("style" =: "width: 16%") blank
+        elAttr "col" ("style" =: "width: 16%") blank
+        elAttr "col" ("style" =: "width: 16%") blank
         elAttr "col" ("style" =: "width: 20%") blank
-        elAttr "col" ("style" =: "width: 35%") blank
-        elAttr "col" ("style" =: "width: 15%") blank
-        elAttr "col" ("style" =: "width: 35%") blank
-        elAttr "col" ("style" =: "width: 15%") blank
-        elAttr "col" ("style" =: "width: 10%") blank
       el "thead" $ el "tr" $ do
-        let mkHeading = elClass "th" "table__heading" . text
+        let mkHeading = elClass "th" "wallet__table-heading" . text
         traverse_ mkHeading $
           [ "Account Name"
           , "Public Key"
           , "Chain ID"
           , "Notes"
           , "Balance"
+          , ""
           ]
 
       el "tbody" $ listWithKey keyMap uiKeyItem
@@ -164,22 +165,28 @@ uiKeyItem i d = do
   md <- maybeDyn $ someAccount Nothing Just <$> d
   switchHold never <=< dyn $ ffor md $ \case
     Nothing -> pure never
-    Just account -> elClass "tr" "table__row" $ do
-      el "td" $ dynText $ unAccountName . _account_name <$> account
+    Just account -> elClass "tr" "wallet__table-row" $ do
+      let td = elClass "td" "wallet__table-cell"
 
-      let public = keyToText . _keyPair_publicKey . _account_key <$> account
-      elClass "td" "wallet__key wallet__key_type_public" $ dynText public
-      el "td" $ dynText $ Pact._chainId . _account_chainId <$> account
-      el "td" $ dynText $ _account_notes <$> account
+      td $ dynText $ unAccountName . _account_name <$> account
+      td $ dynText $ keyToText . _keyPair_publicKey . _account_key <$> account
+      td $ dynText $ Pact._chainId . _account_chainId <$> account
+      td $ dynText $ _account_notes <$> account
       -- TODO balance
-      el "td" $ text "Balance Placeholder"
+      td $ text "Balance Placeholder"
 
-      onDel <- elClass "td" "wallet__delete" $
-        deleteButton $
-          def & uiButtonCfg_title .~ Just "Delete key permanently"
-              & uiButtonCfg_class %~ (<> "wallet__add-delete-button")
+      td $ do
+        let cfg = def
+              & uiButtonCfg_class <>~ "wallet__table-button"
 
-      pure (attachWith (\a _ -> (i, _account_name a)) (current account) onDel)
+        receiveButton $ cfg & uiButtonCfg_disabled .~ True
+        sendButton $ cfg & uiButtonCfg_disabled .~ True
+
+        onDel <- do
+          deleteButton $
+            def & uiButtonCfg_title .~ Just "Delete key permanently"
+                & uiButtonCfg_class %~ (<> "wallet__add-delete-button")
+        pure (attachWith (\a _ -> (i, _account_name a)) (current account) onDel)
 
 -- | Get the balance of an account from the network. 'Nothing' indicates _some_
 -- failure, either a missing account or connectivity failure. We have no need to