fix: add hover state to baseCard and remove custom borders

CHANGELOG.md

@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Remove uneven borders in cards and add hover state styles
+
 ### Fixed
 
 ## [7.0.1] 2022-07-21

src/components/BaseCard/index.css

@@ -1,11 +1,11 @@
 @layer components {
   .pui-baseCard {
     /* Adds the expected placeholder color for the bg */
-    @apply flex w-full pui-rounded-Card overflow-hidden pui-boxshadow-lg;
+    @apply flex w-full overflow-hidden shadow-md rounded-lg border border-gray-100;
   }
 
   .pui-rounded-gradient-bar {
-    border-radius: var(--pui-rounded-gradient-bar, 0.75rem 0 0 0.75rem);
+    border-radius: var(--pui-rounded-gradient-bar, 0.5rem 0 0 0.5rem);
   }
 
   .gradient-bar {

src/components/BaseCard/index.tsx

@@ -44,6 +44,12 @@ export type BaseCardProps = {
    * @default string
    */
   classNameGradientImage?: string;
+  /**
+   * Extended classes for hover state
+   *
+   * @default false
+   */
+  hoverState?: boolean;
 };
 
 /**
@@ -58,7 +64,7 @@ export type BaseCardProps = {
  * @param props.classNameContent The content on the card className
  * @param props.classNameGradientImage The filter className
  * @param props.children The content of the card
- 
+ * @param props.hoverState Extended classes for hover state
  */
 export const BaseCard: React.FC<BaseCardProps> = ({
   imageGradient,
@@ -68,10 +74,17 @@ export const BaseCard: React.FC<BaseCardProps> = ({
   children,
   className,
   classNameContent,
-  classNameGradientImage
+  classNameGradientImage,
+  hoverState
 }) => {
   return (
-    <div className={classnames('pui-baseCard', className)}>
+    <div
+      className={classnames(
+        'pui-baseCard',
+        { 'hover:border-pui-primary hover:shadow-lg hover:cursor-pointer': hoverState },
+        className
+      )}
+    >
       {leftGradientBar && (
         <div className={classnames('gradient-bar', `bg-gradient-to-b from-pui-primary to-pui-secondary`)}></div>
       )}

src/components/BorderRadius/index.css

@@ -7,8 +7,4 @@
   .pui-rounded-bannerCard {
     border-radius: var(--pui-bradius-bannerCard, 0.625rem 1.875rem 0 0.625rem);
   }
-
-  .pui-rounded-Card {
-    border-radius: var(--pui-bradius-bannerCard, 0.75rem 2.5rem 1.25rem 0.75rem);
-  }
 }

src/components/EventCard/index.css

@@ -1,7 +1,7 @@
 @layer components {
   .pui-event-card {
     /* Adds the expected placeholder color for the bg */
-    @apply w-full max-w-lg pui-rounded-Card pui-boxshadow-lg flex flex-row;
+    @apply w-full max-w-lg pui-boxshadow-lg flex flex-row;
   }
 
   .pui-rounded-gradient-bar {

src/components/ModuleCard/index.css

@@ -1,6 +1,6 @@
 @layer components {
   .pui-moduleCard {
     /* Adds the expected placeholder color for the bg */
-    @apply flex flex-col w-full max-w-md pui-rounded-Card overflow-hidden pui-boxshadow-lg;
+    @apply flex flex-col w-full max-w-md overflow-hidden pui-boxshadow-lg;
   }
 }

src/components/ProgramCard/index.css

@@ -1,7 +1,7 @@
 @layer components {
   .pui-programCard {
     /* Adds the expected placeholder color for the bg */
-    @apply w-full max-w-xs pui-rounded-Card overflow-hidden pui-boxshadow-lg;
+    @apply w-full max-w-xs overflow-hidden pui-boxshadow-lg;
   }
 
   .percentage-bar {

src/components/ResourcesCard/index.css

@@ -1,7 +1,7 @@
 @layer components {
   .pui-resources-card {
     /* Adds the expected placeholder color for the bg */
-    @apply w-full max-w-lg pui-rounded-Card pui-boxshadow-lg flex flex-row;
+    @apply w-full max-w-lg pui-boxshadow-lg flex flex-row;
   }
 
   .pui-rounded-gradient-bar {

src/components/WorkSessionCard/index.css

@@ -1,7 +1,7 @@
 @layer components {
   .pui-worksession-card {
     /* Adds the expected placeholder color for the bg */
-    @apply w-full max-w-lg pui-rounded-Card pui-boxshadow-lg flex flex-row;
+    @apply w-full max-w-lg pui-boxshadow-lg flex flex-row;
   }
 
   .pui-rounded-gradient-bar {