updating the help page

frontend/src/index.css

@@ -575,7 +575,6 @@ Other button classes are defined further down together with other classes for th
   background-color: hsl(0deg 0% 97%);
   padding: 0 3rem 3rem;
   position: relative;
-  margin: 100px 0;
 }
 
 .help-title {
@@ -587,19 +586,24 @@ Other button classes are defined further down together with other classes for th
 
 .help-subtitle {
   font-size: 1.5rem;
-  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  color: hsl(186deg 92% 11%);
+}
+
+.help-h3 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  padding-top: 1.5rem;
   color: hsl(186deg 92% 11%);
 }
 
 .help-info {
   font-size: 1.2rem;
-  margin-top: 1.5rem;
+  margin-top: 1rem;
 }
 
 .overview-img {
   height: 30rem;
-  width: 65rem;
-  margin-right: 1rem;
   margin-top: 2rem;
 }
 

frontend/src/pages/Help.tsx

@@ -6,8 +6,8 @@ import { Row } from "../components/Row";
 import { Cell } from "../components/Cell";
 import { IssueActivityPair, FetchedTimeEntry } from "../model";
 import { QuickAdd } from "../components/QuickAdd";
-import weektravel from "../icons/weektravel.png";
-import overview from "../icons/overview.png";
+import weektravel from "../images/weektravel.png";
+import overview from "../images/overview.png";
 
 export const Help = () => {
   const context = React.useContext(AuthContext);
@@ -47,12 +47,12 @@ export const Help = () => {
     updated_on: "2020-01-01",
   };
   return (
-    <main>
-      <div className="usr-header">
+    <>
+      <header className="usr-header">
         <h1 className="help-title">How do I use the urdr service?</h1>
         <HeaderUser username={context.user ? context.user.login : ""} />
-      </div>
-      <div className="help-wrapper">
+      </header>
+      <main className="help-wrapper">
         <h2 className="help-subtitle">Introduction</h2>
         <p className="help-info">
           The purpose of this website is to ease the process of logging time on
@@ -105,7 +105,7 @@ export const Help = () => {
           have most recently logged time on, based on the week you are currently
           looking at. Thus, recent rows change as you navigate across different
           weeks or as you add new time entries. If desired, these type of rows
-          can be hidden after clicking on the eye button.
+          can be hidden after clicking on the red cross button to the far left.
         </p>
         <Row
           topic={exampleIAP}
@@ -130,9 +130,10 @@ export const Help = () => {
           different rows on the corresponding day. It is worth noting that the
           sum also contains entries that have been hidden from list of recent
           rows. In case the number displayed in a sum field doesn't seem to fit
-          to the time entries displayed above, you have probably hidden a row
-          that contained a time entry for that day. You can easily make it
-          visible again by using the <b>"Add new row"</b> feature.
+          to the time entries displayed above, you might have hidden a row that
+          contained a time entry for that day (see "Known limitations"). You can
+          easily make it visible again by using the <b>"Add new row"</b>{" "}
+          feature.
         </p>
         <QuickAdd addIssueActivity={() => {}}></QuickAdd>
         <h2 className="help-subtitle">Adding or updating time entries</h2>
@@ -193,7 +194,33 @@ export const Help = () => {
             className="weektravel-img"
           />
         </div>
-      </div>
-    </main>
+        <h2 className="help-subtitle">Known limitations</h2>
+        <h3 className="help-h3">Double time entries</h3>
+        <p className="help-info">
+          In Redmine it's possible to create two time entries for the same
+          issue-activity pair per day. You might have done that in the past, and
+          for example had two different comments on the different time entries.
+          As urdr only has one cell per day and row (i.e. issue-activity pair),
+          you will only see one of these entries displayed in the interface. The
+          sum row and column however will contain both entries.{" "}
+          <b>
+            In this case, the number of hours displayed as sum will not match
+            what you actually see on the page.
+          </b>
+        </p>
+        <h3 className="help-h3">Hidden rows with time entries</h3>
+        <p className="help-info">
+          If you hide a row in urdr, it will be permanently hidden unless you
+          add it again manually. It stays hidden even when you time travel. If
+          you move to a week in which the hidden row has time entries, the row
+          will still not be displayed. The time entries however will be included
+          in the sum row in the bottom of the spreadsheet.{" "}
+          <b>
+            In this case, the number of hours displayed as sum will not match
+            what you actually see on the page.
+          </b>
+        </p>
+      </main>
+    </>
   );
 };