From 0b1534a4220592e80663768c9f285ae867da39ef Mon Sep 17 00:00:00 2001
From: a2-imeri <Alfret2.imeri@live.uwe.ac.uk>
Date: Wed, 26 Jun 2024 16:48:17 +0100
Subject: [PATCH] Update CSS Style
---
.../rules/__pycache__/views.cpython-310.pyc | Bin 4348 -> 4609 bytes
MisplaceAI/rules/views.py | 21 +++-
.../components/Common/Form/ErrorMessage.js | 2 +-
.../components/Common/Form/FormContainer.js | 14 ++-
frontend/src/components/Rules/AddRule.js | 100 ++++++++++--------
frontend/src/components/Rules/GetRules.js | 14 ++-
frontend/src/components/Rules/UpdateRule.js | 61 +++++++----
.../UserProfile/EditableInfoForm.js | 7 +-
.../detection/DetectionContainer.js | 16 ++-
.../components/detection/DetectionResults.js | 3 +-
.../components/detection/FileUploadForm.js | 3 +-
.../src/components/detection/UploadForm.js | 2 +-
.../forms/UserProfile/ChangePasswordForm.js | 6 +-
frontend/src/pages/Admin/AdminDashboard.js | 19 ++--
.../NormalDetection/NormalDetectionPage.js | 2 +-
frontend/src/pages/Rules/ManageRulesPage.js | 6 +-
.../src/pages/UserDashboard/UserDashboard.js | 18 ++--
frontend/src/pages/UserProfile/UserProfile.js | 28 ++---
frontend/src/services/ruleApi.js | 2 +
frontend/src/styles/_auth.css | 15 ++-
frontend/src/styles/_components.css | 82 ++++++++++++--
frontend/src/styles/_forms.css | 3 -
frontend/src/styles/_global.css | 17 +--
frontend/src/styles/_layout.css | 34 ++----
frontend/src/styles/_responsive.css | 89 ++++++++--------
frontend/src/styles/dashboard.css | 30 +-----
26 files changed, 325 insertions(+), 269 deletions(-)
diff --git a/MisplaceAI/rules/__pycache__/views.cpython-310.pyc b/MisplaceAI/rules/__pycache__/views.cpython-310.pyc
index 51706342ccfe8763354ef1f34e42cb72f0f8e3ac..9954d00955e64d52f74351e51b23c8cae74bb9fd 100644
GIT binary patch
delta 505
zcmeyP*r>vn&&$ijz`(%p$-E{_R%9dJQy!s}j8SZvDe>`{dAC?oi;D7#eobcObz%&d
z?7>?iaEm7=KRK}^Ge0jrGo`pFVDcH>ipf?yy!Cwy3=Aa<C5$ypDU7{LwX8LaSxmKT
zHEau*Q<xSq*0O_H%;^jZnQA#o7)n@b*um;JOIWkmve;`lQdoK!Yq@H;7H}+NDAp_C
zOkqu7%VaF!%HmF8?_~;RsNt+(jpwOh&Ej3aSHrcCk&&T>bpiiE21bSwfg0B4dd6Dr
z63!a#ET$5!EJ27CO%A^zD+UIJB3lsQ0U~@sgdd3T2N5g`3=En=MFJo;H;51e5egsz
z6e>lWAeIP-2m}#9Ac7f0u!0B^5CJtin1P`v7{oUO5quy*9Ar38kpze>$-uyHi@m5c
zCpA7ZrAP`SBn=`$K?K-R8xSi5L_kesV3=IUB0BjDABSQwNCOWe8zUDZ4<io~A0r2o
z5F;BC4<iR72a^C}mH1?NKGDe^_<{t&Kn8$R7eS1l{E%0e)ro<Dp>A>(e>kJ?=0p5e
Fi~vdkXSo0X
delta 155
zcmZov`J>2}&&$ijz`(#D@VzSSrO-ycr#wQMj8SZvDe>`{dAC?oi;D7#swT7YIx+f9
z_TViMh~mk~Pfje!%+HI@Oerq%n|y}1V)AWPp2<fzh1j?m7#NE9COdG-PX5U$J-LWq
zm@#Pbe0~L{BKygLJd%^Y@COS7gVacY2x$-zH2EQ~Fsl;-14HrTe1ULAj?KpftQY}a
CjVwz5
diff --git a/MisplaceAI/rules/views.py b/MisplaceAI/rules/views.py
index 8ab33c1..c53681b 100644
--- a/MisplaceAI/rules/views.py
+++ b/MisplaceAI/rules/views.py
@@ -106,11 +106,22 @@ class AdminManageRuleView(APIView):
def put(self, request, rule_id, *args, **kwargs):
rule = get_object_or_404(Rule, id=rule_id)
- serializer = RuleSerializer(rule, data=request.data)
- if serializer.is_valid():
- serializer.save()
- return Response(serializer.data, status=status.HTTP_200_OK)
- return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+ data = request.data
+ item_id = data.get('item')
+ location_ids = data.get('locations', [])
+
+ item = get_object_or_404(Item, id=item_id)
+ locations = Location.objects.filter(id__in=location_ids)
+
+ if not locations.exists():
+ return Response({'error': 'One or more locations are invalid.'}, status=status.HTTP_400_BAD_REQUEST)
+
+ rule.item = item
+ rule.locations.set(locations)
+ rule.save()
+
+ serializer = RuleSerializer(rule)
+ return Response(serializer.data, status=status.HTTP_200_OK)
def delete(self, request, rule_id, *args, **kwargs):
rule = get_object_or_404(Rule, id=rule_id)
diff --git a/frontend/src/components/Common/Form/ErrorMessage.js b/frontend/src/components/Common/Form/ErrorMessage.js
index 1c08c41..53aa745 100644
--- a/frontend/src/components/Common/Form/ErrorMessage.js
+++ b/frontend/src/components/Common/Form/ErrorMessage.js
@@ -3,7 +3,7 @@ import React from 'react';
import PropTypes from 'prop-types';
const ErrorMessage = ({ message }) => (
- <p className="text-danger text-center">{message}</p>
+ <p className="text-danger">{message}</p>
);
ErrorMessage.propTypes = {
diff --git a/frontend/src/components/Common/Form/FormContainer.js b/frontend/src/components/Common/Form/FormContainer.js
index 9d2e12c..3bdb1a4 100644
--- a/frontend/src/components/Common/Form/FormContainer.js
+++ b/frontend/src/components/Common/Form/FormContainer.js
@@ -17,11 +17,15 @@ const FormContainer = ({ children, onSubmit }) => {
};
return (
- <div className="auth-form">
- {error && <ErrorMessage message={error} />}
- <form onSubmit={handleSubmit}>
- {children}
- </form>
+ <div className="row justify-content-center">
+ <div className="auth-form">
+ <div className="card-body">
+ {error && <ErrorMessage message={error} />}
+ <form onSubmit={handleSubmit}>
+ {children}
+ </form>
+ </div>
+ </div>
</div>
);
};
diff --git a/frontend/src/components/Rules/AddRule.js b/frontend/src/components/Rules/AddRule.js
index 16e792a..671d1c5 100644
--- a/frontend/src/components/Rules/AddRule.js
+++ b/frontend/src/components/Rules/AddRule.js
@@ -57,54 +57,60 @@ const AddRule = ({ onRuleAdded }) => {
};
return (
- <div className="form-container">
- <h3>Add Rule</h3>
- {error && <p className="text-danger">{error}</p>}
- <form onSubmit={handleSubmit}>
- <div className="form-group">
- <label>Item</label>
- <div className="checkbox-container">
- {items.map((item) => (
- <label key={item.id} className="checkbox-wrapper-12">
- <div className="cbx">
- <input
- type="checkbox"
- checked={selectedItem === item.id}
- onChange={() => handleItemChange(item.id)}
- />
- <label></label>
- <svg width="15" height="14" viewBox="0 0 15 14" fill="none">
- <path d="M2 8.36364L6.23077 12L13 2"></path>
- </svg>
- </div>
- <span>{item.name}</span>
- </label>
- ))}
- </div>
- </div>
- <div className="form-group">
- <label>Locations</label>
- <div className="checkbox-container">
- {locations.map((location) => (
- <label key={location.id} className="checkbox-wrapper-12">
- <div className="cbx">
- <input
- type="checkbox"
- checked={selectedLocations.includes(location.id)}
- onChange={() => handleLocationChange(location.id)}
- />
- <label></label>
- <svg width="15" height="14" viewBox="0 0 15 14" fill="none">
- <path d="M2 8.36364L6.23077 12L13 2"></path>
- </svg>
- </div>
- <span>{location.name}</span>
- </label>
- ))}
- </div>
+
+ <div className="dashboard-card">
+ <div className="card card-wide">
+ <div className="card-body">
+ <h3 className="card-title">Add Rule</h3>
+
+ {error && <p className="text-danger">{error}</p>}
+ <form onSubmit={handleSubmit}>
+ <div className="form-group">
+ <label>Item</label>
+ <div className="checkbox-container">
+ {items.map((item) => (
+ <label key={item.id} className="checkbox-wrapper-12">
+ <div className="cbx">
+ <input
+ type="checkbox"
+ checked={selectedItem === item.id}
+ onChange={() => handleItemChange(item.id)}
+ />
+ <label></label>
+ <svg width="15" height="14" viewBox="0 0 15 14" fill="none">
+ <path d="M2 8.36364L6.23077 12L13 2"></path>
+ </svg>
+ </div>
+ <span>{item.name}</span>
+ </label>
+ ))}
+ </div>
+ </div>
+ <div className="form-group">
+ <label>Locations</label>
+ <div className="checkbox-container">
+ {locations.map((location) => (
+ <label key={location.id} className="checkbox-wrapper-12">
+ <div className="cbx">
+ <input
+ type="checkbox"
+ checked={selectedLocations.includes(location.id)}
+ onChange={() => handleLocationChange(location.id)}
+ />
+ <label></label>
+ <svg width="15" height="14" viewBox="0 0 15 14" fill="none">
+ <path d="M2 8.36364L6.23077 12L13 2"></path>
+ </svg>
+ </div>
+ <span>{location.name}</span>
+ </label>
+ ))}
+ </div>
+ </div>
+ <button type="submit" className="btn btn-primary">Add Rule</button>
+ </form>
</div>
- <button type="submit" className="btn btn-primary">Add Rule</button>
- </form>
+ </div>
</div>
);
};
diff --git a/frontend/src/components/Rules/GetRules.js b/frontend/src/components/Rules/GetRules.js
index 971b826..4bfd1a1 100644
--- a/frontend/src/components/Rules/GetRules.js
+++ b/frontend/src/components/Rules/GetRules.js
@@ -1,4 +1,4 @@
-// src/components/Rules/GetRules.js
+/* src/components/Rules/GetRules.js */
import React, { useEffect, useState } from 'react';
import { getRules, deleteRule } from '../../services/ruleApi';
@@ -23,15 +23,21 @@ const GetRules = ({ onEditRule, onDeleteRule, refresh }) => {
};
return (
- <div className="dashboard-card rules-list">
+ <div className="dashboard-card">
<div className="card card-wide">
<div className="card-body">
<h2 className="card-title">Rules List</h2>
<ul className="list-group">
+ <li className="list-group-header">
+ <span>Items</span>
+ <span>Locations</span>
+ <span>Actions</span>
+ </li>
{rules.map(rule => (
<li key={rule.id} className="list-group-item">
- <span>{rule.item.name} - {rule.locations.map(location => location.name).join(', ')}</span>
- <div>
+ <span className="item-label">{rule.item.name}</span>
+ <span className="location-label">{rule.locations.map(location => location.name).join(', ')}</span>
+ <div className="button-group">
<button className="btn btn-secondary" onClick={() => onEditRule(rule)}>Edit</button>
<button className="btn btn-danger" onClick={() => handleDelete(rule.id)}>Delete</button>
</div>
diff --git a/frontend/src/components/Rules/UpdateRule.js b/frontend/src/components/Rules/UpdateRule.js
index 8334233..570f0ef 100644
--- a/frontend/src/components/Rules/UpdateRule.js
+++ b/frontend/src/components/Rules/UpdateRule.js
@@ -1,4 +1,5 @@
// src/components/Rules/UpdateRule.js
+
import React, { useState, useEffect } from 'react';
import { updateRule } from '../../services/ruleApi';
import { getItems } from '../../services/itemApi';
@@ -45,35 +46,51 @@ const UpdateRule = ({ rule, onUpdateCompleted }) => {
<form onSubmit={handleSubmit}>
<div className="form-group">
<label>Item</label>
- <select
- className="form-control"
- value={selectedItem}
- onChange={(e) => setSelectedItem(e.target.value)}
- required
- >
- <option value="" disabled>Select an item</option>
+ <div className="checkbox-container">
{items.map((item) => (
- <option key={item.id} value={item.id}>
- {item.name}
- </option>
+ <label key={item.id} className="checkbox-wrapper-12">
+ <div className="cbx">
+ <input
+ type="checkbox"
+ checked={selectedItem === item.id}
+ onChange={() => setSelectedItem(item.id)}
+ />
+ <label></label>
+ <svg width="15" height="14" viewBox="0 0 15 14" fill="none">
+ <path d="M2 8.36364L6.23077 12L13 2"></path>
+ </svg>
+ </div>
+ <span>{item.name}</span>
+ </label>
))}
- </select>
+ </div>
</div>
<div className="form-group">
<label>Locations</label>
- <select
- className="form-control"
- multiple
- value={selectedLocations}
- onChange={(e) => setSelectedLocations(Array.from(e.target.selectedOptions, option => option.value))}
- required
- >
+ <div className="checkbox-container">
{locations.map((location) => (
- <option key={location.id} value={location.id}>
- {location.name}
- </option>
+ <label key={location.id} className="checkbox-wrapper-12">
+ <div className="cbx">
+ <input
+ type="checkbox"
+ checked={selectedLocations.includes(location.id)}
+ onChange={() => setSelectedLocations((prev) => {
+ if (prev.includes(location.id)) {
+ return prev.filter(id => id !== location.id);
+ } else {
+ return [...prev, location.id];
+ }
+ })}
+ />
+ <label></label>
+ <svg width="15" height="14" viewBox="0 0 15 14" fill="none">
+ <path d="M2 8.36364L6.23077 12L13 2"></path>
+ </svg>
+ </div>
+ <span>{location.name}</span>
+ </label>
))}
- </select>
+ </div>
</div>
<button type="submit" className="btn btn-primary">Update Rule</button>
</form>
diff --git a/frontend/src/components/UserProfile/EditableInfoForm.js b/frontend/src/components/UserProfile/EditableInfoForm.js
index 737338a..5e34d1b 100644
--- a/frontend/src/components/UserProfile/EditableInfoForm.js
+++ b/frontend/src/components/UserProfile/EditableInfoForm.js
@@ -1,8 +1,7 @@
-// src/components/UserProfile/EditableInfoForm.js
+/* src/components/UserProfile/EditableInfoForm.js */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
-import FormContainer from '../Common/Form/FormContainer';
import FormField from '../Common/Form/FormField';
import PasswordInputField from '../Common/Password/PasswordInputField';
import SubmitButton from '../Common/buttons/SubmitButton';
@@ -20,7 +19,7 @@ const EditableInfoForm = ({ label, type, onSubmit, onCancel, loading, error }) =
};
return (
- <FormContainer onSubmit={handleSubmit}>
+ <form onSubmit={handleSubmit} >
<FormField
label={label}
type={type}
@@ -39,7 +38,7 @@ const EditableInfoForm = ({ label, type, onSubmit, onCancel, loading, error }) =
<SubmitButton className="submit-button" label={loading ? 'Updating...' : `Update ${label}`} disabled={loading} />
<CancelButton className="action-button" label="Cancel" onClick={onCancel} />
</div>
- </FormContainer>
+ </form>
);
};
diff --git a/frontend/src/components/detection/DetectionContainer.js b/frontend/src/components/detection/DetectionContainer.js
index 1bbd552..040b097 100644
--- a/frontend/src/components/detection/DetectionContainer.js
+++ b/frontend/src/components/detection/DetectionContainer.js
@@ -1,4 +1,4 @@
-// src/components/detection/DetectionContainer.js
+/* src/components/detection/DetectionContainer.js */
import React from 'react';
import '../../styles/main.css'; // Ensure this path is correct based on your project structure
@@ -7,14 +7,12 @@ const DetectionContainer = ({ title, children }) => {
return (
<div className="pages-container-center">
<div className="row justify-content-center">
- <div className="col-12 col-md-10 col-lg-8">
- <div className="card shadow-lg border-0">
- <div className="card-header text-center bg-primary text-white py-4">
- <h1 className="mb-0">{title}</h1>
- </div>
- <div className="card-body p-5">
- {children}
- </div>
+ <div className="card shadow-lg border-0">
+ <div className="text-center bg-primary text-white py-4">
+ <h1 className="mb-0">{title}</h1>
+ </div>
+ <div className="card-body p-5">
+ {children}
</div>
</div>
</div>
diff --git a/frontend/src/components/detection/DetectionResults.js b/frontend/src/components/detection/DetectionResults.js
index 6d767ea..2c9749b 100644
--- a/frontend/src/components/detection/DetectionResults.js
+++ b/frontend/src/components/detection/DetectionResults.js
@@ -1,4 +1,5 @@
-// src/components/detection/DetectionResults.js
+/* src/components/detection/DetectionResults.js */
+
import React from 'react';
import '../../styles/main.css';
diff --git a/frontend/src/components/detection/FileUploadForm.js b/frontend/src/components/detection/FileUploadForm.js
index cf9a250..3b6a618 100644
--- a/frontend/src/components/detection/FileUploadForm.js
+++ b/frontend/src/components/detection/FileUploadForm.js
@@ -1,4 +1,5 @@
-// src/components/detection/FileUploadForm.js
+/* src/components/detection/FileUploadForm.js */
+
import React from 'react';
import '../../styles/main.css';
diff --git a/frontend/src/components/detection/UploadForm.js b/frontend/src/components/detection/UploadForm.js
index d8c00f4..625ddb5 100644
--- a/frontend/src/components/detection/UploadForm.js
+++ b/frontend/src/components/detection/UploadForm.js
@@ -1,4 +1,4 @@
-// src/components/detection/UploadForm.js
+/* src/components/detection/UploadForm.js */
import React from 'react';
diff --git a/frontend/src/forms/UserProfile/ChangePasswordForm.js b/frontend/src/forms/UserProfile/ChangePasswordForm.js
index 737df3c..6ab1542 100644
--- a/frontend/src/forms/UserProfile/ChangePasswordForm.js
+++ b/frontend/src/forms/UserProfile/ChangePasswordForm.js
@@ -3,7 +3,7 @@
import React, { useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import api from '../../services/api';
-import FormContainer from '../../components/Common/Form/FormContainer';
+
import PasswordInputField from '../../components/Common/Password/PasswordInputField';
import ErrorMessage from '../../components/Common/Form/ErrorMessage';
import SubmitButton from '../../components/Common/buttons/SubmitButton';
@@ -118,7 +118,7 @@ const ChangePasswordForm = ({ onUpdatePassword }) => {
{showForm && (
<div className="card card-wide">
<div className="card-body">
- <FormContainer onSubmit={handleSubmit}>
+ <form onSubmit={handleSubmit} >
{error && <ErrorMessage message={error} />}
<PasswordInputField
label="Current Password"
@@ -146,7 +146,7 @@ const ChangePasswordForm = ({ onUpdatePassword }) => {
<SubmitButton className="submit-button" label={loading ? 'Updating...' : 'Update Password'} disabled={!isFormValid || loading} />
<CancelButton className="action-button" label="Cancel" onClick={handleCancel} />
</div>
- </FormContainer>
+ </form>
</div>
</div>
)}
diff --git a/frontend/src/pages/Admin/AdminDashboard.js b/frontend/src/pages/Admin/AdminDashboard.js
index 0e5770b..4482d17 100644
--- a/frontend/src/pages/Admin/AdminDashboard.js
+++ b/frontend/src/pages/Admin/AdminDashboard.js
@@ -7,13 +7,18 @@ import { Link } from 'react-router-dom';
const AdminDashboard = () => {
return (
<div className="pages-container-center">
- <h1>Admin Dashboard</h1>
- <div className="list-group">
- <Link to="/admin/users" className="list-group-item list-group-item-action">Users Activity</Link>
- <Link to="/admin/Manage-Locations" className="list-group-item list-group-item-action">Manage Locations</Link>
- <Link to="/admin/manage-items" className="list-group-item list-group-item-action">Manage Items</Link>
- <Link to="/admin/manage-rules" className="list-group-item list-group-item-action">Manage Rules</Link>
-
+ <div className="row justify-content-center">
+ <div className="card shadow-lg border-0">
+ <div className="card-body p-5">
+ <h1>Admin Dashboard</h1>
+ <div className="list-group">
+ <Link to="/admin/users" className="list-group-item list-group-item-action">Users Activity</Link>
+ <Link to="/admin/Manage-Locations" className="list-group-item list-group-item-action">Manage Locations</Link>
+ <Link to="/admin/manage-items" className="list-group-item list-group-item-action">Manage Items</Link>
+ <Link to="/admin/manage-rules" className="list-group-item list-group-item-action">Manage Rules</Link>
+ </div>
+ </div>
+ </div>
</div>
</div>
);
diff --git a/frontend/src/pages/NormalDetection/NormalDetectionPage.js b/frontend/src/pages/NormalDetection/NormalDetectionPage.js
index 2b4f377..a0f574b 100644
--- a/frontend/src/pages/NormalDetection/NormalDetectionPage.js
+++ b/frontend/src/pages/NormalDetection/NormalDetectionPage.js
@@ -1,4 +1,4 @@
-// src/pages/NormalDetection/NormalDetectionPage.js
+/* src/pages/NormalDetection/NormalDetectionPage.js */
import React, { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
diff --git a/frontend/src/pages/Rules/ManageRulesPage.js b/frontend/src/pages/Rules/ManageRulesPage.js
index fd22d68..2be97c1 100644
--- a/frontend/src/pages/Rules/ManageRulesPage.js
+++ b/frontend/src/pages/Rules/ManageRulesPage.js
@@ -32,10 +32,8 @@ const ManageRulesPage = () => {
<div className="pages-container-center">
<h1 className="dashboard-title">Manage Rules</h1>
<div className="dashboard-card">
- <AddRule onRuleAdded={handleRuleAdded} />
- {editingRule && (
- <UpdateRule rule={editingRule} onUpdateCompleted={handleUpdateCompleted} />
- )}
+ {!editingRule && <AddRule onRuleAdded={handleRuleAdded} />}
+ {editingRule && <UpdateRule rule={editingRule} onUpdateCompleted={handleUpdateCompleted} />}
<GetRules onEditRule={handleEditRule} onDeleteRule={handleDeleteRule} refresh={refreshRules} />
</div>
</div>
diff --git a/frontend/src/pages/UserDashboard/UserDashboard.js b/frontend/src/pages/UserDashboard/UserDashboard.js
index 68bf075..1708e35 100644
--- a/frontend/src/pages/UserDashboard/UserDashboard.js
+++ b/frontend/src/pages/UserDashboard/UserDashboard.js
@@ -19,12 +19,18 @@ const UserDashboard = () => {
return (
<div className="pages-container-center">
- <h1 className="dashboard-title">User Dashboard</h1>
- <h2 className="dashboard-greeting">Hello, {username}</h2>
- <div className="dashboard-buttons-container">
- <ButtonLink to="/user/profile" label="User Profile" />
- <ButtonLink to="/user/manage-rules" label="Manage Rules" />
- {/* Add more ButtonLink components here as needed */}
+ <div className="row justify-content-center">
+ <div className="card shadow-lg border-0">
+ <div className="card-body p-5">
+ <h1 className="dashboard-title">User Dashboard</h1>
+ <h2 className="dashboard-greeting">Hello, {username}</h2>
+ <div className="dashboard-buttons-container">
+ <ButtonLink to="/user/profile" label="User Profile" />
+ <ButtonLink to="/user/manage-rules" label="Manage Rules" />
+ {/* Add more ButtonLink components here as needed */}
+ </div>
+ </div>
+ </div>
</div>
</div>
);
diff --git a/frontend/src/pages/UserProfile/UserProfile.js b/frontend/src/pages/UserProfile/UserProfile.js
index ea77ab3..08fede3 100644
--- a/frontend/src/pages/UserProfile/UserProfile.js
+++ b/frontend/src/pages/UserProfile/UserProfile.js
@@ -1,4 +1,4 @@
-// src/pages/UserProfile/UserProfile.js
+/* src/pages/UserProfile/UserProfile.js */
import React, { useState, useEffect } from 'react';
import ChangeEmailForm from '../../forms/UserProfile/ChangeEmailForm';
@@ -41,19 +41,21 @@ const UserProfile = () => {
};
return (
- <div className="pages-container-center">
+ <div className="pages-container-center text-center">
<h1 className="dashboard-title">User Profile</h1>
- <ChangeEmailForm
- currentEmail={currentEmail}
- onUpdateEmail={handleUpdateEmail}
- />
- <ChangeUsernameForm
- currentUsername={currentUsername}
- onUpdateUsername={handleUpdateUsername}
- />
- <ChangePasswordForm
- onUpdatePassword={handleUpdatePassword}
- />
+ <div className="dashboard-card">
+ <ChangeEmailForm
+ currentEmail={currentEmail}
+ onUpdateEmail={handleUpdateEmail}
+ />
+ <ChangeUsernameForm
+ currentUsername={currentUsername}
+ onUpdateUsername={handleUpdateUsername}
+ />
+ <ChangePasswordForm
+ onUpdatePassword={handleUpdatePassword}
+ />
+ </div>
</div>
);
};
diff --git a/frontend/src/services/ruleApi.js b/frontend/src/services/ruleApi.js
index c3b2a5a..c4b049e 100644
--- a/frontend/src/services/ruleApi.js
+++ b/frontend/src/services/ruleApi.js
@@ -1,3 +1,5 @@
+//src/services/ruleApi.js
+
import api, { getCsrfToken } from './api';
export const addRule = async (ruleData) => {
diff --git a/frontend/src/styles/_auth.css b/frontend/src/styles/_auth.css
index af6db5c..44641be 100644
--- a/frontend/src/styles/_auth.css
+++ b/frontend/src/styles/_auth.css
@@ -1,13 +1,12 @@
/* src/styles/_auth.css */
-
.auth-form {
- background-color: #ffffff;
+ background-color: var(--light-color);
padding: 3rem;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
- width: 100%;
- max-width: 500px;
+ width: 95%;
+
}
.auth-form h2 {
@@ -28,8 +27,8 @@
}
.auth-form .btn-primary {
- background-color: #007bff;
- border-color: #007bff;
+ background-color: var(--primary-color);
+ border-color: var(--primary-color);
width: 100%;
padding: 0.75rem;
font-size: 1rem;
@@ -37,6 +36,6 @@
}
.auth-form .btn-primary:hover {
- background-color: #0056b3;
- border-color: #004085;
+ background-color: darken(var(--primary-color), 10%);
+ border-color: darken(var(--primary-color), 15%);
}
\ No newline at end of file
diff --git a/frontend/src/styles/_components.css b/frontend/src/styles/_components.css
index 4d1467f..27548a4 100644
--- a/frontend/src/styles/_components.css
+++ b/frontend/src/styles/_components.css
@@ -2,8 +2,15 @@
/* Shared styles for cards */
.card {
- width: 100%;
- max-width: 600px;
+ margin: 1rem 0;
+ border: none;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ border-radius: 10px;
+}
+
+
+.card-wide {
+ width: 95%;
margin: 1rem 0;
border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -12,6 +19,14 @@
.card-body {
padding: 2.5rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ /* Center items horizontally */
+ justify-content: center;
+ /* Center items vertically */
+ text-align: center;
+ /* Ensure text is centered */
}
.card-title {
@@ -19,11 +34,14 @@
}
/* Button styles */
+.btn {
+ transition: background-color 0.3s ease;
+}
+
.btn-primary {
background-color: var(--primary-color);
border: none;
color: #fff;
- transition: background-color 0.3s ease;
}
.btn-primary:hover {
@@ -34,7 +52,6 @@
background-color: var(--secondary-color);
border: none;
color: #fff;
- transition: background-color 0.3s ease;
}
.btn-secondary:hover {
@@ -45,7 +62,6 @@
background-color: var(--danger-color);
border: none;
color: #fff;
- transition: background-color 0.3s ease;
}
.btn-danger:hover {
@@ -68,12 +84,64 @@
margin-right: 0.5rem;
}
-/* List styles */
+
+/* List group styles */
+.list-group {
+ padding-left: 0;
+ margin-bottom: 1rem;
+ border-radius: 0.25rem;
+ width: 100%;
+ /* Make the list group take full width */
+}
+
+.list-group-header {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.75rem 1.25rem;
+ background-color: #f8f9fa;
+ border: 1px solid rgba(0, 0, 0, 0.125);
+ font-weight: bold;
+ border-top-left-radius: 0.25rem;
+ border-top-right-radius: 0.25rem;
+}
+
.list-group-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.25rem;
+ background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
- border-radius: 0.25rem;
+ border-top: none;
+ /* Remove top border to avoid double borders */
+}
+
+.list-group-item span {
+ flex: 1;
+ margin-right: 1rem;
+ /* Adds space between text and buttons */
+}
+
+.list-group-item .button-group {
+ display: flex;
+ flex-direction: column;
+ /* Arrange buttons in a column */
+ gap: 0.5rem;
+ /* Adds space between buttons */
+ margin-left: 1rem;
+ /* Adds space between text and buttons */
+}
+
+.item-label {
+ width: 35%;
+ /* Adjust width as needed */
+ text-align: left;
+ /* Align text to the left */
+}
+
+.location-label {
+ width: 35%;
+ /* Adjust width as needed */
+ text-align: left;
+ /* Align text to the left */
}
\ No newline at end of file
diff --git a/frontend/src/styles/_forms.css b/frontend/src/styles/_forms.css
index 811ff06..0ac25b1 100644
--- a/frontend/src/styles/_forms.css
+++ b/frontend/src/styles/_forms.css
@@ -30,16 +30,13 @@
display: flex;
flex-wrap: wrap;
gap: 10px;
- /* Adds space between checkboxes */
}
.checkbox-wrapper-12 {
display: flex;
align-items: center;
gap: 5px;
- /* Adds space between checkbox and text */
border: 1px solid #ddd;
- /* Adds a small border around each checkbox */
padding: 5px;
border-radius: 4px;
}
diff --git a/frontend/src/styles/_global.css b/frontend/src/styles/_global.css
index 24cdf8f..dc1d1e9 100644
--- a/frontend/src/styles/_global.css
+++ b/frontend/src/styles/_global.css
@@ -7,7 +7,7 @@ html {
padding: 0;
height: 100%;
width: 100%;
- font-family: Arial, sans-serif;
+ font-family: var(--font-family-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -25,20 +25,7 @@ html {
}
.text-danger {
- color: #dc3545;
+ color: var(--danger-color);
text-align: center;
margin-top: 1rem;
-}
-
-
-.pages-container-center {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- /* Align items from top to bottom */
- padding-top: 2rem;
- /* Adjust padding as needed */
- min-height: 100vh;
- /* Ensure it takes the full viewport height */
}
\ No newline at end of file
diff --git a/frontend/src/styles/_layout.css b/frontend/src/styles/_layout.css
index 4b0253e..e78407a 100644
--- a/frontend/src/styles/_layout.css
+++ b/frontend/src/styles/_layout.css
@@ -8,7 +8,7 @@
}
.form-container {
- background-color: #ffffff;
+ background-color: var(--light-color);
padding: 2rem;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -18,31 +18,13 @@
-.full-height-container {
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
-}
-
-.manage-content-container {
- max-width: 900px;
- margin: 0 auto;
- padding: 2rem;
-}
-
-.centered-content {
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 80vh;
- /* Adjust based on your layout needs */
-}
-
-.page-container {
+/* Updated for wider container */
+.pages-container-center {
display: flex;
flex-direction: column;
- min-height: 100vh;
- justify-content: center;
- align-items: center;
+ /* Centers content horizontally */
+ justify-content: flex-start;
+ /* Aligns content to the top vertically */
+ padding-top: 2rem;
+ margin: 0 auto;
}
\ No newline at end of file
diff --git a/frontend/src/styles/_responsive.css b/frontend/src/styles/_responsive.css
index 35f20d3..dad5348 100644
--- a/frontend/src/styles/_responsive.css
+++ b/frontend/src/styles/_responsive.css
@@ -1,92 +1,87 @@
/* src/styles/_responsive.css */
-/* General responsive styles */
-@media (max-width: 768px) {
- .auth-container {
- padding: 10px;
+@media (min-width: 100px) {
+ .pages-container-center {
+ width: 95%;
}
.auth-form {
- padding: 20px;
+ width: 95%;
}
- .pages-container-center {
- padding: 10px;
+ .card-wide {
+ width: 95%;
}
+}
- .dashboard-title {
- font-size: 2rem;
- }
- .card-wide {
+
+@media (min-width: 600px) {
+ .pages-container-center {
width: 90%;
}
- .checkbox-container {
- max-height: 200px;
- overflow-y: auto;
+ .auth-form {
+ width: 70%;
}
- .checkbox-wrapper-12 {
- flex: 1 1 100%;
+ .card-wide {
+ width: 90%;
}
}
-@media (min-width: 769px) and (max-width: 1199px) {
- .card-wide {
+
+
+@media (min-width: 768px) {
+ .pages-container-center {
width: 80%;
}
- .checkbox-container {
- max-height: 300px;
- overflow-y: auto;
+ .auth-form {
+ width: 68%;
}
- .checkbox-wrapper-12 {
- flex: 1 1 48%;
+ .card-wide {
+ width: 80%;
}
}
@media (min-width: 1200px) {
- .card-body {
- padding: 3rem;
+ .pages-container-center {
+ width: 65%;
}
- .btn-lg {
- font-size: 1.25rem;
- padding: 0.75rem 1.5rem;
+ .auth-form {
+ width: 60%;
}
.card-wide {
- width: 60%;
- max-width: 900px;
+ width: 70%;
}
+}
- .checkbox-container {
- max-height: 400px;
- overflow-y: auto;
+@media (min-width: 1600px) {
+ .pages-container-center {
+ width: 60%;
}
- .checkbox-wrapper-12 {
- flex: 1 1 30%;
+ .auth-form {
+ width: 50%;
}
-}
-/* Specific adjustments for the form container */
-.form-container {
- width: 100%;
- max-width: 600px;
- margin: 0 auto;
}
-@media (max-width: 768px) {
- .form-container {
- max-width: 100%;
+
+
+
+@media (min-width: 2000px) {
+ .pages-container-center {
+ width: 55%;
}
}
-@media (min-width: 1200px) {
- .form-container {
- max-width: 800px;
+@media (min-width: 2500px) {
+ .pages-container-center {
+ width: 50%;
}
}
\ No newline at end of file
diff --git a/frontend/src/styles/dashboard.css b/frontend/src/styles/dashboard.css
index ceda990..7eb825a 100644
--- a/frontend/src/styles/dashboard.css
+++ b/frontend/src/styles/dashboard.css
@@ -3,6 +3,7 @@
.dashboard-title {
font-size: 2.5rem;
margin-bottom: 1rem;
+ text-align: center;
}
.dashboard-greeting {
@@ -21,33 +22,4 @@
display: flex;
flex-direction: column;
align-items: center;
-}
-
-.card-wide {
- width: 60%;
- max-width: 900px;
- margin: 1rem 0;
- border: none;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- border-radius: 10px;
-}
-
-.card-body {
- padding: 2.5rem;
-}
-
-.card-title {
- text-align: center;
-}
-
-@media (max-width: 768px) {
- .card-wide {
- width: 80%;
- }
-}
-
-@media (max-width: 480px) {
- .card-wide {
- width: 100%;
- }
}
\ No newline at end of file
--
GitLab