diff --git a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js index 6f4e02c1b..db67eb60c 100644 --- a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js +++ b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js @@ -16,15 +16,29 @@ const Wrapper = styled.div` bottom: -1px; position: relative; list-style: none; - padding: 6px 12px; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 0; + padding-right: 0; cursor: pointer; + .tab-container { + border-left: 1px solid #dcdcdc; + padding-left: 12px; + padding-right: 12px; + } + &.active { border-color: #cfcfcf; background: #fff; border-radius: 5px 5px 0 0; + + .tab-container { + border-left: 1px solid transparent; + } } + .tab-label { overflow: hidden; } @@ -46,6 +60,56 @@ const Wrapper = styled.div` color: rgb(142, 68, 173); } } + + &.new-tab { + vertical-align: bottom; + width: 34px; + padding: 3px 0px; + display: inline-flex; + justify-content: center; + color: rgb(117 117 117); + margin-bottom: 2px; + + > div { + padding: 3px 4px; + } + + svg { + height: 22px; + } + + &:hover { + > div { + background-color: #eaeaea; + color: rgb(76 76 76); + border-radius: 3px; + } + } + } + } + + li.last-tab { + .tab-container { + border-right: 1px solid #dcdcdc; + } + + &.active { + .tab-container { + border-right: 1px solid transparent; + } + } + } + + li.active + li { + .tab-container { + border-left: 1px solid transparent; + } + } + + li:first-child { + .tab-container { + border-left: 1px solid transparent; + } } } `; diff --git a/packages/grafnode-components/src/components/RequestTabs/index.js b/packages/grafnode-components/src/components/RequestTabs/index.js index d5a40eb97..e7450b04b 100644 --- a/packages/grafnode-components/src/components/RequestTabs/index.js +++ b/packages/grafnode-components/src/components/RequestTabs/index.js @@ -3,9 +3,10 @@ import classnames from 'classnames'; import StyledWrapper from './StyledWrapper'; const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => { - const getTabClassname = (tab) => { + const getTabClassname = (tab, index) => { return classnames("request-tab select-none", { - 'active': tab.id === activeRequestTabId + 'active': tab.id === activeRequestTabId, + 'last-tab': requestTabs && requestTabs.length && (index === requestTabs.length - 1) }); }; @@ -45,9 +46,9 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => { {requestTabs && requestTabs.length ? ( ) : null} diff --git a/packages/grafnode-run/src/providers/Store/reducer.js b/packages/grafnode-run/src/providers/Store/reducer.js index 43d65d86b..f7c63423e 100644 --- a/packages/grafnode-run/src/providers/Store/reducer.js +++ b/packages/grafnode-run/src/providers/Store/reducer.js @@ -62,7 +62,7 @@ const reducer = (state, action) => { const uid = nanoid(); draft.requestTabs.push({ id: uid, - name: 'Untitled Request', + name: 'New Tab', method: 'GET', request: { url: 'https://api.spacex.land/graphql/',