Merge pull request #8 from NEARBuilders/UI-cleanup

UI-cleanup
NEARBuilders · Sep 18, 2024 · 6a72612 · 6a72612
2 parents e53d47a + 6ecbc42
commit 6a72612
Show file tree

Hide file tree

Showing 5 changed files with 659 additions and 154 deletions.
diff --git a/widget/Index.jsx b/widget/Index.jsx
@@ -46,7 +46,6 @@ const routerConfig = {
 
 const CSS = styled.div`
   width: 100%;
-  height: 100vh;
   display: flex;
   justify-content: space-between;
 
@@ -56,23 +55,46 @@ const CSS = styled.div`
 
   .header {
     border: "solid";
-    padding: 20px;
+    padding: 20px 0px;
 
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    .nav {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 0;
+      .right-nav,
+      .logo-area {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+    }
+    .hero {
+      display: flex;
+      /* justify-content: center; */
+      /* align-items: center; */
+    }
   }
 
   .sidebar {
     display: flex;
     flex-direction: column;
+    justify-content: left;
+    align-items: flex-start;
     width: 250px;
     padding: 20px;
     gap: 10px;
   }
 
   .button {
-    width: 100%;
-    padding: 5px;
+    background-color: #fff;
+    color: #312f32;
+    border: 1px solid #ed8a71;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
   }
 
   .footer {
@@ -125,20 +147,100 @@ const NavLink = ({ to, children, passProps }) => (
   </Link>
 );
 
+const CartCount = styled.span`
+  background: #000;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 10px;
+  font-weight: bold;
+  display: inline-block;
+  text-align: center;
+  line-height: 20px;
+  height: 18px;
+  width: 18px;
+  position: absolute;
+  top: 1px;
+  right: -2px;
+  .numwrap {
+    position: relative;
+    top: -2px;
+  }
+`;
+
+const numCartItems = getCartItemCount();
+
+const NavItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* font-weight: 700; */
+  i {
+    margin-right: 5px;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  .cnt {
+    position: relative;
+    font-size: 30px;
+  }
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: 1px solid #c3c3c3;
+    color: #000000;
+    outline: none;
+    /* padding: 5px 20px; */
+    padding: 0px 12px;
+    border-radius: 5px;
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+    :hover {
+      background: #ecececda;
+    }
+  }
+`;
+
 const Header = () => (
   <div className="header">
-    <h1>Black Dragon Marketplace</h1>
-    <>
-      <NavLink
-        to="inspect"
-        passProps={{
-          widgetPath: routerConfig.routes[props.page].path ?? "${config_index}",
-        }}
-      >
-        <i className="bi bi-code"></i>
-        <span>View source</span>
-      </NavLink>
-    </>
+    <div className="nav">
+      <div className="logo-area">
+        {/* <NavLink to={"home"}><img src="#" alt="bd-logo"/></NavLink> */}
+        <NavItem>
+          <NavLink to={"home"}>Home</NavLink>
+        </NavItem>
+      </div>
+      <div className="right-nav">
+        <NavItem>
+          <NavLink
+            to="inspect"
+            passProps={{
+              widgetPath:
+                routerConfig.routes[props.page].path ?? "${config_index}",
+            }}
+          >
+            <i className="bi bi-code"></i>
+            <span>View source</span>
+          </NavLink>
+        </NavItem>
+        <NavItem>
+          <NavLink to={"cart"}>
+            <div className="cnt">
+              <i className="bi bi-cart"></i>{" "}
+              {numCartItems > 0 && (
+                <CartCount>
+                  <div className="numwrap">{numCartItems}</div>
+                </CartCount>
+              )}
+            </div>
+          </NavLink>
+        </NavItem>
+      </div>
+    </div>
   </div>
 );
 
@@ -187,27 +289,23 @@ const Footer = () => (
   </div>
 );
 
-const CartCount = styled.span`
-  background: #000;
-  color: #fff;
-  padding: ${numCartItems > 0 ? "8px 8px 8px 16px" : "8px 16px"};
-  border-radius: 100%;
-  font-size: 12px;
-  margin-left: 5px;
-  font-weight: bold;
-  display: inline-block;
-  text-align: center;
-  line-height: 20px;
-`;
-
-const numCartItems = getCartItemCount();
-
 const Sidebar = () => (
   <div className="sidebar">
-    <NavLink to={"home"}>Home</NavLink>
-    <NavLink to={"cart"}>
-      Cart {numCartItems > 0 && <CartCount>{numCartItems}</CartCount>}
-    </NavLink>
+    <NavItem>
+      <NavLink to={"home"}>Home</NavLink>
+    </NavItem>
+    <NavItem>
+      <NavLink to={"cart"}>
+        <div className="cnt">
+          <i className="bi bi-cart"></i>{" "}
+          {numCartItems > 0 && (
+            <CartCount>
+              <div className="numwrap">{numCartItems}</div>
+            </CartCount>
+          )}
+        </div>
+      </NavLink>
+    </NavItem>
   </div>
 );
 
@@ -220,8 +318,8 @@ const Content = () => (
 );
 
 return (
-  <CSS>
-    <Layout variant="sidebar" blocks={{ Sidebar, Header, Footer }}>
+  <CSS className="container">
+    <Layout variant="standard" blocks={{ Sidebar, Header, Footer }}>
       <Content />
     </Layout>
   </CSS>