13/03/2023 - General - Revisión del prototipo

Arquisoft · Mar 13, 2023 · 2d1ce62 · 2d1ce62
1 parent 1cb670b
commit 2d1ce62
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 23 deletions.
diff --git a/webapp/src/components/navigation/LogInButton.tsx b/webapp/src/components/navigation/LogInButton.tsx
diff --git a/webapp/src/components/navigation/NavBar.tsx b/webapp/src/components/navigation/NavBar.tsx
@@ -45,18 +45,20 @@ function NavBar() {
             <NavItem to={"/help"} text={"Help"}/>
             <NavItem to={"/about"} text={"About"}/>
             <div id="login-manage">
-                {(!isLoggedIn) ? null :
+                {(!isLoggedIn) ? "" :
                     <Card><Card.Text>{dropdownTitle}</Card.Text></Card>}
                 {(!isLoggedIn) ?
                     <LoginButton oidcIssuer="https://inrupt.net" redirectUrl="http://localhost:3000/map">
-                        <Button variant="contained" color="primary">
+                        <Button variant="contained" color="primary"  id="login">
                             Login
                         </Button>
                     </LoginButton> : <LogoutButton>
-                        <Button variant="contained" color="error">
+                        <Button variant="contained" color="error" id="logout">
                             Logout
                         </Button></LogoutButton>}
-                <a href="https://inrupt.net/register">Haven't signed yed? Register now!</a>
+                {(isLoggedIn) ? "" :
+                    <a href="https://inrupt.net/register">Haven't signed yed? Register now!</a>
+                }
             </div>
         </nav>
     );

diff --git a/webapp/src/css/navigation.css b/webapp/src/css/navigation.css
@@ -46,10 +46,9 @@ nav a:active, #login-manage a:active {
     margin-right: 0;
 }
 
-div[role="button"] button {
+#login, #logout {
     font-weight: bold;
     color: white;
-    background-color: #0063fd;
     padding: 10px;
     border-radius: 20px;
     border-color: white;
@@ -58,11 +57,19 @@ div[role="button"] button {
     cursor: pointer;
 }
 
-div[role="button"] button:hover {
+#login {
+    background-color: #0063fd;
+}
+
+#logout {
+    background-color: #8f8d8d;
+}
+
+#login:hover, #logout:hover {
     background-color: #00a6fb;
 }
 
-div[role="button"] button:active {
+#login:active, #logout:active {
     background-color: #007ffd;
 }