Initial version of dev server. finos#33

AttilaMihaly · Dec 2, 2020 · 457df8f · 457df8f
1 parent 1ec34c4
commit 457df8f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 19 deletions.
diff --git a/cli/src/Morphir/Web/DevelopMain.elm b/cli/src/Morphir/Web/DevelopMain.elm
@@ -2,7 +2,8 @@ module Morphir.Web.DevelopMain exposing (..)
 
 import Browser
 import Dict
-import Element exposing (Element, column, el, fill, padding, paragraph, px, row, text, width)
+import Element exposing (Element, column, el, fill, height, image, padding, paragraph, px, row, text, width)
+import Element.Background as Background
 import Element.Font as Font
 import Html exposing (Html)
 import Http
@@ -15,7 +16,7 @@ import Morphir.IR.Module as Module
 import Morphir.IR.Name as Name
 import Morphir.IR.Path as Path
 import Morphir.Web.Theme exposing (Theme)
-import Morphir.Web.Theme.Light as Light
+import Morphir.Web.Theme.Light as Light exposing (blue)
 
 
 
@@ -89,23 +90,33 @@ view model =
         { options =
             []
         }
-        [ padding 10
-        , Font.family
+        [ Font.family
             [ Font.external
                 { name = "Poppins"
                 , url = "https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
                 }
             , Font.sansSerif
             ]
+        , Font.size (scaled 2)
         , width fill
         ]
         (column [ width fill ]
-            [ row [ width fill ]
-                [ el
+            [ row
+                [ width fill
+                , Background.color blue
+                ]
+                [ row
                     [ padding 10
                     , width fill
                     ]
-                    (text "Morphir Development Server")
+                    [ image
+                        [ height (px 60)
+                        ]
+                        { src = "assets/2020_Morphir_Logo_Horizontal_WHT.svg"
+                        , description = "Morphir"
+                        }
+                    , theme.heading 3 "Development Server"
+                    ]
                 , case model of
                     WaitingForResponse ->
                         theme.disabledButton "Loading ..."
@@ -121,9 +132,14 @@ view model =
         )
 
 
+scaled : Int -> Int
+scaled =
+    Element.modular 12 1.25 >> round
+
+
 theme : Theme Msg
 theme =
-    Light.theme
+    Light.theme scaled
 
 
 viewResult : Model -> Element Msg
@@ -175,7 +191,7 @@ viewDistribution distro =
                         , packageName |> Path.toList |> List.map (Name.toHumanWords >> String.join " ") |> String.join " / "
                         ]
                     )
-                , text "Modules"
+                , theme.heading 1 "Modules"
                 , column []
                     (packageDefinition.modules
                         |> Dict.toList

diff --git a/src/Morphir/Web/Theme.elm b/src/Morphir/Web/Theme.elm
@@ -7,4 +7,5 @@ type alias Theme msg =
     { button :
         { onPress : msg, label : String } -> Element msg
     , disabledButton : String -> Element msg
+    , heading : Int -> String -> Element msg
     }
diff --git a/src/Morphir/Web/Theme/Light.elm b/src/Morphir/Web/Theme/Light.elm
@@ -1,22 +1,22 @@
 module Morphir.Web.Theme.Light exposing (..)
 
-import Element exposing (el, padding, text)
+import Element exposing (el, padding, paddingXY, text)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Element.Input as Input
 import Morphir.Web.Theme exposing (Theme)
 
 
-theme : Theme msg
-theme =
+theme : (Int -> Int) -> Theme msg
+theme scaled =
     { button =
         \options ->
             Input.button
-                [ Background.color blue
-                , padding 10
-                , Border.rounded 5
-                , Font.size 12
+                [ Background.color orange
+                , padding (scaled 1)
+                , Border.rounded (scaled -2)
+                , Font.size (scaled 2)
                 , Font.bold
                 ]
                 { onPress = Just options.onPress
@@ -26,12 +26,19 @@ theme =
         \label ->
             el
                 [ Background.color gray
-                , padding 10
-                , Border.rounded 5
-                , Font.size 12
+                , padding (scaled 1)
+                , Border.rounded (scaled -2)
+                , Font.size (scaled 2)
                 , Font.bold
                 ]
                 (text label)
+    , heading =
+        \level label ->
+            el
+                [ Font.size (scaled (8 - level))
+                , paddingXY (scaled level) (scaled (4 - level))
+                ]
+                (text label)
     }