From df9c52bab684a3f25198fd5ad0ec26744cd6c08a Mon Sep 17 00:00:00 2001
From: Kadir Kenan Topal <81827312+KenanTopal@users.noreply.github.com>
Date: Sun, 2 Jun 2024 17:35:05 -0400
Subject: [PATCH 01/13] Check Icons done

---
 frontend/src/App.jsx                          |  4 +-
 frontend/src/Styles.js                        | 29 ++++++++++++
 .../src/components/CheckIcon/CheckIcon.jsx    | 32 +++++++++++++
 .../components/CheckIcon/CheckIcon.stories.js | 47 +++++++++++++++++++
 4 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/Styles.js
 create mode 100644 frontend/src/components/CheckIcon/CheckIcon.jsx
 create mode 100644 frontend/src/components/CheckIcon/CheckIcon.stories.js

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index afa9e446..eb83ba18 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -7,7 +7,6 @@ import ForgotPasswordPage from "./scenes/login/ForgotPasswordPage";
 import CheckYourEmailPage from "./scenes/login/CheckYourEmailPage";
 import SetNewPasswordPage from "./scenes/login/SetNewPassword";
 import Switch from "./components/Switch/Switch";
-import Checkbox from "./components/CheckBox/CheckBox";
 import CheckIcon from "./components/CheckIcons/CheckIcons";
 import MUIRadio from "./components/Radio/RadioButton";
 
@@ -23,8 +22,7 @@ function App() {
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
         <Route path="/reset-password" element={<PasswordResetPage />} />
-        <Route path="checkicon" element={<CheckIcon/>}/>
-        <Route path="/checkbox" element={<MUIRadio/>}/>
+        <Route path="/checkicon" element={<CheckIcon/>} />
       </Routes>    
     </>
   );
diff --git a/frontend/src/Styles.js b/frontend/src/Styles.js
new file mode 100644
index 00000000..ca4df3a5
--- /dev/null
+++ b/frontend/src/Styles.js
@@ -0,0 +1,29 @@
+export const colors = {
+    purple: '#7F56D9',
+    darkGrey: '#344054',
+    grey: '#5D6B98',
+    lightGrey: '#B9C0D4',
+    green: '#079455'
+};
+
+export const fonts = {
+    fontFamily: "Inter, sans-serif",
+    bold: {
+        size: '16px',
+        lineHeight: '24px',
+        color: colors.darkGrey,
+        fontWeight: 500
+    },
+    default: {
+        size: '13px',
+        lineHeight: '13px',
+        color: colors.darkGrey,
+        fontWeight: 400
+    },
+    informative: {
+        size: '11px',
+        lineHeight: '11px',
+        color: colors.darkGrey,
+        fontWeight: 400
+    }
+};
\ No newline at end of file
diff --git a/frontend/src/components/CheckIcon/CheckIcon.jsx b/frontend/src/components/CheckIcon/CheckIcon.jsx
new file mode 100644
index 00000000..9e2f1c8a
--- /dev/null
+++ b/frontend/src/components/CheckIcon/CheckIcon.jsx
@@ -0,0 +1,32 @@
+import { ThemeProvider, createTheme } from "@mui/material";
+import { PropTypes } from "@mui/material";
+import { colors } from "../../Styles";
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+
+export default function CheckIcon({size, type, color}){
+    const theme = createTheme({
+        palette:{
+            purple: colors.purple,
+            black: colors.black,
+            green: colors.green
+        }
+    });
+    
+    const checkIconStyle = {...{
+        width: size == "small" ? 20 : size == "medium" ? 24 : 28,
+        height: size == "small" ? 20 : size == "medium" ? 24 : 28,
+        color: color == "purple" ? "purple" : color == "black" ? "black" : "green"
+    }, ...style,
+
+    }
+
+    return(
+        <ThemeProvider theme={theme}>
+            {(type == 'outline')?
+                <CheckCircleOutlineIcon sx={checkIconStyle} /> :
+                <CheckCircleIcon sx={checkIconStyle}/>
+            }
+        </ThemeProvider>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/CheckIcon/CheckIcon.stories.js b/frontend/src/components/CheckIcon/CheckIcon.stories.js
new file mode 100644
index 00000000..1d75cef5
--- /dev/null
+++ b/frontend/src/components/CheckIcon/CheckIcon.stories.js
@@ -0,0 +1,47 @@
+export const PurpleOutline = {
+    args: {
+        type: 'outline',
+        size: 'medium',
+        color: 'purple'
+    }
+};
+
+export const BlackOutline = {
+    args: {
+        type: 'outline',
+        size: 'medium',
+        color: 'black'
+    }
+};
+
+export const GreenOutline = {
+    args: {
+        type: 'outline',
+        size: 'medium',
+        color: 'green'
+    }
+};
+
+export const PurpleSolid = {
+    args: {
+        type: 'solid',
+        size: 'medium',
+        color: 'purple'
+    }
+};
+
+export const BlackSolid = {
+    args: {
+        type: 'solid',
+        size: 'medium',
+        color: 'black'
+    }
+};
+
+export const GreenSolid = {
+    args: {
+        type: 'solid',
+        size: 'medium',
+        color: 'green'
+    }
+};
\ No newline at end of file

From 0aa1edb42c52500c364a6d0e6ddbd7bbecb2cbc3 Mon Sep 17 00:00:00 2001
From: Kadir Kenan Topal <81827312+KenanTopal@users.noreply.github.com>
Date: Mon, 1 Jul 2024 14:32:42 -0400
Subject: [PATCH 02/13] radio button component implementation

---
 frontend/package-lock.json                    |  9 ++-
 frontend/src/App.jsx                          |  8 +-
 .../components/RadioButton/RadioButton.jsx    | 79 +++++++++----------
 .../RadioButton/RadioButtonStyles.css         |  4 +-
 frontend/src/scenes/dashboard/Dashboard.jsx   |  5 +-
 5 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 013b38a5..26b81b98 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -34363,7 +34363,14 @@
       }
     },
     "node_modules/watchpack/chokidar2": {
-      "optional": true
+      "version": "2.0.0",
+      "optional": true,
+      "dependencies": {
+        "chokidar": "^2.1.8"
+      },
+      "engines": {
+        "node": "<8.10.0"
+      }
     },
     "node_modules/wbuf": {
       "version": "1.7.3",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 2f0d257d..e374169e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -6,9 +6,7 @@ import PasswordResetPage from "./scenes/login/PassswordResetPage";
 import ForgotPasswordPage from "./scenes/login/ForgotPasswordPage";
 import CheckYourEmailPage from "./scenes/login/CheckYourEmailPage";
 import SetNewPasswordPage from "./scenes/login/SetNewPassword";
-import Switch from "./components/Switch/Switch";
-import CheckIcon from "./components/CheckIcons/CheckIcons";
-import MUIRadio from "./components/Radio/RadioButton";
+
 
 
 
@@ -23,13 +21,9 @@ function App() {
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
         <Route path="/reset-password" element={<PasswordResetPage />} />
-<<<<<<< HEAD
-        <Route path="/checkicon" element={<CheckIcon/>} />
-=======
         <Route path="/check-email" element={<CheckYourEmailPage />} />
         <Route path="/set-new-password" element={<SetNewPasswordPage />} />
         
->>>>>>> ba56d237ca64ab1846e6ab88a1ebf8d28a35e6f3
       </Routes>    
     </>
   );
diff --git a/frontend/src/components/RadioButton/RadioButton.jsx b/frontend/src/components/RadioButton/RadioButton.jsx
index 1f9285bc..79145a02 100644
--- a/frontend/src/components/RadioButton/RadioButton.jsx
+++ b/frontend/src/components/RadioButton/RadioButton.jsx
@@ -1,45 +1,44 @@
 import React from "react";
 import './RadioButtonStyles.css';
-import PropTypes from "prop-types"
-
-
-export default function RadioBox({ type, size, style, enabled, text, changeHandler }) {
-    const [selectedValue, setSelectedValue] = useState(!enabled)
-
-
+import PropTypes from "prop-types";
+import { Radio } from "@mui/material";
+
+const RadioButton = ({
+    id,
+    name,
+    value,
+    label,
+    onChange,
+    buttonSize = 'small',
+    color = 'default',
+    enabled = true,
+}) => {
+    const main_purple = 'var(--main-purple)';
+    const sizeClass = buttonSize ==='large' ? 'radio-large' : 'radio-small';
     return (
-    <>
-        <input
-            type={type}
-            size={size}
-            style={style}
-            disabled={!enabled}
-            onChange={changeHandler}
-        />
-        <label>{text}</label>
-    </>
-
-
-    )
-}
-
-
-
-RadioBox.propTypes = {
-    type: PropTypes.string.isRequired,
-    size: PropTypes.string.isRequired,
-    style: PropTypes.object,
-    enabled: PropTypes.bool,
+        <div className={`radio-button ${sizeClass}`}>
+            <Radio                
+                id={id}                
+                name = {name}
+                value={value}            
+                disabled={!enabled}
+                onChange={onChange}
+                size={buttonSize === 'large' ? 'large' : 'small'}
+                style={{ color: color === 'default' ? main_purple : color }}
+            />
+            { label && <label htmlFor={id}>{label}</label> }
+        </div >
+    );
+};
+
+RadioButton.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-    changeHandler: PropTypes.func
-}
-
+    enabled: PropTypes.bool,
+    onchange: PropTypes.func,
+    color: PropTypes.string,
+};
 
