diff --git a/frontend/app/src/styles/theme.js b/frontend/app/src/styles/theme.js index 7a32faa232..e580ada99e 100644 --- a/frontend/app/src/styles/theme.js +++ b/frontend/app/src/styles/theme.js @@ -6,10 +6,12 @@ export default { grayMediumLight: "#aaa", grayLight: "#dadada", grayVeryLight: "#eee", + graySuperLight: "#fafafa", red: "#b22125", + blueGrayDark: "#0C6427", blueGray: "#72757C", - blueGrayDark: "#2C8437", - blueGrayLight: "#84C68C", + blueGrayLight: "#52A55C", + blueGrayVeryLight: "#A4E6AC", green: "#36971C", orange: "#E9711C" }, diff --git a/frontend/lib/images/conquery-logo.png b/frontend/lib/images/conquery-logo.png new file mode 100644 index 0000000000..1c793822f8 Binary files /dev/null and b/frontend/lib/images/conquery-logo.png differ diff --git a/frontend/lib/images/conquery_logo.svg b/frontend/lib/images/conquery_logo.svg deleted file mode 100644 index 7e48c536b6..0000000000 --- a/frontend/lib/images/conquery_logo.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/lib/js/form-components/VerticalToggleButton.js b/frontend/lib/js/form-components/VerticalToggleButton.js index d75e257c4a..aa3a1aef99 100644 --- a/frontend/lib/js/form-components/VerticalToggleButton.js +++ b/frontend/lib/js/form-components/VerticalToggleButton.js @@ -25,27 +25,27 @@ export const Option = styled("span")` transition: ${({ theme }) => `color ${theme.transitionTime}, background-color ${theme.transitionTime}`}; color: ${({ theme, active }) => (active ? theme.col.black : theme.col.gray)}; - border-left: 1px solid ${({ theme }) => theme.col.blueGrayDark}; - border-right: 1px solid ${({ theme }) => theme.col.blueGrayDark}; + border-left: 1px solid ${({ theme }) => theme.col.blueGray}; + border-right: 1px solid ${({ theme }) => theme.col.blueGray}; background-color: ${({ theme, active }) => - active ? theme.col.blueGrayLight : "white"}; + active ? theme.col.blueGrayVeryLight : "white"}; &:first-of-type { margin-left: 0; /* first childs left border does not overlap */ - border-top: 1px solid ${({ theme }) => theme.col.blueGrayDark}; + border-top: 1px solid ${({ theme }) => theme.col.blueGray}; border-top-left-radius: 2px; border-top-right-radius: 2px; } &:last-of-type { - border-bottom: 1px solid ${({ theme }) => theme.col.blueGrayDark}; + border-bottom: 1px solid ${({ theme }) => theme.col.blueGray}; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } &:hover { background-color: ${({ theme, active }) => - active ? theme.col.blueGrayLight : theme.col.grayVeryLight}; + active ? theme.col.blueGrayVeryLight : theme.col.grayVeryLight}; } `; diff --git a/frontend/lib/js/query-node-editor/MenuColumn.js b/frontend/lib/js/query-node-editor/MenuColumn.js index 02b7a72eda..d40a171483 100644 --- a/frontend/lib/js/query-node-editor/MenuColumn.js +++ b/frontend/lib/js/query-node-editor/MenuColumn.js @@ -46,10 +46,10 @@ const StyledButton = styled(TransparentHeaderButton)` line-height: 21px; background-color: ${({ theme, active }) => - active ? theme.col.blueGrayLight : "initial"}; + active ? theme.col.blueGrayVeryLight : "initial"}; &:hover { background-color: ${({ theme, active }) => - active ? theme.col.blueGrayLight : "initial"}; + active ? theme.col.blueGrayVeryLight : "initial"}; } `; diff --git a/frontend/lib/styles/components/categoryTreeNode.sass b/frontend/lib/styles/components/categoryTreeNode.sass index 9c7e487e32..2a2bb56463 100644 --- a/frontend/lib/styles/components/categoryTreeNode.sass +++ b/frontend/lib/styles/components/categoryTreeNode.sass @@ -24,9 +24,9 @@ color: $col-red &:hover - background-color: $col-blue-gray-light + background-color: $col-blue-gray-very-light &--open - background-color: $col-blue-gray-light + background-color: $col-blue-gray-very-light &:hover - background-color: rgba($col-blue-gray-light, 0.8) + background-color: rgba($col-blue-gray-very-light, 0.8) diff --git a/frontend/lib/styles/components/header.sass b/frontend/lib/styles/components/header.sass index 4e65b31ec1..70ac14d9d7 100644 --- a/frontend/lib/styles/components/header.sass +++ b/frontend/lib/styles/components/header.sass @@ -1,6 +1,8 @@ .header - background-color: $col-blue-gray-dark - color: white + background-color: $col-gray-super-light + color: $col-blue-gray-dark + border-bottom: 1px solid $col-gray-medium-light + box-shadow: 0 0 3px 0 rgba(0,0,0,0.3) padding: 0 20px overflow: hidden display: flex @@ -21,8 +23,7 @@ &__headline margin: 0 auto 0 0 line-height: 2 - font-size: $font-sm - font-style: italic + font-size: $font-md font-weight: 300 &__logo diff --git a/frontend/lib/styles/components/queryNodeEditor.sass b/frontend/lib/styles/components/queryNodeEditor.sass index e16dea4905..0dadf10e60 100644 --- a/frontend/lib/styles/components/queryNodeEditor.sass +++ b/frontend/lib/styles/components/queryNodeEditor.sass @@ -66,10 +66,10 @@ line-height: 21px &__category_element_active - background: $col-blue-gray-light + background-color: $col-blue-gray-very-light &:hover - background: $col-blue-gray-light + background-color: $col-blue-gray-very-light &__category_action line-height: 32px diff --git a/frontend/lib/styles/conquery-colors.sass b/frontend/lib/styles/conquery-colors.sass index b90644d196..d3e564c76c 100644 --- a/frontend/lib/styles/conquery-colors.sass +++ b/frontend/lib/styles/conquery-colors.sass @@ -1,22 +1,24 @@ $col-bg: #f9f9f9 -$col-black: #444 +$col-black: #222 $col-gray: #999 $col-gray-medium-light: #aaa $col-gray-light: #dadada $col-gray-very-light: #eee +$col-gray-super-light: #fafafa $col-red: #b22125 +$col-blue-gray-dark: #0C6427 $col-blue-gray: #72757C -$col-blue-gray-dark: #2C8437 -$col-blue-gray-light: #84C68C +$col-blue-gray-light: #52A55C +$col-blue-gray-very-light: #A4E6AC $col-green: #36971C $col-orange: #E9711C -$img-logo: '../images/conquery_logo.svg' -$img-logo-width: 167px -$img-logo-background-size: $img-logo-width 50px +$img-logo: '../images/conquery-logo.png' +$img-logo-width: 175px +$img-logo-background-size: $img-logo-width 45px $img-spinner: '../images/spinner.png'