Gradient in upload icon

Author: GuidoBR

frontend/src/common/components/Router/TabNavigation.scss

@@ -2,9 +2,10 @@
   &__bar {
     border-radius: 2rem;
     margin: 0 0.75rem 0.75rem;
-    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 10%);
     height: var(--tab-bar-height, 3.5rem);
-    --background: #ffffff;
+
+    --background: #fff;
 
     /* Override default iOS padding */
     padding-bottom: 0;
@@ -45,7 +46,10 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          background-color: #4765ff;
+
+          /* Replace solid background with gradient */
+          background-color: transparent;
+          background-image: linear-gradient(135deg, #4765ff 0%, #6357fa 50%, #a557fa 100%);
           color: white;
           width: 3rem;
           height: 3rem;
@@ -54,9 +58,23 @@
           bottom: calc(50% - 0.5rem);
           left: 50%;
           transform: translateX(-50%);
-          box-shadow: 0 0.25rem 0.5rem rgba(71, 101, 255, 0.3);
+
+          /* Enhanced shadow effect */
+          box-shadow:
+            0 0.5rem 1rem rgb(100 87 250 / 40%),
+            0 0.125rem 0.25rem rgb(65 101 255 / 30%);
           z-index: 10;
 
+          /* Add slight transition for hover effects */
+          transition:
+            transform 0.2s ease,
+            box-shadow 0.2s ease;
+
+          &:active {
+            transform: translateX(-50%) scale(0.95);
+            box-shadow: 0 0.25rem 0.5rem rgb(100 87 250 / 30%);
+          }
+
           .ls-tab-navigation__bar-button-icon {
             color: white;
             margin: 0;