Added Tooltip

src/components/navbar/NavBar.tsx

@@ -73,7 +73,17 @@ const NavBar: React.FC = () => {
                       tag.architecture = res?.data?.architecture;
                       tag.os = res?.data?.os;
                       tag.created = new Date(res?.data?.created);
+                  }).catch((err) => {
+                    const index = repository.tags.indexOf(tag);
+                    if (index > -1) {
+                      repository.tags.splice(index, 1);
+                    }
                   });
+              }).catch((err) => {
+                const index = repository.tags.indexOf(tag);
+                if (index > -1) {
+                  repository.tags.splice(index, 1);
+                }
               });
               promises.push(promise);
           });

src/components/repositoryInfo/RepositoryInfo.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { useLocation, Link } from "react-router-dom";
-import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert } from "@mui/material";
+import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert, Tooltip } from "@mui/material";
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import useRepositories from "../../hooks/useRepositories";
 import Tag from "../../interfaces/Tag";
 import Repository from "../../interfaces/Repositoriy";
-import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon } from "../../utils";
+import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst } from "../../utils";
 import RepoNotFound from "./RepoNotFound"
 import Loading from "../Loading";
 
@@ -44,7 +44,7 @@ const RepositoryInfo: React.FC = () => {
                             Word of the Day
                         </Typography> */}
                         <Grid container>
-                            <Grid item lg={6} sm={12}>
+                            <Grid item lg={6} md={12}>
                                 <Typography className="lines" variant="h5" component="div">
                                     {repository.name}
                                 </Typography>
@@ -53,7 +53,7 @@ const RepositoryInfo: React.FC = () => {
                                     {"Last updated: " + repository.tags.filter((tag: Tag) => (tag.label === "latest")).map((tag: Tag) => (tag.created ? printTimePassed(tag.created) : "")).join(" ")}
                                 </Typography>
                             </Grid>
-                            <Grid item lg={6} sm={12}>
+                            <Grid item lg={6} md={12}>
                                 <Box sx={{ display: "flex", flexDirection: "column" }}>
                                     <Typography className="lines" variant="h6">
                                         Docker commands
@@ -112,13 +112,33 @@ const RepositoryInfo: React.FC = () => {
                                         <ListItemText primary={tag.label} />
                                     </Grid>
                                     <Grid item sm={3}>
-                                        <ListItemText primary={<PrintOSIcon os={tag.os} />} />
+                                        <Tooltip 
+                                            title={
+                                                <>
+                                                    <div>{"Operating System: " + toUpperFirst(tag.os)}</div>
+                                                        <br />
+                                                    <div>{"Architecture: " + tag.architecture}</div>
+                                                </>
+                                            } 
+                                            placement="bottom" 
+                                            arrow
+                                        >
+                                            <ListItemText className="iconWrapper" primary={<PrintOSIcon className="icon" os={tag.os} />} />
+                                        </Tooltip>
                                     </Grid>
                                     <Grid item sm={2}>
                                         <ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.size ? printSize(tag.size) : "---"} />
                                     </Grid>
                                     <Grid item sm={2}>
-                                        <ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.created ? printTimePassed(tag.created) : "---"} />
+                                        <Tooltip 
+                                            title={
+                                                tag.created ? (tag.created.toLocaleString()) : "---"
+                                            } 
+                                            placement="bottom-end" 
+                                            arrow
+                                        >
+                                            <ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.created ? printTimePassed(tag.created) : "---"} />
+                                        </Tooltip>
                                     </Grid>
                                 </Grid>
                             ))}

src/style/modules/_repositoryInfo.sass

@@ -17,6 +17,12 @@
     .tagsDetail
         margin: 5%
         padding: 15px
+        .iconWrapper
+            height: 24px
+            width: 24px
+        .icon
+            height: 24px
+            width: 24px
         .lines
             margin-bottom: 10px
         .moreBtn
@@ -24,3 +30,7 @@
             cursor: pointer
         .moreBtn:focus
             color: purple
+
+@media (max-width: 1199px)
+    .repositoryInfo
+        max-width: 90%

src/style/style.css

@@ -55,6 +55,16 @@ a {
   padding: 15px;
 }
 
+.repositoryInfo .tagsDetail .iconWrapper {
+  height: 24px;
+  width: 24px;
+}
+
+.repositoryInfo .tagsDetail .icon {
+  height: 24px;
+  width: 24px;
+}
+
 .repositoryInfo .tagsDetail .lines {
   margin-bottom: 10px;
 }
@@ -68,6 +78,12 @@ a {
   color: purple;
 }
 
+@media (max-width: 1199px) {
+  .repositoryInfo {
+    max-width: 90%;
+  }
+}
+
 .login .grid-container {
   -webkit-box-align: center;
       -ms-flex-align: center;

src/style/style.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AElD5B,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,CAAC;CAKU;;AANvB,AAEI,OAFG,CAEH,SAAS,CAAC;EACN,KAAK,EAAE,KAAK;CAAG;;AAHvB,AAII,OAJG,CAIH,WAAW,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,GAAG;CAAG;;AGNrB,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,AAAA,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAuBgB;;AAzBhC,AAGI,eAHW,CAGX,iBAAiB,CAAC;EACd,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAUW;;AAfhC,AAMQ,eANO,CAGX,iBAAiB,CAGb,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AAPlC,AAQQ,eARO,CAGX,iBAAiB,CAKb,WAAW,CAAC;EACR,cAAc,EAAE,MAAM;EACtB,YAAY,EAAE,IAAI;CAAG;;AAVjC,AAWQ,eAXO,CAGX,iBAAiB,CAQb,eAAe,CAAC;EACZ,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,GAAG;CAAG;;AAf9B,AAgBI,eAhBW,CAgBX,WAAW,CAAC;EACR,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAOS;;AAzB9B,AAmBQ,eAnBO,CAgBX,WAAW,CAGP,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AApBlC,AAqBQ,eArBO,CAgBX,WAAW,CAKP,QAAQ,CAAC;EACL,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,OAAO;CAAG;;AAvB9B,AAwBQ,eAxBO,CAgBX,WAAW,CAQP,QAAQ,AAAA,MAAM,CAAC;EACX,KAAK,EAAE,MAAM;CAAG;;ACzB5B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG",
+    "mappings": "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",
     "sources": [
         "style.sass",
         "_variables.sass",

src/utils.tsx

@@ -1,4 +1,5 @@
 import axios from "./api/axios"
+import React from "react";
 import { FcLinux } from "react-icons/fc";
 import { FaWindows } from "react-icons/fa";
 
@@ -17,6 +18,14 @@ const checkValidURL = async (url: string) => {
     return true;
 }
 
+const toUpperFirst= (s: string):string => {
+    if (s.length > 0) {
+        return s[0].toUpperCase() + s.substring(1);
+    } else {
+        return s;
+    }
+};
+
 const getHostNameFromURL = (url: string): string => {
     const urlSplit = url.split('/');
     return urlSplit[urlSplit.length - 1];
@@ -56,14 +65,14 @@ const printSize = (sizeInByte: number): string => {
     }
 };
 
-const PrintOSIcon: React.FC<{ os: string }> = ({ os }) => {
+const PrintOSIcon: React.FC<{ className: string, os: string }> = ({ className, os }) => {
     if (os === "linux") {
-        return <FcLinux />
+        return <FcLinux className={className} />
     } else if (os === "windows") {
-        return <FaWindows />
+        return <FaWindows className={className} />
     } else {
-        return <div>os</div>;
+        return <div className={className}>os</div>;
     }
 }
 
-export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon };
+export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon, toUpperFirst };