style:plugin list

amplication · Feb 7, 2024 · 6bad1fc · 6bad1fc
1 parent 35afa7c
commit 6bad1fc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/components/Plugins/plugin-card.jsx b/components/Plugins/plugin-card.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useCallback } from 'react';
 import helpers from '../../helpers';
 import * as analytics from '../../lib/analytics';
-import Button from '../Common/Button';
+import OutlineButton from '../Common/Button/button-outline';
 import PluginLogo from './plugin-logo';
 
 const Plugin = ({ plugin }) => {
@@ -26,42 +26,39 @@ const Plugin = ({ plugin }) => {
     });
   }, [plugin.pluginId]);
 
+  const pluginPageUrl = helpers.getPluginSlug(plugin.pluginId);
+
   return (
-    <Link href={helpers.getPluginSlug(plugin.pluginId)} passHref>
+    <Link href={pluginPageUrl} passHref>
       <a
         className="text-white transition-colors text-ellipsis display-block laptop:mb-0 group"
         onClick={handleClick}
       >
         <div
           key={plugin.pluginId}
           className={
-            'flex flex-col justify-between items-start overflow-hidden border border-solid border-dark-black-70 bg-purple-light  h-full hover:shadow-hover-post rounded-lg p-4 min-h-[200px] '
+            'flex flex-col justify-between items-start overflow-hidden border border-solid border-dark-black-70 bg-dark-black-100  h-full hover:shadow-hover-post rounded-lg p-4 min-h-[200px] '
           }
         >
           <div className={'flex flex-row justify-start items-center  '}>
-            <PluginLogo plugin={plugin} />
+            <PluginLogo plugin={plugin} size={62} />
             <div>
               <div className="text-base">{plugin.name}</div>
             </div>
           </div>
-          <span className="text-xs text-gray py-4">{plugin.description}</span>
-          <div className="flex flex-row justify-between items-center mt-auto pt-4 w-full border-t-1 border-t-dark-black-70 ">
-            <span className="text-xs text-white">
-              <a href={plugin.github} target="github_plugin">
-                View Source
-              </a>
-            </span>
+          <span className="text-xs text-gray py-4 max-h-[64px] overflow-hidden">
+            {plugin.description}
+          </span>
+          <div className="flex flex-row justify-end items-center mt-auto pt-8 w-full ">
             <span className="text-xs text-white">
-              <Button
-                text="Add Plugin"
-                backgroundColor="purpleBright"
-                hoverBackgroundColor="purpleBrightHover"
+              <OutlineButton
+                text="Learn more"
                 isLink={true}
                 onClick={() => {
                   handleStartNowClick(plugin.pluginId);
                 }}
-                href={`https://app.amplication.com/login?plugin-id=${plugin.pluginId}`}
-                className=" whitespace-nowrap !px-2 !py-2"
+                href={pluginPageUrl}
+                className="whitespace-nowrap !px-2 !py-2"
                 delayLinkMs={300} //add 300ms to be able to send the event
               />
             </span>

diff --git a/pages/plugins.js b/pages/plugins.js
@@ -8,6 +8,7 @@ import helpers from '../helpers';
 import { MainLayout } from '../layouts';
 import * as analytics from '../lib/analytics';
 import client from '../services/plugin-api';
+import PageSection from '../components/Common/PageSection';
 
 const Plugins = ({ plugins }) => {
   const handleStartNowClick = useCallback((eventName) => {
@@ -72,16 +73,22 @@ const Plugins = ({ plugins }) => {
 
 
 
-        <div className={'mt-4 w-full max-w-container m-container p-container laptop:max-w-container-desktop-blog laptop:m-container-desktop laptop:p-container-desktop pt-0 laptop:pt-0 laptop:pb-0 grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 gap-7.5 laptop:gap-x-7.5 laptop:gap-y-[61px]'}>
-          {plugins.map((plugin) => (
-            <Plugin key={plugin.pluginId} plugin={plugin} />
-          ))}
-          {(!Array.isArray(plugins) || !plugins.length) && (
-            <div>
-              plugins not found
+
+        <PageSection alternate>
+
+          <div className={'mt-4  w-full max-w-container m-container p-container laptop:max-w-container-desktop-blog laptop:m-container-desktop laptop:p-container-desktop pt-0 laptop:pt-0 laptop:pb-0'}>
+            <div className='grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 medium:grid-cols-4 gap-7.5   py-8'>
+              {plugins.map((plugin) => (
+                <Plugin key={plugin.pluginId} plugin={plugin} />
+              ))}
+              {(!Array.isArray(plugins) || !plugins.length) && (
+                <div>
+                  plugins not found
+                </div>
+              )}
             </div>
-          )}
-        </div>
+          </div>
+        </PageSection>
 
       </main >
     </>