Changeset e5b84dc for phonelux-frontend/src/components/PhoneCardComponent

Timestamp:

09/11/22 18:03:58 (2 years ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

775e15e

Parents:

527b93f

Message:

Prototype version

Location:

phonelux-frontend/src/components/PhoneCardComponent

Files:

• PhoneCardComponent.css (modified) (3 diffs)
• PhoneCardComponent.js (modified) (1 diff)

phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.css

@@ -1 +1 @@
 .phonecard{
-    background-color: #B6E2C8;
+    /* background-color: #B6E2C8; */
     padding:15px;
     justify-items: center;
+    padding-top: 35px;
     width: 250px;
     height: 400px;
     border-radius: 25px;
+    border: 3px solid #B6E2C8;
+    border-radius: 50px;
 }
 
 .phonecard:hover{
-    background-color: #84c69f;
+    /* background-color: #B6E2C8; */
     cursor: pointer;
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+    border-radius: 50px;
 }
 
@@ -26 +32 @@
 
 .phonecard-lowestprice-header, .phonecard-totaloffers-header{
-    margin-top: -10px;
-    color: rgb(34, 106, 106);
-    text-align: center;
+    margin-top: 20px;
+    text-align: right;
+}
+
+.phonecard-totaloffers-header{
+    margin-top: -15px;
 }
 
 .phonecard-model-header{
     text-align: center;
+    border: 1px solid rgb(161, 165, 163);
+    border-radius: 20px 100px;
+    background-color: rgb(222, 228, 225);
+    padding: 5px;
+    padding-right: 10px;
+    
 }
 
@@ -44 +59 @@
 }
 
+.phonecard-lowestprice-header{
+    /* color: rgb(24, 117, 24); */
+}
+
+.phonecard-totaloffers-header{
+    /* color: rgb(24, 117, 24); */
+}
+
 .phonecard > h5 > p{
     display: inline;

phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js

@@ -24 +24 @@
         <h3 className='phonecard-model-header'>{this.props.model}</h3>
         <h5 className='phonecard-lowestprice-header'>Најниска цена: <p className='phonecard-lowestprice'>{this.props.lowestPrice}</p> ден.</h5>
-        <h6 className='phonecard-totaloffers-header'>Вкупно понуди: <p className='phonecard-totaloffers'>{this.props.total_offers}</p></h6>
+        <h5 className='phonecard-totaloffers-header'>Вкупно понуди: <p className='phonecard-totaloffers'>{this.props.total_offers}</p></h5>
       </div>
       </Paper>