= ({ title, children }) => {
- const theme = useTheme();
- const { classes: styles } = useStyles();
- const smallScreen = useMediaQuery(theme.breakpoints.down('md'));
-
- return (
-
-
-
- {title}
-
-
- Committed to creating new ways of developing software
-
-
-
-
-
-
- );
-};
-
-export default StandaloneBanner;
diff --git a/frontend/src/component/user/UserProfile/UserProfile.styles.ts b/frontend/src/component/user/UserProfile/UserProfile.styles.ts
deleted file mode 100644
index 55a8418d1d..0000000000
--- a/frontend/src/component/user/UserProfile/UserProfile.styles.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
- userProfileMenu: {
- display: 'flex',
- },
- profileContainer: {
- position: 'relative',
- },
- button: {
- color: 'inherit',
- padding: '0.2rem 1rem',
- '&:hover': {
- backgroundColor: 'transparent',
- },
- },
- icon: {
- color: theme.palette.grey[700],
- },
-}));
diff --git a/frontend/src/component/user/UserProfile/UserProfile.tsx b/frontend/src/component/user/UserProfile/UserProfile.tsx
index 88e5d0d968..5526da83f4 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfile.tsx
@@ -1,20 +1,37 @@
import { useState } from 'react';
-import classnames from 'classnames';
import { Button, ClickAwayListener, styled } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import { useStyles } from 'component/user/UserProfile/UserProfile.styles';
-import { useThemeStyles } from 'themes/themeStyles';
import { UserProfileContent } from './UserProfileContent/UserProfileContent';
import { IUser } from 'interfaces/user';
import { HEADER_USER_AVATAR } from 'utils/testIds';
import { useId } from 'hooks/useId';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+import { flexRow, focusable, itemsCenter } from 'themes/themeStyles';
const StyledUserAvatar = styled(UserAvatar)(({ theme }) => ({
width: theme.spacing(4.5),
height: theme.spacing(4.5),
}));
+const StyledProfileContainer = styled('div')(({ theme }) => ({
+ position: 'relative',
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+ ...focusable(theme),
+ ...flexRow,
+ ...itemsCenter,
+ color: 'inherit',
+ padding: theme.spacing(0.5, 2),
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+}));
+
+const StyledIcon = styled(KeyboardArrowDownIcon)(({ theme }) => ({
+ color: theme.palette.neutral.main,
+}));
+
interface IUserProfileProps {
profile: IUser;
}
@@ -23,19 +40,10 @@ const UserProfile = ({ profile }: IUserProfileProps) => {
const [showProfile, setShowProfile] = useState(false);
const modalId = useId();
- const { classes: styles } = useStyles();
- const { classes: themeStyles } = useThemeStyles();
-
return (
setShowProfile(false)}>
-
-
+ setShowProfile(prev => !prev)}
aria-controls={showProfile ? modalId : undefined}
aria-expanded={showProfile}
@@ -46,15 +54,15 @@ const UserProfile = ({ profile }: IUserProfileProps) => {
user={profile}
data-testid={HEADER_USER_AVATAR}
/>
-
+
+
);
};
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker.tsx
similarity index 65%
rename from frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
rename to frontend/src/component/user/common/ResetPasswordForm/PasswordChecker.tsx
index a1ee72fa61..605b2bc5d4 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker.tsx
@@ -1,8 +1,6 @@
-import { Typography } from '@mui/material';
-import classnames from 'classnames';
+import { styled, Typography } from '@mui/material';
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { BAD_REQUEST, OK } from 'constants/statusCodes';
-import { useStyles } from './PasswordChecker.styles';
import { useCallback } from 'react';
import { formatApiPath } from 'utils/formatPath';
import { Alert } from '@mui/material';
@@ -38,12 +36,64 @@ const REPEATING_CHARACTER_ERROR =
export const PASSWORD_FORMAT_MESSAGE =
'The password must be at least 10 characters long and must include an uppercase letter, a lowercase letter, a number, and a symbol.';
+const StyledTitle = styled(Typography)(({ theme }) => ({
+ marginBottom: '0',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '1ch',
+}));
+
+const StyledContainer = styled('div')(({ theme }) => ({
+ border: '1px solid #f1f1f1',
+ borderRadius: theme.shape.borderRadius,
+ position: 'relative',
+ maxWidth: '350px',
+ color: '#44606e',
+}));
+
+const StyledHeaderContainer = styled('div')(({ theme }) => ({
+ display: 'flex',
+ padding: theme.spacing(1),
+}));
+
+const StyledCheckContainer = styled('div')(({ theme }) => ({
+ width: '95px',
+ margin: theme.spacing(0, 0.5),
+ display: 'flex',
+ justifyContent: 'center',
+}));
+
+const StyledDivider = styled('div')(({ theme }) => ({
+ backgroundColor: theme.palette.neutral.light,
+ height: '1px',
+ width: '100%',
+}));
+
+const StyledStatusBarContainer = styled('div')(({ theme }) => ({
+ display: 'flex',
+ padding: theme.spacing(1),
+}));
+
+const StyledError = styled(Alert)(({ theme }) => ({
+ marginTop: theme.spacing(1),
+ bottom: '0',
+ position: 'absolute',
+}));
+
+const StyledStatusBar = styled('div', {
+ shouldForwardProp: prop => prop !== 'error',
+})<{ error: boolean }>(({ theme, error }) => ({
+ width: '50px',
+ borderRadius: theme.shape.borderRadius,
+ height: '6px',
+ backgroundColor: error ? 'red' : theme.palette.primary.main,
+}));
+
const PasswordChecker = ({
password,
callback,
style = {},
}: IPasswordCheckerProps) => {
- const { classes: styles } = useStyles();
const [casingError, setCasingError] = useState(true);
const [numberError, setNumberError] = useState(true);
const [symbolError, setSymbolError] = useState(true);
@@ -141,83 +191,63 @@ const PasswordChecker = ({
}
};
- const lengthStatusBarClasses = classnames(styles.statusBar, {
- [styles.statusBarSuccess]: !lengthError,
- });
-
- const numberStatusBarClasses = classnames(styles.statusBar, {
- [styles.statusBarSuccess]: !numberError,
- });
-
- const symbolStatusBarClasses = classnames(styles.statusBar, {
- [styles.statusBarSuccess]: !symbolError,
- });
-
- const casingStatusBarClasses = classnames(styles.statusBar, {
- [styles.statusBarSuccess]: !casingError,
- });
-
return (
<>
-
+
Please set a strong password
-
+
-
-
+
+
Length
-
-
+
+
Casing
-
-
+
+
Number
-
-
+
+
Symbol
-
-
-
+
+
+
+
+
+
+ {' '}
+
+
+
+
+
+
You may not repeat three characters in a row.
-
+
}
/>
-
+
+ Passwords match}
+ elseShow={
+ Passwords do not match
+ }
+ />
+
+ }
+ />
+
+ );
+};
+
+export default PasswordMatcher;
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.styles.ts b/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.styles.ts
deleted file mode 100644
index 9f946a4a6e..0000000000
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.styles.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
- matcherContainer: {
- position: 'relative',
- paddingTop: theme.spacing(0.5),
- },
- matcherIcon: {
- marginRight: '5px',
- },
- matcher: {
- position: 'absolute',
- bottom: '-8px',
- display: 'flex',
- alignItems: 'center',
- },
- matcherError: {
- color: theme.palette.error.main,
- },
- matcherSuccess: {
- color: theme.palette.primary.main,
- },
-}));
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx b/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx
deleted file mode 100644
index e21f08280e..0000000000
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Typography } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import classnames from 'classnames';
-import CheckIcon from '@mui/icons-material/Check';
-
-import { useStyles } from './PasswordMatcher.styles';
-
-interface IPasswordMatcherProps {
- started: boolean;
- matchingPasswords: boolean;
-}
-
-const PasswordMatcher = ({
- started,
- matchingPasswords,
-}: IPasswordMatcherProps) => {
- const { classes: styles } = useStyles();
- return (
-
-
-
- Passwords do not match
-
- }
- />
- }
- />
-
- );
-};
-
-export default PasswordMatcher;
diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
index 8607d6d722..4a0f7cf047 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
@@ -1,8 +1,8 @@
import { Button, styled } from '@mui/material';
import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import PasswordChecker from './PasswordChecker/PasswordChecker';
-import PasswordMatcher from './PasswordMatcher/PasswordMatcher';
+import PasswordChecker from './PasswordChecker';
+import PasswordMatcher from './PasswordMatcher';
import PasswordField from 'component/common/PasswordField/PasswordField';
interface IResetPasswordProps {
diff --git a/frontend/src/component/user/common/SecondaryLoginActions.tsx b/frontend/src/component/user/common/SecondaryLoginActions.tsx
new file mode 100644
index 0000000000..3c54155dd1
--- /dev/null
+++ b/frontend/src/component/user/common/SecondaryLoginActions.tsx
@@ -0,0 +1,49 @@
+import { Alert, styled, Typography } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+ margin: 'auto auto 0 auto',
+ width: '230px',
+ [theme.breakpoints.down('md')]: {
+ marginTop: theme.spacing(2),
+ },
+}));
+
+const StyledLink = styled(Link)(({ theme }) => ({
+ fontWeight: 'bold',
+ textAlign: 'center',
+}));
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+ fontWeight: 'bold',
+ marginBottom: theme.spacing(1),
+}));
+
+const StyledRef = styled('a')(({ theme }) => ({
+ fontWeight: 'bold',
+ textAlign: 'center',
+}));
+
+const SecondaryLoginActions = () => {
+ return (
+
+
+
+ Forgot password?
+
+
+
+ Don't have an account?{' '}
+
+ Sign up
+
+
+
+ );
+};
+
+export default SecondaryLoginActions;
diff --git a/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.styles.ts b/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.styles.ts
deleted file mode 100644
index e8e4494c26..0000000000
--- a/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.styles.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
- container: {
- margin: 'auto auto 0 auto',
- width: '230px',
- [theme.breakpoints.down('md')]: {
- marginTop: '1rem',
- },
- },
- link: {
- fontWeight: 'bold',
- textAlign: 'center',
- },
- text: { fontWeight: 'bold', marginBottom: '0.5rem' },
-}));
diff --git a/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.tsx b/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.tsx
deleted file mode 100644
index d54e0e72c6..0000000000
--- a/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Typography } from '@mui/material';
-import { Link } from 'react-router-dom';
-import { useStyles } from './SecondaryLoginActions.styles';
-
-const SecondaryLoginActions = () => {
- const { classes: styles } = useStyles();
- return (
-
-
-
- Forgot password?
-
-
-
- Don't have an account?{' '}
-
- Sign up
-
-
-
= ({
+ children,
+ BannerComponent,
+}) => {
+ let banner =
+ {banner}
+
+
+ {children}
+
+
+
+ );
+};
+
+export default StandaloneLayout;
diff --git a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts
deleted file mode 100644
index c535ddf662..0000000000
--- a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
- container: {
- padding: '5.5rem',
- background: theme.palette.standaloneBackground,
- display: 'flex',
- [theme.breakpoints.down('md')]: {
- flexDirection: 'column',
- },
- [theme.breakpoints.down('sm')]: {
- padding: '0',
- },
- minHeight: '100vh',
- },
- leftContainer: {
- width: '40%',
- borderRadius: theme.shape.borderRadius,
- [theme.breakpoints.down('md')]: {
- borderRadius: '0',
- width: '100%',
- minHeight: 'auto',
- },
- },
- rightContainer: {
- width: '60%',
- flex: '1',
- borderTopRightRadius: '3px',
- borderBottomRightRadius: '3px',
- backgroundColor: theme.palette.background.paper,
- position: 'relative',
- [theme.breakpoints.down('md')]: {
- borderRadius: '0',
- width: '100%',
- position: 'static',
- minHeight: 'auto',
- },
- },
- title: {
- fontWeight: 'bold',
- fontSize: '1.2rem',
- marginBottom: '1rem',
- },
- innerRightContainer: {
- display: 'flex',
- justifyContent: 'center',
- height: '100%',
- padding: '6rem 3rem',
- [theme.breakpoints.down('md')]: {
- padding: '2rem 2rem',
- },
- [theme.breakpoints.down('sm')]: {
- padding: '2rem 1rem',
- },
- },
-}));
diff --git a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
deleted file mode 100644
index cbe37a7a6c..0000000000
--- a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FC } from 'react';
-import StandaloneBanner from 'component/user/StandaloneBanner/StandaloneBanner';
-import { useStyles } from './StandaloneLayout.styles';
-
-interface IStandaloneLayout {
- BannerComponent?: JSX.Element;
- showMenu?: boolean;
-}
-
-const StandaloneLayout: FC = ({
- children,
- BannerComponent,
-}) => {
- const { classes: styles } = useStyles();
-
- let banner =