Feat/srs 282

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

@@ -0,0 +1,68 @@
+.account-custom-dropdown {
+  display: flex;
+  justify-content: space-between;
+}
+
+.account-custom-toggle {
+    color: var(--typography-color-primary-invert) !important;
+}
+
+.account-custom-toggle-mobile {
+  color: var(--typography-color-primary);
+}
+
+.account-custom-toggle:active {
+  border-color: transparent !important;
+}
+
+.account-custom-menu {
+  height: 231px;
+  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);
+  inset: 16px 0px auto auto !important;
+  border: none !important;
+}
+
+.account-custom-item-first {
+  padding: 0px var(--layout-margin-medium) 16px var(--layout-margin-medium) !important;
+  border-bottom: 1px solid var(--surface-color-border-light, #D8D8D8) !important;
+}
+
+.account-custom-label {
+  font: var(--typography-regular-label);
+  color: var(--typography-color-secondary);
+}
+
+.account-image {
+  border-radius: 100px;
+  height: 44px;
+  width: 44px;
+}
+
+.account-username span {
+  color: var(--typography-color-primary);
+  font: var(--typography-bold-body);
+}
+
+.account-custom-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) ;
+  color: var(--typography-color-primary) !important;
+}
+
+.account-custom-item-mobile {
+  padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
+}
+.account-custom-item:hover {
+  background-color: var(--surface-secondary-hover) !important;
+  color: var(--typography-color-secondary) !important;
+}
+
+@media screen and (max-width: 767px){
+  .user-dropdown{
+    display: none;
+  }
+}

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

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import Dropdown from "react-bootstrap/Dropdown";
+import './UserAccount.css';
+import avatar from '../../images/avatar.png';
+import { DropdownIcon, DropdownUpIcon } from "../common/icon";
+
+const UserAccount = ( props : any) =>{
+    // Sample user data
+    const userObj = {
+        name: 'Ipsum, Loren WLRS:EX',
+        profileImage: avatar, // URL to the profile image
+    };
+
+    const [user, setUser] = useState(userObj);
+    const [dropdownArrow, setDropdownArrow] = useState(false);
+    const toggleButton = (event : any) => {
+      event.stopPropagation();
+      setDropdownArrow(!dropdownArrow);
+    }
+
+    if(props.mobileView)
+    {
+      return (
+        <>
+          {/* Dropdown component for user account */}
+          <div aria-label="User Account" className="d-md-none">
+              <div role="navigation">
+                  {/* Logged in as label */}
+                  <div className="account-custom-label" id="user-account-label">Logged in as:</div>
+                  {/* Dropdown toggle button */}
+                  <div  role="button" className="account-username py-3 d-flex align-items-center" aria-expanded={dropdownArrow}
+            aria-controls="account-menu"
+            aria-labelledby="user-account-label">
+                    {/* Profile image */}
+                    <img src={user.profileImage} alt="User profile image." className="account-image"  aria-hidden="true"/>
+                    {/* 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"
+                    onClick={toggleButton}>
+                     { dropdownArrow ? <DropdownUpIcon/> : <DropdownIcon/> }
+                    </div>
+                  </div>
+              </div>
+              { dropdownArrow && 
+              <div role="menu" id="account-menu"
+              aria-labelledby="account-dropdown" className="p-0">
+                  {/* Account settings */}
+                  <div role="menuitem" 
+                  aria-label="Account Settings"
+                  tabIndex={0} // Make focusable with keyboard 
+                  className="account-custom-item-mobile">Account Settings</div>
+                  {/* Logout */}
+                  <div role="menuitem" aria-label="Log Out"
+                  tabIndex={0} // Make focusable with keyboard
+                  className="account-custom-item-mobile">Log Out</div>
+              </div>
+              }
+          </div>
+        </>
+      )
+    }
+    else {
+            return(
+            <>
+              {/* Dropdown component for user account */}
+              <Dropdown aria-label="User Account" className="d-md-flex justify-content-between d-sm-none d-none">
+                {/* Dropdown toggle button */}
+                <div className="d-flex">
+                    {/* Profile image */}
+                    <img src={user.profileImage} alt="User profile image." className="account-image" />
+                    <Dropdown.Toggle id="account-dropdown" variant="" className="account-custom-toggle p-2" aria-label="Account Menu">
+                    </Dropdown.Toggle>
+                </div>
+                {/* Dropdown menu */}
+                <Dropdown.Menu className="account-custom-menu" role="menu" aria-labelledby="account-dropdown">
+                    {/* Logged in as label */}
+                    <Dropdown.Item role="menuitem" className="account-custom-item-first" disabled aria-disabled="true">
+                        <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"/>
+
+                            {/* User name */}
+                            <span>{user.name}</span>
+                        </div>
+                    </Dropdown.Item>
+                    <div className="pt-3">
+                      {/* Account settings */}
+                      <Dropdown.Item role="menuitem" className="account-custom-item" aria-label="Account Settings">Account Settings</Dropdown.Item>
+
+                      {/* Logout */}
+                      <Dropdown.Item role="menuitem" className="account-custom-item" aria-label="Log Out">Log Out</Dropdown.Item>
+                    </div>
+                </Dropdown.Menu>
+              </Dropdown>
+            </>
+            )
+      }
+}
+
+
+export default UserAccount;

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

