Fix CSS for Dashboard Management in Arabic (#538)

* Field containers are properly positioned when in Arabic
* Buttons on the Bottom Bar are properly positioned when in Arabic

Author: ashayp22

frontend/src/components/BottomBar/BottomBar.js

@@ -87,6 +87,11 @@ const BottomBar = ({
         const saveBtnClassName =
             selectedLang === LANGUAGES.AR ? 'save-button-ar' : 'save-button';
 
+        const discardBtnClassName =
+            selectedLang === LANGUAGES.AR
+                ? 'discard-button-ar'
+                : 'discard-button';
+
         return [
             <Button
                 key="bottom-bar-save"
@@ -97,7 +102,7 @@ const BottomBar = ({
             </Button>,
             <Button
                 key="bottom-bar-discard"
-                className="discard-button"
+                className={discardBtnClassName}
                 onClick={onDiscard}
             >
                 <b>{translations.components.button.discard.title}</b>
@@ -111,7 +116,13 @@ const BottomBar = ({
     const renderToolbarControls = () => {
         if (isEditing) {
             return (
-                <div>
+                <div
+                    className={
+                        selectedLang === LANGUAGES.AR && onAddField
+                            ? 'toolbar-editing-div-ar'
+                            : 'toolbar-editing-div'
+                    }
+                >
                     {renderStatusSelector()}
                     {renderDiscardAndSaveButtons()}
                 </div>
@@ -136,14 +147,20 @@ const BottomBar = ({
     const renderAddFieldButton = () => {
         let button = null;
 
+        let buttonClassName = 'add-field-button';
+
+        if (selectedLang !== LANGUAGES.AR) {
+            buttonClassName += ` ${
+                isEditing
+                    ? 'add-field-expanded-width'
+                    : 'add-field-retracted-width'
+            }`;
+        }
+
         if (isEditing && onAddField) {
             button = (
                 <Button
-                    className={`add-field-button ${
-                        isEditing
-                            ? 'add-field-expanded-width'
-                            : 'add-field-retracted-width'
-                    }`}
+                    className={buttonClassName}
                     onClick={() => onAddField(selectedStep)}
                 >
                     {translations.components.bottombar.addField}
@@ -154,6 +171,24 @@ const BottomBar = ({
         return <div className="add-field-div">{button}</div>;
     };
 
+    // The edit steps and discard button needs to remain in the same location on the screen,
+    // regardless of the language. This allows the user to keep the mouse in the same position when
+    // switching between the Editing-Not Editing state. In order to allow this, the order of the
+    // add field button and toolbar controls needs to flip below. This counters the flip in left-right
+    // orientation made to the entire website when the language switches to Arabic.
+    const controlToolbar =
+        selectedLang === LANGUAGES.AR && onAddField ? (
+            <>
+                {renderToolbarControls()}
+                {renderAddFieldButton()}
+            </>
+        ) : (
+            <>
+                {renderAddFieldButton()}
+                {renderToolbarControls()}
+            </>
+        );
+
     return (
         <AppBar
             className="bottom-bar-wrapper"
@@ -164,10 +199,7 @@ const BottomBar = ({
                 boxShadow: '0 0px 4px 2px rgba(0, 0, 0, 0.15)',
             }}
         >
-            <Toolbar className="bottom-toolbar">
-                {renderAddFieldButton()}
-                {renderToolbarControls()}
-            </Toolbar>
+            <Toolbar className="bottom-toolbar">{controlToolbar}</Toolbar>
         </AppBar>
     );
 };

frontend/src/components/BottomBar/BottomBar.scss

@@ -2,6 +2,13 @@
 @import '../../styles/variables.scss';
 
 .bottom-bar-wrapper {
+    // This calculates the width of the step management container, minus a couple of pixels.
+    // It is used for positioning the add field button when the user is editing and has the language
+    // set to Arabic.
+    .toolbar-editing-div-ar {
+        width: calc(100vw - $drawerWidth - 3 * $verticalMovementWidth - 190px);
+    }
+
     .add-field-retracted-width {
         margin-inline-start: $drawerWidth;
         margin-left: $drawerWidth;
@@ -85,6 +92,18 @@
         }
     }
 
+    .discard-button-ar {
+        background-color: white;
+        color: #5f5f5f;
+        font-size: 12px;
+        padding: 6px 24px 6px 24px;
+        transition: all 0.2s;
+        &:hover {
+            color: black;
+            background-color: white;
+        }
+    }
+
     .discard-button {
         background-color: white;
         color: #5f5f5f;

frontend/src/components/Sidebar/Sidebar.js

@@ -4,6 +4,7 @@ import { Button, Drawer, AppBar, Toolbar } from '@material-ui/core';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 
+import { LANGUAGES } from '../../utils/constants';
 import { useTranslations } from '../../hooks/useTranslations';
 
 const useStyles = makeStyles({
@@ -65,8 +66,14 @@ const Sidebar = ({
     };
 
     const getButtonClassname = (stepKey, isHidden) => {
-        if (selectedStep === stepKey) return 'selected';
-        return isHidden ? 'hidden' : 'unselected';
+        let buttonClassNameByLanguage =
+            selectedLang === LANGUAGES.AR ? 'main-button-ar' : 'main-button';
+        if (selectedStep === stepKey) {
+            buttonClassNameByLanguage += ' selected';
+        } else {
+            buttonClassNameByLanguage += isHidden ? ' hidden' : ' unselected';
+        }
+        return buttonClassNameByLanguage;
     };
 
     const generateButtons = () => {
@@ -84,7 +91,7 @@ const Sidebar = ({
             return (
                 <div className="sidebar-button-container">
                     <div
-                        className={`button main-button ${buttonClassName}`}
+                        className={`button ${buttonClassName}`}
                         onClick={() => onButtonClick(element.key)}
                     >
                         {element.displayName[selectedLang]}

frontend/src/components/Sidebar/Sidebar.scss

@@ -42,11 +42,20 @@
                 }
             }
 
-            .main-button {
+            .main-button,
+            .main-button-ar {
                 padding-left: 10px;
                 min-width: $drawerWidth;
             }
 
+            .main-button {
+                padding-left: 10px;
+            }
+
+            .main-button-ar {
+                padding-right: 10px;
+            }
+
             .order-button {
                 min-width: $verticalMovementWidth;
                 text-align: center;

frontend/src/components/StepManagementContent/StepManagementContent.js

@@ -4,7 +4,7 @@ import 'semantic-ui-css/semantic.min.css';
 import PropTypes from 'prop-types';
 
 import RadioButtonField from '../Fields/RadioButtonField';
-import { FIELD_TYPES } from '../../utils/constants';
+import { FIELD_TYPES, LANGUAGES } from '../../utils/constants';
 import { useTranslations } from '../../hooks/useTranslations';
 
 const StepManagementContent = ({
@@ -99,20 +99,32 @@ const StepManagementContent = ({
         );
     }
 
+    function getFieldClassName(field) {
+        let fieldClassName = field.isHidden
+            ? 'hidden-step-field-container'
+            : 'step-field-container';
+
+        // Handles case when the user has the language set to Arabic
+        if (selectedLang === LANGUAGES.AR) {
+            fieldClassName += ' ';
+            if (isEditing) {
+                fieldClassName += 'expanded-arabic-field-container';
+            } else {
+                fieldClassName += 'retracted-arabic-field-container';
+            }
+        }
+
+        return fieldClassName;
+    }
+
     function generateButtonInfo(fields, fieldRoot) {
         if (!fields) return null;
 
         return fields.map((field) => {
             if (field.isDeleted) return null; // don't render fields when they are marked as deleted
 
             return (
-                <div
-                    className={
-                        field.isHidden
-                            ? 'hidden-step-field-container'
-                            : 'step-field-container'
-                    }
-                >
+                <div className={getFieldClassName(field)}>
                     <div className="content">
                         <div className="info">
                             <div className="header">

frontend/src/components/StepManagementContent/StepManagementContent.scss

@@ -9,6 +9,14 @@
         font-weight: 700;
     }
 
+    .retracted-arabic-field-container {
+        margin-right: -$drawerWidth !important;
+    }
+
+    .expanded-arabic-field-container {
+        margin-right: -($drawerWidth + 3 * $verticalMovementWidth) !important;
+    }
+
     .step-field-container {
         background-color: #f6f6f6;
         border: #f6f6f6 solid 1px;