From fa9f1003157c4cb6e3cc649f037f0c5557ba2611 Mon Sep 17 00:00:00 2001 From: Kai Rollmann Date: Tue, 12 Feb 2019 17:36:42 +0100 Subject: [PATCH 1/2] Add cleaner logo, re-style header and green colors a little --- frontend/lib/images/conquery-logo.png | Bin 0 -> 9102 bytes frontend/lib/images/conquery_logo.svg | 23 ------------------ .../styles/components/categoryTreeNode.sass | 6 ++--- frontend/lib/styles/components/header.sass | 9 ++++--- .../styles/components/queryNodeEditor.sass | 6 ++--- .../components/verticalToggleButton.sass | 4 +-- frontend/lib/styles/conquery-colors.sass | 16 ++++++------ 7 files changed, 22 insertions(+), 42 deletions(-) create mode 100644 frontend/lib/images/conquery-logo.png delete mode 100644 frontend/lib/images/conquery_logo.svg diff --git a/frontend/lib/images/conquery-logo.png b/frontend/lib/images/conquery-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..1c793822f84a50f699098bc53780d8e305b15365 GIT binary patch literal 9102 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 WggRND@_&F0lA4mXVwJpQ*#84KoQ)g+ literal 0 HcmV?d00001 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/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 5619923cb2..884028a0c1 100644 --- a/frontend/lib/styles/components/queryNodeEditor.sass +++ b/frontend/lib/styles/components/queryNodeEditor.sass @@ -100,10 +100,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 @@ -178,4 +178,4 @@ .Select &:not(.is-disabled) .Select-control - border: 1px solid $col-blue-gray-dark !important // To override any is-focused styles \ No newline at end of file + border: 1px solid $col-blue-gray-dark !important // To override any is-focused styles diff --git a/frontend/lib/styles/components/verticalToggleButton.sass b/frontend/lib/styles/components/verticalToggleButton.sass index d6285f87b6..2b3296eca5 100644 --- a/frontend/lib/styles/components/verticalToggleButton.sass +++ b/frontend/lib/styles/components/verticalToggleButton.sass @@ -31,7 +31,7 @@ $vertical-toggle-button-border-radius: 2px &--active color: $col-black - background-color: $col-blue-gray-light + background-color: $col-blue-gray-very-light &:hover - background-color: $col-blue-gray-light + background-color: $col-blue-gray-very-light diff --git a/frontend/lib/styles/conquery-colors.sass b/frontend/lib/styles/conquery-colors.sass index b3c7a1bf69..ced7373f16 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: #52A55C -$col-blue-gray-dark: #2C8437 -$col-blue-gray-light: #84C68C +$col-blue-gray-dark: #0C6427 +$col-blue-gray: #2C8437 +$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' From 9dc04684dd97cff9cdbd5590fdfd7e9e160930d1 Mon Sep 17 00:00:00 2001 From: Kai Rollmann Date: Thu, 28 Feb 2019 10:01:35 +0100 Subject: [PATCH 2/2] Update menu column active style --- frontend/lib/js/query-node-editor/MenuColumn.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/lib/js/query-node-editor/MenuColumn.js b/frontend/lib/js/query-node-editor/MenuColumn.js index f7b9746318..e905ac3529 100644 --- a/frontend/lib/js/query-node-editor/MenuColumn.js +++ b/frontend/lib/js/query-node-editor/MenuColumn.js @@ -44,10 +44,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"}; } `;