@@ -17,7 +17,10 @@ import {
     FaAnglesLeft,
     FaAnglesRight,
     FaAngleDown,
-    FaRegCircleXmark    
+    FaRegCircleXmark,
+    FaCheck,
+    FaCaretUp,
+    FaCaretDown
     } from "react-icons/fa6";
 
 
@@ -40,3 +43,6 @@ import {
   export const AnglesRightIcon = FaAnglesRight;
   export const ArrowDownIcon = FaAngleDown ;
   export const CircleXMarkIcon = FaRegCircleXmark;
+  export const TickIcon = FaCheck;
+  export const DropdownUpIcon = FaCaretUp;
+  export const DropdownIcon = FaCaretDown;

frontend/Site/src/app/components/language/LanguageSwitcher.css

@@ -0,0 +1,72 @@
+
+.custom-toggle {
+  cursor: pointer;
+  color: var(--typography-color-primary-invert);
+}
+
+.custom-toggle:first-child:active {
+  border-color: transparent;
+}
+
+.custom-menu {
+  height: 370px;
+  border-radius: var(--surface-border-radius-medium);
+  padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px;
+  box-shadow: var(--surface-shadow-medium);
+  background-color: var(--surface-background-white);
+  inset: 45px auto auto auto;
+  position:absolute;
+  left:calc(100% - 410px);
+}
+
+.custom-item {
+  padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium);
+  gap: var(--layout-margin-medium);
+  color: var(--typography-color-primary);
+}
+
+.custom-item:hover {
+    background-color: var(--surface-secondary-hover);
+    color: var(--typography-color-secondary);
+}
+
+.custom-item-first-child {
+  padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium) ;
+  gap: var(--layout-margin-medium);
+
+}
+
+.custom-item-label {
+  font: var(--typography-regular-label);
+  color: var(--typography-color-secondary);
+}
+
+.tick-icon {
+  color: var(--icons-icons-primary);
+  float: right;
+}
+
+@media screen and (max-width: 767px){
+    .custom-menu {
+        border-radius: 0px 0px var(--surface-border-radius-medium) var(--surface-border-radius-medium);
+        padding: var(--layout-padding-large);
+        box-shadow: var(--surface-shadow-medium);
+        background-color: var(--surface-background-white);
+        inset: 41px 0 0 0 ;
+        overflow: auto;
+      }
+
+
+      .custom-item {
+        padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px;
+        gap: var(--layout-margin-medium);
+        color: var(--typography-color-primary);
+        font: var(--typography-regular-body);
+      }
+
+      .custom-item-first-child {
+        padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px;
+        gap: var(--layout-margin-medium);
+
+      }
+}