finish css of rollover

Author: violetforest

src/pages/display/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Primary, Secondary } from '../../components/button'
+import { Button, Primary, Secondary, Purchase } from '../../components/button'
 import { HicetnuncContext } from '../../context/HicetnuncContext'
 import { Page, Container, Padding } from '../../components/layout'
 import { BottomBanner } from '../../components/bottom-banner'
@@ -46,10 +46,6 @@ query collectorGallery($address: String!) {
         address
         name
       }
-      swaps {
-        amount
-        price
-      }
     }
   }
 }
@@ -797,7 +793,9 @@ export default class Display extends Component {
                   collection
                 </Primary>
               </Button>
-              <Button onClick={() => this.setState({ filter: !this.state.filter })}>
+              <Button onClick={() => this.setState({ 
+                  filter: !this.state.filter 
+                })}>
                 <Primary>
                   filter
                 </Primary>
@@ -1055,13 +1053,22 @@ export default class Display extends Component {
                 {this.state.items.map((nft) => {
                   console.log('nft asdfadf: ' + JSON.stringify(nft))
                   return (
-                    <Button style={{ position: 'relative' }} key={nft.token.id} to={`${PATH.OBJKT}/${nft.token.id}`}>
+                    <Button className={styles.cardContainer} 
+                      style={{ position: 'relative' }} 
+                      key={nft.token.id} 
+                      to={`${PATH.OBJKT}/${nft.token.id}`}>
                       <div className={styles.card}>
                         <div className={styles.cardText}>
-                          <div>#{nft.token.id}</div>
+                          <div>OBJKT#{nft.token.id}</div>
                           <div>{nft.token.title}</div>
                           <div>{nft.token.creator.name}</div>
-                          <div>24tez</div>
+                        </div>
+                        <div className={styles.cardCollect}>
+                          <Purchase>
+                            <div className={styles.cardCollectPrice}>
+                              collect for 24 tez
+                            </div>
+                          </Purchase>
                         </div>
                       </div>
                       <div className={styles.container}>

src/pages/display/styles.module.scss

@@ -42,14 +42,15 @@
 .card {
   position: absolute;
   left: 0;
-  top: 0;
   right: 0;
   bottom: 0;
   width: 100%;
-  height: 100%;
-  background: black;
+  height: 30%;
+  min-height: 150px;
+  
+  background-color: var(--text-color);
   transition: background-color #{$theme-duration} ease-out,
-  color #{$theme-duration} ease-out, opacity ease-out 0.2s;
+  color #{$theme-duration} ease-out, opacity ease-out #{$theme-duration};
   z-index: 100;
   opacity: 0;
   &:hover {
@@ -58,11 +59,24 @@
 }
 
 .cardText {
+  position: relative;
+  color: var(--background-color);
+  margin-top: 20px;
+  margin-left: 20px;
+}
+
+.cardCollect {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
+  bottom: 0;
+  right: 0;
+  border-right: 2px solid var(--background-color);
+  border-bottom: 2px solid var(--background-color);
+  margin-bottom: 20px;
+  margin-right: 20px;
+
+  .cardCollectPrice {
+    color: var(--background-color);
+  }
 }
 
 .tag {

src/styles/main.scss

@@ -16,7 +16,6 @@ body {
   // font-family: 'Courier New', 'Courier', monospace; // README: old font
   overflow-x: hidden;
   color: var(--text-color);
-  
   background-color: var(--background-color);
   transition: background-color #{$theme-duration} ease-out,
     color #{$theme-duration} ease-out;