From 71a34293a9b6ccf21e5eb22bbeefd9665dc5ad93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antoni=20Nu=C3=B1ez=20Romeu?= <antoni.nunez@ficosa.com>
Date: Wed, 1 Jul 2026 17:08:15 +0200
Subject: [PATCH] Views in frontend changed

---
 frontend/src/App.css                  |   7 +-
 frontend/src/components/BottomNav.css | 234 +++++++++++++-------------
 frontend/src/components/TopBar.css    | 112 ++++++------
 3 files changed, 169 insertions(+), 184 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index f4f2fd2..58ccf16 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -11,12 +11,7 @@
   flex: 1;
   overflow-y: auto;
   overscroll-behavior: contain;
-}
-
-@media (max-width: 768px) {
-  .app-content {
-    padding-bottom: calc(6rem + env(safe-area-inset-bottom));
-  }
+  padding-bottom: calc(6rem + env(safe-area-inset-bottom));
 }
 
 @keyframes fadeInUp {
diff --git a/frontend/src/components/BottomNav.css b/frontend/src/components/BottomNav.css
index 3e301f1..d221231 100644
--- a/frontend/src/components/BottomNav.css
+++ b/frontend/src/components/BottomNav.css
@@ -1,123 +1,119 @@
 .bottom-nav {
-  display: none;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  width: 100%;
+  max-width: 48rem;
+  z-index: 50;
+  padding: 0.25rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
+  background: var(--surface-container-lowest);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  height: 5.5rem;
 }
 
-@media (max-width: 768px) {
-  .bottom-nav {
-    display: flex;
-    justify-content: space-around;
-    align-items: flex-end;
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 50;
-    padding: 0.25rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
-    background: var(--surface-container-lowest);
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
-    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-    height: 5.5rem;
-  }
-
-  .bottom-nav-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 0.15rem;
-    padding: 0.25rem 0.5rem;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: var(--on-surface-variant);
-    font: inherit;
-    -webkit-tap-highlight-color: transparent;
-    transition: color 0.15s;
-    position: relative;
-    min-width: 3.5rem;
-  }
-
-  .bottom-nav-item.disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .nav-icon-wrap {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.75rem;
-    height: 2.75rem;
-    border-radius: var(--radius-full);
-    color: inherit;
-    position: relative;
-  }
-
-  .nav-fab {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 3.5rem;
-    height: 3.5rem;
-    border-radius: var(--radius-full);
-    background: var(--tertiary-container);
-    color: var(--on-tertiary);
-    box-shadow: 0 4px 14px rgba(70, 0, 173, 0.35);
-    margin-top: -1.5rem;
-    transition: transform 0.15s;
-  }
-
-  .nav-fab:active {
-    transform: scale(0.92);
-  }
-
-  .nav-badge {
-    position: absolute;
-    top: 0;
-    right: -2px;
-    width: 1.125rem;
-    height: 1.125rem;
-    background: var(--error);
-    color: var(--on-error);
-    font-size: 0.625rem;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-full);
-    border: 2px solid var(--surface-container-lowest);
-    line-height: 1;
-  }
-
-  .nav-label {
-    font-size: 0.7rem;
-    font-weight: 500;
-    line-height: 1;
-    color: var(--on-surface-variant);
-  }
-
-  .nav-label--active {
-    color: var(--primary);
-    font-weight: 700;
-  }
-
-  .nav-indicator {
-    width: 0.375rem;
-    height: 0.375rem;
-    background: var(--primary);
-    border-radius: var(--radius-full);
-    margin-top: 0.125rem;
-  }
-
-  .bottom-nav-item.active .nav-icon-wrap {
-    color: var(--primary);
-  }
-
-  .bottom-nav-item.active .nav-icon-wrap svg {
-    stroke-width: 2.5;
-  }
-
-  .nav-elevated.active .nav-label {
-    color: var(--tertiary);
-  }
+.bottom-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.15rem;
+  padding: 0.25rem 0.5rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--on-surface-variant);
+  font: inherit;
+  -webkit-tap-highlight-color: transparent;
+  transition: color 0.15s;
+  position: relative;
+  min-width: 3.5rem;
+}
+
+.bottom-nav-item.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.nav-icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: var(--radius-full);
+  color: inherit;
+  position: relative;
+}
+
+.nav-fab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: var(--radius-full);
+  background: var(--tertiary-container);
+  color: var(--on-tertiary);
+  box-shadow: 0 4px 14px rgba(70, 0, 173, 0.35);
+  margin-top: -1.5rem;
+  transition: transform 0.15s;
+}
+
+.nav-fab:active {
+  transform: scale(0.92);
+}
+
+.nav-badge {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: var(--error);
+  color: var(--on-error);
+  font-size: 0.625rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--surface-container-lowest);
+  line-height: 1;
+}
+
+.nav-label {
+  font-size: 0.7rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--on-surface-variant);
+}
+
+.nav-label--active {
+  color: var(--primary);
+  font-weight: 700;
+}
+
+.nav-indicator {
+  width: 0.375rem;
+  height: 0.375rem;
+  background: var(--primary);
+  border-radius: var(--radius-full);
+  margin-top: 0.125rem;
+}
+
+.bottom-nav-item.active .nav-icon-wrap {
+  color: var(--primary);
+}
+
+.bottom-nav-item.active .nav-icon-wrap svg {
+  stroke-width: 2.5;
+}
+
+.nav-elevated.active .nav-label {
+  color: var(--tertiary);
 }
diff --git a/frontend/src/components/TopBar.css b/frontend/src/components/TopBar.css
index 36e0db7..ce82413 100644
--- a/frontend/src/components/TopBar.css
+++ b/frontend/src/components/TopBar.css
@@ -1,63 +1,57 @@
 .top-bar {
-  display: none;
+  display: block;
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background: var(--surface);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
 }
 
-@media (max-width: 768px) {
-  .top-bar {
-    display: block;
-    position: sticky;
-    top: 0;
-    z-index: 40;
-    background: var(--surface);
-    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
-  }
-
-  .topbar-inner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--touch-target-min);
-    padding: 0 var(--margin-main);
-    max-width: 48rem;
-    margin: 0 auto;
-  }
-
-  .topbar-back {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: var(--radius-full);
-    border: none;
-    background: transparent;
-    color: var(--primary);
-    cursor: pointer;
-    transition: background 0.15s;
-  }
-
-  .topbar-back:hover {
-    background: var(--surface-container-high);
-  }
-
-  .topbar-title {
-    font-size: 1.15rem;
-    font-weight: 700;
-    color: var(--primary);
-    letter-spacing: -0.01em;
-  }
-
-  .topbar-logo-img {
-    height: 2rem;
-    width: auto;
-  }
-
-  .topbar-spacer {
-    width: 2.5rem;
-  }
-
-  .topbar-right {
-    display: flex;
-    align-items: center;
-  }
+.topbar-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--touch-target-min);
+  padding: 0 var(--margin-main);
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.topbar-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full);
+  border: none;
+  background: transparent;
+  color: var(--primary);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.topbar-back:hover {
+  background: var(--surface-container-high);
+}
+
+.topbar-title {
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--primary);
+  letter-spacing: -0.01em;
+}
+
+.topbar-logo-img {
+  height: 2rem;
+  width: auto;
+}
+
+.topbar-spacer {
+  width: 2.5rem;
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
 }