Merge branch 'radiobutton-component' of https://github.com/bluewave-l…

…abs/bluewave-onboarding into radiobutton-component

frontend/package.json

@@ -4,11 +4,11 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.15.19",
     "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.18",
+    "@mui/material": "^5.16.5",
     "@mui/system": "^5.15.20",
     "@mui/x-data-grid": "^7.3.0",
     "@mui/x-date-pickers": "^7.3.1",
@@ -57,5 +57,4 @@
     "test:coverage": "vitest run --coverage",
     "start": "vite"
   }
-
 }

frontend/src/App.jsx

@@ -9,21 +9,38 @@ import SetNewPasswordPage from "./scenes/login/SetNewPassword";
 import Private from "./components/Private";
 import { useAuth } from "./services/authProvider";
 import ProgressStepsMain from "./scenes/progressSteps/ProgressStepsMain";
+import BannerPage from "./scenes/bannerPage/BannerPage";
+import BannerDefaultPage from "./scenes/bannerPage/BannerDefaultPage";
+import LinksDefaultPage from "./scenes/links/LinksDefaultPage";
+import ToursDefaultPage from "./scenes/tours/ToursDefaultPage";
+import PopupDefaultPage from "./scenes/popup/PopupDefaultPage";
+import HintDefaultPage from "./scenes/hints/HintDefaultPage";
+import CreatePopupPage from "./scenes/popup/CreatePopupPage";
 
 
 function App() {
-  const { isLoggedIn } = useAuth();
+  // const { isLoggedIn } = useAuth(); //commented out for testing
+  const isLoggedIn = true;
   return (
     <>
       <Routes>
-        <Route path="/" element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />} />   
+
+        {/* <Route path="/" element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />} />           commented out for testing */} 
         {/* <Route path="/home" element={<Private Component={Home} />} /> */}
+        <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />        
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
         <Route path="/reset-password" element={<PasswordResetPage />} />
         <Route path="/check-email" element={<CheckYourEmailPage />} />
         <Route path="/set-new-password" element={<SetNewPasswordPage />} />
         <Route path="/progress-steps" element={<ProgressStepsMain />} />
+        <Route path="/banner/create" element={<BannerPage />} />
+        <Route path="/popup/create" element={<CreatePopupPage />} />
+        <Route path="/banner" element={<BannerDefaultPage />} />
+        <Route path="/popup" element={<PopupDefaultPage />} />
+        <Route path="/link" element={<LinksDefaultPage />} />
+        <Route path="/tour" element={<ToursDefaultPage />} />
+        <Route path="/hint" element={<HintDefaultPage />} />
       </Routes>    
     </>
   );

frontend/src/components/BannerPageComponents/BannerLeftAppearance/BannerLeftApperance.jsx

