SessionSummary design

public/locales/en/translations.json

@@ -18,6 +18,7 @@
     "About": "About"
   },
   "Session": {
+    "Title": "Sessions",
     "Session": "Session",
     "Active": "Active",
     "StartDate": "Start date",

public/locales/ro/translations.json

@@ -9,6 +9,7 @@
     "About": "Despre"
   },
   "Session": {
+    "Title": "Sesiuni",
     "Session": "Sesiune",
     "Active": "Activă",
     "StartDate": "Dată pornire",

src/features/session/components/SessionListComponent.js

@@ -8,6 +8,7 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import PropTypes from "prop-types";
 import SessionSummary from "./SessionSummary";
 import Spinner from "../../../components/common/Spinner";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -21,10 +22,11 @@ const useStyles = makeStyles((theme) => ({
 
 const SessionListComponent = ({ sessions }) => {
   const classes = useStyles();
+  const { t } = useTranslation();
 
   return (
     <div className={classes.root}>
-      <h2>Sessions</h2>
+      <h2>{t("Session.Title")}</h2>
       {sessions.loading ? (
         <Spinner />
       ) : (

src/features/session/components/SessionSummary.js

@@ -25,7 +25,7 @@ const SessionSummary = ({ session }) => {
           {`${t("Session.Session")}: `}
           <span className={classes.value}>{session.sessionId}</span>
         </Grid>
-        <Grid item xs={12} sm={2} md={2}>
+        <Grid item xs={12} sm={3} md={3}>
           {`${t("Session.Active")}: `}
           {session.active ? (
             <CheckCircleOutlineRounded color="primary" />
@@ -33,7 +33,7 @@ const SessionSummary = ({ session }) => {
             <RemoveRounded />
           )}
         </Grid>
-        <Grid item xs={12} sm={3} md={3}>
+        <Grid item xs={12} sm={4} md={4}>
           {`${t("Session.StartDate")}: `}
           <span className={classes.value}>
             {t("DATE_FORMAT", {
@@ -42,7 +42,17 @@ const SessionSummary = ({ session }) => {
           </span>
         </Grid>
 
+        <Grid item xs={12} sm={5} md={5}>
+          {`${t("Session.RunningTime")}: `}
+          <span className={classes.value}>{session.runningTime}</span>
+        </Grid>
+
         <Grid item xs={12} sm={3} md={3}>
+          {`${t("Session.Host")}: `}
+          <span className={classes.value}>{session.hostName}</span>
+        </Grid>
+
+        <Grid item xs={12} sm={4} md={4}>
           {`${t("Session.StopDate")}: `}
           <span className={classes.value}>
             {session.stopDate
@@ -55,16 +65,6 @@ const SessionSummary = ({ session }) => {
               : "---"}
           </span>
         </Grid>
-
-        <Grid item xs={12} sm={3} md={3}>
-          {`${t("Session.RunningTime")}: `}
-          <span className={classes.value}>{session.runningTime}</span>
-        </Grid>
-
-        <Grid item xs={12} sm={3} md={3}>
-          {`${t("Session.Host")}: `}
-          <span className={classes.value}>{session.hostName}</span>
-        </Grid>
       </Grid>
     </>
   );