Browse Source

Add shadow in app details

Nicolas Meienberger 3 năm trước cách đây
mục cha
commit
259e858c2f

+ 1 - 1
packages/dashboard/src/components/AppLogo/AppLogo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const AppLogo: React.FC<{ src: string; size?: number; className?: string; alt?: string }> = ({ src, size = 80, className = '', alt = '' }) => {
   return (
-    <div aria-label={alt} className={className} style={{ width: size, height: size }}>
+    <div aria-label={alt} className={`drop-shadow ${className}`} style={{ width: size, height: size }}>
       <svg width={size} height={size} viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
         <mask id="mask0" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
           <path fillRule="evenodd" clipRule="evenodd" d="M0 100C0 0 0 0 100 0S200 0 200 100 200 200 100 200 0 200 0 100" fill="white" />

+ 1 - 1
packages/dashboard/src/components/AppTile/index.tsx

@@ -14,7 +14,7 @@ const AppTile: React.FC<{ app: AppConfig }> = ({ app }) => {
     <Link href={`/apps/${app.id}`} passHref>
       <SlideFade in className="flex flex-1" offsetY="20px">
         <Box bg={bg} className="flex flex-1 border-2 drop-shadow-sm rounded-lg p-3 items-center cursor-pointer group hover:drop-shadow-md transition-all">
-          <AppLogo alt={`${app.name} logo`} className="drop-shadow mr-3 group-hover:scale-105 transition-all" src={app.image} size={100} />
+          <AppLogo alt={`${app.name} logo`} className="mr-3 group-hover:scale-105 transition-all" src={app.image} size={100} />
           <div className="mr-3 flex-1">
             <h3 className="font-bold text-xl">{app.name}</h3>
             <span>{limitText(app.short_desc, 50)}</span>

+ 1 - 1
packages/dashboard/src/modules/AppStore/components/AppStoreTile.tsx

@@ -9,7 +9,7 @@ const AppStoreTile: React.FC<{ app: AppConfig }> = ({ app }) => {
   return (
     <Link href={`/app-store/${app.id}`} passHref>
       <div key={app.id} className="p-2 rounded-md app-store-tile flex items-center group">
-        <AppLogo src={app.image} className="drop-shadow group-hover:scale-105 transition-all" />
+        <AppLogo src={app.image} className="group-hover:scale-105 transition-all" />
         <div className="ml-2">
           <div className="font-bold">{limitText(app.name, 20)}</div>
           <div className="text-sm mb-1">{limitText(app.short_desc, 45)}</div>