Merge branch 'master' into 499-refactor-icons

Author: nebula-aac

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 (
-    <Tooltip title={tooltip} placement={tooltipPlacement}>
+    <CustomTooltip title={tooltip} placement={tooltipPlacement}>
       <Chip
         sx={{
           paddingY: '10px',
@@ -49,7 +49,7 @@ function ConnectionChip({
         style={style}
         {...rest}
       />
-    </Tooltip>
+    </CustomTooltip>
   );
 }
 

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: (
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          height: '137px',
-          color: 'black'
-        }}
-      >
+      <NeedHelpComponent>
         <Typography style={{ lineHeight: '2.5', textAlign: 'center' }}>
           Need help or have more feedback than fits here?
           <br /> Meet with us.
@@ -91,7 +83,7 @@ const feedbackData: FeedbackDataItem[] = [
         >
           Select a time convenient for you.
         </StyledLink>
-      </div>
+      </NeedHelpComponent>
     )
   }
 ];

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)<FeedbackMessageProps>(({ 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',

src/custom/LearningCard/LearningCard.tsx

@@ -27,9 +27,10 @@ interface Props {
   tutorial: Tutorial;
   path: string;
   courseCount: number;
+  courseType: string;
 }
 
-const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount }) => {
+const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType }) => {
   return (
     <CardWrapper>
       {tutorial.frontmatter.disabled === 'yes' ? (
@@ -77,7 +78,8 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount }) => {
                 </CardDesc>
                 <CardSubdata className="card-subdata">
                   <p>
-                    {courseCount} Course{courseCount === 1 ? '' : 's'}
+                    {courseCount} {courseType}
+                    {courseCount === 1 ? '' : 's'}
                   </p>
                 </CardSubdata>
                 <CardImage>

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

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:

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

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<T>(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<ListItemType[]>([]);
@@ -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"
           >
             <RightArrowIcon width={18} height={18} />
@@ -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"
           >
             <RightArrowIcon width={18} height={18} />
@@ -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"
           >
             <LeftArrowIcon width={18} height={18} />
@@ -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"
           >
             <LeftArrowIcon width={18} height={18} />

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

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'