Ajuste de estilos nav

hendaniel · Sep 7, 2020 · 38be913 · 38be913
1 parent 2fb4e87
commit 38be913
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 41 deletions.
diff --git a/src/components/FilterPanel/filter.scss b/src/components/FilterPanel/filter.scss
@@ -0,0 +1,21 @@
+.pagination-info,
+.filter {
+  font-family: "Raleway", sans-serif;
+  text-transform: uppercase;
+  font-size: 15px;
+  letter-spacing: 2px;
+  font-weight: 1000;
+  color: #292727;
+}
+
+.filter {
+  margin-left: 70px;
+  margin-right: 10px;
+}
+.filter-select {
+  padding-left: 5px;
+  outline: none;
+  border: none;
+  border-radius: 100px;
+  height: 19px;
+}
diff --git a/src/components/Products/products.scss b/src/components/Products/products.scss
@@ -145,28 +145,7 @@
   border: none;
 }
 
-.pagination-info,
-.filter {
-  font-family: "Raleway", sans-serif;
-  text-transform: uppercase;
-  font-size: 15px;
-  letter-spacing: 2px;
-  font-weight: 1000;
-  color: #292727;
-}
-
-.filter {
-  margin-left: 70px;
-  margin-right: 10px;
-}
-.filter-select {
-  padding-left: 5px;
-  outline: none;
-  border: none;
-  border-radius: 100px;
-  height: 19px;
-}
 .empty {
   display: flex;
   justify-content: center;
-}
+}
diff --git a/src/components/User/UserPanel.jsx b/src/components/User/UserPanel.jsx
@@ -27,6 +27,7 @@ const UserPanel = () => {
     return (
       <li key={key}>
         <NavLink
+          exact
           className="nav-item"
           to={route.path}
           activeClassName="selected-nav"
@@ -38,15 +39,15 @@ const UserPanel = () => {
   });
   return (
     <>
-      <div className="profile">
-        {coinsModal && (
-          <CoinsModal isShowing={coinsModal} hide={toggleCoinsModal} />
-        )}
+      {coinsModal && (
+        <CoinsModal isShowing={coinsModal} hide={toggleCoinsModal} />
+      )}
+      <div className="user-panel">
         <div className="navigation">
           <ul className="options">{links}</ul>
         </div>
-        <div className="user-panel">
-          <div>{name}</div>
+        <div className="profile">
+          <div className="name">{name}</div>
           <div className="coins-user">
             <img src={coin} onClick={openCoinsModal} alt="Coins" />
             <span className="points">{points}</span>

diff --git a/src/components/User/user.scss b/src/components/User/user.scss
@@ -1,6 +1,5 @@
 .user-panel {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
   background-color: #ffffff;
   width: 100%;
@@ -13,22 +12,46 @@
   font-weight: 500;
   color: #868686;
 
-  .coins-user {
-    margin-right: 10px;
-    border-radius: 100px;
+  .profile {
+    width: 50%;
     display: flex;
-    justify-content: center;
-    background-color: #ededed;
-    width: 110px;
-    span {
-      display: inline-flex;
+    justify-content: flex-end;
+    .name {
+      display: flex;
       align-items: center;
-      color: gray;
+    }
+    .coins-user {
+      margin-right: 10px;
+      border-radius: 100px;
+      display: flex;
+      justify-content: center;
+      background-color: #ededed;
+      width: 110px;
+      span {
+        display: inline-flex;
+        align-items: center;
+        color: gray;
+      }
+    }
+    img {
+      &:hover {
+        cursor: pointer;
+      }
     }
   }
-  img {
-    &:hover {
-      cursor: pointer;
+
+  .navigation {
+    width: 50%;
+    display: flex;
+    ul > li {
+      display: inline-block;
+      margin-left: 40px;
     }
   }
+  .nav-item {
+    color: gray;
+  }
+  .selected-nav {
+    color: #45d2f7;
+  }
 }