feat: improve ui on small screen

graasp · Dec 8, 2023 · d7414e8 · d7414e8
1 parent 96cbad2
commit d7414e8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 32 deletions.
diff --git a/src/components/common/settings/GraaspButton.tsx b/src/components/common/settings/GraaspButton.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 
-import { Button } from '@mui/material';
+import { Button, SxProps } from '@mui/material';
 
 import { FULL_WIDTH, GRAASP_VIOLET } from '../../../config/stylingConstants';
 
@@ -12,6 +12,7 @@ type Prop = {
   marginRight?: string;
   minHeight?: string;
   text: string;
+  sx?: SxProps;
 };
 
 const GraaspButton: FC<Prop> = ({
@@ -22,6 +23,7 @@ const GraaspButton: FC<Prop> = ({
   marginRight,
   minHeight,
   text,
+  sx,
 }) => (
   <Button
     data-cy={buttonDataCy}
@@ -31,6 +33,7 @@ const GraaspButton: FC<Prop> = ({
       minHeight,
       marginRight,
       ...(fullWidth && { width: FULL_WIDTH }),
+      ...sx,
     }}
     onClick={handleOnClick}
     disabled={disabled}

diff --git a/src/components/common/settings/KeyWords.tsx b/src/components/common/settings/KeyWords.tsx
@@ -4,6 +4,7 @@ import { toast } from 'react-toastify';
 import DeleteIcon from '@mui/icons-material/Delete';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
+  Alert,
   Box,
   IconButton,
   List,
@@ -161,11 +162,11 @@ const KeyWords: FC<Prop> = ({ textStudents, chatbotEnabled }) => {
           title={
             <>
               <Typography color="inherit">Keyword not in the text</Typography>
-              The keyword <b>{k.word}</b> is not in the saved version of the{' '}
-              <em>text students</em>.
+              The keyword &quot;{k.word}&quot; is not in the saved version of
+              the text students.
               <br />
               <br />
-              The keyword will <u>not be displayed</u> in the player.
+              The keyword will not be displayed in the player.
             </>
           }
         >
@@ -177,11 +178,20 @@ const KeyWords: FC<Prop> = ({ textStudents, chatbotEnabled }) => {
 
   return (
     <Box sx={{ margin: DEFAULT_MARGIN }}>
+      {chatbotEnabled && (
+        <Alert severity="info" sx={{ mb: 4 }}>
+          When the chatbot is enabled, all the definitions of keywords are
+          ignored. This is because the chatbot is displayed instead of the
+          definition.
+        </Alert>
+      )}
       <Box
         component="span"
-        justifyContent="space-around"
+        justifyContent="space-between"
         display="flex"
-        alignItems="center"
+        alignItems={{ xs: 'flex-start', sm: 'center' }}
+        flexDirection={{ xs: 'column', sm: 'row' }}
+        rowGap={2}
       >
         <TextField
           data-cy={ENTER_KEYWORD_FIELD_CY}
@@ -190,31 +200,23 @@ const KeyWords: FC<Prop> = ({ textStudents, chatbotEnabled }) => {
           value={keywordDef.keyword}
           onChange={(e) => updateKeywordDefinition('keyword', e.target)}
         />
-        <Tooltip
-          disableHoverListener={!chatbotEnabled}
-          disableFocusListener={!chatbotEnabled}
-          disableInteractive={!chatbotEnabled}
-          disableTouchListener={!chatbotEnabled}
-          title="The definition is disabled when the chatbot is enabled"
-          followCursor
-        >
-          <TextField
-            data-cy={ENTER_DEFINITION_FIELD_CY}
-            label="Enter the keyword's definition"
-            sx={{ width: FULL_WIDTH, marginRight: DEFAULT_MARGIN }}
-            value={keywordDef.definition}
-            onChange={(e) => updateKeywordDefinition('definition', e.target)}
-            disabled={chatbotEnabled}
-          />
-        </Tooltip>
-        <GraaspButton
-          buttonDataCy={ADD_KEYWORD_BUTTON_CY}
-          handleOnClick={handleClickAdd}
-          disabled={!keywordDef.keyword}
-          marginRight={DEFAULT_MARGIN}
-          minHeight="55px"
-          text="Add"
+        <TextField
+          data-cy={ENTER_DEFINITION_FIELD_CY}
+          label="Enter the keyword's definition"
+          sx={{ width: FULL_WIDTH, marginRight: DEFAULT_MARGIN }}
+          value={keywordDef.definition}
+          onChange={(e) => updateKeywordDefinition('definition', e.target)}
         />
+        <Box alignSelf={{ xs: 'flex-end', sm: 'auto' }}>
+          <GraaspButton
+            buttonDataCy={ADD_KEYWORD_BUTTON_CY}
+            handleOnClick={handleClickAdd}
+            disabled={!keywordDef.keyword}
+            sx={{ xs: { margin: '0px' }, sm: { margin: DEFAULT_MARGIN } }}
+            minHeight="55px"
+            text="Add"
+          />
+        </Box>
       </Box>
       <List>{keyWordsItems}</List>
     </Box>

diff --git a/src/components/common/settings/SetText.tsx b/src/components/common/settings/SetText.tsx
@@ -85,7 +85,7 @@ const SetText: FC<Prop> = ({
       component="span"
       justifyContent="space-around"
       display="flex"
-      alignItems="center"
+      alignItems="flex-end"
       sx={{ margin: DEFAULT_MARGIN }}
     >
       <TextField
@@ -101,7 +101,7 @@ const SetText: FC<Prop> = ({
       <GraaspButton
         buttonDataCy={buttonDataCy}
         handleOnClick={handleClickSaveText}
-        marginRight={DEFAULT_MARGIN}
+        sx={{ xs: { margin: '0px' }, sm: { margin: DEFAULT_MARGIN } }}
         minHeight="55px"
         disabled={
           (textResourceSetting?.data || DEFAULT_TEXT_RESOURCE_SETTING).text ===