Update card layout (#780)

* card-layout * card-layout * card layout * layout * margin fixed * icon validation moved to top * fixed icons * fixed icons
OWASP · Feb 8, 2025 · fca531f · fca531f
1 parent c997e7f
commit fca531f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 41 deletions.
diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
@@ -43,7 +43,7 @@ const Card = ({
 
   return (
     <div className="mb-2 mt-4 flex w-full flex-col items-start rounded-md border border-border bg-white pb-4 pl-4 dark:bg-[#212529] md:max-w-6xl">
-      <div className="flex w-full flex-col items-start gap-4 pt-2 sm:flex-row sm:items-center sm:gap-6 md:pt-0">
+      <div className="mt-2 flex w-full flex-col items-start gap-4 pt-2 sm:flex-col sm:gap-4 md:pt-0">
         <div className="flex items-center gap-3">
           {/* Display project level badge (if available) */}
           {level && (
@@ -78,24 +78,19 @@ const Card = ({
           </Link>
         </div>
         {/* Icons associated with the project */}
-        <div className="flex min-w-[30%] flex-grow flex-row items-center justify-end overflow-auto">
-          {icons &&
-            Object.keys(Icons).map((key, index) =>
+        {icons && Object.keys(Icons).some((key) => icons[key]) ? (
+          <div className="-ml-1.5 flex flex-grow">
+            {Object.keys(Icons).map((key, index) =>
               icons[key] ? (
                 <DisplayIcon
                   key={`${key}-${index}`}
                   item={key}
-                  icons={Object.fromEntries(Object.entries(icons).filter(([_, value]) => value))} // only pass in truthy meta data
-                  idx={
-                    Object.keys(icons).findIndex((e) => e === key) ===
-                    Object.keys(icons).filter((key) => icons[key]).length - 1
-                      ? -1
-                      : Object.keys(icons).findIndex((e) => e === key)
-                  }
+                  icons={Object.fromEntries(Object.entries(icons).filter(([_, value]) => value))}
                 />
               ) : null
             )}
-        </div>
+          </div>
+        ) : null}
       </div>
       {/* Link to project name if provided */}
       {projectName && (

diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
@@ -5,23 +5,11 @@ import { TooltipRecipe } from 'utils/theme'
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 import { Tooltip } from 'components/ui/tooltip'
 
-export default function DisplayIcon({
-  item,
-  icons,
-  idx,
-}: {
-  item: string
-  icons: IconType
-  idx: number
-}) {
+export default function DisplayIcon({ item, icons }: { item: string; icons: IconType }) {
   // className for the container
   const containerClassName = [
-    'flex flex-col items-center justify-center gap-1 border-b border-l border-t border-border px-4 pb-1 sm:border-t-0',
-    idx === 0 || (idx === -1 && Object.keys(icons).length === 1)
-      ? 'rounded-bl-none sm:rounded-bl-md'
-      : '',
-    idx === -1 ? 'border-r sm:border-r-0' : '',
-    item === 'updated_at' || item === 'stars_count' ? 'rotate-container' : '',
+    'flex flex-row-reverse items-center justify-center gap-1 px-4 pb-1 -ml-2',
+    item === 'stars_count' ? 'rotate-container' : '',
     item === 'forks_count' || item === 'contributors_count' ? 'flip-container' : '',
   ]
     .filter(Boolean)
@@ -30,7 +18,7 @@ export default function DisplayIcon({
   // className for the FontAwesome icon
   const iconClassName = [
     'text-gray-600 dark:text-gray-300',
-    item === 'updated_at' || item === 'stars_count' ? 'icon-rotate' : '',
+    item === 'stars_count' ? 'icon-rotate' : '',
     item === 'forks_count' || item === 'contributors_count' ? 'icon-flip' : '',
   ]
     .filter(Boolean)

diff --git a/frontend/src/pages/Projects.tsx b/frontend/src/pages/Projects.tsx
@@ -30,7 +30,7 @@ const ProjectsPage = () => {
 
   const navigate = useNavigate()
   const renderProjectCard = (project: project) => {
-    const params: string[] = ['updated_at', 'forks_count', 'stars_count', 'contributors_count']
+    const params: string[] = ['forks_count', 'stars_count', 'contributors_count']
     const filteredIcons = getFilteredIcons(project, params)
 
     const handleButtonClick = () => {

diff --git a/frontend/src/utils/data.ts b/frontend/src/utils/data.ts
@@ -64,20 +64,16 @@ library.add(
 )
 
 export const Icons = {
-  updated_at: {
-    label: 'Last update date',
-    icon: 'fa-solid fa-arrows-rotate',
+  stars_count: {
+    label: 'GitHub stars',
+    icon: 'fa-regular fa-star',
   },
   forks_count: {
-    label: 'Total GitHub forks count',
+    label: 'GitHub forks',
     icon: 'fa-solid fa-code-fork',
   },
-  stars_count: {
-    label: 'Total GitHub stars count',
-    icon: 'fa-regular fa-star',
-  },
   contributors_count: {
-    label: 'Total GitHub contributors count',
+    label: 'GitHub contributors',
     icon: 'fa-regular fa-user',
   },
   created_at: {

diff --git a/frontend/src/utils/utility.ts b/frontend/src/utils/utility.ts
@@ -20,9 +20,7 @@ type projectType = project | IssueType | CommitteeType
 export const getFilteredIcons = (project: projectType, params: string[]): IconType => {
   const filteredIcons = params.reduce((acc: IconType, key) => {
     if (Icons[key as IconKeys] && project[key as keyof typeof project] !== undefined) {
-      if (key === 'updated_at') {
-        acc[key] = dayjs.unix(project[key] as number).fromNow()
-      } else if (key === 'created_at') {
+      if (key === 'created_at') {
         acc[key] = dayjs.unix(project[key as keyof projectType] as number).fromNow()
       } else {
         acc[key] = project[key as keyof typeof project] as number