Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-31 01:16:01 +02:00
Code Issues Projects Releases Wiki Activity

fix: feature toggle list and UI adjustments (#970)

Browse Source 
* fix: add highlight and hover colors, fix them

* misc ui adjustments

* test isGrow prop in table cols

* fix: revert typography changes, update snaps

* Update src/themes/themeTypes.ts

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>

* fix: misc ui adjustments

* fix: backButton color

* refactor: color not needed, can be inherited

* fix: project roles case, new borderRadius values

* fix: color green

* fix: feature form link

* update snaps

* fix: formatting

* update snap

Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
This commit is contained in:
Nuno Góis 2022-05-12 14:34:04 +01:00 committed by GitHub
parent 3f766995fb
commit cdfb1f2452
40 changed files with 293 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/component/App.styles.ts Normal file
View File

@ -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=)',
},
}));

3
frontend/src/component/App.tsx
View File

@ -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);

2
frontend/src/component/admin/menu/AdminMenu.tsx
View File

@ -57,7 +57,7 @@ function AdminMenu() {
to="/admin/roles"
style={createNavLinkStyle}
>
<span>PROJECT ROLES</span>
<span>Project Roles</span>
</NavLink>
}
/>

4
frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts
View File

@ -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,
},
}));

2
frontend/src/component/admin/users/UsersList/UsersList.tsx
View File

@ -195,7 +195,7 @@ const UsersList = ({ search }: IUsersListProps) => {
sort={sort}
setSort={setSort}
>
Last seen
Last login
</TableCellSortable>
<TableCell align="center">
{hasAccess(ADMIN) ? 'Actions' : ''}

4
frontend/src/component/common/Codebox/Codebox.styles.ts
View File

@ -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',

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
View File

@ -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,

9
frontend/src/component/common/FormTemplate/FormTemplate.styles.ts
View File

@ -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',

9
frontend/src/component/common/FormTemplate/FormTemplate.tsx
View File

@ -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<ICreateProps> = ({
documentationLink={documentationLink}
documentationLinkLabel={documentationLinkLabel}
>
<Divider className={styles.sidebarDivider} />
<h2 className={styles.subtitle}>
API Command{' '}
<Tooltip title="Copy command" arrow>

9
frontend/src/component/common/Highlighter/Highlighter.styles.ts Normal file
View File

@ -0,0 +1,9 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
highlighter: {
'&>mark': {
backgroundColor: theme.palette.highlight,
},
},
}));

3
frontend/src/component/common/Highlighter/Highlighter.tsx
View File

