styles

src/HubPage/View.elm

@@ -1,16 +1,36 @@
 module HubPage.View exposing (..)
 
-import Html exposing (Html)
+import Html exposing (Html, a, div, h1, h3, span, text)
+import Html.Attributes exposing (attribute)
 import Instances.View
 import Model exposing (Model)
 import Modules.View
+import Palette exposing (classes, redFont)
 import Services.View
 
 
 view : Model -> Html msg
 view model =
-    Html.div []
-        [ Services.View.view model
+    div []
+        [ h1 [ redFont ] [ text "Developer Hub" ]
+        , welcomeText
+        , h3 [] [ text "Featured Services" ]
+        , Services.View.view model
+        , h3 [] [ text "Featured Modules" ]
         , Modules.View.view model
+        , h3 [] [ text "Service Instances" ]
         , Instances.View.view model
         ]
+
+
+welcomeText : Html msg
+welcomeText =
+    div [ classes "w-two-thirds" ]
+        [ span []
+            [ text "Welcome to the Fluence Developer Hub! Start building with composing existing services or explore featured modules to create your custom services. Learn more about how to build applications in "
+            , a [ attribute "href" "/" ] [ text "Documentation" ]
+            , text " and "
+            , a [ attribute "href" "/" ] [ text "Tutorials" ]
+            , text "."
+            ]
+        ]

src/Instances/View.elm

@@ -17,7 +17,7 @@ toInstance peerId identify blueprints service =
             blueprints |> Dict.get service.blueprint_id |> Maybe.withDefault "unknown"
 
         ip =
-            List.head identify.external_addresses |> Maybe.withDefault "unknown"
+            List.head identify.external_addresses |> Maybe.map (String.split "/") |> Maybe.map (List.drop 2) |> Maybe.andThen List.head |> Maybe.withDefault "unknown"
     in
     { name = name, instance = service.service_id, peerId = peerId, ip = ip }
 
@@ -45,7 +45,7 @@ view model =
 
 viewTable : List Instance -> Html msg
 viewTable instances =
-    div [ classes "pa4" ]
+    div [ classes "pa1" ]
         [ div [ classes "" ]
             [ table [ classes "f6 w-100 mw8 center", attribute "cellspacing" "0" ]
                 [ thead []

src/Modules/View.elm

@@ -2,6 +2,7 @@ module Modules.View exposing (..)
 
 import Dict exposing (Dict)
 import Html exposing (Html, div, p, span, text)
+import Html.Attributes exposing (attribute)
 import Model exposing (Model, PeerData)
 import Modules.Model exposing (ModuleShortInfo)
 import Palette exposing (classes)
@@ -45,7 +46,7 @@ view modules =
 viewService : ModuleShortInfo -> Html msg
 viewService service =
     div [ classes "fl w-third-ns pa2" ]
-        [ div [ classes "fl w-100 br2 ba solid pa2 mh2" ]
+        [ div [ attribute "href" "#", classes "fl w-100 link dim black mw5 dt hide-child ba b-black pa4 br2 solid" ]
             [ p [ classes "tl di" ] [ span [ classes "b pl2" ] [ text service.name ], span [ classes "di fr pr2" ] [ instancesText service.instanceNumber ] ]
             ]
         ]

src/Palette.elm

@@ -17,7 +17,7 @@ limitations under the License.
 -}
 
 import Html exposing (Html)
-import Html.Attributes exposing (classList)
+import Html.Attributes exposing (classList, style)
 
 
 classes : String -> Html.Attribute msg
@@ -33,3 +33,11 @@ shortHashRaw size hash =
         , "..."
         , String.right (size - 1) hash
         ]
+
+
+redFont =
+    style "color" "#E11E5A"
+
+
+darkRed =
+    style "color" "#802843"

src/Services/View.elm

@@ -3,6 +3,7 @@ module Services.View exposing (..)
 import Blueprints.Model exposing (Blueprint)
 import Dict exposing (Dict)
 import Html exposing (Html, div, text)
+import Html.Attributes exposing (attribute)
 import Model exposing (Model, PeerData)
 import Palette exposing (classes)
 import Services.Model exposing (Service, ServiceInfo)
@@ -21,13 +22,13 @@ view model =
         servicesView =
             List.map viewService info
     in
-    div [ classes "cf ph2-ns" ] servicesView
+    div [ classes "cf ph1-ns" ] servicesView
 
 
 viewService : ServiceInfo -> Html msg
 viewService service =
     div [ classes "fl w-third-ns pa2" ]
-        [ div [ classes "fl w-100 br2 ba solid ma2 pa3" ]
+        [ div [ attribute "href" "#", classes "fl w-100 link dim black mw5 dt hide-child ba b-black pa4 br2 solid" ]
             [ div [ classes "w-100 mb2 b" ] [ text service.name ]
             , div [ classes "w-100 mb4" ] [ text ("By " ++ service.author) ]
             , div [ classes "w-100" ] [ instancesText service.instanceNumber ]