From db4844c4c5566bfbbbc63c1181ed00beea5aa50d Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 22 Jun 2022 14:07:54 +0200 Subject: [PATCH] change(ui) - funnel icon --- .../app/components/Funnels/FunnelWidget/FunnelWidget.tsx | 7 +++---- frontend/app/components/ui/SVG.tsx | 1 + frontend/app/duck/liveSearch.js | 1 + frontend/app/styles/colors-autogen.css | 8 ++++++++ frontend/app/svg/icons/list.svg | 3 +++ frontend/webpack.config.ts | 1 + 6 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 frontend/app/svg/icons/list.svg diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx index e0c00035e..2f7f06bcf 100644 --- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx +++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx @@ -3,9 +3,8 @@ import Widget from 'App/mstore/types/widget'; import Funnelbar from './FunnelBar'; import cn from 'classnames'; import stl from './FunnelWidget.module.css'; -import { Icon } from 'UI'; import { useObserver } from 'mobx-react-lite'; -import { NoContent } from 'UI'; +import { NoContent, Icon } from 'UI'; import { useModal } from 'App/components/Modal'; interface Props { @@ -109,8 +108,8 @@ function Stage({ stage, index, isWidget }: any) { function IndexNumber({ index }: any) { return ( -
- {index} +
+ {index === 0 ? : index}
); } diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index 5789ce273..5a46a4e02 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -271,6 +271,7 @@ const SVG = (props: Props) => { case 'link-45deg': return ; case 'list-alt': return ; case 'list-ul': return ; + case 'list': return ; case 'lock-alt': return ; case 'map-marker-alt': return ; case 'memory': return ; diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js index 44d0a97fd..651a0872a 100644 --- a/frontend/app/duck/liveSearch.js +++ b/frontend/app/duck/liveSearch.js @@ -40,6 +40,7 @@ function reducer(state = initialState, action = {}) { .set('list', list) .set('total', total); case success(FETCH_FILTER_SEARCH): + console.log('FETCH_FILTER_SEARCH', action); const groupedList = action.data.reduce((acc, item) => { const { projectId, type, value } = item; const key = type; diff --git a/frontend/app/styles/colors-autogen.css b/frontend/app/styles/colors-autogen.css index 8fa85566e..d1fd5a0a9 100644 --- a/frontend/app/styles/colors-autogen.css +++ b/frontend/app/styles/colors-autogen.css @@ -15,6 +15,7 @@ .fill-tealx { fill: $tealx } .fill-tealx-light { fill: $tealx-light } .fill-tealx-light-border { fill: $tealx-light-border } +.fill-tealx-lightest { fill: $tealx-lightest } .fill-orange { fill: $orange } .fill-yellow { fill: $yellow } .fill-yellow2 { fill: $yellow2 } @@ -24,6 +25,7 @@ .fill-green-dark { fill: $green-dark } .fill-red { fill: $red } .fill-red2 { fill: $red2 } +.fill-red-lightest { fill: $red-lightest } .fill-blue { fill: $blue } .fill-blue2 { fill: $blue2 } .fill-active-blue { fill: $active-blue } @@ -49,6 +51,7 @@ .color-tealx { color: $tealx } .color-tealx-light { color: $tealx-light } .color-tealx-light-border { color: $tealx-light-border } +.color-tealx-lightest { color: $tealx-lightest } .color-orange { color: $orange } .color-yellow { color: $yellow } .color-yellow2 { color: $yellow2 } @@ -58,6 +61,7 @@ .color-green-dark { color: $green-dark } .color-red { color: $red } .color-red2 { color: $red2 } +.color-red-lightest { color: $red-lightest } .color-blue { color: $blue } .color-blue2 { color: $blue2 } .color-active-blue { color: $active-blue } @@ -83,6 +87,7 @@ .hover-tealx:hover { color: $tealx } .hover-tealx-light:hover { color: $tealx-light } .hover-tealx-light-border:hover { color: $tealx-light-border } +.hover-tealx-lightest:hover { color: $tealx-lightest } .hover-orange:hover { color: $orange } .hover-yellow:hover { color: $yellow } .hover-yellow2:hover { color: $yellow2 } @@ -92,6 +97,7 @@ .hover-green-dark:hover { color: $green-dark } .hover-red:hover { color: $red } .hover-red2:hover { color: $red2 } +.hover-red-lightest:hover { color: $red-lightest } .hover-blue:hover { color: $blue } .hover-blue2:hover { color: $blue2 } .hover-active-blue:hover { color: $active-blue } @@ -116,6 +122,7 @@ .border-tealx { border-color: $tealx } .border-tealx-light { border-color: $tealx-light } .border-tealx-light-border { border-color: $tealx-light-border } +.border-tealx-lightest { border-color: $tealx-lightest } .border-orange { border-color: $orange } .border-yellow { border-color: $yellow } .border-yellow2 { border-color: $yellow2 } @@ -125,6 +132,7 @@ .border-green-dark { border-color: $green-dark } .border-red { border-color: $red } .border-red2 { border-color: $red2 } +.border-red-lightest { border-color: $red-lightest } .border-blue { border-color: $blue } .border-blue2 { border-color: $blue2 } .border-active-blue { border-color: $active-blue } diff --git a/frontend/app/svg/icons/list.svg b/frontend/app/svg/icons/list.svg new file mode 100644 index 000000000..dc1584af2 --- /dev/null +++ b/frontend/app/svg/icons/list.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/webpack.config.ts b/frontend/webpack.config.ts index 88080fc2c..57c739d4a 100644 --- a/frontend/webpack.config.ts +++ b/frontend/webpack.config.ts @@ -20,6 +20,7 @@ const config: Configuration = { // mode: isDevelopment ? "development" : "production", output: { publicPath: "/", + filename: 'app-[contenthash:7].js', path: path.resolve(__dirname, 'public'), }, entry: "./app/initialize.js",