+ onPressingEnterKey(event, onClick)} + onClick={onClick} + > + {'Back'} + +
+ ); +}; + +export default BackButton; diff --git a/webapp/src/components/buttons/iconButton/index.tsx b/webapp/src/components/buttons/iconButton/index.tsx new file mode 100644 index 00000000..3d74a30e --- /dev/null +++ b/webapp/src/components/buttons/iconButton/index.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import {Button} from 'react-bootstrap'; + +import Tooltip from 'components/tooltip'; + +import './styles.scss'; + +type IconColor = 'danger' + +type IconButtonProps = { + iconClassName: string + tooltipText: string + iconColor?: IconColor + extraClass?: string + onClick?: () => void +} + +const IconButton = ({tooltipText, iconClassName, extraClass = '', iconColor, onClick}: IconButtonProps) => { + return ( ++ {listItem.icon} + {listItem.label} +
++ onPressingEnterKey(event, () => onProjectTitleClick(projectDetails))} + onClick={() => onProjectTitleClick(projectDetails)} + > + {title} + +
+{organization}
+{id}
++ {getLabel(value)?.label || getLabel(value)?.value} +
} + {!loadingOptions && } + {loadingOptions && } + setOpen(true)} + onBlur={handleInputBlur} + disabled={disabled} + /> +{error}
} +{error}
} ++ {label}{': '} + {value} +
+ ); +}; + +export default LabelValuePair; diff --git a/webapp/src/components/labelValuePair/styles.scss b/webapp/src/components/labelValuePair/styles.scss new file mode 100644 index 00000000..f5711bf8 --- /dev/null +++ b/webapp/src/components/labelValuePair/styles.scss @@ -0,0 +1,3 @@ +.value { + display: inline-block; +} diff --git a/webapp/src/components/loader/circular/index.tsx b/webapp/src/components/loader/circular/index.tsx new file mode 100644 index 00000000..1aa2c57a --- /dev/null +++ b/webapp/src/components/loader/circular/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import './styles.scss'; + +const CircularLoader = () => { + return ( +{title}
} + {showCloseIconInHeader && ( + + )} +{subTitle}
} + {error &&{error}
} + +); + +export default ModalSubTitleAndError; diff --git a/webapp/src/components/modal/subComponents/modalSubtitleAndError/styles.scss b/webapp/src/components/modal/subComponents/modalSubtitleAndError/styles.scss new file mode 100644 index 00000000..4386fbe3 --- /dev/null +++ b/webapp/src/components/modal/subComponents/modalSubtitleAndError/styles.scss @@ -0,0 +1,11 @@ +.modal { + &__subtitle { + width: 100%; + margin: 0 0 16px; + } + &__error { + width: 100%; + margin: 0; + color: var(--error-text); + } +} diff --git a/webapp/src/components/tabs/index.tsx b/webapp/src/components/tabs/index.tsx new file mode 100644 index 00000000..591049a0 --- /dev/null +++ b/webapp/src/components/tabs/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import Tab from 'react-bootstrap/Tab'; +import {Tabs as BootstrapTabs} from 'react-bootstrap'; + +import './styles.scss'; + +type TabsProps = { + tabs: TabsData[] +} + +const Tabs = ({tabs}: TabsProps) => { + return ( +{title}
+{'Subscriptions'}
+{'Linked Projects'}
+ { + data.map((item) => ( +{title}
+ {subTitle &&{subTitle}
} + +