Merge pull request #167 from oasisprotocol/ml/home/add-wrap

home: Add wrap

Author: lubej

home/public/wrap-card-background.png

@@ -2,13 +2,13 @@
   padding: 1rem;
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 0.75rem;
 }
 
 .row {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 0.75rem;
   width: 100%;
 
   > a {
@@ -40,6 +40,10 @@
       background-image: url('/move-card-background.png');
     }
 
+    &.wrap {
+      background-image: url('/wrap-card-background.png');
+    }
+
     p {
       flex-grow: 1;
     }
@@ -49,6 +53,7 @@
 @media screen and (min-width: 1024px) {
   .main {
     padding: 1.5rem;
+    gap: 1.5rem;
   }
 
   .row {
@@ -58,6 +63,10 @@
       height: 400px;
       flex: 1 1 calc(25% - 1.5rem);
       background-size: initial;
+
+      &.wrap {
+        flex: 0 1 calc(33.33% - 16px);
+      }
     }
   }
 }

home/src/App.module.css

@@ -28,6 +28,13 @@ export function App() {
             <img src={east_svg} alt="Go" width="24" style={{ filter: 'invert(1)' }} />
           </NavLink>
         </div>
+        <div className={classes.row}>
+          <NavLink to="/wrap" className={classes.wrap}>
+            <h2>Wrap</h2>
+            <p>Wrap or unwrap ROSE.</p>
+            <img src={east_svg} alt="Go" width="24" style={{ filter: 'invert(1)' }} />
+          </NavLink>
+        </div>
       </main>
     </>
   )

home/src/App.tsx

@@ -55,9 +55,9 @@ export function SidebarCmp({ navItem }: Props) {
             <NavLink to="/move" className={({ isActive }) => (isActive ? classes.activeLink : '')}>
               Move
             </NavLink>
-            {/*<NavLink to="/wrap" className={({ isActive }) => (isActive ? classes.activeLink : '')}>
+            <NavLink to="/wrap" className={({ isActive }) => (isActive ? classes.activeLink : '')}>
               Wrap
-            </NavLink>*/}
+            </NavLink>
           </div>
         </div>