Dev

src/pages/Dashboard.tsx

@@ -160,6 +160,11 @@ const Dashboard: React.FC = () => {
     navigate(`/experiment/${experiment.ID}`, { state: { experiment } });
   };
 
+  const truncateText = (text: string, maxLength: number): string => {
+    if (text.length <= maxLength) return text;
+    return text.substring(0, maxLength) + '...';
+  };
+
   return (
     <div className="dashboard-container" data-testid="dashboard-container">
       {/* Navbar */}
@@ -262,20 +267,20 @@ const Dashboard: React.FC = () => {
             >
               <thead>
                 <tr>
-                  <th onClick={() => requestSort('livingLab')}>
-                    LivingLab
+                  <th onClick={() => requestSort('name')}>
+                    Name
                     <img
                       src="/assets/vblacksvg.svg"
                       alt="Sort Icon"
-                      className={`sort-icon ${getSortIconClass('livingLab')}`}
+                      className={`sort-icon ${getSortIconClass('name')}`}
                     />
                   </th>
-                  <th onClick={() => requestSort('name')}>
-                    Name
+                  <th onClick={() => requestSort('livingLab')}>
+                    LivingLab
                     <img
                       src="/assets/vblacksvg.svg"
                       alt="Sort Icon"
-                      className={`sort-icon ${getSortIconClass('name')}`}
+                      className={`sort-icon ${getSortIconClass('livingLab')}`}
                     />
                   </th>
                   <th onClick={() => requestSort('numberOfQuestionnaires')}>
@@ -323,14 +328,14 @@ const Dashboard: React.FC = () => {
                       className={index % 2 === 0 ? 'row-even' : 'row-odd'}
                       style={{ cursor: 'pointer' }}
                     >
-                      <td onClick={() => handleExperimentClick(exp)}>
-                        {exp.livingLab?.name || 'All LivingLabs'}
-                      </td>
                       <td
                         data-testid="experiment-name"
                         onClick={() => handleExperimentClick(exp)}
                       >
-                        {exp.name}
+                        {truncateText(exp.name, 37)}
+                      </td>
+                      <td onClick={() => handleExperimentClick(exp)}>
+                        {exp.livingLab?.name || 'All LivingLabs'}
                       </td>
                       <td onClick={() => handleExperimentClick(exp)}>
                         {exp.numberOfQuestionnaires}

src/pages/Experiment.tsx

@@ -131,7 +131,7 @@ const Experiment: React.FC = () => {
               />
             </div>
             <div className="button-content">
-              <p>Amount: {experiment.numberOfQuestionnaires || 0}</p>
+              <p>Number of Questionnaires: {experiment.numberOfQuestionnaires || 0}</p>
               <p>Responses: {experiment.questionnaireActivity || 0}</p>
             </div>
           </button>
@@ -150,7 +150,7 @@ const Experiment: React.FC = () => {
               />
             </div>
             <div className="button-content">
-              <p>Amount: {experiment.numberOfMessages || 0}</p>
+              <p>Number of Messages: {experiment.numberOfMessages || 0}</p>
               <p>Sent: {experiment.messageActivity || 0}</p>
             </div>
           </button>

src/pages/MessageDashboard.tsx

@@ -8,7 +8,7 @@ import { getMessagesByExperimentID } from '../services/messageService';
 import { Message } from '../types/message';
 import { Experiment } from '../types/experiment';
 
-interface InteractionType {
+interface TriggerType {
   ID: string;
   name: string;
 }
@@ -18,11 +18,11 @@ const MessageDashboard: React.FC = () => {
   const { id } = useParams<{ id: string }>();
 
 
-  const [interactionTypes, setInteractionTypes] = useState<InteractionType[]>([]);
+  const [interactionTypes, setInteractionTypes] = useState<TriggerType[]>([]);
   const [messages, setMessages] = useState<Message[]>([]);
   const [experiment] = useState<Experiment | null>(null);
   const [filteredMessages, setFilteredMessages] = useState<Message[]>([]);
-  const [selectedInteractionType, setSelectedInteractionType] = useState<string>('All');
+  const [selectedTriggerType, setSelectedInteractionType] = useState<string>('All');
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [sortConfig, setSortConfig] = useState<{ key: keyof Message; direction: string } | null>(null);
 
@@ -69,13 +69,13 @@ const MessageDashboard: React.FC = () => {
           name: type,
         }));
 
-        // Include 'All InteractionTypes' as default option
-        const allInteractionTypesOption: InteractionType = {
+        // Include 'All TriggernTypes' as default option
+        const allTriggerTypesOption: TriggerType = {
           ID: 'all',
           name: 'All',
         };
 
-        setInteractionTypes([allInteractionTypesOption, ...interactionTypesData]);
+        setInteractionTypes([allTriggerTypesOption, ...interactionTypesData]);
 
         setFilteredMessages(messages);
 
@@ -94,9 +94,9 @@ const MessageDashboard: React.FC = () => {
   useEffect(() => {
     let filtered = [...messages];
 
-    // Filter by InteractionType
-    if (selectedInteractionType !== 'All') {
-      filtered = filtered.filter((msg: Message) => msg.trigger === selectedInteractionType);
+    // Filter by TriggerType
+    if (selectedTriggerType !== 'All') {
+      filtered = filtered.filter((msg: Message) => msg.trigger === selectedTriggerType);
     }
 
     // Filter by search query
@@ -123,7 +123,7 @@ const MessageDashboard: React.FC = () => {
     }
 
     setFilteredMessages(filtered);
-  }, [selectedInteractionType, searchQuery, sortConfig, messages]);
+  }, [selectedTriggerType, searchQuery, sortConfig, messages]);
 
   // Handle sorting
   const requestSort = (key: keyof Message) => {
@@ -152,6 +152,11 @@ const MessageDashboard: React.FC = () => {
     navigate(`/message/${message.answerID}`, { state: { message } });
   };
 
+  // Function to truncate text to a specified length
+  const truncateText = (text: string, maxLength: number): string => {
+    if (text.length <= maxLength) return text;
+    return text.substring(0, maxLength) + '...';
+  };
 
   return (
     <div className="message-dashboard-container" data-testid="message-dashboard-container">
@@ -160,12 +165,12 @@ const MessageDashboard: React.FC = () => {
 
       {/* Messages Title */}
       <h1 className="messages-title" data-testid="messages-title">
-      Messages for Experiment: {experiment?.name || `Experiment ${id}`}
+      Messages for Experiment: {truncateText(experiment?.name || `Experiment ${id}`, 35)}
       </h1>
 
       {/* Filters Container */}
       <div className="message-filters-container" data-testid="filters-container">
-        {/* InteractionType Filter */}
+        {/* TriggerType Filter */}
         <div className="message-filter interactiontype-filter" data-testid="interactiontype-filter">
           <label className="filter-label">Filter by trigger:</label>
           <div
@@ -176,7 +181,7 @@ const MessageDashboard: React.FC = () => {
               data-testid="interactiontype-dropdown-button"
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             >
-              {selectedInteractionType}
+              {selectedTriggerType}
               <img
                 src="/assets/vsvg.svg"
                 alt="Dropdown Icon"
@@ -231,20 +236,20 @@ const MessageDashboard: React.FC = () => {
             >
               <thead>
                 <tr>
-                  <th onClick={() => requestSort('trigger')}>
-                    Interaction
+                  <th onClick={() => requestSort('name')}>
+                    Name
                     <img
                       src="/assets/vblacksvg.svg"
                       alt="Sort Icon"
-                      className={`sort-icon ${getSortIconClass('trigger')}`}
+                      className={`sort-icon ${getSortIconClass('name')}`}
                     />
                   </th>
-                  <th onClick={() => requestSort('name')}>
-                    Name
+                  <th onClick={() => requestSort('trigger')}>
+                    Trigger
                     <img
                       src="/assets/vblacksvg.svg"
                       alt="Sort Icon"
-                      className={`sort-icon ${getSortIconClass('name')}`}
+                      className={`sort-icon ${getSortIconClass('trigger')}`}
                     />
                   </th>
                   <th onClick={() => requestSort('text')}>
@@ -290,17 +295,18 @@ const MessageDashboard: React.FC = () => {
                       className={index % 2 === 0 ? 'row-even' : 'row-odd'}
                       style={{ cursor: 'pointer' }}
                     >
-                      <td onClick={() => handleMessageClick(msg)}>
-                        {msg.trigger}
-                      </td>
                       <td
                         data-testid="message-name"
                         onClick={() => handleMessageClick(msg)}
                       >
-                        {msg.name}
+                        {truncateText(msg.name, 20)}
+                      </td>
+                      <td onClick={() => handleMessageClick(msg)}>
+                        {msg.trigger}
                       </td>
+
                       <td onClick={() => handleMessageClick(msg)}>
-                        {msg.text}
+                        {truncateText(msg.text, 12)}
                       </td>
                       <td onClick={() => handleMessageClick(msg)}>
                         {msg.severity}

src/pages/Profile.tsx

@@ -8,18 +8,19 @@ import '../styles/Profile.css';
 const Profile: React.FC = () => {
   const navigate = useNavigate();
   const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string>('');
 
   useEffect(() => {
     const fetchProfile = async () => {
       try {
+        setIsLoading(true);
         const profile = await getMyProfile();
         setUser(profile);
+        setIsLoading(false);
       } catch (err) {
         setError('Failed to load profile.');
-      } finally {
-        setLoading(false);
+        setIsLoading(false);
       }
     };
 
@@ -31,14 +32,6 @@ const Profile: React.FC = () => {
     navigate('/login'); // Redirect to the login page
   };
 
-  if (loading) {
-    return <div>Loading...</div>;
-  }
-
-  if (error) {
-    return <div>{error}</div>;
-  }
-
   return (
     <div className="profile-page">
       {/* Navbar */}

src/styles/Experiment.css

@@ -77,7 +77,7 @@ body {
   height: 56px;
 
   border-radius: 12px;
-  border: 3px solid rgba(0, 0, 0, 0.25);
+  border: 3px solid rgba(0, 0, 0, 0.651);
   background: rgba(196, 196, 196, 0);
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
 }
@@ -89,7 +89,7 @@ body {
   color: #000;
   font-family: 'Roboto', sans-serif;
   font-size: 22px;
-  font-weight: 300;
+  font-weight: 500;
   line-height: normal;
 }
 
@@ -124,7 +124,7 @@ body {
   height: 136px;
 
   border-radius: 12px;
-  border: 3px solid rgba(0, 0, 0, 0.25);
+  border: 3px solid rgba(0, 0, 0, 0.651);
   background: rgba(196, 196, 196, 0);
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
 }
@@ -137,7 +137,7 @@ body {
   color: #000;
   font-family: 'Roboto', sans-serif;
   font-size: 20px;
-  font-weight: 300;
+  font-weight: 500;
   line-height: normal;
 }
 
@@ -178,7 +178,7 @@ body {
   height: 48px;
 
   border-radius: 12px;
-  border: 3px solid rgba(0, 0, 0, 0.25);
+  border: 3px solid rgba(0, 0, 0, 0.651);
   background: rgba(196, 196, 196, 0);
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
 
@@ -189,7 +189,7 @@ body {
   color: #000;
   font-family: 'Roboto', sans-serif;
   font-size: 22px;
-  font-weight: 300;
+  font-weight: 500;
 }
 
 .date-separator {
@@ -230,7 +230,7 @@ body {
   height: 48px;
 
   border-radius: 12px;
-  border: 3px solid rgba(0, 0, 0, 0.25);
+  border: 3px solid rgba(0, 0, 0, 0.651);
   background: rgba(196, 196, 196, 0);
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
 
@@ -245,7 +245,7 @@ body {
   color: #000;
   font-family: 'Roboto', sans-serif;
   font-size: clamp(16px, 5vw, 25px); 
-  font-weight: 300;
+  font-weight: 400;
   white-space: nowrap; 
   overflow: hidden;
   text-overflow: ellipsis; 

src/styles/MessageDashboard.css

@@ -3,6 +3,9 @@
   font-family: 'Roboto', sans-serif;
   position: relative;
   overflow-x: hidden; 
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Messages Title */
@@ -146,9 +149,11 @@
 /* Table Container */
 .message-table-container {
   margin-top: 20px;
-  margin-left: 5%;
-  margin-right: 5%;
+  margin-left: 2%;
+  margin-right: 2%;
   overflow-x: auto;
+  overflow-y: auto; /* Enables vertical scrolling */
+  max-height: calc(100vh - 180px); /* Set desired maximum height */
   user-select: none;
 }
 
@@ -254,3 +259,22 @@
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+/* Scrollbar Styling (Optional) */
+.message-table-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.message-table-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.message-table-container::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+.message-table-container::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}