Add theme styles to Card component

recipes/src/components/Card/index.tsx

@@ -32,54 +32,41 @@ type CBKCardProps = {
   className?: string,
 }
 
-function CBKCard({onClick, img, title, summary, actions, icons, noMedia = false, className = ''}: CBKCardProps){
-  
-  return(
-    <Card outlined className={`cbk-card ${className}`}>
-      <CardPrimaryContent onClick={onClick}>
-        { noMedia ? null : <CardMedia square imageUrl={ img ? `/public/${img}` : sample_img}></CardMedia>}
-        <div className='cbk-card__main'>
-          <h6 className='cbk-card__main__title'>{title}</h6>
-          {
-            summary ? 
-              <p className='cbk-card__main__summary'>{summary}</p> :
-              null
-          }
+const CBKCard: React.FunctionComponent<CBKCardProps> = ({ title, summary, icons, actions, onClick }) => {
+  return (
+    <div className="cbk-card">
+      <div className="cbk-card__header" onClick={onClick}>
+        <div className="cbk-card__header__media" style={{backgroundImage: `url(${sample_img})`}} onLoad={(e) => { console.log("loaded", e)}}></div>
+        <div className="cbk-card__header__main">
+          <div className="cbk-card__header__main__title" title={title}>
+            <h6>{title}</h6>
+          </div>
+          <div className="cbk-card__header__main__subtitle">
+            <p>{summary}</p>
+          </div>
         </div>
-      </CardPrimaryContent>
+      </div>
       {
-        actions ?
-        (
-          <CardActions>
-            <CardActionButtons>
-              {
-                actions.map(({label, handler}, i) => (
-                  <Button key={i} onClick={handler}>
-                    {label}
-                  </Button>
-                )) 
-              }
-            </CardActionButtons>
-            {
-              icons ? (
-                <CardActionIcons>
-                  {
-                    icons.map((action, i) => (
-                      <Button
-                        icon={action.icon}
-                        onClick={action.handler}
-                        key={i}
-                      />
-                    ))
-                  }
-                </CardActionIcons>
-              ) : null
-            }
-          </CardActions>
-        ) :
-        null
+        actions && (
+          <div className="cbk-card__actions">
+            <div className="cbk-card__actions__buttons">
+              { actions.map((action, i) => (
+                <Button key={i} onClick={action.handler}>{action.label}</Button>
+              ))}
+            </div>
+            <div className="cbk-card__actions__icons">
+              { icons && icons.map((icon, index) => (
+                <Button
+                  icon={icon.icon}
+                  onClick={icon.handler}
+                  key={index}
+                />
+              )) }
+            </div>
+          </div>
+        )
       }
-    </Card>
+    </div>
   )
 }
 

recipes/src/components/Card/styles.scss

@@ -1,35 +1,65 @@
 @import 'styles/_variables.scss';
 
 .cbk-card {
-  border-radius: 0px;
-  border: 0px;
-  .mdc-card__media {
-    width: 168px;
-  }
-  .mdc-card__primary-action {
-    flex-direction: row;
-    width: 100%;
-  }
-  &__main {
-    width: 100%;
-    padding: $spacing-small;
-    &__title {
-      margin: inherit;
+  @include box();
+  @include ripple();
+  @include elevated();
+
+  margin-bottom: $spacing-small;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    display: grid;
+    grid-template-columns: 8rem 3fr;
+    grid-template-rows: 8rem;
+    &:hover {
+      cursor: pointer;
     }
-    &__summary {
-      font-size: $font-size-small;
-      color: $grey-500;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      line-height: 16px;
-      max-height: 48px; 
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
+
+    &__media {
+      border-right: 3px solid black;
+      border-bottom: 3px solid black;
+      background-position: center center;
+      background-size: cover;
+    }
+    &__main {
+      display: flex;
+      flex-direction: column;
+      padding: $spacing-xs;
+      &__title,
+      &__subtitle {
+        max-height: 4rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+      }
+      &__title{
+        -webkit-line-clamp: 2;
+        margin-bottom: $spacing-xs;
+        h6 {
+          margin: 0;
+          line-height: 1.5rem;
+        }
+      }
+      &__subtitle {
+        -webkit-line-clamp: 3;
+        p {
+          margin: 0;
+          @include cursive();
+        }
+      }
     }
   }
-}
 
-.cbk-card:not(:last-child) {
-  margin-bottom: 16px;
+  &__actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 $spacing-xs;
+  }
+  &:hover {
+    @include shadow();
+  }
 }

recipes/src/styles/_fonts.scss

@@ -41,4 +41,11 @@ $letter-spacing-enhanced: 0.5px;
   color: $red;
   line-height: $font-size-x-large;
   font-style: italic;
+}
+
+@mixin cursive() {
+  font-family: $font-family-text;
+  color: $grey-600;
+  font-style: italic;
+  font-size: $font-size-regular;
 }

recipes/src/styles/_mixins.scss

@@ -1,14 +0,0 @@
-@mixin ripple($color, $active-color) {
-  background-position: center;
-  transition: background 0.5s;
-  cursor: pointer;
-  &:hover {
-    background: $color radial-gradient(circle, transparent 1%, $color 1%) center/15000%;
-  }
-
-  &:active { 
-    background-color: $active-color;
-    background-size: 100%;
-    transition: background 0s;
-  }
-}

recipes/src/styles/_ui.scss

@@ -78,4 +78,38 @@ $phone: "(max-width: 839px)";
 @mixin box($color: #000000) {
   border: 3px solid $color;
   background-color: white;
+}
+
+@mixin ripple($color: #FAFAFA, $active-color: #EEEEEE) {
+  background-position: center;
+  transition: background 0.5s;
+  cursor: pointer;
+  &:hover {
+    background: $color radial-gradient(circle, transparent 1%, $color 1%) center/15000%;
+  }
+
+  &:active { 
+    background-color: $active-color;
+    background-size: 100%;
+    transition: background 0s;
+  }
+}
+
+@mixin elevated() {
+  position: relative;
+  
+  &:hover,
+  &:focus {
+    @include solidBoxShadow();
+    top: -4px;
+    left: -4px;
+  }
+  
+  &:active,
+  &:active + &:hover {
+    border: 3px solid $black;
+    box-shadow: none!important;
+    top: 0px;
+    left: 0px;
+  }
 }