Merge pull request #13 from boatnoodle/develop

update design
boatnoodle · Feb 20, 2020 · fed2029 · fed2029
2 parents 8caef09 + 3d8df85
commit fed2029
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/frontend/components/Carousel/index.tsx b/frontend/components/Carousel/index.tsx
@@ -22,7 +22,10 @@ const carouselSettings = {
 };
 const baseButtonStyle = css`
   position: absolute;
-  top: calc(40% + 10px);
+  border-radius: 50%;
+  width: 45px;
+  height: 45px;
+  top: calc(40% + 0px);
 `;
 const PreviousButton = Styled(Button)`
     ${baseButtonStyle}

diff --git a/frontend/containers/landing-page/Components/ReviewItems.tsx b/frontend/containers/landing-page/Components/ReviewItems.tsx
@@ -5,21 +5,20 @@ import { Carousel } from 'components/Carousel';
 const CardComponent = Styled.div`
     display: flex;
     overflow: hidden;
-    width: 250px;
     height: 180px;
-    text-align: center;
     border: 1.5px solid rgb(210,209,209);
     border-radius: 17px;
-    margin: 0 10px;
     background: #ffffff url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTEa0kE1BQAkvPikex-btLIzZ7UbZZZO0YuvvUbSM7q1tLtGMeR) no-repeat right top;
-    background-size: 250px 180px;
+    background-size: 100%;
     flex-direction: column;
     justify-content: flex-end;
     text-align: left;
-
 `;
 const CardWrapper = Styled.div`
     padding: 20px 0;
+    & ul.alice-carousel__stage li.alice-carousel__stage-item{
+        padding:0 5px;
+    }
 `;
 
 const Title = Styled.div`
@@ -43,6 +42,11 @@ color: white;
         font-size: .7em;
     }
 `;
+const CarouselStyled = Styled(Carousel)`
+    & .alice-carousel__stage-item{
+        padding:0 5px;
+    }
+`;
 interface Props {
   title: string;
   subTitle?: string;
@@ -63,7 +67,7 @@ export const ReviewItems: React.FunctionComponent<Props> = ({
     <CardWrapper>
       <Title>{title}</Title>
       <Subtitle />
-      <Carousel>
+      <CarouselStyled>
         {items.map((item, index) => (
           <CardComponent key={index}>
             <ItemLabel>
@@ -72,7 +76,7 @@ export const ReviewItems: React.FunctionComponent<Props> = ({
             </ItemLabel>
           </CardComponent>
         ))}
-      </Carousel>
+      </CarouselStyled>
     </CardWrapper>
   );
 };