Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(Widgets): add rounded corners and improve overall style for TabsWidget

Browse Source
This commit is contained in:
Sumanth Yedoti 2020-11-04 20:23:33 +05:30
parent a3d7cdb769
commit 41a2a53bf1
3 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/client/src/components/designSystems/appsmith/TabsComponent.tsx
View File

@ -34,16 +34,19 @@ const TabsContainerWrapper = styled.div<{
align-items: center;
`;
const ChildrenWrapper = styled.div`
const ChildrenWrapper = styled.div<{
shouldShowTabs: boolean;
}>`
height: 100%;
width: 100%;
position: relative;
border: 1px solid;
border-top: none;
border-color: ${props => props.theme.colors.bodyBG};
background: ${props => props.theme.colors.builderBodyBG};
border-bottom-right-radius: ${props => `${props.theme.radii[1]}px`};
border-bottom-left-radius: ${props => `${props.theme.radii[1]}px`};
border-top-right-radius: ${props =>
props.shouldShowTabs ? 0 : `${props.theme.radii[1]}px`};
border-top-left-radius: ${props =>
props.shouldShowTabs ? 0 : `${props.theme.radii[1]}px`};
overflow: hidden;
`;
@ -63,7 +66,6 @@ const TabsContainer = styled.div`
overflow-x: auto;
overflow-y: hidden;
${scrollbarLight};
background: ${props => props.theme.colors.builderBodyBG};
border-top-right-radius: ${props => `${props.theme.radii[1]}px`};
border-top-left-radius: ${props => `${props.theme.radii[1]}px`};
overflow: hidden;
@ -82,8 +84,9 @@ type TabProps = {
};
const StyledTab = styled.div`
height: 32px;
border-bottom: 1px solid;
height: 30px;
background: ${props => props.theme.colors.builderBodyBG};
border-bottom: 1px solid ${props => props.theme.colors.bodyBG};
border-color: ${props => props.theme.colors.bodyBG};
width: 100%;
`;
@ -93,19 +96,21 @@ const StyledText = styled.div<TabProps>`
background: ${props => props.theme.colors.builderBodyBG};
color: ${props => props.theme.colors.menuIconColorInactive};
font-size: ${props => props.theme.fontSizes[3]}px;
line-height: 32px;
height: 32px;
line-height: 30px;
height: 30px;
padding: 0 16px;
border-bottom: ${props => (props.selected ? "0" : "1px")} solid;
border-color: ${props => props.theme.colors.bodyBG};
cursor: pointer;
box-shadow: ${props => (props.selected ? props.theme.shadows[2] : "")};
border-bottom: ${props => (props.selected ? "none" : "1px solid")};
border-color: ${props => props.theme.colors.bodyBG};
&:hover {
background: ${props =>
props.selected
? props.theme.colors.textOnDarkBG
: props.theme.colors.hover};
box-shadow: ${props => (props.selected ? "" : props.theme.shadows[3])};
}
&:first-child {
box-shadow: ${props => (props.selected ? props.theme.shadows[3] : "")};
}
`;
@ -141,7 +146,7 @@ const TabsComponent = (props: TabsComponentProps) => {
) : (
undefined
)}
<ChildrenWrapper>
<ChildrenWrapper shouldShowTabs={props.shouldShowTabs}>
<ScrollableCanvasWrapper
{...remainingProps}
className={`${

2
app/client/src/components/designSystems/appsmith/help/HelpModal.tsx
View File

@ -68,7 +68,9 @@ class HelpModal extends React.Component<Props> {
const { user } = this.props;
if (cloudHosting && intercomAppID && window.Intercom) {
window.Intercom("boot", {
// eslint-disable-next-line @typescript-eslint/camelcase
app_id: intercomAppID,
// eslint-disable-next-line @typescript-eslint/camelcase
user_id: user?.username,
name: user?.name,
email: user?.email,

2
app/client/src/constants/DefaultTheme.tsx
View File

@ -1460,7 +1460,7 @@ export const theme: Theme = {
"0px 2px 4px rgba(67, 70, 74, 0.14)",
`0px 2px 4px ${Colors.MYSTIC}`,
`inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 4px 0px ${Colors.GREEN}`,
`inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 1px 0px ${Colors.ATHENS_GRAY}`,
`inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 4px 0px ${Colors.GREEN}`,
],
widgets: {
tableWidget: {