Merge pull request #42 from code4rena-dev/develop

Minor version - Contest Tile updates

Author: leo95oliveira

.github/README.md

@@ -2,6 +2,14 @@
 
 # Code4rena Components Library
 
+## Testing Components Locally
+To test the changes you make to your components in a more applicable scenario than storybook, you can install your local repository in any project as if it were already a published package in NPM. You can do so by following the steps below:
+
+1) run `npm run build` on the components library project
+2) run `npm install <path_to_local_components_library_folder>` from the project in which you want to test the library
+
+The install command is a one-time-operation. If you make further changes to the library after running the command, all you need to do is run `npm run build` again to see the changes propagated in your other project.
+
 ## Using Components in your project
 
 ### 1. Installing the library

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {

src/lib/ContestTile/ContestTile.scss

@@ -243,6 +243,7 @@
     max-width: 1036px;
     position: relative;
     container-type: inline-size;
+    margin-bottom: 1.5rem;
 
     // Important for stacking context created by container-type css property.
     // This makes sure the dropdown always appears above any proceding elements in a list.
@@ -252,12 +253,13 @@
 
     .c4contesttile, .c4contesttile.compact, .c4contesttile.tile--dark, .c4contesttile.compact--dark {
         width: 100%;
+        height: 100%;
         max-width: 1036px;
-        margin-bottom: 1.5rem;
 
         /* Main component wrapper. Outter wrapper is only for declaring component 
             as a container for container query compatibility */
         .container--inner {
+            height: 100%;
             background: $color__n-85;
             border: 1px solid $color__n-60;
             border-radius: $border-radius__base;
@@ -447,6 +449,9 @@
             }
 
             &.default-content {
+                display: flex;
+                flex-direction: column;
+
                 .body--bounty {
                     header .content--wrapper .description {
                         margin-top: 0 !important;
@@ -612,6 +617,10 @@
                         }
                     }
                 }
+
+                .footer--contest {
+                    margin-top: auto;
+                }
 
                 .footer--bounty {
                     &.live {
@@ -706,6 +715,13 @@
                                 color: $color__white;
                                 cursor: pointer;
 
+                                svg {
+                                    min-width: 2rem;
+                                    min-height: 2rem;
+                                    width: 2rem;
+                                    height: 2rem;
+                                }
+
                                 &:hover {
                                     background: $color__n-80;
                                 }