make the add sync thing look nice

BrianHicks · May 18, 2020 · c047785 · c047785
1 parent 8dbbe27
commit c047785
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git a/src/Main.elm b/src/Main.elm
@@ -764,16 +764,27 @@ viewSyncSettingsPage model =
                 let
                     field onInput label value =
                         Html.labelBefore
-                            [ Attrs.css [ Text.text ] ]
-                            (Html.text label)
+                            [ Attrs.css
+                                [ Text.text
+                                , Css.display Css.tableRow
+                                ]
+                            ]
+                            (Html.span [ Attrs.css [ Css.display Css.tableCell ] ] [ Html.text label ])
                             (Html.inputText label
                                 [ Attrs.value value
                                 , Events.onInput onInput
+                                , Attrs.css [ Css.display Css.tableCell ]
                                 ]
                             )
                 in
                 -- using onSubmit as a hook here since hitting enter needs to work
-                Inaccessible.form [ Events.onSubmit UserSubmittedSyncForm ]
+                Inaccessible.form
+                    [ Events.onSubmit UserSubmittedSyncForm
+                    , Attrs.css
+                        [ Css.display Css.table
+                        , Css.margin2 (Css.px 27) Css.zero
+                        ]
+                    ]
                     [ field UserTypedInDraftSyncHostField "Host" draftSync.host
                     , field UserTypedInDraftSyncDatabaseField "Database" draftSync.database
                     , field UserTypedInDraftSyncUsernameField "Username" draftSync.username
@@ -786,7 +797,7 @@ viewSyncSettingsPage model =
 
             Nothing ->
                 Button.button (Button.OnClick UserWantsToCreateNewSync)
-                    []
+                    [ Button.css [ Css.margin2 (Css.px 27) Css.zero ] ]
                     [ Html.text "Sync with a new CouchDB Server" ]
         , let
             th =
@@ -830,7 +841,7 @@ viewSyncSettingsPage model =
                             , Html.td []
                                 [ Button.button
                                     (Button.OnClick (UserWantsToDeleteSync sync))
-                                    []
+                                    [ Button.delete ]
                                     [ Html.text "Delete" ]
                                 ]
                             ]

diff --git a/src/Widgets/Button.elm b/src/Widgets/Button.elm
@@ -1,9 +1,11 @@
-module Widgets.Button exposing (Action(..), Attribute, button, css, enabled, transparent)
+module Widgets.Button exposing (Action(..), Attribute, button, css, delete, enabled, transparent)
 
 import Accessibility.Styled as Html exposing (Html)
 import Css
 import Html.Styled.Attributes as Attrs
 import Html.Styled.Events as Events
+import Widgets.Colors as Colors
+import Widgets.Text as Text
 
 
 type Attribute
@@ -15,6 +17,7 @@ type Attribute
 type Style
     = Default
     | Transparent
+    | Delete
 
 
 type Action msg
@@ -27,11 +30,34 @@ transparent =
     Style Transparent
 
 
+delete : Attribute
+delete =
+    Style Delete
+
+
 style : Style -> Html.Attribute msg
 style style_ =
     case style_ of
         Default ->
-            Attrs.css []
+            Attrs.css
+                [ Text.text
+                , Css.padding (Css.px 8)
+                , Css.color (Colors.toCss Colors.whiteLightest)
+                , Css.backgroundColor (Colors.toCss Colors.blueDark)
+                , Css.border Css.zero
+                , Css.borderRadius (Css.px 8)
+                , Css.disabled [ Css.backgroundColor (Colors.toCss Colors.greyDark) ]
+                ]
+
+        Delete ->
+            Attrs.css
+                [ Text.text
+                , Css.padding (Css.px 8)
+                , Css.color (Colors.toCss Colors.whiteLightest)
+                , Css.backgroundColor (Colors.toCss Colors.redDark)
+                , Css.border Css.zero
+                , Css.borderRadius (Css.px 8)
+                ]
 
         Transparent ->
             Attrs.css
@@ -40,6 +66,7 @@ style style_ =
                 , Css.backgroundColor Css.transparent
                 , Css.border Css.zero
                 , Css.fontSize (Css.em 1)
+                , Text.text
                 ]