Merge pull request #575 from research-software-directory/461-pinned-p…

…rojects feat: pinned projects use icons instead of color
research-software-directory · Oct 12, 2022 · 044034f · 044034f
2 parents 86bf425 + 37654e3
commit 044034f
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 90 deletions.
diff --git a/frontend/components/icons/FeaturedIcon.tsx b/frontend/components/icons/FeaturedIcon.tsx
@@ -0,0 +1,29 @@
+// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2022 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+// import UpcomingIcon from '@mui/icons-material/Upcoming'
+// import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined'
+// import StarsOutlinedIcon from '@mui/icons-material/StarsOutlined'
+// import StarsIcon from '@mui/icons-material/Stars'
+// import MilitaryTechIcon from '@mui/icons-material/MilitaryTech'
+// import FlareIcon from '@mui/icons-material/Flare'
+// import CampaignIcon from '@mui/icons-material/Campaign'
+import AutoAwesome from '@mui/icons-material/AutoAwesome'
+
+export default function FeaturedIcon(){
+  return (
+    <span
+      title="Featured item"
+    >
+      <AutoAwesome
+        sx={{
+          width: '3rem',
+          height: '3rem',
+          opacity: '0.9'
+        }}
+      />
+    </span>
+  )
+}
diff --git a/frontend/components/icons/NotPublishedIcon.tsx b/frontend/components/icons/NotPublishedIcon.tsx
@@ -0,0 +1,21 @@
+// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2022 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
+
+export default function NotPublishedIcon(){
+  return (
+    <span
+      title="Not published"
+    >
+      <VisibilityOffIcon
+        sx={{
+          width: '2.5rem',
+          height: '2.5rem',
+        }}
+      />
+    </span>
+  )
+}
diff --git a/frontend/components/projects/ProjectCard.tsx b/frontend/components/projects/ProjectCard.tsx
@@ -9,6 +9,8 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 import {getTimeAgoSince} from '../../utils/dateFn'
 import ImageAsBackground from '../layout/ImageAsBackground'
 import {getImageUrl} from '../../utils/getProjects'
+import FeaturedIcon from '~/components/icons/FeaturedIcon'
+import NotPublishedIcon from '~/components/icons/NotPublishedIcon'
 
 export type ProjectCardProps = {
   slug: string,
@@ -29,13 +31,11 @@ export default function ProjectCard(
 ) {
   // get current date
   const today = new Date()
-  // featured has primary bg color
-  const colors = is_featured ? 'bg-base-300 text-content' : 'bg-base-200 text-content'
   // if not published use opacity 0.50
   let opacity = ''
   if (typeof is_published != 'undefined' && is_published === false) opacity = 'opacity-50'
   // add margin to title to make space for more button
-  const titleMargin = menuSpace ? 'mr-8':''
+  const titleMargin = menuSpace ? 'mr-10':''
 
   function projectUrl() {
     return `/projects/${slug}/`
@@ -44,26 +44,21 @@ export default function ProjectCard(
   function renderIcon() {
     if (typeof is_published !='undefined' && is_published===false){
       return (
-        <span
-          title="Not published"
-        >
-          <VisibilityOffIcon
-            sx={{
-              width: '2rem',
-              height: '2rem',
-              margin: '0 0.5rem 0.5rem 0'
-            }}
-          />
-        </span>
+        <NotPublishedIcon />
+      )
+    }
+    if (is_featured){
+      return (
+        <FeaturedIcon />
       )
     }
     return null
   }
 
   return (
     <Link href={projectUrl()} passHref>
-      <a className={`flex flex-col h-full ${colors} ${opacity} hover:bg-secondary hover:text-white`}>
-        <article className="flex-1 flex px-4 h-full overflow-hidden">
+      <a className={`flex flex-col h-full bg-base-200 text-content ${opacity} hover:bg-secondary hover:text-white`}>
+        <article className="flex flex-1 h-full px-4 overflow-hidden">
           <section
             title={subtitle ?? title}
             className="py-4 h-full md:w-[13rem]"
@@ -77,7 +72,7 @@ export default function ProjectCard(
               noImgMsg='no image'
             />
           </section>
-          <section className="flex-1 flex flex-col py-4 md:pl-6">
+          <section className="flex flex-col flex-1 py-4 md:pl-6">
             <h2
               title={title}
               className={`max-h-[6rem] overflow-clip ${titleMargin}`}>

diff --git a/frontend/components/software/SoftwareCard.tsx b/frontend/components/software/SoftwareCard.tsx
@@ -5,7 +5,9 @@
 
 import Link from 'next/link'
 import {getTimeAgoSince} from '../../utils/dateFn'
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
+// import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
+import FeaturedIcon from '~/components/icons/FeaturedIcon'
+import NotPublishedIcon from '~/components/icons/NotPublishedIcon'
 
 export type SoftwareCardType = {
   href: string
@@ -21,7 +23,7 @@ export type SoftwareCardType = {
 export default function SoftwareCard({href, brand_name, short_statement, is_featured,
   updated_at, mention_cnt, contributor_cnt, is_published}: SoftwareCardType) {
 
-  const colors = is_featured ? 'bg-base-300 text-content' : 'bg-base-200 text-content'
+  // const colors = is_featured ? 'bg-base-300 text-content' : 'bg-base-200 text-content'
   const today = new Date()
   // if not published use opacity 0.50
   let opacity = ''
@@ -75,17 +77,12 @@ export default function SoftwareCard({href, brand_name, short_statement, is_feat
   function renderPublished() {
     if (typeof is_published != 'undefined' && is_published === false) {
       return (
-        <span
-          title="Not published"
-        >
-          <VisibilityOffIcon
-            sx={{
-              width: '2rem',
-              height: '2rem',
-              margin: '0 0.5rem 0.5rem 0'
-            }}
-          />
-        </span>
+       <NotPublishedIcon />
+      )
+    }
+    if (is_featured){
+      return (
+        <FeaturedIcon />
       )
     }
     return null
@@ -95,8 +92,8 @@ export default function SoftwareCard({href, brand_name, short_statement, is_feat
     <Link href={href} passHref>
       {/* anchor tag MUST be first element after Link component */}
       <a className="flex flex-col h-full">
-        <article className={`flex-1 flex flex-col ${colors} ${opacity} hover:bg-secondary group`}>
-          <div className="flex relative">
+        <article className={`flex-1 flex flex-col bg-base-200 text-content ${opacity} hover:bg-secondary group`}>
+          <div className="relative flex">
             <h2
               title={brand_name}
               className="p-4 flex-1 mr-[4rem] overflow-hidden text-ellipsis whitespace-nowrap group-hover:text-white"