fix(style): Fix styling of quest and tomes (#679)

spellshift · Feb 29, 2024 · 7891be1 · 7891be1
1 parent c04f8b6
commit 7891be1
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/tavern/internal/www/src/components/TomeAccordion.tsx b/tavern/internal/www/src/components/TomeAccordion.tsx
@@ -22,18 +22,21 @@ const TomeAccordion = (props: Props) => {
                                     {tome.name}
                                 </div>
                                 <div
-                                    className={`flex flex-col w-full text-sm text-gray-600`}
+                                    className={`flex flex-col w-full text-sm text-gray-600 gap-1`}
                                 >
                                     <p>{tome.description}</p>
                                     {params && params.length > 0 &&
-                                        <div className="flex flex-row gap-1">
+                                        <div className="flex flex-col md:flex-row gap-1">
                                             Parameters:
                                             {params && params.map((element: TomeParams, index: number) => {
                                                 return <div key={`${index}_${element.name}`}>{element.label}{index < (params.length - 1) && ","}</div>
                                             })}
                                         </div>
                                     }
-                                    {tome.tactic && tome.tactic !== "UNSPECIFIED" && <div>Tactic: <span className="lowercase">{tome?.tactic}</span></div>}
+                                    <div>
+                                        {tome.tactic && tome.tactic !== "UNSPECIFIED" && <div>Tactic: <span className="lowercase">{tome?.tactic}</span></div>}
+                                    </div>
+
                                 </div>
                             </Box>
                             <div className='text-sm  items-center'>

diff --git a/tavern/internal/www/src/pages/create-quest/components/TomeRadioGroup.tsx b/tavern/internal/www/src/pages/create-quest/components/TomeRadioGroup.tsx
@@ -85,11 +85,11 @@ const TomeRadioGroup = (
                                                                 </RadioGroup.Label>
                                                                 <RadioGroup.Description
                                                                     as="div"
-                                                                    className={`flex flex-col gap- w-full text-sm text-gray-600`}
+                                                                    className={`flex flex-col gap-1 w-full text-sm text-gray-600`}
                                                                 >
                                                                     <p>{tome.description}</p>
                                                                     {params &&
-                                                                        <div className="flex flex-row gap-1">
+                                                                        <div className="flex flex-row flex-wrap gap-1">
                                                                             Parameters:
                                                                             {params && params.map((element: TomeParams, index: number) => {
                                                                                 return <div key={`${index}_${element.name}`}>{element.label}{index < (params.length - 1) && ","}</div>

diff --git a/tavern/internal/www/src/pages/quest-list/QuestList.tsx b/tavern/internal/www/src/pages/quest-list/QuestList.tsx
@@ -20,7 +20,7 @@ export const QuestList = () => {
 
     return (
         <PageWrapper currNavItem={PageNavItem.quests}>
-            <div className="border-b border-gray-200 pb-5 sm:flex sm:items-center sm:justify-between">
+            <div className="border-b border-gray-200 pb-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                 <div className="flex-1 flex flex-col gap-2">
                     <h3 className="text-xl font-semibold leading-6 text-gray-900">Quests</h3>
                     <div className="max-w-2xl text-sm">

diff --git a/tavern/internal/www/src/pages/tomes/components/RepositoryTable.tsx b/tavern/internal/www/src/pages/tomes/components/RepositoryTable.tsx
@@ -43,7 +43,7 @@ const RepositoryTable = ({ repositories }: {
     const columns: ColumnDef<any>[] = [
         {
             id: 'expander',
-            header: 'Tome repository',
+            header: 'Repository',
             accessorFn: row => row.node.url,
             footer: props => props.column.id,
             enableSorting: false,
@@ -75,7 +75,7 @@ const RepositoryTable = ({ repositories }: {
         },
         {
             id: "owner",
-            header: 'imported by',
+            header: 'Uploader',
             accessorFn: row => row?.node?.owner,
             footer: props => props.column.id,
             enableSorting: false,
@@ -105,7 +105,7 @@ const RepositoryTable = ({ repositories }: {
         },
         {
             id: "lastModifiedAt",
-            header: 'Last modified',
+            header: 'Updated',
             accessorFn: row => row?.node?.lastModifiedAt ? formatDistance(new Date(row?.node?.lastModifiedAt), currentDate) : "-",
             footer: props => props.column.id,
             enableSorting: false,

diff --git a/tavern/internal/www/src/style.css b/tavern/internal/www/src/style.css
@@ -40,7 +40,7 @@
   }
 
   .external-link {
-    @apply text-gray-600 font-semibold underline;
+    @apply text-gray-600 font-semibold underline break-all;
   }
 
   .external-link:hover {