Skip to content

Commit 0821ce7

Browse files
uparkalauuparkalau
committed
Merge branch 'develop' into radiobutton-component
2 parents 0de4067 + e93a3fc commit 0821ce7

File tree

57 files changed

+1326
-26219
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+1326
-26219
lines changed

‎frontend/package-lock.json

Lines changed: 0 additions & 25962 deletions
This file was deleted.

‎frontend/package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
"private": true,
55
"type": "module",
66
"dependencies": {
7-
"@emotion/react": "^11.11.4",
8-
"@emotion/styled": "^11.11.5",
7+
"@emotion/react": "^11.13.0",
8+
"@emotion/styled": "^11.13.0",
99
"@mui/icons-material": "^5.15.19",
1010
"@mui/lab": "^5.0.0-alpha.170",
11-
"@mui/material": "^5.15.18",
11+
"@mui/material": "^5.16.5",
1212
"@mui/system": "^5.15.20",
1313
"@mui/x-data-grid": "^7.3.0",
1414
"@mui/x-date-pickers": "^7.3.1",
@@ -57,5 +57,4 @@
5757
"test:coverage": "vitest run --coverage",
5858
"start": "vite"
5959
}
60-
6160
}

‎frontend/src/App.jsx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,38 @@ import SetNewPasswordPage from "./scenes/login/SetNewPassword";
99
import Private from "./components/Private";
1010
import { useAuth } from "./services/authProvider";
1111
import ProgressStepsMain from "./scenes/progressSteps/ProgressStepsMain";
12+
import BannerPage from "./scenes/bannerPage/BannerPage";
13+
import BannerDefaultPage from "./scenes/bannerPage/BannerDefaultPage";
14+
import LinksDefaultPage from "./scenes/links/LinksDefaultPage";
15+
import ToursDefaultPage from "./scenes/tours/ToursDefaultPage";
16+
import PopupDefaultPage from "./scenes/popup/PopupDefaultPage";
17+
import HintDefaultPage from "./scenes/hints/HintDefaultPage";
18+
import CreatePopupPage from "./scenes/popup/CreatePopupPage";
1219

1320

