From 8d2f0bb38d0c0641047a693f6f0951bfe12db86b Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Thu, 14 May 2020 00:12:19 +0300
Subject: [PATCH] SessionSummary design

---
 public/locales/en/translations.json           |  1 +
 public/locales/ro/translations.json           |  1 +
 .../components/SessionListComponent.js        |  4 +++-
 .../session/components/SessionSummary.js      | 24 +++++++++----------
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 5ad41ec..f8ca6b4 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -18,6 +18,7 @@
     "About": "About"
   },
   "Session": {
+    "Title": "Sessions",
     "Session": "Session",
     "Active": "Active",
     "StartDate": "Start date",
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 11a79d5..2e93f20 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -9,6 +9,7 @@
     "About": "Despre"
   },
   "Session": {
+    "Title": "Sesiuni",
     "Session": "Sesiune",
     "Active": "Activă",
     "StartDate": "Dată pornire",
diff --git a/src/features/session/components/SessionListComponent.js b/src/features/session/components/SessionListComponent.js
index e751a62..acc23f7 100644
--- a/src/features/session/components/SessionListComponent.js
+++ b/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 />
       ) : (
diff --git a/src/features/session/components/SessionSummary.js b/src/features/session/components/SessionSummary.js
index 5fb2a5b..83b840b 100644
--- a/src/features/session/components/SessionSummary.js
+++ b/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>
     </>
   );