@@ -0,0 +1,27 @@
+import { React } from 'react';
+import styles from './BannerLeftApperance.module.scss';
+import ColorTextField from '../../ColorTextField/ColorTextField';
+
+const BannerLeftAppearance = ({ backgroundColor, setBackgroundColor, fontColor, setFontColor }) => {
+
+    return (
+        <div className={styles.container}>
+            <h2>Background Color</h2>
+            <div className={styles.color}>
+                <ColorTextField
+                    value={backgroundColor}
+                    onChange={setBackgroundColor}
+                />
+            </div>
+            <h2>Font Color</h2>
+            <div className={styles.color}>
+                <ColorTextField
+                    value={fontColor}
+                    onChange={setFontColor}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default BannerLeftAppearance;

frontend/src/components/BannerPageComponents/BannerLeftAppearance/BannerLeftApperance.module.scss

@@ -0,0 +1,17 @@
+@use '../../../styles/globals.scss' as *;
+
+.container{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+    h2{
+        @include text-style(regular);
+        margin-top: 1.5rem;
+    }
+    .color{
+        display: flex;
+        align-items: center;
+    }
+
+}

frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx

@@ -0,0 +1,34 @@
+import { React } from 'react';
+import styles from './BannerLeftContent.module.scss';
+import DropdownList from '../../DropdownList/DropdownList';
+import { Radio } from "@mui/material";
+import CustomTextField from '../../TextFieldComponents/CustomTextField/CustomTextField';
+
+const BannerLeftContent = ({ setIsTopPosition, url, setUrl }) => {
+    const handleSetUrl = (event) => {
+        setUrl(event.target.value);
+      };
+
+    return (
+        <div className={styles.container}>
+            <h2>Action</h2>
+            <DropdownList actions={['No action', 'Open a URL', 'Open a URL in a new page']} />
+            <h2>Position</h2>
+            <div className={styles.radioContent}>
+                <Radio onClick={() => setIsTopPosition(true)} />
+                <h3>Top (centered)</h3>
+            </div>
+            <div className={styles.radioContent}>
+                <Radio onClick={() => setIsTopPosition(false)} />
+                <h3>Bottom (centered)</h3>
+            </div>
+            <h2 style={{ marginBottom: 0 }}>URL</h2>
+            <CustomTextField
+                TextFieldWidth='241px'
+                value={url}
+                onChange={handleSetUrl} />
+        </div>
+    );
+};
+
+export default BannerLeftContent;

frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss

@@ -0,0 +1,19 @@
+@use '../../../styles/globals.scss' as *;
+
+.container{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+    h2{
+        @include text-style(regular);
+        margin-top: 1.5rem;
+    }
+    h3{
+        @include text-style(regular);
+    }
+    .radioContent{
+        display: flex;
+    }
+
+}

frontend/src/components/BannerPageComponents/BannerPreview/BannerPreview.jsx

@@ -0,0 +1,43 @@
+import styles from './BannerPreview.module.scss'
+import { React } from 'react';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+
+const BannerPreview = ({ bannerText = '',
+    setBannerText = () => null,
+    backgroundColor = 'var(--light-purple-background)',
+    color = 'var(--main-text-color)',
+    isTopPosition = true }) => {
+
+    const handleChange = (event) => {
+        setBannerText(event.target.value);
+    };
+    const banner = (
+        <div className={styles.banner} style={{ backgroundColor: backgroundColor, color: color }}>
+            <span />
+            <input
+                type="text"
+                className={styles.bannertext}
+                placeholder="Change the Banner Text Here"
+                value={bannerText}
+                onChange={handleChange} 
+                style={{color: color}}
+            />            
+            <CloseOutlinedIcon style={{ color: color, fontSize: '20px' }} />
+        </div>
+    );
+
+    return (
+        <div className={styles.container}>
+            <h2>Preview</h2>
+            <div className={styles.preview}>
+                {isTopPosition && banner}
+                <div className={styles.bannerOne}></div>
+                <div className={styles.bannerTwo}></div>
+                <div className={styles.bannerThree}></div>
+                {!isTopPosition && banner}
+            </div>
+        </div>
+    );
+};
+
+export default BannerPreview;

frontend/src/components/BannerPageComponents/BannerPreview/BannerPreview.module.scss

@@ -0,0 +1,70 @@
+@use '../../../styles/globals.scss' as *;
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 1.5rem;
+    margin-left: 3rem;
+    margin-right: 3rem;
+    flex: 2;
+
+    .bannertext {
+        border: none;
+        background: transparent;
+        width: 100%;
+        text-align: center;
+    }
+
+    .bannertext:focus {
+        outline: none
+    }
+
+    .preview {
+        border-radius: 10px;
+        border: 1.23px solid var(--grey-border);
+        width: 100%;
+        padding: 1rem 1.5rem;
+    }
+
+    h2 {
+        @include text-style(regular);
+        margin-bottom: 0.7rem;
+        margin-top: 0;
+    }
+
+    .banner {
+        @include text-style(regular);
+        background-color: var(--light-purple-background);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.7rem;
+        border-radius: 5px;
+    }
+
+    .bannerOne,
+    .bannerTwo,
+    .bannerThree {
+        background-color: #F3F3F3;
+        border-radius: 5px;
+        margin-bottom: 1rem;
+
+    }
+
+    .bannerOne {
+        width: 40%;
+        height: 2rem;
+        margin-top: 1rem;
+    }
+
+    .bannerTwo {
+        width: 80%;
+        height: 5rem;
+    }
+
+    .bannerThree {
+        width: 80%;
+        height: 3rem;
+    }
+}

frontend/src/components/Button/Button.jsx

@@ -3,9 +3,8 @@ import PropTypes from "prop-types";
 import { Button as MuiButton } from "@mui/material";
 import "./ButtonStyles.css";
 
-const Button = ({ text='', onClick= () => {}, variant="contained", sx=null, disabled=false, buttonType='primary'}) => {
+const Button = ({ text='', onClick= () => {}, variant="contained", style=null, sx=null, disabled=false, buttonType='primary'}) => {
   const classname = 'button ' + buttonType;
-    console.log(classname)
     return (
     <MuiButton
       disableRipple
@@ -14,6 +13,7 @@ const Button = ({ text='', onClick= () => {}, variant="contained", sx=null, disa
       onClick={onClick}
       disabled={disabled}
       sx={sx}
+      style={style}
     >
       {text}
     </MuiButton>

frontend/src/components/ColorTextField/ColorTextField.jsx

@@ -0,0 +1,27 @@
+import { React } from 'react';
+import CustomTextField from '../TextFieldComponents/CustomTextField/CustomTextField';
+import CircleIcon from '@mui/icons-material/Circle';
+import PropTypes from 'prop-types';
+
+const ColorTextField = ({onChange  = () => null, value = null}) => {
+    const handleColor = (event) => {
+        let newText = event.target.value;
+        if (!newText.startsWith('#')) {
+            newText = '#' + newText;
+        }
+        onChange(newText);
+
+    }
+    return (
+        <>
+        <CustomTextField
+        TextFieldWidth="100%"
+        value={value}
+        onChange={handleColor}
+        />
+        <CircleIcon style={{ fontSize: '24px', color: value, marginLeft: '10px' }} />
+        </>
+    )
+}
+
+export default ColorTextField;

frontend/src/components/CreateActivityButton/CreateActivityButton.jsx

@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 import { activityData, ACTIVITY_TYPES } from "../../data/CreateActivityButtonData";
 
 
-const CreateActivityButton = ({ type= ACTIVITY_TYPES.HINTS, onClick }) => {
+const CreateActivityButton = ({ type = ACTIVITY_TYPES.HINTS, onClick }) => {
 
   const { heading, listItem, buttonText } = activityData[type];
 

frontend/src/components/CreateActivityButton/CreateActivityButtonStyles.css

@@ -4,7 +4,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
     flex-direction: column;
 }
 

frontend/src/components/CustomLabelTag/CustomLabelTag.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './CustomLabelTagStyles.css';
+
+const VALID_BACKGROUND_COLORS = ['orange', 'gray', 'purple', 'green', 'seen', 'waiting', 'new'];
+
+const CustomLabelTag = ({ 
+  text, 
+  backgroundColor = 'white', 
+  textColor = '', 
+  className = '' 
+}) => {
+  const labelClass = `label label-${backgroundColor} ${className}`;
+
+  const style = {
+    color: textColor,
+  };
+
+  return (
+    <span className={labelClass} style={style}>
+      {['seen', 'waiting', 'new'].includes(backgroundColor) && <span className="dot"></span>}
+      {text}
+    </span>
+  );
+};
+
+CustomLabelTag.propTypes = {
+  text: PropTypes.string.isRequired,
+  backgroundColor: PropTypes.oneOf(VALID_BACKGROUND_COLORS),
+  textColor: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default CustomLabelTag;