finish styling cart, product and checkout

3 files changed, 73 insertions, 21 deletions

diff --git a/frontend/src/Cart.elm b/frontend/src/Cart.elm
index 008d0bc..4f4cbef 100644
--- a/frontend/src/Cart.elm
+++ b/frontend/src/Cart.elm
@@ -246,5 +246,10 @@ view model =
                                     ]
                                ]
                         )
-                    , a [ href "/checkout" ] [ text "Checkout" ]
+                    , div
+                        [ css [ textAlign right ] ]
+                        [ furbyButton
+                            []
+                            [ a [ href "/checkout" ] [ text "Checkout" ] ]
+                        ]
                     ]
diff --git a/frontend/src/Checkout.elm b/frontend/src/Checkout.elm
index 216b90d..22e51c7 100644
--- a/frontend/src/Checkout.elm
+++ b/frontend/src/Checkout.elm
@@ -135,6 +135,13 @@ view model =
                 , div [] [ furbyRadio "Cash" (PaymentModeSelected "Cash") ]
                 , div [] [ furbyRadio "Debit Card" (PaymentModeSelected "Debit Card") ]
                 , div [] [ furbyRadio "Credit Card" (PaymentModeSelected "Credit Card") ]
-                , div [] [ a [ href "/cart" ] [ text "Cancel" ] ]
-                , div [] [ button [ onClick CheckoutPressed ] [ text "Confirm and Pay" ] ]
+                , div
+                    []
+                    [ div
+                        [ css [ float left, Css.width (pct 40), margin (px 15) ] ]
+                        [ furbyButton [ style "width" "100%" ] [ a [ href "/cart" ] [ text "Cancel" ] ] ]
+                    , div
+                        [ css [ float left, Css.width (pct 40), margin (px 15) ] ]
+                        [ furbyButton [ onClick CheckoutPressed, style "width" "100%" ] [ text "Confirm and Pay" ] ]
+                    ]
                 ]
diff --git a/frontend/src/Product.elm b/frontend/src/Product.elm
index 0975c8d..964538b 100644
--- a/frontend/src/Product.elm
+++ b/frontend/src/Product.elm
@@ -372,14 +372,51 @@ viewRating r =
 
 viewInput : String -> String -> String -> (String -> msg) -> Html msg
 viewInput t p v toMsg =
-    input [ type_ t, placeholder p, value v, onInput toMsg ] []
+    input
+        [ type_ t
+        , placeholder p
+        , value v
+        , onInput toMsg
+        , css [ Css.width (pct 100), Css.height (px 100) ]
+        ]
+        []
+
 
+viewStars : Model -> Html Msg
+viewStars model =
+    let
+        activeStyle =
+            [ border3 (px 3) solid theme.fg ]
 
-viewStars : Html Msg
-viewStars =
-    ul []
+        inactiveStyle =
+            [ border3 (px 3) solid theme.primary ]
+
+        buttonStyle =
+            [ borderRadius (px 6), margin (px 6), backgroundColor theme.bg, padding2 (px 4) (px 8) ]
+    in
+    div
+        [ css
+            [ Css.width (pct 100)
+            , margin auto
+            , padding (px 12)
+            , textAlign center
+            ]
+        ]
         (List.map
-            (\i -> button [ onClick (AddRatingStars i) ] [ text <| String.fromInt i ])
+            (\i ->
+                button
+                    [ onClick (AddRatingStars i)
+                    , (if i == model.ratingStars then
+                        activeStyle
+
+                       else
+                        inactiveStyle
+                      )
+                        ++ buttonStyle
+                        |> css
+                    ]
+                    [ text <| String.fromInt i ]
+            )
             [ 1, 2, 3, 4, 5 ]
         )
 
@@ -393,16 +430,13 @@ view model =
         _ ->
             div
                 [ css
-                    [ Css.width (pct 60)
+                    [ Css.width (pct 50)
                     , margin auto
                     ]
                 ]
                 [ div [] [ viewProduct model.listing ]
                 , div
-                    [ css
-                        [ cardPrimaryText
-                        ]
-                    ]
+                    [ css [ cardPrimaryText ] ]
                     [ text "User Reviews" ]
                 , if model.ratings == [] then
                     text "Be the first to add a review."
@@ -415,13 +449,19 @@ view model =
                             ]
                         ]
                         (List.map viewRating model.ratings)
-                , div [] [ text "Add Rating: " ]
-                , div []
-                    [ viewStars
-                    , viewInput "text" "Enter Comment Text" model.ratingText AddRatingComment
-                    , button [ onClick AddRatingPressed ] [ text "Submit Rating" ]
-                    ]
-                , div []
-                    [ a [ href "/catalog" ] [ text "Back to catalog" ]
+                , div
+                    [ css [ cardPrimaryText, margin2 (px 20) (px 0) ] ]
+                    [ text "Rate this product" ]
+                , div
+                    []
+                    [ viewStars model
+                    , div
+                        []
+                        [ viewInput "textarea" "Enter Comment Text" model.ratingText AddRatingComment ]
+                    , div
+                        [ css
+                            [ textAlign center ]
+                        ]
+                        [ furbyButton [ onClick AddRatingPressed ] [ text "Submit Rating" ] ]
                     ]
                 ]