diff --git a/frontend/src/component/App.styles.ts b/frontend/src/component/App.styles.ts new file mode 100644 index 0000000000..08f095baad --- /dev/null +++ b/frontend/src/component/App.styles.ts @@ -0,0 +1,81 @@ +import { makeStyles } from 'tss-react/mui'; + +export const useStyles = makeStyles()(theme => ({ + container: { + height: '100%', + '& ul': { + margin: 0, + }, + }, + primaryBreadcrumb: { + color: 'white', + }, + headerTitleLink: { + color: 'white', + textDecoration: 'none', + }, + contentWrapper: { + margin: '0 auto', + flex: 1, + width: '100%', + backgroundColor: theme.palette.grey[300], + }, + content: { + width: '1250px', + margin: '16px auto', + [theme.breakpoints.down(1260)]: { + width: '1024px', + }, + [theme.breakpoints.down(1024)]: { + width: '100%', + marginLeft: 0, + marginRight: 0, + }, + [theme.breakpoints.down('sm')]: { + minWidth: '100%', + }, + }, + contentContainer: { + padding: '2rem 0', + height: '100%', + }, + drawerTitle: { + lineHeight: '1 !important', + paddingTop: '16px', + paddingBottom: '16px', + paddingLeft: '24px !important', + [theme.breakpoints.down(1024)]: { + paddingTop: '12px', + paddingBottom: '12px', + paddingLeft: '16px !important', + }, + }, + drawerTitleLogo: { + paddingRight: '16px', + }, + drawerTitleText: { + display: 'inline-block', + verticalAlign: 'middle', + fontSize: theme.fontSizes.smallerBody, + }, + navigation: { + padding: '8px 5px 8px 0 !important', + }, + navigationLink: { + padding: '12px 20px !important', + borderRadius: '0 50px 50px 0', + textDecoration: 'none', + [theme.breakpoints.down(1024)]: { + padding: '12px 16px !important', + }, + }, + navigationIcon: { + marginRight: '16px', + }, + iconGitHub: { + width: '24px', + height: '24px', + background: + 'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=)', + }, +})); diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index d94b591735..44d2e60917 100644 --- a/frontend/src/component/App.tsx +++ b/frontend/src/component/App.tsx @@ -11,10 +11,11 @@ import { routes } from 'component/menu/routes'; import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails'; import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect'; -import styles from 'component/styles.module.scss'; +import { useStyles } from './App.styles'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; export const App = () => { + const { classes: styles } = useStyles(); const { authDetails } = useAuthDetails(); const { user } = useAuthUser(); const isLoggedIn = Boolean(user?.id); diff --git a/frontend/src/component/admin/menu/AdminMenu.tsx b/frontend/src/component/admin/menu/AdminMenu.tsx index 160967c623..319bfe28ce 100644 --- a/frontend/src/component/admin/menu/AdminMenu.tsx +++ b/frontend/src/component/admin/menu/AdminMenu.tsx @@ -57,7 +57,7 @@ function AdminMenu() { to="/admin/roles" style={createNavLinkStyle} > - PROJECT ROLES + Project Roles } /> diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts index 679d4b9d46..eaac54cee8 100644 --- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts +++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts @@ -27,9 +27,9 @@ export const useStyles = makeStyles()(theme => ({ flexWrap: 'wrap', }, header: { - color: theme.palette.primary.light, + color: theme.palette.primary.main, }, icon: { - fill: theme.palette.primary.light, + fill: theme.palette.primary.main, }, })); diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index 5223ccbec1..7a38b800f4 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -195,7 +195,7 @@ const UsersList = ({ search }: IUsersListProps) => { sort={sort} setSort={setSort} > - Last seen + Last login {hasAccess(ADMIN) ? 'Actions' : ''} diff --git a/frontend/src/component/common/Codebox/Codebox.styles.ts b/frontend/src/component/common/Codebox/Codebox.styles.ts index 3abf644b72..c6fb507c68 100644 --- a/frontend/src/component/common/Codebox/Codebox.styles.ts +++ b/frontend/src/component/common/Codebox/Codebox.styles.ts @@ -2,9 +2,9 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ container: { - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.sidebarContainer, padding: '1rem', - borderRadius: theme.shape.borderRadius, + borderRadius: theme.shape.borderRadiusMedium, position: 'relative', maxHeight: '500px', overflow: 'auto', diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index bfb06c2cd6..e7f053eea7 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -56,7 +56,7 @@ export const useStyles = makeStyles()(theme => ({ }, headerValues: { fontSize: theme.fontSizes.smallBody, - color: theme.palette.primary.light, + color: theme.palette.primary.main, }, headerValuesExpand: { fontSize: theme.fontSizes.smallBody, diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts index 35b38457af..fdda80ea6f 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts +++ b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts @@ -20,7 +20,7 @@ export const useStyles = makeStyles()(theme => ({ borderRadius: 0, }, sidebar: { - backgroundColor: theme.palette.primary.light, + backgroundColor: theme.palette.primary.main, padding: '2rem', flexGrow: 0, flexShrink: 0, @@ -32,6 +32,10 @@ export const useStyles = makeStyles()(theme => ({ padding: '2rem 1rem', }, }, + sidebarDivider: { + opacity: 0.3, + marginBottom: '8px', + }, title: { marginBottom: '1.5rem', fontWeight: 'normal', @@ -62,6 +66,9 @@ export const useStyles = makeStyles()(theme => ({ documentationLink: { color: '#fff', display: 'block', + '&:hover': { + textDecoration: 'none', + }, }, formContent: { backgroundColor: '#fff', diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx index 6bd53816f1..c20cf92be4 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx +++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx @@ -1,7 +1,13 @@ import { useStyles } from './FormTemplate.styles'; import MenuBookIcon from '@mui/icons-material/MenuBook'; import Codebox from '../Codebox/Codebox'; -import { Collapse, IconButton, useMediaQuery, Tooltip } from '@mui/material'; +import { + Collapse, + IconButton, + useMediaQuery, + Tooltip, + Divider, +} from '@mui/material'; import { FileCopy, Info } from '@mui/icons-material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import Loader from '../Loader/Loader'; @@ -93,6 +99,7 @@ const FormTemplate: React.FC = ({ documentationLink={documentationLink} documentationLinkLabel={documentationLinkLabel} > +

API Command{' '} diff --git a/frontend/src/component/common/Highlighter/Highlighter.styles.ts b/frontend/src/component/common/Highlighter/Highlighter.styles.ts new file mode 100644 index 0000000000..970aa4835f --- /dev/null +++ b/frontend/src/component/common/Highlighter/Highlighter.styles.ts @@ -0,0 +1,9 @@ +import { makeStyles } from 'tss-react/mui'; + +export const useStyles = makeStyles()(theme => ({ + highlighter: { + '&>mark': { + backgroundColor: theme.palette.highlight, + }, + }, +})); diff --git a/frontend/src/component/common/Highlighter/Highlighter.tsx b/frontend/src/component/common/Highlighter/Highlighter.tsx index f27046de2e..fa5f47815f 100644 --- a/frontend/src/component/common/Highlighter/Highlighter.tsx +++ b/frontend/src/component/common/Highlighter/Highlighter.tsx @@ -1,4 +1,5 @@ import { VFC } from 'react'; +import { useStyles } from './Highlighter.styles'; interface IHighlighterProps { search?: string; @@ -13,6 +14,7 @@ export const Highlighter: VFC = ({ children, caseSensitive, }) => { + const { classes } = useStyles(); if (!children) { return null; } @@ -25,6 +27,7 @@ export const Highlighter: VFC = ({ return ( $&') || '', }} diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts index df05a5e682..bfcc415fa4 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts +++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts @@ -5,7 +5,7 @@ export const useStyles = makeStyles()(theme => ({ padding: 0, position: 'relative', '&:hover, &:focus': { - backgroundColor: theme.palette.grey[400], + backgroundColor: theme.palette.tableHeaderHover, '& svg': { color: 'inherit', }, diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx index cbffe16e63..56cd4b1156 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx +++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx @@ -9,6 +9,7 @@ import { SortArrow } from './SortArrow/SortArrow'; interface ICellSortableProps { isSortable?: boolean; isSorted?: boolean; + isGrow?: boolean; isDescending?: boolean; ariaTitle?: string; onClick?: MouseEventHandler; @@ -18,6 +19,7 @@ export const CellSortable: FC = ({ children, isSortable = true, isSorted = false, + isGrow = false, isDescending, ariaTitle, onClick = () => {}, @@ -44,7 +46,10 @@ export const CellSortable: FC = ({ ({ '& > th': { border: 0, '&:first-of-type': { - borderTopLeftRadius: '8px', - borderBottomLeftRadius: '8px', + borderTopLeftRadius: theme.shape.borderRadiusMedium, + borderBottomLeftRadius: theme.shape.borderRadiusMedium, }, '&:last-of-type': { - borderTopRightRadius: '8px', - borderBottomRightRadius: '8px', + borderTopRightRadius: theme.shape.borderRadiusMedium, + borderBottomRightRadius: theme.shape.borderRadiusMedium, + }, + ':not(.grow)': { + width: '0.1%', + whiteSpace: 'nowrap', }, }, }, diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx index 8da89fd53c..31a8797514 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx +++ b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx @@ -4,6 +4,10 @@ import { HeaderGroup } from 'react-table'; import { useStyles } from './SortableTableHeader.styles'; import { CellSortable } from './CellSortable/CellSortable'; +interface IHeaderGroupColumn extends HeaderGroup { + isGrow?: boolean; +} + interface ISortableTableHeaderProps { headerGroups: HeaderGroup[]; } @@ -19,7 +23,7 @@ export const SortableTableHeader: VFC = ({ {...headerGroup.getHeaderGroupProps()} className={styles.tableHeader} > - {headerGroup.headers.map(column => { + {headerGroup.headers.map((column: IHeaderGroupColumn) => { const content = column.render('Header'); return ( @@ -35,6 +39,7 @@ export const SortableTableHeader: VFC = ({ isSortable={column.canSort} isSorted={column.isSorted} isDescending={column.isSortedDesc} + isGrow={column.isGrow} > {content} diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts b/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts index c613d096ce..8100790a11 100644 --- a/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts +++ b/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts @@ -17,9 +17,6 @@ export const useStyles = makeStyles()(theme => ({ minWidth: '379px', }, }, - link: { - color: theme.palette.primary.light, - }, label: { minWidth: '300px', [theme.breakpoints.down(600)]: { diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx index 183c28f762..451507bc60 100644 --- a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx +++ b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx @@ -153,7 +153,6 @@ const FeatureForm: React.FC = ({ your client SDKs will emit events you can listen for every time this toggle gets triggered. Learn more in{' '} ({ link: { display: 'block', margin: '1rem 0 0 0', - color: 'inherit', }, envName: { fontWeight: 'bold', diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureLinkCell/FeatureLinkCell.styles.ts b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureLinkCell/FeatureLinkCell.styles.ts index f433eee184..0954a27d2f 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureLinkCell/FeatureLinkCell.styles.ts +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureLinkCell/FeatureLinkCell.styles.ts @@ -20,15 +20,12 @@ export const useStyles = makeStyles()(theme => ({ display: 'flex', flexDirection: 'column', justifyContent: 'center', + wordBreak: 'break-all', }, description: { color: theme.palette.grey[800], textDecoration: 'none', fontSize: 'inherit', display: 'inline-block', - maxWidth: '250px', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', }, })); diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx index b9b5b7419b..8ec212d42d 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx @@ -71,6 +71,7 @@ const columns = [ /> ), sortType: 'alphanumeric', + isGrow: true, }, { Header: 'Created on', diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts index e4481fe18f..cebceadb84 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts @@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({ container: { borderRadius: theme.shape.borderRadiusLarge, color: '#fff', - backgroundColor: theme.palette.primary.light, + backgroundColor: theme.palette.primary.main, display: 'flex', flexDirection: 'column', maxWidth: '350px', @@ -40,6 +40,7 @@ export const useStyles = makeStyles()(theme => ({ bodyItem: { margin: '0.5rem 0', fontSize: theme.fontSizes.bodySize, + wordBreak: 'break-all', }, headerIcon: { marginRight: '1rem', diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts index 25cd77f464..6e2a4c6af2 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts @@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ container: { borderRadius: theme.shape.borderRadiusLarge, - backgroundColor: theme.palette.primary.light, + backgroundColor: theme.palette.primary.main, display: 'flex', flexDirection: 'column', marginRight: '1rem', diff --git a/frontend/src/component/feature/FeatureView/FeatureView.styles.ts b/frontend/src/component/feature/FeatureView/FeatureView.styles.ts index b677821897..6d284592b5 100644 --- a/frontend/src/component/feature/FeatureView/FeatureView.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureView.styles.ts @@ -15,6 +15,9 @@ export const useStyles = makeStyles()(theme => ({ display: 'flex', alignItems: 'center', }, + toolbarContainer: { + flexShrink: 0, + }, innerContainer: { padding: '1rem 2rem', display: 'flex', @@ -30,7 +33,7 @@ export const useStyles = makeStyles()(theme => ({ height: '1px', }, tabContainer: { - padding: '1rem 2rem', + padding: '0 2rem', }, tabButton: { textTransform: 'none', @@ -46,6 +49,7 @@ export const useStyles = makeStyles()(theme => ({ fontWeight: 'normal', display: 'flex', alignItems: 'center', + wordBreak: 'break-all', }, statusContainer: { marginLeft: '0.5rem', diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx index f2e48b9b8e..11d282ff49 100644 --- a/frontend/src/component/feature/FeatureView/FeatureView.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx @@ -138,7 +138,7 @@ export const FeatureView = () => { /> -
+