Title not vertically centered in components using the class `timeline-header`

[Eclipse-Dominator]

Describe the bug
Text within the css class timeline-header is not vertically centralized.
Current:

Expected:

As timeline-header is part of the shared global css class. Just tweaking this should fix all affected components.

Components affected:

• description.component
• issue-dispute.component
• parse-error.component
• team-accepted.component
• team-response.component
• tester-response.component

There was already some css added to some of the span in these components where
style="vertical-align: middle; margin-left: 5px" is injected into the components. However, this does not seem to be effective.

---

A possible solution is to add the following style to timeline-header class

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;

and remove the style="vertical-align: middle; margin-left: 5px" from relevant spans.

However, there might be better and more effective solutions.

[KalebArmbrust]

@Eclipse-Dominator I would be happy to work on this!

[Eclipse-Dominator]

@KalebArmbrust Sure! You may make a pull request for this issue

[KalebArmbrust]

@Eclipse-Dominator Great! How can I recreate this instance so that I can work on it? I have just setup the dev environment and am on the main screen.

[luminousleek]

@Eclipse-Dominator Great! How can I recreate this instance so that I can work on it? I have just setup the dev environment and am on the main screen.

Hello, the default repo in the dev environment (I'm assuming you ran npm run ng:serve:web) can only be accessed by devson the CATcher team so unfortunately you can't use that. Please refer to the section on Setting up custom CATcher sessions in the testing page of the docs to be able to view issues in CATcher. The relevant component in this issue can be see in the Bug Reporting phase so don't worry about not being able to access the other phases.

If you've taken CS2103T then you can save a bit of time and skip populating a repo with dummy issues by using one of the repos used when you tested CATcher in CS2013T (e.g. alpha). To do that, just configure the settings.json file as follows:

{
  "openPhases" : ["phaseBugReporting", "phaseTeamResponse", "phaseTesterResponse", "phaseModeration"],
  "phaseBugReporting": "alpha",
  "phaseTeamResponse": "pe-results",
  "phaseTesterResponse": "alpha",
  "phaseModeration": "pe-evaluation"
}

Hope this helps!

[KalebArmbrust]

@luminousleek I have found this task to be a little too above my abilities and so I am going to pass on this. Best of luck!

[LJXSean]

@Eclipse-Dominator Hi, is this issue still available to work on?

[Eclipse-Dominator]

@LJXSean Yup, it should be still available