@ -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<IHighlighterProps> = ({
children,
caseSensitive,
}) => {
const { classes } = useStyles();
if (!children) {
return null;
}
@ -25,6 +27,7 @@ export const Highlighter: VFC<IHighlighterProps> = ({
return (
<span
className={classes.highlighter}
dangerouslySetInnerHTML={{
__html: children?.replaceAll(regex, '<mark>$&</mark>') || '',
}}

2
frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
View File

@ -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',
},

7
frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
View File

@ -9,6 +9,7 @@ import { SortArrow } from './SortArrow/SortArrow';
interface ICellSortableProps {
isSortable?: boolean;
isSorted?: boolean;
isGrow?: boolean;
isDescending?: boolean;
ariaTitle?: string;
onClick?: MouseEventHandler<HTMLButtonElement>;
@ -18,6 +19,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
children,
isSortable = true,
isSorted = false,
isGrow = false,
isDescending,
ariaTitle,
onClick = () => {},
@ -44,7 +46,10 @@ export const CellSortable: FC<ICellSortableProps> = ({
<TableCell
component="th"
aria-sort={ariaSort}
className={classnames(styles.tableCellHeaderSortable)}
className={classnames(
styles.tableCellHeaderSortable,
isGrow && 'grow'
)}
>
<ConditionallyRender
condition={isSortable}

12
frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts
View File

@ -5,12 +5,16 @@ export const useStyles = makeStyles()(theme => ({
'& > 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',
},
},
},

7
frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
View File

@ -4,6 +4,10 @@ import { HeaderGroup } from 'react-table';
import { useStyles } from './SortableTableHeader.styles';
import { CellSortable } from './CellSortable/CellSortable';
interface IHeaderGroupColumn extends HeaderGroup<object> {
isGrow?: boolean;
}
interface ISortableTableHeaderProps {
headerGroups: HeaderGroup<object>[];
}
@ -19,7 +23,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
{...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<ISortableTableHeaderProps> = ({
isSortable={column.canSort}
isSorted={column.isSorted}
isDescending={column.isSortedDesc}
isGrow={column.isGrow}
>
{content}
</CellSortable>

3
frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts
View File

@ -17,9 +17,6 @@ export const useStyles = makeStyles()(theme => ({
minWidth: '379px',
},
},
link: {
color: theme.palette.primary.light,
},
label: {
minWidth: '300px',
[theme.breakpoints.down(600)]: {

1
frontend/src/component/feature/FeatureForm/FeatureForm.tsx
View File

@ -153,7 +153,6 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
your client SDKs will emit events you can listen for
every time this toggle gets triggered. Learn more in{' '}
<a
className={styles.link}
target="_blank"
rel="noopener noreferrer"
href="https://docs.getunleash.io/advanced/impression_data"

1
frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts
View File

@ -7,7 +7,6 @@ export const useStyles = makeStyles()(theme => ({
link: {
display: 'block',
margin: '1rem 0 0 0',
color: 'inherit',
},
envName: {
fontWeight: 'bold',

5
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureLinkCell/FeatureLinkCell.styles.ts
View File

@ -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',
},
}));

1
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable/FeatureToggleListTable.tsx
View File

@ -71,6 +71,7 @@ const columns = [
/>
),
sortType: 'alphanumeric',
isGrow: true,
},
{
Header: 'Created on',

3
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts
View File

@ -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',

2
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts
View File

@ -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',

6
frontend/src/component/feature/FeatureView/FeatureView.styles.ts
View File

@ -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',

2
frontend/src/component/feature/FeatureView/FeatureView.tsx
View File

@ -138,7 +138,7 @@ export const FeatureView = () => {
/>
</div>
<div>
<div className={styles.toolbarContainer}>
<PermissionIconButton
permission={CREATE_FEATURE}
projectId={projectId}

4
frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
View File

@ -131,7 +131,7 @@ exports[`FeedbackCESForm 1`] = `
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root mui-wb57ya-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-rrmchf-MuiInputBase-root-MuiOutlinedInput-root"
class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-181wpo2-MuiInputBase-root-MuiOutlinedInput-root"
>
<textarea
aria-invalid="false"
@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
hidden=""
>
<button
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
disabled=""
tabindex="-1"
type="submit"

3
frontend/src/component/layout/MainLayout/MainLayout.tsx
View File

@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
import classnames from 'classnames';
import { makeStyles } from 'tss-react/mui';
import { Grid } from '@mui/material';
import styles from 'component/styles.module.scss';
import { useStyles as useAppStyles } from 'component/App.styles';
import Header from 'component/menu/Header/Header';
import Footer from 'component/menu/Footer/Footer';
import Proclamation from 'component/common/Proclamation/Proclamation';
@ -34,6 +34,7 @@ interface IMainLayoutProps {
export const MainLayout = ({ children }: IMainLayoutProps) => {
const { classes } = useStyles();
const { classes: styles } = useAppStyles();
const { uiConfig } = useUiConfig();
return (

2
frontend/src/component/project/Project/Project.styles.ts
View File

@ -25,7 +25,7 @@ export const useStyles = makeStyles()(theme => ({
height: '1px',
},
tabContainer: {
padding: '1rem 2rem',
padding: '0 2rem',
},
tabButton: {
textTransform: 'none',

2
frontend/src/component/project/Project/Project.tsx
View File

@ -119,7 +119,7 @@ const Project = () => {
<h2
data-loading
className={styles.title}
style={{ margin: 0 }}
style={{ margin: 0, width: '100%' }}
>
<div className={styles.titleText}>{project?.name}</div>
<PermissionIconButton

1
frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
View File

@ -26,6 +26,7 @@ export const useStyles = makeStyles()(theme => ({
display: 'flex',
width: '100%',
textAlign: 'left',
wordBreak: 'break-all',
},
percentageContainer: {
display: 'flex',

1
frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.styles.ts
View File

@ -23,7 +23,6 @@ export const useStyles = makeStyles()(theme => ({
},
cancelButton: {
marginLeft: '1.5rem',
color: theme.palette.primary.light,
},
inputDescription: {
marginBottom: '0.5rem',

2
frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles.ts
View File

@ -31,7 +31,6 @@ export const useStyles = makeStyles()(theme => ({
},
cancelButton: {
marginLeft: '1.5rem',
color: theme.palette.primary.light,
},
inputDescription: {
marginBottom: '1rem',
@ -61,7 +60,6 @@ export const useStyles = makeStyles()(theme => ({
},
backButton: {
marginRight: 'auto',
color: theme.palette.primary.light,
},
addContextContainer: {
marginTop: '1rem',

3
frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx
View File

@ -101,7 +101,8 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
</SidebarModal>
<PermissionButton
permission={CREATE_CONTEXT_FIELD}
className={styles.addContextButton}
variant="outlined"
color="primary"
startIcon={<Add />}
onClick={() => setOpen(true)}
>

4
frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap
View File

@ -4,7 +4,7 @@ exports[`renders correctly 1`] = `
[
<div>
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15wj2kz-container mui-177gdp-MuiPaper-root"
>
<div
className="tss-1yjkq3l-headerContainer"
@ -33,7 +33,7 @@ exports[`renders correctly 1`] = `
>
<button
aria-describedby="useId-0"
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
data-testid="ADD_NEW_STRATEGY_ID"
disabled={false}
onBlur={[Function]}

107
frontend/src/component/styles.module.scss
View File

@ -1,107 +0,0 @@
.container {
height: 100%;
ul {
margin: 0;
}
}
.primaryBreadbrumb {
color: #fff;
}
.headerTitleLink {
color: #fff;
}
.contentWrapper {
margin: 0 auto;
flex: 1;
width: 100%;
background-color: #ecebeb;
}
.content {
width: 1250px;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
margin-bottom: 16px;
}
.contentContainer {
padding: var(--page-padding);
height: 100%;
}
@media (max-width: 1260px) {
.content {
width: 1024px;
}
}
@media (max-width: 1024px) {
.content {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 600px) {
.content {
width: 100%;
margin-left: 0;
margin-right: 0;
min-width: 100%;
}
}
.headerTitleLink {
text-decoration: none;
}
.drawerTitle {
line-height: 1 !important;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 24px !important;
}
@media screen and (max-width: 1024px) {
.drawerTitle {
padding-top: 12px;
padding-bottom: 12px;
padding-left: 16px !important;
}
}
.drawerTitleLogo {
padding-right: 16px;
}
.drawerTitleText {
display: inline-block;
vertical-align: middle;
font-size: 0.8em;
}
.navigation {
padding: 8px 5px 8px 0 !important;
}
.navigationLink {
padding: 12px 20px !important;
border-radius: 0 50px 50px 0;
text-decoration: none;
}
@media screen and (max-width: 1024px) {
.navigationLink {
padding: 12px 16px !important;
}
}
.navigationIcon {
margin-right: 16px;
}
.iconGitHub {
width: 24px;
height: 24px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=);
}

4
frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
View File

@ -4,7 +4,7 @@ exports[`renders an empty list correctly 1`] = `
[
<div>
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15wj2kz-container mui-177gdp-MuiPaper-root"
>
<div
className="tss-1yjkq3l-headerContainer"
@ -29,7 +29,7 @@ exports[`renders an empty list correctly 1`] = `
className="tss-1u1bjy8-headerActions"
>
<button
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
disabled={false}
onBlur={[Function]}
onClick={[Function]}

2
frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.styles.ts
View File

@ -9,9 +9,7 @@ export const useStyles = makeStyles()(theme => ({
},
},
link: {
textDecoration: 'none',
fontWeight: 'bold',
color: theme.palette.primary.main,
textAlign: 'center',
},
text: { fontWeight: 'bold', marginBottom: '0.5rem' },

6
frontend/src/themes/app.css
View File

@ -135,7 +135,11 @@ p {
}
a {
color: inherit;
color: #615bc2;
}
a:hover {
text-decoration: none;
}
#app {

7
frontend/src/themes/colors.ts
View File

@ -56,9 +56,10 @@ export const colors = {
900: '#305200',
800: '#3B6600',
700: '#4D8400',
500: '#68A611',
400: '#7FB435',
300: '#99C35D',
600: '#68A611',
500: '#7FB435',
400: '#99C35D',
300: '#B0D182',
200: '#CFE5AE',
100: '#E4F0D3',
50: '#F4FAEB',

118
frontend/src/themes/theme.ts
View File

@ -30,9 +30,10 @@ export default createTheme({
bold: 700,
},
shape: {
borderRadius: '3px',
borderRadiusLarge: '10px',
borderRadiusExtraLarge: '25px',
borderRadius: '4px',
borderRadiusMedium: '8px',
borderRadiusLarge: '12px',
borderRadiusExtraLarge: '20px',
},
palette: {
primary: {
@ -46,27 +47,30 @@ export default createTheme({
dark: colors.purple[900],
},
info: {
light: colors.blue[700],
main: colors.blue[700],
dark: colors.blue[800],
light: colors.blue[50],
main: colors.blue[500],
dark: colors.blue[700],
},
success: {
light: colors.green[700],
main: colors.green[700],
light: colors.green[50],
main: colors.green[500],
dark: colors.green[800],
},
warning: {
light: colors.orange[700],
main: colors.orange[700],
dark: colors.orange[800],
light: colors.orange[100],
main: colors.orange[800],
dark: colors.orange[900],
},
error: {
light: colors.red[700],
light: colors.red[50],
main: colors.red[700],
dark: colors.red[800],
},
divider: colors.grey[300],
dividerAlternative: colors.grey[500],
tableHeaderHover: colors.grey[400],
highlight: '#FFEACC',
sidebarContainer: 'rgba(32,32,33, 0.2)',
grey: colors.grey,
text: {
primary: colors.grey[900],
@ -93,14 +97,23 @@ export default createTheme({
styleOverrides: {
root: {
color: colors.purple[900],
'&:hover': {
textDecoration: 'none',
},
},
},
},
MuiBreadcrumbs: {
styleOverrides: {
root: {
color: colors.grey[900],
fontSize: '0.875rem',
'& a': {
color: colors.purple[900],
textDecoration: 'underline',
'&:hover': {
textDecoration: 'none',
},
},
},
},
@ -128,5 +141,86 @@ export default createTheme({
},
},
},
MuiAlert: {
styleOverrides: {
root: {
borderRadius: '8px',
a: {
color: 'inherit',
},
'&.MuiAlert-standardInfo': {
backgroundColor: colors.blue[50],
color: colors.blue[700],
border: `1px solid ${colors.blue[200]}`,
'& .MuiAlert-icon': {
color: colors.blue[500],
},
},
'&.MuiAlert-standardSuccess': {
backgroundColor: colors.green[50],
color: colors.green[800],
border: `1px solid ${colors.green[300]}`,
'& .MuiAlert-icon': {
color: colors.green[500],
},
},
'&.MuiAlert-standardWarning': {
backgroundColor: colors.orange[100],
color: colors.orange[900],
border: `1px solid ${colors.orange[500]}`,
'& .MuiAlert-icon': {
color: colors.orange[800],
},
},
'&.MuiAlert-standardError': {
backgroundColor: colors.red[50],
color: colors.red[800],
border: `1px solid ${colors.red[300]}`,
'& .MuiAlert-icon': {
color: colors.red[700],
},
},
},
},
},
MuiTabs: {
styleOverrides: {
root: {
'& .MuiTabs-indicator': {
height: '4px',
},
},
},
},
MuiTab: {
styleOverrides: {
root: {
color: colors.grey[900],
fontSize: '1rem',
textTransform: 'none',
fontWeight: 400,
minHeight: '62px',
'&:hover': {
backgroundColor: colors.grey[200],
},
'&.Mui-selected': {
color: colors.grey[900],
fontWeight: 700,
},
'& > span': {
color: colors.purple[900],
},
},
},
},
MuiAccordionSummary: {
styleOverrides: {
root: {
'& > .MuiAccordionSummary-content.Mui-expanded': {
margin: '12px 0',
},
},
},
},
},
});

17
frontend/src/themes/themeTypes.ts
View File

@ -29,7 +29,7 @@ declare module '@mui/material/styles' {
interface CustomPalette {
/**
* Colors for event log output
* Colors for event log output.
*/
code: {
main: string;
@ -40,7 +40,7 @@ declare module '@mui/material/styles' {
background: string;
};
/**
* For 'Seen' column on feature toggles list
* For 'Seen' column on feature toggles list.
*/
activityIndicators: {
unknown: string;
@ -49,6 +49,18 @@ declare module '@mui/material/styles' {
abandoned: string;
};
dividerAlternative: string;
/**
* For table header hover effect.
*/
tableHeaderHover: string;
/**
* Text highlight effect color. Used when filtering/searching over content.
*/
highlight: string;
/**
* For sidebar container background.
*/
sidebarContainer: string;
}
interface Theme extends CustomTheme {}
@ -60,6 +72,7 @@ declare module '@mui/material/styles' {
declare module '@mui/system/createTheme/shape' {
interface Shape {
borderRadiusMedium: string;
borderRadiusLarge: string;
borderRadiusExtraLarge: string;
}