1421
function App() {
15-
const { isLoggedIn } = useAuth();
22+
// const { isLoggedIn } = useAuth(); //commented out for testing
23+
const isLoggedIn = true;
1624
return (
1725
<>
1826
<Routes>
19-
<Route path="/" element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />} />
27+
28+
{/* <Route path="/" element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />} /> commented out for testing */}
2029
{/* <Route path="/home" element={<Private Component={Home} />} /> */}
30+
<Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />
2131
<Route path="/signup" element={<CreateAccountPage />} />
2232
<Route path="/forgot-password" element={<ForgotPasswordPage />} />
2333
<Route path="/reset-password" element={<PasswordResetPage />} />
2434
<Route path="/check-email" element={<CheckYourEmailPage />} />
2535
<Route path="/set-new-password" element={<SetNewPasswordPage />} />
2636
<Route path="/progress-steps" element={<ProgressStepsMain />} />
37+
<Route path="/banner/create" element={<BannerPage />} />
38+
<Route path="/popup/create" element={<CreatePopupPage />} />
39+
<Route path="/banner" element={<BannerDefaultPage />} />
40+
<Route path="/popup" element={<PopupDefaultPage />} />
41+
<Route path="/link" element={<LinksDefaultPage />} />
42+
<Route path="/tour" element={<ToursDefaultPage />} />
43+
<Route path="/hint" element={<HintDefaultPage />} />
2744
</Routes>
2845
</>
2946
);

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { React } from 'react';
2+
import styles from './BannerLeftApperance.module.scss';
3+
import ColorTextField from '../../ColorTextField/ColorTextField';
4+
5+
const BannerLeftAppearance = ({ backgroundColor, setBackgroundColor, fontColor, setFontColor }) => {
6+
7+
return (
8+
<div className={styles.container}>
9+
<h2>Background Color</h2>
10+
<div className={styles.color}>
11+
<ColorTextField
12+
value={backgroundColor}
13+
onChange={setBackgroundColor}
14+
/>
15+
</div>
16+
<h2>Font Color</h2>
17+
<div className={styles.color}>
18+
<ColorTextField
19+
value={fontColor}
20+
onChange={setFontColor}
21+
/>
22+
</div>
23+
</div>
24+
);
25+
};
26+
27+
export default BannerLeftAppearance;

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@use '../../../styles/globals.scss' as *;
2+
3+
.container{
4+
display: flex;
5+
flex-direction: column;
6+
align-items: flex-start;
7+
flex: 1;
8+
h2{
9+
@include text-style(regular);
10+
margin-top: 1.5rem;
11+
}
12+
.color{
13+
display: flex;
14+
align-items: center;
15+
}
16+
17+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { React } from 'react';
2+
import styles from './BannerLeftContent.module.scss';
3+
import DropdownList from '../../DropdownList/DropdownList';
4+
import { Radio } from "@mui/material";
5+
import CustomTextField from '../../TextFieldComponents/CustomTextField/CustomTextField';
6+
7+
const BannerLeftContent = ({ setIsTopPosition, url, setUrl }) => {
8+
const handleSetUrl = (event) => {
9+
setUrl(event.target.value);
10+
};
11+
12+
return (
13+
<div className={styles.container}>
14+
<h2>Action</h2>
15+
<DropdownList actions={['No action', 'Open a URL', 'Open a URL in a new page']} />
16+
<h2>Position</h2>
17+
<div className={styles.radioContent}>
18+
<Radio onClick={() => setIsTopPosition(true)} />
19+
<h3>Top (centered)</h3>
20+
</div>
21+
<div className={styles.radioContent}>
22+
<Radio onClick={() => setIsTopPosition(false)} />
23+
<h3>Bottom (centered)</h3>
24+
</div>
25+
<h2 style={{ marginBottom: 0 }}>URL</h2>
26+
<CustomTextField
27+
TextFieldWidth='241px'
28+
value={url}
29+
onChange={handleSetUrl} />
30+
</div>
31+
);
32+
};
33+
34+
export default BannerLeftContent;

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@use '../../../styles/globals.scss' as *;
2+
3+
.container{
4+
display: flex;
5+
flex-direction: column;
6+
align-items: flex-start;
7+
flex: 1;
8+
h2{
9+
@include text-style(regular);
10+
margin-top: 1.5rem;
11+
}
12+
h3{
13+
@include text-style(regular);
14+
}
15+
.radioContent{
16+
display: flex;
17+
}
18+
19+
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import styles from './BannerPreview.module.scss'
2+
import { React } from 'react';
3+
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
4+
5+
const BannerPreview = ({ bannerText = '',
6+
setBannerText = () => null,
7+
backgroundColor = 'var(--light-purple-background)',
8+
color = 'var(--main-text-color)',
9+
isTopPosition = true }) => {
10+
11+
const handleChange = (event) => {
12+
setBannerText(event.target.value);
13+
};
14+
const banner = (
15+
<div className={styles.banner} style={{ backgroundColor: backgroundColor, color: color }}>
16+
<span />
17+
<input
18+
type="text"
19+
className={styles.bannertext}
20+
placeholder="Change the Banner Text Here"
21+
value={bannerText}
22+
onChange={handleChange}
23+
style={{color: color}}
24+
/>
25+
<CloseOutlinedIcon style={{ color: color, fontSize: '20px' }} />
26+
</div>
27+
);
28+
29+
return (
30+
<div className={styles.container}>
31+
<h2>Preview</h2>
32+
<div className={styles.preview}>
33+
{isTopPosition && banner}
34+
<div className={styles.bannerOne}></div>
35+
<div className={styles.bannerTwo}></div>
36+
<div className={styles.bannerThree}></div>
37+
{!isTopPosition && banner}
38+
</div>
39+
</div>
40+
);
41+
};
42+
43+
export default BannerPreview;

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@use '../../../styles/globals.scss' as *;
2+
3+
.container {
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
margin-top: 1.5rem;
8+
margin-left: 3rem;
9+
margin-right: 3rem;
10+
flex: 2;
11+
12+
.bannertext {
13+
border: none;
14+
background: transparent;
15+
width: 100%;
16+
text-align: center;
17+
}
18+
19+
.bannertext:focus {
20+
outline: none
21+
}
22+
23+
.preview {
24+
border-radius: 10px;
25+
border: 1.23px solid var(--grey-border);
26+
width: 100%;
27+
padding: 1rem 1.5rem;
28+
}
29+
30+
h2 {
31+
@include text-style(regular);
32+
margin-bottom: 0.7rem;
33+
margin-top: 0;
34+
}
35+
36+
.banner {
37+
@include text-style(regular);
38+
background-color: var(--light-purple-background);
39+
display: flex;
40+
align-items: center;
41+
justify-content: space-between;
42+
padding: 0.7rem;
43+
border-radius: 5px;
44+
}
45+
46+
.bannerOne,
47+
.bannerTwo,
48+
.bannerThree {
49+
background-color: #F3F3F3;
50+
border-radius: 5px;
51+
margin-bottom: 1rem;
52+
53+
}
54+
55+
.bannerOne {
56+
width: 40%;
57+
height: 2rem;
58+
margin-top: 1rem;
59+
}
60+
61+
.bannerTwo {
62+
width: 80%;
63+
height: 5rem;
64+
}
65+
66+
.bannerThree {
67+
width: 80%;
68+
height: 3rem;
69+
}
70+
}

‎frontend/src/components/Button/Button.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import PropTypes from "prop-types";
33
import { Button as MuiButton } from "@mui/material";
44
import "./ButtonStyles.css";
55

6-
const Button = ({ text='', onClick= () => {}, variant="contained", sx=null, disabled=false, buttonType='primary'}) => {
6+
const Button = ({ text='', onClick= () => {}, variant="contained", style=null, sx=null, disabled=false, buttonType='primary'}) => {
77
const classname = 'button ' + buttonType;
8-
console.log(classname)
98
return (
109
<MuiButton
1110
disableRipple
@@ -14,6 +13,7 @@ const Button = ({ text='', onClick= () => {}, variant="contained", sx=null, disa
1413
onClick={onClick}
1514
disabled={disabled}
1615
sx={sx}
16+
style={style}
1717
>
1818
{text}
1919
</MuiButton>

‎frontend/src/components/ColorTextField/ColorTextField.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { React } from 'react';
2+
import CustomTextField from '../TextFieldComponents/CustomTextField/CustomTextField';
3+
import CircleIcon from '@mui/icons-material/Circle';
4+
import PropTypes from 'prop-types';
5+
6+
const ColorTextField = ({onChange = () => null, value = null}) => {
7+
const handleColor = (event) => {
8+
let newText = event.target.value;
9+
if (!newText.startsWith('#')) {
10+
newText = '#' + newText;
11+
}
12+
onChange(newText);
13+
14+
}
15+
return (
16+
<>
17+
<CustomTextField
18+
TextFieldWidth="100%"
19+
value={value}
20+
onChange={handleColor}
21+
/>
22+
<CircleIcon style={{ fontSize: '24px', color: value, marginLeft: '10px' }} />
23+
</>
24+
)
25+
}
26+
27+
export default ColorTextField;

‎frontend/src/components/CreateActivityButton/CreateActivityButton.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
66
import { activityData, ACTIVITY_TYPES } from "../../data/CreateActivityButtonData";
77

88

9-
const CreateActivityButton = ({ type= ACTIVITY_TYPES.HINTS, onClick }) => {
9+
const CreateActivityButton = ({ type = ACTIVITY_TYPES.HINTS, onClick }) => {
1010

1111
const { heading, listItem, buttonText } = activityData[type];
1212

‎frontend/src/components/CreateActivityButton/CreateActivityButtonStyles.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
display: flex;
55
justify-content: center;
66
align-items: center;
7-
height: 100vh;
87
flex-direction: column;
98
}
109

‎frontend/src/components/CustomLabelTag/CustomLabelTag.jsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import './CustomLabelTagStyles.css';
4+
5+
const VALID_BACKGROUND_COLORS = ['orange', 'gray', 'purple', 'green', 'seen', 'waiting', 'new'];
6+
7+
const CustomLabelTag = ({
8+
text,
9+
backgroundColor = 'white',
10+
textColor = '',
11+
className = ''
12+
}) => {
13+
const labelClass = `label label-${backgroundColor} ${className}`;
14+
15+
const style = {
16+
color: textColor,
17+
};
18+
19+
return (
20+
<span className={labelClass} style={style}>
21+
{['seen', 'waiting', 'new'].includes(backgroundColor) && <span className="dot"></span>}
22+
{text}
23+
</span>
24+
);
25+
};
26+
27+
CustomLabelTag.propTypes = {
28+
text: PropTypes.string.isRequired,
29+
backgroundColor: PropTypes.oneOf(VALID_BACKGROUND_COLORS),
30+
textColor: PropTypes.string,
31+
className: PropTypes.string,
32+
};
33+
34+
export default CustomLabelTag;

0 commit comments

Comments
 (0)