addd

Author: Laurie T. Malau

components/dashboard/src/images/credits.svg

@@ -15,6 +15,7 @@ import { Item, ItemField, ItemsList } from "../components/ItemsList";
 import moment from "moment";
 import Pagination from "../components/Pagination";
 import Header from "../components/Header";
+import creditsSvg from "../images/credits.svg";
 
 function TeamUsage() {
     const { teams } = useContext(TeamsContext);
@@ -48,7 +49,9 @@ function TeamUsage() {
     };
 
     const getMinutes = (endTime: number, startTime: number) => {
-        return Math.floor(endTime - startTime) / (1000 * 60) + " min";
+        const lengthOfUsage = Math.floor(endTime - startTime);
+        const inMinutes = (lengthOfUsage / (1000 * 60)).toFixed(1);
+        return inMinutes + " min";
     };
 
     const calculateTotalUsage = () => {
@@ -68,15 +71,16 @@ function TeamUsage() {
             <div className="app-container">
                 <div className="flex space-x-16">
                     <div className="flex">
-                        <div className="space-y-8 mt-6 mb-6">
+                        <div className="space-y-8 mt-6 mb-6" style={{ width: "max-content" }}>
                             <div className="flex flex-col truncate">
                                 <div className="text-base text-gray-500 truncate">Period</div>
-                                <div className="mr-3 text-lg text-gray-600 font-semibold truncate">June 2022</div>
+                                <div className="text-lg text-gray-600 font-semibold truncate">June 2022</div>
                             </div>
                             <div className="flex flex-col truncate">
-                                <div className="text-base text-gray-500 truncate">Monthly usage</div>
-                                <div className="mr-3 text-lg text-gray-600 font-semibold truncate">
-                                    {calculateTotalUsage()} Total Credits
+                                <div className="text-base text-gray-500">Monthly usage</div>
+                                <div className="flex text-lg text-gray-600 font-semibold">
+                                    <img className="mr-1" src={creditsSvg} alt={"credits icon"} />
+                                    <span>{calculateTotalUsage()} Total Credits</span>
                                 </div>
                             </div>
                         </div>
@@ -95,7 +99,8 @@ function TeamUsage() {
                                 <ItemField className="my-auto">
                                     <span>Usage</span>
                                 </ItemField>
-                                <ItemField className="my-auto">
+                                <ItemField className="flex my-auto space-x-1">
+                                    <img src={creditsSvg} alt={"credits icon"} />
                                     <span>Credits</span>
                                 </ItemField>
                                 <ItemField className="my-auto" />