From 14d3a6fccd3d4224038a45f9e2517741ff312015 Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Thu, 27 Aug 2020 19:14:10 +0530
Subject: [PATCH] Update styling of tutor cards
---
src/components/atoms/TutorCard/index.tsx | 8 +-----
.../atoms/TutorCard/style.module.scss | 27 ++++++++++++++++---
2 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/src/components/atoms/TutorCard/index.tsx b/src/components/atoms/TutorCard/index.tsx
index 8a8903cf7..ccae151aa 100644
--- a/src/components/atoms/TutorCard/index.tsx
+++ b/src/components/atoms/TutorCard/index.tsx
@@ -19,13 +19,7 @@ const TutorCard: React.FC<TutorCardProp> = ({
return (
<>
<Container
- style={{
- display: "flex",
- padding: 0,
- marginTop: "1.25rem",
- alignItems: "center",
- width: "100%"
- }}
+ className={styles.tutorContainer}
>
<Image className={styles.tutorImage} src={image} />
<div>
diff --git a/src/components/atoms/TutorCard/style.module.scss b/src/components/atoms/TutorCard/style.module.scss
index cb1e8f267..90c0466e0 100644
--- a/src/components/atoms/TutorCard/style.module.scss
+++ b/src/components/atoms/TutorCard/style.module.scss
@@ -1,10 +1,31 @@
@import "assets/scss/custom";
+.tutorContainer {
+ display: flex;
+ padding: 0;
+ margin-top: 1.25rem;
+ align-items: center;
+ width: 100%;
+ background: $white;
+ border: 0.0625rem solid $gray-200;
+ padding: 0.75rem;
+ border-radius: 0.5rem;
+ transition: 0.2s transform, 0.2s box-shadow;
+ -webkit-transition: 0.2s transform, 0.2s box-shadow;
+ -moz-transition: 0.2s transform, 0.2s box-shadow;
+}
+
+.tutorContainer:hover {
+ border-color: $gray-300;
+ transform: scale(1.03);
+ box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+}
+
.tutorImage {
border-radius: 50%;
- margin-right: 1.25rem;
- height: 3.75rem;
- width: 3.75rem;
+ margin-right: 0.75rem;
+ height: 4rem;
+ width: 4rem;
}
.tutorName,
--
GitLab