From 5083aa6f0fd654f767a6f28e09fd5bb560de5ce7 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <icid.asset@gmail.com>
Date: Sat, 2 Feb 2019 22:44:18 +0100
Subject: [PATCH] Some layout improvements

---
 src/Applications/UI/Kit.elm          | 21 +++++++++++++---
 src/Applications/UI/Sources/Form.elm | 37 ++++++++++++++++++----------
 stack.yaml                           |  2 +-
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/Applications/UI/Kit.elm b/src/Applications/UI/Kit.elm
index f1d02563..fce61dc7 100644
--- a/src/Applications/UI/Kit.elm
+++ b/src/Applications/UI/Kit.elm
@@ -208,9 +208,13 @@ button buttonType msg child =
 
 
 canister : List (Html msg) -> Html msg
-canister =
+canister children =
     chunk
-        [ T.mh1, T.ph3 ]
+        [ T.overflow_scroll, T.w_100 ]
+        [ chunk
+            [ T.mh1, T.ph3, T.pb3 ]
+            children
+        ]
 
 
 centeredContent : List (Html msg) -> Html msg
@@ -260,11 +264,13 @@ h2 text =
     slab
         Html.h2
         [ css headerFontStyles ]
-        [ T.f3
+        [ T.center
+        , T.f3
         , T.fw7
         , T.lh_title
         , T.mb4
-        , T.mt0
+        , T.mt3
+        , T.tc
         ]
         [ Html.text text ]
 
@@ -489,6 +495,13 @@ selectStyles =
         [ Css.borderBottom3 (px 1) solid (Color.toElmCssColor colors.inputBorder)
         , Css.color (Color.toElmCssColor colors.text)
         , inputFocus
+
+        --
+        , Css.pseudoClass
+            "-moz-focusring"
+            [ Css.color Css.transparent
+            , Css.textShadow4 zero zero zero (Css.rgb 0 0 0)
+            ]
         ]
     }
 
diff --git a/src/Applications/UI/Sources/Form.elm b/src/Applications/UI/Sources/Form.elm
index 5b84bf03..2f892347 100644
--- a/src/Applications/UI/Sources/Form.elm
+++ b/src/Applications/UI/Sources/Form.elm
@@ -2,10 +2,11 @@ module UI.Sources.Form exposing (FormStep(..), Model, Msg(..), initialModel, new
 
 import Chunky exposing (..)
 import Conditional exposing (..)
+import Css
 import Dict
 import Dict.Ext as Dict
 import Html.Styled as Html exposing (Html, strong, text)
-import Html.Styled.Attributes exposing (for, name, placeholder, type_, value)
+import Html.Styled.Attributes exposing (css, for, name, placeholder, type_, value)
 import Html.Styled.Events exposing (onInput, onSubmit)
 import List.Extra as List
 import Material.Icons.Alert as Icons
@@ -219,13 +220,7 @@ newHow { context } =
     -----------------------------------------
     -- Content
     -----------------------------------------
-    , (\h ->
-        form
-            [ chunk
-                [ T.w_100 ]
-                [ UI.Kit.canister h ]
-            ]
-      )
+    , (form << List.singleton << chunk [ T.tl ])
         [ UI.Kit.h3 "Where exactly?"
 
         -- Fields
@@ -300,18 +295,18 @@ newBy { context } =
         -- Note
         -------
         , chunk
-            [ T.f6, T.flex, T.lh_title, T.mt4, T.o_50, T.tc ]
+            [ T.f6, T.flex, T.items_center, T.justify_center, T.lh_title, T.mt5, T.o_50 ]
             [ slab
                 Html.span
-                []
+                [ css warningIconStyles ]
                 [ T.mr1 ]
-                [ Html.fromUnstyled (Icons.warning UI.Kit.colors.text 16) ]
+                [ Html.fromUnstyled (Icons.warning UI.Kit.colors.text 14) ]
             , strong
                 []
                 [ text "Make sure CORS is enabled" ]
             ]
         , chunk
-            [ T.f6, T.lh_title, T.mb4, T.mt2, T.o_50, T.tc ]
+            [ T.f6, T.lh_title, T.mb4, T.mt1, T.o_50 ]
             [ text "You can find the instructions over "
             , UI.Kit.link { label = "here", url = "/about#CORS" }
             ]
@@ -356,5 +351,21 @@ form html =
         [ onSubmit Bypass ]
         [ T.flex
         , T.flex_grow_1
+        , T.overflow_hidden
+        , T.tc
         ]
-        [ UI.Kit.centeredContent html ]
+        [ UI.Kit.centeredContent
+            [ UI.Kit.canister html ]
+        ]
+
+
+
+-- 🖼
+
+
+warningIconStyles : List Css.Style
+warningIconStyles =
+    [ Css.fontSize (Css.px 0)
+    , Css.lineHeight (Css.px 0)
+    , Css.marginTop (Css.px -1)
+    ]
diff --git a/stack.yaml b/stack.yaml
index a4a5622b..0b11d857 100644
--- a/stack.yaml
+++ b/stack.yaml
@@ -1 +1 @@
-resolver: nightly-2018-09-23
+resolver: lts-13.5
-- 
2.51.2