fix project nav padding etc

PotLock · Oct 25, 2023 · 7efee67 · 7efee67
1 parent a54c2e0
commit 7efee67
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/apps/potlock/widget/Project/NavOptions.jsx b/apps/potlock/widget/Project/NavOptions.jsx
@@ -36,8 +36,15 @@ const NavOptionsContainer = styled.div`
   margin-bottom: 32px;
 `;
 
+const NavOptionContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
 const NavOption = styled.a`
   font-size: 14px;
+  padding: 8px 16px;
   font-weight: ${(props) => (props.selected ? 600 : 400)};
   color: ${(props) => (props.selected ? "#DD3345" : "#7B7B7B")};
   cursor: ${(props) => (props.disabled ? "not-allowed" : props.selected ? "pointer" : "default")};
@@ -58,13 +65,18 @@ return (
           {option.label}
         </NavOption>
       ) : (
-        <NavOption
-          selected={option.label == getSelectedNavOption().label}
-          disabled={option.disabled}
-          href={`?tab=project&projectId=${props.projectId}&nav=${option.label}`}
-        >
-          {option.label}
-        </NavOption>
+        <NavOptionContainer>
+          {option.label == getSelectedNavOption().label && (
+            <div style={{ width: 2, height: 16, background: "#DD3345", borderRadius: 2 }} />
+          )}
+          <NavOption
+            selected={option.label == getSelectedNavOption().label}
+            disabled={option.disabled}
+            href={`?tab=project&projectId=${props.projectId}&nav=${option.label}`}
+          >
+            {option.label}
+          </NavOption>
+        </NavOptionContainer>
       );
     })}
   </NavOptionsContainer>

diff --git a/build/potlock/src/Project/NavOptions.jsx b/build/potlock/src/Project/NavOptions.jsx
@@ -36,8 +36,15 @@ const NavOptionsContainer = styled.div`
   margin-bottom: 32px;
 `;
 
+const NavOptionContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
 const NavOption = styled.a`
   font-size: 14px;
+  padding: 8px 16px;
   font-weight: ${(props) => (props.selected ? 600 : 400)};
   color: ${(props) => (props.selected ? "#DD3345" : "#7B7B7B")};
   cursor: ${(props) => (props.disabled ? "not-allowed" : props.selected ? "pointer" : "default")};
@@ -58,13 +65,18 @@ return (
           {option.label}
         </NavOption>
       ) : (
-        <NavOption
-          selected={option.label == getSelectedNavOption().label}
-          disabled={option.disabled}
-          href={`?tab=project&projectId=${props.projectId}&nav=${option.label}`}
-        >
-          {option.label}
-        </NavOption>
+        <NavOptionContainer>
+          {option.label == getSelectedNavOption().label && (
+            <div style={{ width: 2, height: 16, background: "#DD3345", borderRadius: 2 }} />
+          )}
+          <NavOption
+            selected={option.label == getSelectedNavOption().label}
+            disabled={option.disabled}
+            href={`?tab=project&projectId=${props.projectId}&nav=${option.label}`}
+          >
+            {option.label}
+          </NavOption>
+        </NavOptionContainer>
       );
     })}
   </NavOptionsContainer>