From a98367ad5e28c3e53b650705dc8c83d118b07a2f Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Mon, 11 Mar 2024 12:56:43 +0200
Subject: [PATCH] fix: align styles & remove unnecessary name prefix

---
 .../src/components/JobCard/JobCard.module.css | 31 +++++++++------
 .../ui/src/components/JobCard/JobCard.tsx     | 38 ++++++++++---------
 .../ui/src/static/locales/en-US/messages.json |  1 -
 .../ui/src/static/locales/pt-BR/messages.json |  1 -
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/packages/ui/src/components/JobCard/JobCard.module.css b/packages/ui/src/components/JobCard/JobCard.module.css
index ae8da6ff..7c694511 100644
--- a/packages/ui/src/components/JobCard/JobCard.module.css
+++ b/packages/ui/src/components/JobCard/JobCard.module.css
@@ -5,6 +5,7 @@
   border-radius: 0.25rem;
   padding: 1em;
   display: flex;
+  flex-direction: column;
   max-height: 500px;
 }
 
@@ -26,22 +27,18 @@
   border-bottom: 1px solid #e2e8f0;
 }
 
-.attempts {
-  margin-left: '0.5rem'
-}
-
-.title h4,
+.title h5,
 .sideInfo span {
-  font-size: 1.44rem;
+  font-size: 1.2rem;
   font-weight: 300;
   color: #4a5568;
   line-height: 1;
 }
 
-.title h4 span {
-  margin-left: 1.5rem;
+.title h5 span {
+  margin-left: 1rem;
   color: #a0aec0;
-  font-size: 0.694em;
+  font-size: 0.833em;
 }
 
 .header {
@@ -51,6 +48,12 @@
   align-items: center;
 }
 
+.header h4 {
+  font-size: 1.2rem;
+  font-weight: 300;
+  color: #4a5568;
+}
+
 .details {
   display: flex;
   margin-top: 1rem;
@@ -77,7 +80,7 @@
 }
 
 .collapseBtn {
-  padding: 0.15rem;
+  padding: 0.25rem 0.5rem;
 }
 
 .content {
@@ -93,6 +96,10 @@
 }
 
 .jobLink {
-  color: #4a5568;
-  font-size: large;
+  color: inherit;
+  text-decoration: none;
+}
+
+.jobLink:hover {
+  text-decoration: underline;
 }
diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx
index 4e9328f8..36dd8ae0 100644
--- a/packages/ui/src/components/JobCard/JobCard.tsx
+++ b/packages/ui/src/components/JobCard/JobCard.tsx
@@ -44,21 +44,28 @@ export const JobCard = ({
 
   const [localCollapse, setLocalCollapse] = React.useState<boolean>();
 
-  const isExpandedCard = !jobUrl || (localCollapse || !collapseJob);
-
-  const JobTitle = <h4 title={`#${job.id}`}>#{job.id}</h4>;
+  const isExpandedCard = !jobUrl || localCollapse || !collapseJob;
+  const showCollapseExpandBtn = collapseJob && jobUrl;
+  const JobTitle = (
+    <h4>
+      {/^\d+$/.test(`${job.id}`) ? '#' : ''}
+      {job.id}
+    </h4>
+  );
 
   return (
-    <Card className={s.card}>
-      <Collapsible.Root style={{ width: '100%' }} open={isExpandedCard}>
+    <Collapsible.Root asChild={true} open={isExpandedCard}>
+      <Card className={s.card}>
         <div className={s.header}>
           {jobUrl ? (
             <Link className={s.jobLink} to={jobUrl}>
               {JobTitle}
             </Link>
-          ) : JobTitle}
+          ) : (
+            JobTitle
+          )}
 
-          {jobUrl && (
+          {showCollapseExpandBtn && (
             <Button className={s.collapseBtn} onClick={() => setLocalCollapse(!isExpandedCard)}>
               {isExpandedCard ? <ArrowUpIcon /> : <ArrowDownIcon />}
             </Button>
@@ -74,13 +81,8 @@ export const JobCard = ({
             <div className={s.contentWrapper}>
               <div className={s.title}>
                 <h5>
-                  {t('JOB.NAME')}: {job.name}
-                  {job.attempts > 1 && (
-                    <span className={s.attempts}>
-                      - {t('JOB.ATTEMPTS', { attempts: job.attempts })}
-                    </span>
-                  )}
-
+                  {job.name}
+                  {job.attempts > 1 && <span>{t('JOB.ATTEMPTS', { attempts: job.attempts })}</span>}
                   {!!job.opts?.repeat?.count && (
                     <span>
                       {t(`JOB.REPEAT${!!job.opts?.repeat?.limit ? '_WITH_LIMIT' : ''}`, {
@@ -103,7 +105,9 @@ export const JobCard = ({
                   <Progress
                     percentage={job.progress}
                     status={
-                      job.isFailed && !greenStatuses.includes(status as any) ? STATUSES.failed : status
+                      job.isFailed && !greenStatuses.includes(status as any)
+                        ? STATUSES.failed
+                        : status
                     }
                     className={s.progress}
                   />
@@ -112,7 +116,7 @@ export const JobCard = ({
             </div>
           </div>
         </Collapsible.Content>
-      </Collapsible.Root>
-    </Card>
+      </Card>
+    </Collapsible.Root>
   );
 };
diff --git a/packages/ui/src/static/locales/en-US/messages.json b/packages/ui/src/static/locales/en-US/messages.json
index 22afbf94..bb085e0a 100644
--- a/packages/ui/src/static/locales/en-US/messages.json
+++ b/packages/ui/src/static/locales/en-US/messages.json
@@ -10,7 +10,6 @@
     "JOBS_COUNT": "{{count}} Jobs"
   },
   "JOB": {
-    "NAME": "Name",
     "NOT_FOUND": "Job Not found",
     "STATUS": "Status: {{status}}",
     "ADDED_AT": "Added at",
diff --git a/packages/ui/src/static/locales/pt-BR/messages.json b/packages/ui/src/static/locales/pt-BR/messages.json
index 363da38f..2fc99728 100644
--- a/packages/ui/src/static/locales/pt-BR/messages.json
+++ b/packages/ui/src/static/locales/pt-BR/messages.json
@@ -12,7 +12,6 @@
     "JOBS_COUNT": "{{count}} Tarefas"
   },
   "JOB": {
-    "NAME": "Nome",
     "NOT_FOUND": "Tarefa não encontrada",
     "STATUS": "Status: {{status}}",
     "ADDED_AT": "Adicionado em",