Srs 353

frontend/Site/src/app/components/account/UserAccount.tsx

@@ -32,7 +32,8 @@ const UserAccount = ( props : any) =>{
             aria-controls="account-menu"
             aria-labelledby="user-account-label" onClick={toggleButton}>
                     {/* Profile image */}
-                    <img src={user.profileImage} alt="User profile image." className="account-image"  aria-hidden="true"/>
+                    <img src={user.profileImage} alt="User profile image." className="account-image"  aria-hidden="true"   role="img"
+        aria-label="User profile image"/>
                     {/* User name */}
                     <div className="p-3">{user.name}</div>
                     <div id="account-dropdown" className="account-custom-toggle-mobile align-item-center" aria-label="Account Menu Button">
@@ -77,7 +78,8 @@ const UserAccount = ( props : any) =>{
                         <div className="account-custom-label">Logged in as:</div>
                         <div className="account-username py-3">
                             {/* Profile image */}
-                            <img src={user.profileImage} alt="User profile image." className="account-image me-3"/>
+                            <img src={user.profileImage} alt="User profile image." className="account-image me-3"   role="img"
+        aria-label="User profile image"/>
 
                             {/* User name */}
                             <span>{user.name}</span>

frontend/Site/src/app/components/action/Actions.css

@@ -0,0 +1,40 @@
+.custom-action-btn {
+    border-radius: var(--surface-border-radius-medium);
+    background: var(--surface-primary-default, #1E5189) !important;
+    padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: center;
+    color: var(--typography-color-primary-invert, #FFFFFF) !important;
+}
+
+.custom-action-btn:hover {
+    border: 3px solid var(--surface-color-primary-activeBorder, #2E5DD7) !important;
+}
+
+.custom-action-menu {
+    border-radius: var(--surface-border-radius-medium) !important;
+    padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
+    background-color: var(--surface-background-white) !important;
+    box-shadow: var(--surface-shadow-medium);
+    border: none !important;
+}
+
+.custom-action-item {
+    display: flex !important;
+    padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium) !important;
+    gap: var(--layout-margin-medium) ;
+    font-family: BC Sans;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 27.01px;
+    text-align: left;
+    color: var(--typography-color-primary) !important;
+}
+
+.custom-action-item:hover {
+    background: var(--surface-color-secondary-hover, #EDEBE9) !important;
+    color: var(--typography-color-secondary, #474543) !important;
+  }
+

frontend/Site/src/app/components/action/Actions.tsx

@@ -0,0 +1,22 @@
+import { IActions } from "./IActions";
+import Dropdown from "react-bootstrap/Dropdown";
+import './Actions.css';
+
+const Actions: React.FC<IActions> = ({ label, items, onItemClick }) => {
+    return (
+        <Dropdown>
+            <Dropdown.Toggle variant="" id="dropdown-action" className="custom-action-btn">
+            {label}
+            </Dropdown.Toggle>
+            <Dropdown.Menu className="custom-action-menu">
+            {items.map((item, index) => (
+                <Dropdown.Item key={index} onClick={() => onItemClick(item.value)} className="custom-action-item">
+                {item.label}
+                </Dropdown.Item>
+            ))}
+            </Dropdown.Menu>
+        </Dropdown>
+      );
+  }
+
+  export default Actions;

frontend/Site/src/app/components/action/ActionsConfig.ts

@@ -0,0 +1,17 @@
+import { UserMode } from "../../helpers/requests/userMode";
+import { DropdownItem } from "./IActions";
+
+export const ActionItems: DropdownItem[] = [
+    {
+        label:'Edit Mode',
+        value: UserMode.EditMode
+    },
+    {
+        label:'SR Mode',
+        value: UserMode.SrMode
+    },
+    {
+        label:'Delete',
+        value: UserMode.DeleteMode
+    },
+]

frontend/Site/src/app/components/action/IActions.ts

@@ -0,0 +1,13 @@
+import { UserMode } from "../../helpers/requests/userMode";
+
+export interface DropdownItem {
+    label: string;
+    value: UserMode;
+}
+
+export interface IActions {
+    label: string;
+    items: DropdownItem[];
+    onItemClick: (value: string) => void;
+}
+

frontend/Site/src/app/components/common/IChangeType.ts

@@ -0,0 +1,23 @@
+export enum IChangeType {
+  Added,
+  Modified,
+  Deleted,
+  None, 
+}
+
+export class ChangeTracker {
+  changeType: IChangeType = IChangeType.None;
+  label: string = "";
+
+  constructor(changeType: IChangeType, label: string) {
+    this.changeType = changeType;
+    this.label = label;
+  }
+
+  toPlainObject() {
+    return {
+      changeType: this.changeType,
+      label: this.label,
+    };
+  }
+}

frontend/Site/src/app/components/common/icon.ts

@@ -26,9 +26,15 @@ import {
     FaAngleLeft,
     FaAngleRight,
     FaChevronDown,
-    FaChevronUp
+    FaChevronUp,
+    FaFloppyDisk,
+    FaUserMinus,
+    FaUserPlus,
+    FaPlus,
     } from "react-icons/fa6";
 
+    import { BsFillPinMapFill } from "react-icons/bs";
+
 
   export const ShoppingCartIcon = FaCartShopping;
   export const FolderPlusIcon = FaFolderPlus;
@@ -58,3 +64,8 @@ import {
   export const AngleRight = FaAngleRight;
   export const ChevronDown = FaChevronDown;
   export const ChevronUp = FaChevronUp;
+  export const FloppyDisk = FaFloppyDisk ;
+  export const UserPlus = FaUserPlus;
+  export const UserMinus = FaUserMinus;
+  export const Plus = FaPlus;
+  export const FillPinMapFill = BsFillPinMapFill;

frontend/Site/src/app/components/form/Form.css

@@ -8,11 +8,18 @@
 
 .custom-input {
     border: 1px solid var(--surface-color-border-light, #D8D8D8) !important;
-    background-color: var(--surface-background-white) !important;
+    background-color: var(--surface-background-white, #FFFFFF) !important;
     padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium) !important;
     border-radius: var(--layout-margin-xsmall) !important;
 }
 
+.custom-input-text { 
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+}
+
 .custom-input::placeholder {
     font-size: 16px;
     font-weight: 400;
@@ -45,10 +52,12 @@
 
 .custom-select {
     background-image: url('../../images/dropdown.png') !important;
+    background-repeat: no-repeat !important;
+    background-position: right .75rem center !important;
     background-size: 12px !important;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    line-height: 24px !important;
     text-align: left;
 }
 
@@ -60,13 +69,23 @@
 }
 
 .custom-option {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
+    font-size: 16px !important;
+    font-weight: 400 !important;
+    line-height: 24px !important;
     text-align: left;
 }
 
 .custom-input.error:focus {
     border-color: red;
     box-shadow: 0 0 0 .25rem rgba(255,0,0, 0.25);
+}
+
+.custom-form-image {
+        border-radius: 100px;
+        height: 27px;
+        width: 27px;
+}
+
+.custom-checkbox[type="checkbox"]:checked {
+    background:#313132;
 }