diff --git a/ui/css/mainflux.css b/ui/css/mainflux.css index f8983af4..443157b4 100644 --- a/ui/css/mainflux.css +++ b/ui/css/mainflux.css @@ -2,39 +2,50 @@ Mainflux SPDX-License-Identifier: Apache-2.0 */ - @import url('https://fonts.googleapis.com/css?family=Roboto'); - @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800'); - - .btn-primary { - color: #fff; - background-color: #113f67; - border-color: #113f67; - } - .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary { - color: #fff; - background-color: #408ab4; - border-color: #408ab4; - } - - body { - background-color: #f3f3f4 !important; - font-family: 'Montserrat', sans-serif !important; - } - .title{ - font-family: 'Montserrat', sans-serif; - font-weight: 800; - transform: scaleY(0.95); - text-align: center; - margin: 1rem 0; - } +@import url('https://fonts.googleapis.com/css?family=Roboto'); +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800'); + +.btn-primary { + color: #fff; + background-color: #113f67; + border-color: #113f67; +} +.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary { + color: #fff; + background-color: #408ab4; + border-color: #408ab4; +} + +.btn-secondary { + color: #fff; + background-color: #408ab4; + border-color: #408ab4; +} +.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open>.dropdown-toggle.btn-secondary { + color: #fff; + background-color: #113f67; + border-color: #113f67; +} + +body { + background-color: #f3f3f4 !important; + font-family: 'Montserrat', sans-serif !important; +} +.title{ + font-family: 'Montserrat', sans-serif; + font-weight: 800; + transform: scaleY(0.95); + text-align: center; + margin: 1rem 0; +} .page-link{ color: #113f67; } .page-item.active .page-link { - background-color: #113f67; - border-color: #113f67; + background-color: #408ab4; + border-color: #408ab4; } ul.nav a:hover { @@ -42,10 +53,12 @@ ul.nav a:hover { background-color: #408ab4 !important; cursor: pointer; transition: color .15s ease-in-out,background-color .15s ease-in-out; + border-radius: 0; } .nav-pills .nav-link.active{ - background-color: #408ab4 !important; + background-color: #408ab4 !important; + border-radius: 0; } .nav li a i { @@ -56,15 +69,32 @@ ul.nav a:hover { line-height: 25px; text-align: center; border-radius: 4px; - background:#154f82; - + background: transparent; } .card { margin-top: 30px; margin-bottom: 30px; + border: none; +} + +.card-header { + background-color: white; + border-bottom: none; + margin-bottom: none; } .table thead th { border-top: none; +} + +.table-hover tbody tr:hover > td { + cursor: pointer; + background:#408ab4; + color: white; +} + +.table_header { + color: #408ab4; + font-weight: bold; } \ No newline at end of file diff --git a/ui/src/Channel.elm b/ui/src/Channel.elm index 5f3ffa76..776a6a72 100644 --- a/ui/src/Channel.elm +++ b/ui/src/Channel.elm @@ -19,7 +19,7 @@ import Bootstrap.Table as Table import Bootstrap.Utilities.Spacing as Spacing import Dict import Error -import Helpers +import Helpers exposing (faIcons, fontAwesome) import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (onClick) @@ -278,10 +278,10 @@ view model = |> Card.header [] [ Grid.row [] [ Grid.col [ Col.attrs [ align "left" ] ] - [ h3 [ Spacing.mt2 ] [ text "Channels" ] + [ h3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.channels ] [], text "Channels" ] ] ] , Grid.col [ Col.attrs [ align "right" ] ] - [ Button.button [ Button.success, Button.attrs [ align "right" ], Button.onClick ShowProvisionModal ] [ text "ADD" ] + [ Button.button [ Button.secondary, Button.attrs [ align "right" ], Button.onClick ShowProvisionModal ] [ text "ADD" ] ] ] ] diff --git a/ui/src/Connection.elm b/ui/src/Connection.elm index 87f3c635..8ed3c0ac 100644 --- a/ui/src/Connection.elm +++ b/ui/src/Connection.elm @@ -19,7 +19,7 @@ import Bootstrap.Utilities.Spacing as Spacing import Channel import Debug exposing (log) import Error -import Helpers +import Helpers exposing (faIcons, fontAwesome) import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (onClick) @@ -119,12 +119,12 @@ view model = [ Grid.row [] [ Grid.col [] (Helpers.appendIf (model.things.things.total > model.things.limit) - [ Helpers.genCardConfig "Things" (genThingRows model.checkedThingsIds model.things.things.list) ] + [ Helpers.genCardConfig faIcons.things "Things" (genThingRows model.checkedThingsIds model.things.things.list) ] (Html.map ThingMsg (Helpers.genPagination model.things.things.total (Helpers.offsetToPage model.things.offset model.things.limit) Thing.SubmitPage)) ) , Grid.col [] (Helpers.appendIf (model.channels.channels.total > model.channels.limit) - [ Helpers.genCardConfig "Channels" (genChannelRows model.checkedChannelsIds model.channels.channels.list) ] + [ Helpers.genCardConfig faIcons.channels "Channels" (genChannelRows model.checkedChannelsIds model.channels.channels.list) ] (Html.map ChannelMsg (Helpers.genPagination model.channels.channels.total (Helpers.offsetToPage model.channels.offset model.channels.limit) Channel.SubmitPage)) ) ] diff --git a/ui/src/Helpers.elm b/ui/src/Helpers.elm index b42988b4..b39da4ca 100644 --- a/ui/src/Helpers.elm +++ b/ui/src/Helpers.elm @@ -14,7 +14,7 @@ import Bootstrap.Grid.Col as Col import Bootstrap.Grid.Row as Row import Bootstrap.Table as Table import Bootstrap.Utilities.Spacing as Spacing -import Html exposing (Html, a, div, hr, li, nav, node, p, strong, text, ul) +import Html exposing (Html, a, div, hr, li, nav, node, p, strong, text, ul, i) import Html.Attributes exposing (..) import Html.Events exposing (onClick) import Http @@ -157,6 +157,7 @@ faIcons = , channels = "fas fa-broadcast-tower" , connection = "fas fa-plug" , messages = "far fa-paper-plane" + , version = "fa fa-code-branch" } @@ -196,11 +197,11 @@ disableNext currPage total = currPage == Basics.ceiling (Basics.toFloat total / 10) -genCardConfig : String -> List (Table.Row msg) -> Html msg -genCardConfig title rows = +genCardConfig : String -> String -> List (Table.Row msg) -> Html msg +genCardConfig faClass title rows = Card.config [] - |> Card.headerH3 [] [ text title ] + |> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faClass ] [], text title ] ] |> Card.block [] [ Block.custom (Table.table diff --git a/ui/src/Main.elm b/ui/src/Main.elm index cd3df26c..beae11aa 100644 --- a/ui/src/Main.elm +++ b/ui/src/Main.elm @@ -407,29 +407,23 @@ dashboard model = cardList : Model -> List (Card.Config Msg) cardList model = - [ Card.config - [ Card.secondary - , Card.textColor Text.white - ] - |> Card.headerH3 [] [ text "Version" ] + [ Card.config [] + |> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.version ] [], text "Version" ] ] |> Card.block [] [ Block.titleH4 [] [ text model.dashboard.version ] ] - , Card.config - [ Card.info - , Card.textColor Text.white - ] - |> Card.headerH3 [] [ text "Things" ] + , Card.config [] + |> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.things ] [], text "Things" ] ] |> Card.block [] [ Block.titleH4 [] [ text (String.fromInt model.thing.things.total) ] , Block.custom <| - Button.button [ Button.light, Button.onClick Things ] [ text "Manage things" ] + Button.button [ Button.secondary, Button.onClick Things ] [ text "Manage things" ] ] , Card.config [] - |> Card.headerH3 [] [ text "Channels" ] + |> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.channels ] [], text "Channels" ] ] |> Card.block [] [ Block.titleH4 [] [ text (String.fromInt model.channel.channels.total) ] , Block.custom <| - Button.button [ Button.dark, Button.onClick Channels ] [ text "Manage channels" ] + Button.button [ Button.secondary, Button.onClick Channels ] [ text "Manage channels" ] ] ] diff --git a/ui/src/Message.elm b/ui/src/Message.elm index d2cb0e3b..b45e8b4b 100644 --- a/ui/src/Message.elm +++ b/ui/src/Message.elm @@ -18,7 +18,7 @@ import Bootstrap.Table as Table import Bootstrap.Utilities.Spacing as Spacing import Channel import Error -import Helpers +import Helpers exposing (faIcons, fontAwesome) import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (onClick) @@ -126,26 +126,26 @@ view model = [ Grid.row [] [ Grid.col [] (Helpers.appendIf (model.things.things.total > model.things.limit) - [ Helpers.genCardConfig "Things" (genThingRows model.things.things.list) ] + [ Helpers.genCardConfig faIcons.things "Things" (genThingRows model.things.things.list) ] (Html.map ThingMsg (Helpers.genPagination model.things.things.total (Helpers.offsetToPage model.things.offset model.things.limit) Thing.SubmitPage)) ) , Grid.col [] (Helpers.appendIf (model.channels.channels.total > model.channels.limit) - [ Helpers.genCardConfig "Channels" (genChannelRows model.checkedChannelsIds model.channels.channels.list) ] + [ Helpers.genCardConfig faIcons.channels "Channels" (genChannelRows model.checkedChannelsIds model.channels.channels.list) ] (Html.map ChannelMsg (Helpers.genPagination model.channels.channels.total (Helpers.offsetToPage model.channels.offset model.channels.limit) Channel.SubmitPage)) ) ] , Grid.row [] [ Grid.col [] [ Card.config [] - |> Card.headerH3 [] [ text "Message" ] + |> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.messages ] [], text "Message" ] ] |> Card.block [] [ Block.custom (Form.form [] [ Form.group [] [ Input.text [ Input.id "message", Input.onInput SubmitMessage ] ] - , Button.button [ Button.success, Button.attrs [ Spacing.ml1 ], Button.onClick SendMessage ] [ text "Send" ] + , Button.button [ Button.secondary, Button.attrs [ Spacing.ml1 ], Button.onClick SendMessage ] [ text "Send" ] ] ) ] diff --git a/ui/src/Thing.elm b/ui/src/Thing.elm index 4f0b732d..103933c8 100644 --- a/ui/src/Thing.elm +++ b/ui/src/Thing.elm @@ -21,7 +21,7 @@ import Bootstrap.Table as Table import Bootstrap.Utilities.Spacing as Spacing import Dict import Error -import Helpers +import Helpers exposing (faIcons, fontAwesome) import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (onClick) @@ -307,10 +307,10 @@ genTable model = |> Card.header [] [ Grid.row [] [ Grid.col [ Col.attrs [ align "left" ] ] - [ h3 [ Spacing.mt2 ] [ text "Things" ] + [ h3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.things ] [], text "Things" ] ] ] , Grid.col [ Col.attrs [ align "right" ] ] - [ Button.button [ Button.success, Button.attrs [ align "right" ], Button.onClick ShowProvisionModal ] [ text "ADD" ] + [ Button.button [ Button.secondary, Button.attrs [ align "right" ], Button.onClick ShowProvisionModal ] [ text "ADD" ] ] ] ]