-RadioBox.defaultProps = {
-    type: 'radio',
-    size: 'small',
-    style: {},
-    enabled: true,
-    text: "aaaaaa"
-}
\ No newline at end of file
+export default RadioButton;
\ No newline at end of file
diff --git a/frontend/src/components/RadioButton/RadioButtonStyles.css b/frontend/src/components/RadioButton/RadioButtonStyles.css
index 56ad5568..59173ca0 100644
--- a/frontend/src/components/RadioButton/RadioButtonStyles.css
+++ b/frontend/src/components/RadioButton/RadioButtonStyles.css
@@ -7,13 +7,13 @@ input:active{
     outline: 5px solid #9E77ED3D;
     border-radius: 5px;
 }
-.small {
+.radio-small {
     width: 16px;
     height: 16px;
     border-radius: 4px;
 }
 
-.large {
+.radio-large {
     width: 20px;
     height: 20px;
     border-radius: 6px;
diff --git a/frontend/src/scenes/dashboard/Dashboard.jsx b/frontend/src/scenes/dashboard/Dashboard.jsx
index 991ec9d7..374e03aa 100644
--- a/frontend/src/scenes/dashboard/Dashboard.jsx
+++ b/frontend/src/scenes/dashboard/Dashboard.jsx
@@ -4,6 +4,8 @@ import UserTitle from '../../components/HomePageComponents/UserTitle/UserTitle';
 import styles from "./Dashboard.module.scss";
 import StatisticCardList from '../../components/HomePageComponents/StatisticCardsList/StatisticCardsList';
 import CreateActivityButtonList from '../../components/HomePageComponents/CreateActivityButtonList/CreateActivityButtonList';
+import RadioButton from '../../components/RadioButton/RadioButton';
+
 
 const Dashboard = ({ username }) => {
   const metrics = [
@@ -29,9 +31,8 @@ const Dashboard = ({ username }) => {
         <div className={styles.text}>
           Start with a popular onboarding process
         </div>
-        <CreateActivityButtonList buttons={buttons} />
         <StatisticCardList metrics={metrics} />
-        
+        <RadioButton id="testid" name='radio1' value='1' label = 'test label' buttonSize="small"/>
       </div>
     </>
   );

From 9690044ab4085d21887a1e94de1ab5cce2fff55d Mon Sep 17 00:00:00 2001
From: Kadir Kenan Topal <81827312+KenanTopal@users.noreply.github.com>
Date: Fri, 12 Jul 2024 11:57:37 -0400
Subject: [PATCH 03/13] Update Dashboard.jsx

---
 frontend/src/scenes/dashboard/Dashboard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/scenes/dashboard/Dashboard.jsx b/frontend/src/scenes/dashboard/Dashboard.jsx
index 374e03aa..5b543264 100644
--- a/frontend/src/scenes/dashboard/Dashboard.jsx
+++ b/frontend/src/scenes/dashboard/Dashboard.jsx
@@ -32,7 +32,7 @@ const Dashboard = ({ username }) => {
           Start with a popular onboarding process
         </div>
         <StatisticCardList metrics={metrics} />
-        <RadioButton id="testid" name='radio1' value='1' label = 'test label' buttonSize="small"/>
+        
       </div>
     </>
   );

From d30ee247307bd3e3441fe440fe7cd355bf5ab3f1 Mon Sep 17 00:00:00 2001
From: Kadir Kenan Topal <81827312+KenanTopal@users.noreply.github.com>
Date: Fri, 12 Jul 2024 14:40:22 -0400
Subject: [PATCH 04/13] implemented requested changes

---
 .../src/components/CheckIcon/CheckIcon.jsx    | 25 ++++++++--------
 .../components/CheckIcon/CheckIcon.stories.js | 29 +++++++++++--------
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/CheckIcon/CheckIcon.jsx b/frontend/src/components/CheckIcon/CheckIcon.jsx
index 9e2f1c8a..ec4c28fd 100644
--- a/frontend/src/components/CheckIcon/CheckIcon.jsx
+++ b/frontend/src/components/CheckIcon/CheckIcon.jsx
@@ -4,28 +4,29 @@ import { colors } from "../../Styles";
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 
-export default function CheckIcon({size, type, color}){
+export default function CheckIcon({ size, type, color }) {
     const theme = createTheme({
-        palette:{
+        palette: {
             purple: colors.purple,
             black: colors.black,
             green: colors.green
         }
     });
-    
-    const checkIconStyle = {...{
-        width: size == "small" ? 20 : size == "medium" ? 24 : 28,
-        height: size == "small" ? 20 : size == "medium" ? 24 : 28,
-        color: color == "purple" ? "purple" : color == "black" ? "black" : "green"
-    }, ...style,
 
-    }
+    const iconSize = size === "small" ? 20 : size === "medium" ? 24 : 28;
 
-    return(
+    const checkIconStyle = {
+        width: iconSize,
+        height: iconSize,
+        color: color === "purple" || color === "black" ? color : "green",
+        ...style
+    };
+
+    return (
         <ThemeProvider theme={theme}>
-            {(type == 'outline')?
+            {(type == 'outline') ?
                 <CheckCircleOutlineIcon sx={checkIconStyle} /> :
-                <CheckCircleIcon sx={checkIconStyle}/>
+                <CheckCircleIcon sx={checkIconStyle} />
             }
         </ThemeProvider>
     )
diff --git a/frontend/src/components/CheckIcon/CheckIcon.stories.js b/frontend/src/components/CheckIcon/CheckIcon.stories.js
index 1d75cef5..873b258d 100644
--- a/frontend/src/components/CheckIcon/CheckIcon.stories.js
+++ b/frontend/src/components/CheckIcon/CheckIcon.stories.js
@@ -1,47 +1,52 @@
+const commonOutlinedProps = {
+    type: 'outline',
+    size: 'medium'
+};
+
+const commonSolidProps = {
+    type: 'solid',
+    size: 'medium'
+}
+
+
 export const PurpleOutline = {
     args: {
-        type: 'outline',
-        size: 'medium',
+        ...commonOutlinedProps,
         color: 'purple'
     }
 };
 
 export const BlackOutline = {
     args: {
-        type: 'outline',
-        size: 'medium',
+        ...commonOutlinedProps,
         color: 'black'
     }
 };
 
 export const GreenOutline = {
     args: {
-        type: 'outline',
-        size: 'medium',
+        ...commonOutlinedProps,
         color: 'green'
     }
 };
 
 export const PurpleSolid = {
     args: {
-        type: 'solid',
-        size: 'medium',
+        ...commonSolidProps,
         color: 'purple'
     }
 };
 
 export const BlackSolid = {
     args: {
-        type: 'solid',
-        size: 'medium',
+        ...commonSolidProps,
         color: 'black'
     }
 };
 
 export const GreenSolid = {
     args: {
-        type: 'solid',
-        size: 'medium',
+        ...commonSolidProps,
         color: 'green'
     }
 };
\ No newline at end of file

From 1032be48f3bc37d91546418e56773918104d80f2 Mon Sep 17 00:00:00 2001
From: SimerdeepSinghGrewal <grewal_smart@yahoo.com>
Date: Wed, 14 Aug 2024 16:10:32 -0600
Subject: [PATCH 05/13] RadioButton: update code

---
 .../components/RadioButton/RadioButton.jsx    | 32 ++++++++++---------
 .../RadioButton/RadioButtonStyles.css         | 31 ++++++++++++++----
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/RadioButton/RadioButton.jsx b/frontend/src/components/RadioButton/RadioButton.jsx
index 79145a02..ac2cbb3a 100644
--- a/frontend/src/components/RadioButton/RadioButton.jsx
+++ b/frontend/src/components/RadioButton/RadioButton.jsx
@@ -1,7 +1,7 @@
 import React from "react";
-import './RadioButtonStyles.css';
 import PropTypes from "prop-types";
 import { Radio } from "@mui/material";
+import './RadioButtonStyles.css';
 
 const RadioButton = ({
     id,
@@ -10,35 +10,37 @@ const RadioButton = ({
     label,
     onChange,
     buttonSize = 'small',
-    color = 'default',
+    color = 'var(--main-purple)',
+    checked = false,
     enabled = true,
 }) => {
-    const main_purple = 'var(--main-purple)';
-    const sizeClass = buttonSize ==='large' ? 'radio-large' : 'radio-small';
+    const sizeClass = buttonSize === 'large' ? 'radio-large' : 'radio-small';
     return (
-        <div className={`radio-button ${sizeClass}`}>
+        <div className={`radio-button ${sizeClass}`} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <Radio                
                 id={id}                
-                name = {name}
+                name={name}
                 value={value}            
                 disabled={!enabled}
                 onChange={onChange}
                 size={buttonSize === 'large' ? 'large' : 'small'}
-                style={{ color: color === 'default' ? main_purple : color }}
+                style={{ color: color }}
+                checked={checked}
             />
-            { label && <label htmlFor={id}>{label}</label> }
-        </div >
+            {label && <label htmlFor={id} style={{ cursor: 'pointer' }}>{label}</label>}
+        </div>
     );
 };
 
 RadioButton.propTypes = {
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
+    id: PropTypes.string,
+    name: PropTypes.string,
+    value: PropTypes.string,
+    label: PropTypes.string,
     enabled: PropTypes.bool,
-    onchange: PropTypes.func,
+    onChange: PropTypes.func,
     color: PropTypes.string,
+    checked: PropTypes.bool,
 };
 
-export default RadioButton;
\ No newline at end of file
+export default RadioButton;
diff --git a/frontend/src/components/RadioButton/RadioButtonStyles.css b/frontend/src/components/RadioButton/RadioButtonStyles.css
index 59173ca0..48792c59 100644
--- a/frontend/src/components/RadioButton/RadioButtonStyles.css
+++ b/frontend/src/components/RadioButton/RadioButtonStyles.css
@@ -1,12 +1,18 @@
-input{
-    accent-color: #7F56D9;
+.radio-button {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 }
 
-input:active{
-    accent-color: #7F56D9;
-    outline: 5px solid #9E77ED3D;
+input {
+    accent-color: var(--main-purple);
+}
+
+input:active {
+    outline: 5px solid var(--light-border-color);
     border-radius: 5px;
 }
+
 .radio-small {
     width: 16px;
     height: 16px;
@@ -17,4 +23,17 @@ input:active{
     width: 20px;
     height: 20px;
     border-radius: 6px;
-}
\ No newline at end of file
+}
+
+.radio-primary input {
+    accent-color: var(--main-purple);
+}
+
+.radio-secondary input {
+    accent-color: var(--light-gray);
+}
+
+label {
+    color: var(--main-text-color);
+    margin-left: 8px;
+}

From e6093e4e9b679e7d1619573f4f9f7fb032f2d17c Mon Sep 17 00:00:00 2001
From: erenfn <81182796+erenfn@users.noreply.github.com>
Date: Tue, 20 Aug 2024 13:14:50 +0300
Subject: [PATCH 06/13] Delete frontend/src/Styles.js

---
 frontend/src/Styles.js | 29 -----------------------------
 1 file changed, 29 deletions(-)
 delete mode 100644 frontend/src/Styles.js

diff --git a/frontend/src/Styles.js b/frontend/src/Styles.js
deleted file mode 100644
index ca4df3a5..00000000
--- a/frontend/src/Styles.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export const colors = {
-    purple: '#7F56D9',
-    darkGrey: '#344054',
-    grey: '#5D6B98',
-    lightGrey: '#B9C0D4',
-    green: '#079455'
-};
-
-export const fonts = {
-    fontFamily: "Inter, sans-serif",
-    bold: {
-        size: '16px',
-        lineHeight: '24px',
-        color: colors.darkGrey,
-        fontWeight: 500
-    },
-    default: {
-        size: '13px',
-        lineHeight: '13px',
-        color: colors.darkGrey,
-        fontWeight: 400
-    },
-    informative: {
-        size: '11px',
-        lineHeight: '11px',
-        color: colors.darkGrey,
-        fontWeight: 400
-    }
-};
\ No newline at end of file

From 05cc82517a1933d085552d63b9540abdfa951a0b Mon Sep 17 00:00:00 2001
From: erenfn <81182796+erenfn@users.noreply.github.com>
Date: Tue, 20 Aug 2024 13:15:03 +0300
Subject: [PATCH 07/13] Update App.jsx

---
 frontend/src/App.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 697f47ae..fd622baf 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -17,7 +17,6 @@ import PopupDefaultPage from "./scenes/popup/PopupDefaultPage";
 import HintDefaultPage from "./scenes/hints/HintDefaultPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
 
-
 function App() {
   // const { isLoggedIn } = useAuth(); //commented out for testing
   const isLoggedIn = true;
@@ -46,4 +45,4 @@ function App() {
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;

From 76d3cd3079b641cca2dbbb720f7db4dc6218da04 Mon Sep 17 00:00:00 2001
From: SimerdeepSinghGrewal <grewal_smart@yahoo.com>
Date: Mon, 26 Aug 2024 14:59:45 -0600
Subject: [PATCH 08/13] RadioButton: update functionality, moved style to css

---
 .../src/components/RadioButton/RadioButton.jsx    | 15 ++++++++++++---
 .../components/RadioButton/RadioButtonStyles.css  |  3 +++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/RadioButton/RadioButton.jsx b/frontend/src/components/RadioButton/RadioButton.jsx
index ac2cbb3a..c8eb1031 100644
--- a/frontend/src/components/RadioButton/RadioButton.jsx
+++ b/frontend/src/components/RadioButton/RadioButton.jsx
@@ -15,19 +15,28 @@ const RadioButton = ({
     enabled = true,
 }) => {
     const sizeClass = buttonSize === 'large' ? 'radio-large' : 'radio-small';
+    
+    const handleChange = (event) => {
+        if (checked) {
+            onChange({ target: { name, value: '' } });
+        } else {
+            onChange(event);
+        }
+    };
+
     return (
-        <div className={`radio-button ${sizeClass}`} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <div className={`radio-button ${sizeClass}`}>
             <Radio                
                 id={id}                
                 name={name}
                 value={value}            
                 disabled={!enabled}
-                onChange={onChange}
+                onChange={handleChange}
                 size={buttonSize === 'large' ? 'large' : 'small'}
                 style={{ color: color }}
                 checked={checked}
             />
-            {label && <label htmlFor={id} style={{ cursor: 'pointer' }}>{label}</label>}
+            {label && <label htmlFor={id}>{label}</label>}
         </div>
     );
 };
diff --git a/frontend/src/components/RadioButton/RadioButtonStyles.css b/frontend/src/components/RadioButton/RadioButtonStyles.css
index 48792c59..c98b8d8d 100644
--- a/frontend/src/components/RadioButton/RadioButtonStyles.css
+++ b/frontend/src/components/RadioButton/RadioButtonStyles.css
@@ -1,7 +1,9 @@
 .radio-button {
     display: flex;
     align-items: center;
+    gap: 8px;
     cursor: pointer;
+    white-space: nowrap;
 }
 
 input {
@@ -36,4 +38,5 @@ input:active {
 label {
     color: var(--main-text-color);
     margin-left: 8px;
+    white-space: nowrap; 
 }

From 49a26005138345d2e155346780a0a6dc836ed59c Mon Sep 17 00:00:00 2001
From: erenfn <erenfindik7@gmail.com>
Date: Tue, 27 Aug 2024 02:33:31 +0300
Subject: [PATCH 09/13] Tried buttons on banner left content

---
 frontend/src/App.jsx                          | 12 ++++----
 .../BannerLeftContent/BannerLeftContent.jsx   | 28 +++++++++++++++----
 .../BannerLeftContent.module.scss             |  1 -
 .../components/RadioButton/RadioButton.jsx    |  5 ++++
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 92659e92..525ac71d 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -20,17 +20,17 @@ import HintPage from "./scenes/hints/HintPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
 
 function App() {
-  const { isLoggedIn } = useAuth(); //commented out for testing
-  // const isLoggedIn = true;
+  // const { isLoggedIn } = useAuth(); //commented out for testing
+  const isLoggedIn = true;
   return (
     <>
       <Routes>
-        <Route
+        {/* <Route
           path="/"
           element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />}
-        />
+        /> */}
         {/* <Route path="/home" element={<Private Component={Home} />} /> */}
-        {/* <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />         */}
+        <Route path="/" element={<Home/>} />        
         <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
@@ -38,7 +38,7 @@ function App() {
         <Route path="/check-email" element={<CheckYourEmailPage />} />
         <Route path="/set-new-password" element={<SetNewPasswordPage />} />
         <Route path="/progress-steps" element={<ProgressStepsMain />} />
-        <Route path="/banner/create" element={<Private Component={BannerPage} />} />
+        <Route path="/banner/create" element={<BannerPage />} />
         <Route path="/popup/create" element={<Private Component={CreatePopupPage} />} />
         <Route path="/banner" element={<Private Component={BannerDefaultPage} />} />
         <Route path="/popup" element={<Private Component={PopupDefaultPage }/>} />
diff --git a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
index cfede506..5d587f29 100644
--- a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
+++ b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
@@ -1,25 +1,37 @@
 import { React } from 'react';
 import styles from './BannerLeftContent.module.scss';
 import DropdownList from '../../DropdownList/DropdownList';
-import { Radio } from "@mui/material";
+import { Radio, FormControlLabel } from "@mui/material";
+import {RadioGroup} from '@mui/material';
 import CustomTextField from '../../TextFieldComponents/CustomTextField/CustomTextField';
+import RadioButton from '../../RadioButton/RadioButton';
 
 const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) => {
     const handleSetUrl = (event) => {
         setUrl(event.target.value);
-      };
-      const handleActionChange = (newAction) => {
+    };
+    const handleActionChange = (newAction) => {
         setButtonAction(newAction);
-      };
+    };
 
     return (
         <div className={styles.container}>
             <h2>Action</h2>
-            <DropdownList 
-                actions={['No action', 'Open URL', 'Open URL in a new tab']} 
+            <DropdownList
+                actions={['No action', 'Open URL', 'Open URL in a new tab']}
                 onActionChange={handleActionChange}
             />
             <h2>Position</h2>
+
+            {/* How the functionality should be */}
+            <RadioGroup
+                defaultValue="top"
+                name="radio-buttons-group"
+            >
+                <FormControlLabel value="top" control={<Radio onClick={() => setIsTopPosition(true)}/>} label="Top" />
+                <FormControlLabel value="bottom" control={<Radio onClick={() => setIsTopPosition(false)}/>} label="Bottom" />
+            </RadioGroup>
+            {/* How it should look */}
             <div className={styles.radioContent}>
                 <Radio onClick={() => setIsTopPosition(true)} />
                 <h3>Top (centered)</h3>
@@ -28,6 +40,10 @@ const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) =
                 <Radio onClick={() => setIsTopPosition(false)} />
                 <h3>Bottom (centered)</h3>
             </div>
+            {/* How it is right now */}
+            <RadioButton name='top-bottom' label='top' onClick={() => setIsTopPosition(true)}/>
+            <RadioButton name='top-bottom' label='bottom' onClick={() => setIsTopPosition(false)}/>
+
             <h2 style={{ marginBottom: 0 }}>URL</h2>
             <CustomTextField
                 TextFieldWidth='241px'
diff --git a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss
index fc21ec74..d9034350 100644
--- a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss
+++ b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.module.scss
@@ -15,5 +15,4 @@
     .radioContent{
         display: flex;
     }
-
 }
\ No newline at end of file
diff --git a/frontend/src/components/RadioButton/RadioButton.jsx b/frontend/src/components/RadioButton/RadioButton.jsx
index ac2cbb3a..77e6b143 100644
--- a/frontend/src/components/RadioButton/RadioButton.jsx
+++ b/frontend/src/components/RadioButton/RadioButton.jsx
@@ -9,10 +9,13 @@ const RadioButton = ({
     value,
     label,
     onChange,
+    onclick,
+    sx,
     buttonSize = 'small',
     color = 'var(--main-purple)',
     checked = false,
     enabled = true,
+    
 }) => {
     const sizeClass = buttonSize === 'large' ? 'radio-large' : 'radio-small';
     return (
@@ -26,6 +29,8 @@ const RadioButton = ({
                 size={buttonSize === 'large' ? 'large' : 'small'}
                 style={{ color: color }}
                 checked={checked}
+                onclick={onclick}
+                sx={sx}
             />
             {label && <label htmlFor={id} style={{ cursor: 'pointer' }}>{label}</label>}
         </div>

From 1fc0504fe0dd09b34a1fdcb435f45ab0c506c039 Mon Sep 17 00:00:00 2001
From: SimerdeepSinghGrewal <grewal_smart@yahoo.com>
Date: Tue, 27 Aug 2024 13:43:04 -0600
Subject: [PATCH 10/13] RadioButton: update bannerLeftContent for functionality
 and update styles according to figma

---
 frontend/package-lock.json                    | 110 +++++++++++++++-
 frontend/package.json                         |   3 +-
 .../BannerLeftContent/BannerLeftContent.jsx   |  49 +++----
 .../components/RadioButton/RadioButton.jsx    | 121 ++++++++++--------
 .../RadioButton/RadioButtonStyles.css         |   2 +-
 5 files changed, 206 insertions(+), 79 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eb9b5c1e..9cc888ae 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,9 +8,10 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@emotion/react": "^11.13.0",
+        "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^5.15.19",
+        "@mui/joy": "^5.0.0-beta.48",
         "@mui/material": "^5.16.5",
         "@mui/x-date-pickers": "^7.3.1",
         "@mui/x-date-pickers-pro": "^7.3.1",
@@ -2826,7 +2827,6 @@
       "version": "11.13.3",
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
       "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.12.0",
@@ -2869,7 +2869,6 @@
       "version": "11.13.0",
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
       "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.12.0",
@@ -3372,6 +3371,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
+      "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
+      "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -4819,6 +4852,37 @@
         "react": ">=16"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "5.16.7",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
@@ -4855,6 +4919,46 @@
         }
       }
     },
+    "node_modules/@mui/joy": {
+      "version": "5.0.0-beta.48",
+      "resolved": "https://registry.npmjs.org/@mui/joy/-/joy-5.0.0-beta.48.tgz",
+      "integrity": "sha512-OhTvjuGl9I5IvpBr0BQyDehIW/xb2yteW6YglHJMdOb/279nItn76X1NBtPV9ImldNlBjReGwvpOXmBTTGER9w==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/core-downloads-tracker": "^5.16.1",
+        "@mui/system": "^5.16.1",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.1",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.16.7",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 88dbe001..24390c0f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,9 +4,10 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.15.19",
+    "@mui/joy": "^5.0.0-beta.48",
     "@mui/material": "^5.16.5",
     "@mui/x-date-pickers": "^7.3.1",
     "@mui/x-date-pickers-pro": "^7.3.1",
diff --git a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
index 5d587f29..4fe1286e 100644
--- a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
+++ b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
@@ -1,19 +1,24 @@
-import { React } from 'react';
+import React, { useState } from 'react';
 import styles from './BannerLeftContent.module.scss';
 import DropdownList from '../../DropdownList/DropdownList';
-import { Radio, FormControlLabel } from "@mui/material";
-import {RadioGroup} from '@mui/material';
 import CustomTextField from '../../TextFieldComponents/CustomTextField/CustomTextField';
 import RadioButton from '../../RadioButton/RadioButton';
 
 const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) => {
+    const [position, setPosition] = useState('top');
     const handleSetUrl = (event) => {
         setUrl(event.target.value);
     };
+
     const handleActionChange = (newAction) => {
         setButtonAction(newAction);
     };
 
+    const handlePositionChange = (newPosition) => {
+        setPosition(newPosition);
+        setIsTopPosition(newPosition === 'top');
+    };
+
     return (
         <div className={styles.container}>
             <h2>Action</h2>
@@ -22,33 +27,33 @@ const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) =
                 onActionChange={handleActionChange}
             />
             <h2>Position</h2>
-
-            {/* How the functionality should be */}
-            <RadioGroup
-                defaultValue="top"
-                name="radio-buttons-group"
-            >
-                <FormControlLabel value="top" control={<Radio onClick={() => setIsTopPosition(true)}/>} label="Top" />
-                <FormControlLabel value="bottom" control={<Radio onClick={() => setIsTopPosition(false)}/>} label="Bottom" />
-            </RadioGroup>
-            {/* How it should look */}
             <div className={styles.radioContent}>
-                <Radio onClick={() => setIsTopPosition(true)} />
-                <h3>Top (centered)</h3>
+                <RadioButton
+                    id="top-centered-position"
+                    name="position"
+                    value="top-centered"
+                    label="Top (centered)"
+                    checked={position === 'top'}
+                    onChange={() => handlePositionChange('top')}
+                />
             </div>
             <div className={styles.radioContent}>
-                <Radio onClick={() => setIsTopPosition(false)} />
-                <h3>Bottom (centered)</h3>
+                <RadioButton
+                    id="bottom-centered-position"
+                    name="position"
+                    value="bottom-centered"
+                    label="Bottom (centered)"
+                    checked={position === 'bottom'}
+                    onChange={() => handlePositionChange('bottom')}
+                />
             </div>
-            {/* How it is right now */}
-            <RadioButton name='top-bottom' label='top' onClick={() => setIsTopPosition(true)}/>
-            <RadioButton name='top-bottom' label='bottom' onClick={() => setIsTopPosition(false)}/>
 
             <h2 style={{ marginBottom: 0 }}>URL</h2>
             <CustomTextField
-                TextFieldWidth='241px'
+                TextFieldWidth="241px"
                 value={url}
-                onChange={handleSetUrl} />
+                onChange={handleSetUrl}
+            />
         </div>
     );
 };
diff --git a/frontend/src/components/RadioButton/RadioButton.jsx b/frontend/src/components/RadioButton/RadioButton.jsx
index a3356472..0d7e85db 100644
--- a/frontend/src/components/RadioButton/RadioButton.jsx
+++ b/frontend/src/components/RadioButton/RadioButton.jsx
@@ -1,60 +1,77 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Radio } from "@mui/material";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Radio } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import './RadioButtonStyles.css';
+const CustomRadioIcon = styled('span')({
+    borderRadius: '50%',
+    width: 16,
+    height: 16,
+    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
+  });
 
-const RadioButton = ({
-    id,
-    name,
-    value,
-    label,
-    onChange,
-    onclick,
-    sx,
-    buttonSize = 'small',
-    color = 'var(--main-purple)',
-    checked = false,
-    enabled = true,
-    
-}) => {
-    const sizeClass = buttonSize === 'large' ? 'radio-large' : 'radio-small';
-    
-    const handleChange = (event) => {
-        if (checked) {
-            onChange({ target: { name, value: '' } });
-        } else {
-            onChange(event);
-        }
-    };
+const CustomRadioCheckedIcon = styled('span')({
+    borderRadius: '50%',
+    backgroundColor: 'var(--main-purple)',
+  '&::before': {
+    display: 'block',
+    width: 16,
+    height: 16,
+    backgroundImage: 'radial-gradient(#fff, #fff 28%, transparent 32%)',
+    content: '""',
+  },
+});
 
-    return (
-        <div className={`radio-button ${sizeClass}`}>
-            <Radio                
-                id={id}                
-                name={name}
-                value={value}            
-                disabled={!enabled}
-                onChange={handleChange}
-                size={buttonSize === 'large' ? 'large' : 'small'}
-                style={{ color: color }}
-                checked={checked}
-                onclick={onclick}
-                sx={sx}
-            />
-            {label && <label htmlFor={id}>{label}</label>}
-        </div>
-    );
-};
+function RadioButton({ 
+    id, 
+    name, 
+    value, 
+    label, 
+    onChange, 
+    onclick, 
+    buttonSize = 'small', 
+    color = 'var(--main-purple)', 
+    checked = false, 
+    enabled = true 
+}) {
+  const sizeClass = buttonSize === 'large' ? 'radio-large' : 'radio-small';
+
+  const handleChange = (event) => {
+    if (checked) {
+      onChange({ target: { name, value: '' } });
+    } else {
+      onChange(event);
+    }
+  };
+
+  return (
+    <div className={`radio-button ${sizeClass}`}>
+      <Radio
+        id={id}
+        name={name}
+        value={value}
+        disabled={!enabled}
+        onChange={handleChange}
+        size={buttonSize === 'large' ? 'large' : 'small'}
+        checkedIcon={<CustomRadioCheckedIcon />}
+        icon={<CustomRadioIcon />}
+        checked={checked}
+        onClick={onclick}
+      />
+      {label && <label htmlFor={id}>{label}</label>}
+    </div>
+  );
+}
 
 RadioButton.propTypes = {
-    id: PropTypes.string,
-    name: PropTypes.string,
-    value: PropTypes.string,
-    label: PropTypes.string,
-    enabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    color: PropTypes.string,
-    checked: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  label: PropTypes.string,
+  enabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  color: PropTypes.string,
+  checked: PropTypes.bool,
 };
 
 export default RadioButton;
diff --git a/frontend/src/components/RadioButton/RadioButtonStyles.css b/frontend/src/components/RadioButton/RadioButtonStyles.css
index c98b8d8d..a32478d8 100644
--- a/frontend/src/components/RadioButton/RadioButtonStyles.css
+++ b/frontend/src/components/RadioButton/RadioButtonStyles.css
@@ -1,9 +1,9 @@
 .radio-button {
     display: flex;
     align-items: center;
-    gap: 8px;
     cursor: pointer;
     white-space: nowrap;
+    margin-bottom: 10px;
 }
 
 input {

From 1cb50953e85722213af975cfcbc3baf78d911cbd Mon Sep 17 00:00:00 2001
From: erenfn <erenfindik7@gmail.com>
Date: Wed, 28 Aug 2024 04:47:54 +0300
Subject: [PATCH 11/13] radiobutton fixes

---
 frontend/src/App.jsx                          | 10 ++++----
 .../BannerLeftContent/BannerLeftContent.jsx   | 23 +++++++------------
 .../components/RadioButton/RadioButton.jsx    | 14 +++++------
 .../RadioButton/RadioButtonStyles.css         | 14 +----------
 frontend/src/scenes/bannerPage/BannerPage.jsx |  1 +
 5 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 525ac71d..f3efc5ca 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -20,17 +20,17 @@ import HintPage from "./scenes/hints/HintPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
 
 function App() {
-  // const { isLoggedIn } = useAuth(); //commented out for testing
-  const isLoggedIn = true;
+  const { isLoggedIn } = useAuth(); //commented out for testing
+  // const isLoggedIn = true;
   return (
     <>
       <Routes>
-        {/* <Route
+        <Route
           path="/"
           element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />}
-        /> */}
+        />
         {/* <Route path="/home" element={<Private Component={Home} />} /> */}
-        <Route path="/" element={<Home/>} />        
+        {/* <Route path="/" element={<Home/>} />         */}
         <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
diff --git a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
index 4fe1286e..d203211c 100644
--- a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
+++ b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
@@ -4,8 +4,8 @@ import DropdownList from '../../DropdownList/DropdownList';
 import CustomTextField from '../../TextFieldComponents/CustomTextField/CustomTextField';
 import RadioButton from '../../RadioButton/RadioButton';
 
-const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) => {
-    const [position, setPosition] = useState('top');
+const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction, isTopPosition }) => {
+
     const handleSetUrl = (event) => {
         setUrl(event.target.value);
     };
@@ -15,8 +15,7 @@ const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) =
     };
 
     const handlePositionChange = (newPosition) => {
-        setPosition(newPosition);
-        setIsTopPosition(newPosition === 'top');
+        setIsTopPosition(newPosition);
     };
 
     return (
@@ -29,26 +28,20 @@ const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) =
             <h2>Position</h2>
             <div className={styles.radioContent}>
                 <RadioButton
-                    id="top-centered-position"
-                    name="position"
-                    value="top-centered"
                     label="Top (centered)"
-                    checked={position === 'top'}
-                    onChange={() => handlePositionChange('top')}
+                    checked={isTopPosition}
+                    onChange={() => handlePositionChange(true)}
                 />
             </div>
             <div className={styles.radioContent}>
                 <RadioButton
-                    id="bottom-centered-position"
-                    name="position"
-                    value="bottom-centered"
                     label="Bottom (centered)"
-                    checked={position === 'bottom'}
-                    onChange={() => handlePositionChange('bottom')}
+                    checked={!isTopPosition}
+                    onChange={() => handlePositionChange(false)}
                 />
             </div>
 
-            <h2 style={{ marginBottom: 0 }}>URL</h2>
+            <h2 style={{ marginBottom: 0, marginTop:'1.2rem'}}>URL</h2>
             <CustomTextField
                 TextFieldWidth="241px"
                 value={url}
diff --git a/frontend/src/components/RadioButton/RadioButton.jsx b/frontend/src/components/RadioButton/RadioButton.jsx
index 0d7e85db..2d51a526 100644
--- a/frontend/src/components/RadioButton/RadioButton.jsx
+++ b/frontend/src/components/RadioButton/RadioButton.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Radio } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import './RadioButtonStyles.css';
+
 const CustomRadioIcon = styled('span')({
     borderRadius: '50%',
     width: 16,
@@ -28,13 +29,11 @@ function RadioButton({
     value, 
     label, 
     onChange, 
-    onclick, 
-    buttonSize = 'small', 
-    color = 'var(--main-purple)', 
+    onClick, 
+    size = 'small', 
     checked = false, 
     enabled = true 
 }) {
-  const sizeClass = buttonSize === 'large' ? 'radio-large' : 'radio-small';
 
   const handleChange = (event) => {
     if (checked) {
@@ -45,18 +44,19 @@ function RadioButton({
   };
 
   return (
-    <div className={`radio-button ${sizeClass}`}>
+    <div className={`radio-button`}>
       <Radio
         id={id}
         name={name}
         value={value}
         disabled={!enabled}
         onChange={handleChange}
-        size={buttonSize === 'large' ? 'large' : 'small'}
+        size={size}
         checkedIcon={<CustomRadioCheckedIcon />}
         icon={<CustomRadioIcon />}
         checked={checked}
-        onClick={onclick}
+        onClick={onClick}
+        sx={{padding:'0'}}
       />
       {label && <label htmlFor={id}>{label}</label>}
     </div>
diff --git a/frontend/src/components/RadioButton/RadioButtonStyles.css b/frontend/src/components/RadioButton/RadioButtonStyles.css
index a32478d8..196fb23a 100644
--- a/frontend/src/components/RadioButton/RadioButtonStyles.css
+++ b/frontend/src/components/RadioButton/RadioButtonStyles.css
@@ -3,7 +3,7 @@
     align-items: center;
     cursor: pointer;
     white-space: nowrap;
-    margin-bottom: 10px;
+    margin-bottom: 13px;
 }
 
 input {
@@ -15,18 +15,6 @@ input:active {
     border-radius: 5px;
 }
 
-.radio-small {
-    width: 16px;
-    height: 16px;
-    border-radius: 4px;
-}
-
-.radio-large {
-    width: 20px;
-    height: 20px;
-    border-radius: 6px;
-}
-
 .radio-primary input {
     accent-color: var(--main-purple);
 }
diff --git a/frontend/src/scenes/bannerPage/BannerPage.jsx b/frontend/src/scenes/bannerPage/BannerPage.jsx
index 949260a2..ff8b4b01 100644
--- a/frontend/src/scenes/bannerPage/BannerPage.jsx
+++ b/frontend/src/scenes/bannerPage/BannerPage.jsx
@@ -93,6 +93,7 @@ const BannerPage = () => {
                     leftContent={() =>
                         <BannerLeftContent
                             setIsTopPosition={setIsTopPosition}
+                            isTopPosition={isTopPosition}
                             url={url}
                             setUrl={setUrl}
                             setButtonAction={setButtonAction}

From f88699e7dd740ed9f21e330cf9fe448a58589f9f Mon Sep 17 00:00:00 2001
From: erenfn <81182796+erenfn@users.noreply.github.com>
Date: Wed, 28 Aug 2024 04:50:13 +0300
Subject: [PATCH 12/13] Update package.json

---
 frontend/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 24390c0f..b8ecd4e5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,7 +7,6 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.15.19",
-    "@mui/joy": "^5.0.0-beta.48",
     "@mui/material": "^5.16.5",
     "@mui/x-date-pickers": "^7.3.1",
     "@mui/x-date-pickers-pro": "^7.3.1",

From e895205eef86562fa5ed0493655b997e5b97328f Mon Sep 17 00:00:00 2001
From: erenfn <erenfindik7@gmail.com>
Date: Wed, 28 Aug 2024 04:51:11 +0300
Subject: [PATCH 13/13] npm install

---
 frontend/package-lock.json | 106 -------------------------------------
 1 file changed, 106 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9cc888ae..b8bd1740 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,6 @@
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^5.15.19",
-        "@mui/joy": "^5.0.0-beta.48",
         "@mui/material": "^5.16.5",
         "@mui/x-date-pickers": "^7.3.1",
         "@mui/x-date-pickers-pro": "^7.3.1",
@@ -3371,40 +3370,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
-      "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.7"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.6.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
-      "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
-      "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.7"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
-      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
-      "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
-      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -4852,37 +4817,6 @@
         "react": ">=16"
       }
     },
-    "node_modules/@mui/base": {
-      "version": "5.0.0-beta.40",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
-      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@floating-ui/react-dom": "^2.0.8",
-        "@mui/types": "^7.2.14",
-        "@mui/utils": "^5.15.14",
-        "@popperjs/core": "^2.11.8",
-        "clsx": "^2.1.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "5.16.7",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
@@ -4919,46 +4853,6 @@
         }
       }
     },
-    "node_modules/@mui/joy": {
-      "version": "5.0.0-beta.48",
-      "resolved": "https://registry.npmjs.org/@mui/joy/-/joy-5.0.0-beta.48.tgz",
-      "integrity": "sha512-OhTvjuGl9I5IvpBr0BQyDehIW/xb2yteW6YglHJMdOb/279nItn76X1NBtPV9ImldNlBjReGwvpOXmBTTGER9w==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/base": "5.0.0-beta.40",
-        "@mui/core-downloads-tracker": "^5.16.1",
-        "@mui/system": "^5.16.1",
-        "@mui/types": "^7.2.15",
-        "@mui/utils": "^5.16.1",
-        "clsx": "^2.1.0",
-        "prop-types": "^15.8.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
-          "optional": true
-        },
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/material": {
       "version": "5.16.7",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",