diff --git a/src/custom/ConnectionChip/ConnectionChip.tsx b/src/custom/ConnectionChip/ConnectionChip.tsx
index 058b3780..c51b8dc9 100644
--- a/src/custom/ConnectionChip/ConnectionChip.tsx
+++ b/src/custom/ConnectionChip/ConnectionChip.tsx
@@ -1,7 +1,7 @@
import { ChipProps, TooltipProps } from '@mui/material';
import React from 'react';
import { Chip } from '../../base/Chip';
-import { Tooltip } from '../../base/Tooltip';
+import { CustomTooltip } from '../CustomTooltip';
export interface ConnectionChipProps {
tooltip: string;
@@ -26,7 +26,7 @@ function ConnectionChip({
...rest
}: ConnectionChipProps): JSX.Element {
return (
-
+
-
+
);
}
diff --git a/src/custom/Feedback/FeedbackButton.tsx b/src/custom/Feedback/FeedbackButton.tsx
index b3bdeeea..6222f71a 100644
--- a/src/custom/Feedback/FeedbackButton.tsx
+++ b/src/custom/Feedback/FeedbackButton.tsx
@@ -25,6 +25,7 @@ import {
FeedbackTextArea,
HelperWrapper,
InnerComponentWrapper,
+ NeedHelpComponent,
StyledCheckbox,
StyledLink,
StyledTextArea
@@ -71,16 +72,7 @@ const feedbackData: FeedbackDataItem[] = [
label: 'Meet Request',
isTextInput: false,
innerComponent: (
-
+
Need help or have more feedback than fits here?
Meet with us.
@@ -91,7 +83,7 @@ const feedbackData: FeedbackDataItem[] = [
>
Select a time convenient for you.
-
+
)
}
];
diff --git a/src/custom/Feedback/style.tsx b/src/custom/Feedback/style.tsx
index 36d6484d..3771934d 100644
--- a/src/custom/Feedback/style.tsx
+++ b/src/custom/Feedback/style.tsx
@@ -9,7 +9,6 @@ import {
CULTURED,
DARK_JUNGLE_GREEN,
DARK_KEPPEL,
- DARK_PRIMARY_COLOR,
DARK_SLATE_GRAY,
KEPPEL,
MEDIUM_GREY,
@@ -267,13 +266,12 @@ export const FeedbackOptionButton = styled(Button)(({ them
: theme.palette.mode === 'dark'
? SNOW_WHITE
: SNOW_WHITE,
- fill: isOpen ? (theme.palette.mode === 'dark' ? CULTURED : DARK_PRIMARY_COLOR) : CULTURED,
- stroke: isOpen ? SNOW_WHITE : KEPPEL,
+ fill: isOpen ? theme.palette.icon.default : SNOW_WHITE,
+ stroke: isOpen ? theme.palette.icon.inverse : theme.palette.icon.brand,
'&:hover': {
- color: theme.palette.mode === 'dark' ? SNOW_WHITE : BLACK,
- fill: theme.palette.mode === 'dark' ? CULTURED : DARK_PRIMARY_COLOR,
- backgroundColor: WHITE,
- stroke: SNOW_WHITE
+ color: theme.palette.text.default,
+ backgroundColor: theme.palette.background.hover,
+ fill: theme.palette.icon.default
}
}));
@@ -298,7 +296,14 @@ export const StyledTextArea = styled('textarea')(({ theme }) => ({
outline: `1px solid ${CARIBBEAN_GREEN}`
}
}));
-
+export const NeedHelpComponent = styled('div')(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ height: '137px',
+ color: theme.palette.text.default
+}));
export const StyledLink = styled('a')({
textDecoration: 'underline',
color: 'inherit',
diff --git a/src/custom/LearningCard/LearningCard.tsx b/src/custom/LearningCard/LearningCard.tsx
index 0f54ca3c..2fcf0343 100644
--- a/src/custom/LearningCard/LearningCard.tsx
+++ b/src/custom/LearningCard/LearningCard.tsx
@@ -27,9 +27,10 @@ interface Props {
tutorial: Tutorial;
path: string;
courseCount: number;
+ courseType: string;
}
-const LearningCard: React.FC = ({ tutorial, path, courseCount }) => {
+const LearningCard: React.FC = ({ tutorial, path, courseCount, courseType }) => {
return (
{tutorial.frontmatter.disabled === 'yes' ? (
@@ -77,7 +78,8 @@ const LearningCard: React.FC = ({ tutorial, path, courseCount }) => {
- {courseCount} Course{courseCount === 1 ? '' : 's'}
+ {courseCount} {courseType}
+ {courseCount === 1 ? '' : 's'}
diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx
index 217210a5..369805ec 100644
--- a/src/custom/Modal/index.tsx
+++ b/src/custom/Modal/index.tsx
@@ -54,9 +54,12 @@ const StyledDialog = styled(Dialog)`
}
`;
-const StyledHeader = styled('div')(() => ({
- background: 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)',
- color: '#fff',
+const StyledHeader = styled('div')(({ theme }) => ({
+ background:
+ theme.palette.mode === 'light'
+ ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)'
+ : 'linear-gradient(90deg, #000 0%, #23363F 100%)',
+ color: '#eee',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
diff --git a/src/custom/ModalCard/style.tsx b/src/custom/ModalCard/style.tsx
index edf06687..efc920f1 100644
--- a/src/custom/ModalCard/style.tsx
+++ b/src/custom/ModalCard/style.tsx
@@ -5,7 +5,8 @@ import {
BUTTON_MODAL,
BUTTON_MODAL_DARK,
SLIGHT_BLACK_2,
- SLIGHT_BLUE
+ SLIGHT_BLUE,
+ WHITE
} from '../../theme/colors/colors';
export const ContentContainer = styled('div')(({ theme }) => ({
@@ -38,16 +39,13 @@ export const HeaderTypography = styled(Typography)({
export const HeaderModal = styled('div')(({ theme }) => {
const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK;
const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2;
-
- const iconColor = theme.palette.icon?.inverse;
-
return {
display: 'flex',
borderRadius: '5px 5px 0px 0px',
justifyContent: 'space-between',
padding: '11px 16px',
height: '52px',
- fill: iconColor,
+ fill: WHITE,
boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)',
background: `linear-gradient(90deg, ${startColor}, ${endColor})`,
filter:
diff --git a/src/custom/TOCChapter/style.tsx b/src/custom/TOCChapter/style.tsx
index ddd15d08..761e1860 100644
--- a/src/custom/TOCChapter/style.tsx
+++ b/src/custom/TOCChapter/style.tsx
@@ -40,8 +40,8 @@ export const TOCWrapper = styled('div')(({ theme }) => ({
'.toc-list': {
'& ul': {
position: 'relative',
- paddingInlineStart: '3.031rem',
- MozPaddingStart: '2.78rem',
+ paddingInlineStart: '2.65rem',
+ MozPaddingStart: '2.65rem',
'&::after': {
position: 'absolute',
inset: '1rem auto 1rem 31px',
diff --git a/src/custom/TransferModal/TransferList/TransferList.tsx b/src/custom/TransferModal/TransferList/TransferList.tsx
index d27dfbc8..0d596dd1 100644
--- a/src/custom/TransferModal/TransferList/TransferList.tsx
+++ b/src/custom/TransferModal/TransferList/TransferList.tsx
@@ -30,6 +30,8 @@ export interface TransferListProps {
assignedPage: () => void;
originalLeftCount: number;
originalRightCount: number;
+ rightPermission: boolean;
+ leftPermission: boolean;
}
interface ListItemType {
@@ -58,6 +60,8 @@ function intersection(a: T[], b: T[]): T[] {
* @param {Element} props.emptyStateIconRight - Icon for empty state of list right.
* @param {String} props.emtyStateMessageRight - Message for the empty state of the list right.
* @param {String} props.transferComponentType - Type of the component transfer (There is two types: chip and other).
+ * @param {Boolean} props.leftPermission - Permission to move data from left to right.
+ * @param {Boolean} props.rightPermission - Permission to move data from right to left.
*/
function TransferList({
@@ -73,6 +77,8 @@ function TransferList({
emtyStateMessageRight,
originalLeftCount,
originalRightCount,
+ leftPermission = true,
+ rightPermission = true,
transferComponentType = TRANSFER_COMPONET.OTHER
}: TransferListProps): JSX.Element {
const [checked, setChecked] = React.useState([]);
@@ -280,7 +286,10 @@ function TransferList({
variant="outlined"
size="small"
onClick={handleAllRight}
- disabled={left.length === 0}
+ disabled={
+ !rightPermission ||
+ (rightPermission && (left?.length === 0 || left.length < leftCount))
+ }
aria-label="move all right"
>
@@ -290,7 +299,7 @@ function TransferList({
variant="outlined"
size="small"
onClick={handleCheckedRight}
- disabled={leftChecked.length === 0}
+ disabled={!rightPermission || (rightPermission && leftChecked.length === 0)}
aria-label="move selected right"
>
@@ -299,7 +308,7 @@ function TransferList({
variant="outlined"
size="small"
onClick={handleCheckedLeft}
- disabled={rightChecked.length === 0}
+ disabled={!leftPermission || (leftPermission && rightChecked.length === 0)}
aria-label="move selected left"
>
@@ -308,7 +317,10 @@ function TransferList({
variant="outlined"
size="small"
onClick={handleAllLeft}
- disabled={right.length === 0}
+ disabled={
+ !leftPermission ||
+ (leftPermission && (right?.length === 0 || right.length < rightCount))
+ }
aria-label="move all left"
>
diff --git a/src/custom/TransferModal/TransferList/style.tsx b/src/custom/TransferModal/TransferList/style.tsx
index 22e4c0a5..75c58af8 100644
--- a/src/custom/TransferModal/TransferList/style.tsx
+++ b/src/custom/TransferModal/TransferList/style.tsx
@@ -1,5 +1,6 @@
import { styled } from '@mui/material';
import { Button, Chip, Grid, Paper, Typography } from '../../../base';
+import { KEPPEL } from '../../../theme';
export const StyledChip = styled(Chip)(({ theme }) => ({
padding: '5px 6px !important',
@@ -46,8 +47,13 @@ export const TransferButton = styled(Button)(({ theme }) => ({
borderRadius: '10px',
borderColor: theme.palette.border?.strong,
boxShadow: 'none',
+ display: 'flex',
+ flexDirection: 'row',
+ fill: theme.palette.icon.default,
'&:hover': {
- borderColor: theme.palette.border?.brand
+ borderColor: theme.palette.border?.brand,
+ backgroundColor: `${KEPPEL} !important`,
+ fill: theme.palette.icon.inverse
}
}));
diff --git a/src/theme/typography.ts b/src/theme/typography.ts
index bf2456e9..aab617e5 100644
--- a/src/theme/typography.ts
+++ b/src/theme/typography.ts
@@ -91,7 +91,6 @@ export const typography = (mode: PaletteMode): TypographyOptions => {
fontSize: '1rem',
fontWeight: 400,
lineHeight: '1.75rem',
- display: 'block',
[theme.breakpoints.down('sm')]: {
fontSize: '1rem',
lineHeight: '1.75rem'
@@ -104,7 +103,6 @@ export const typography = (mode: PaletteMode): TypographyOptions => {
fontWeight: 600,
lineHeight: '1.75rem',
textTransform: 'capitalize',
- display: 'block',
[theme.breakpoints.down('sm')]: {
fontSize: '1rem',
lineHeight: '1.75rem'