ProgressBar

  - Remove left side border radius
NavigationTab
  - Add underline for active tab

Author: shreeyash07

app/src/components/NavigationTab/index.tsx

@@ -188,6 +188,7 @@ function NavigationTab(props: Props) {
             )}
             <div className={styles.childrenWrapper}>
                 {children}
+                <div className={styles.activeChildrenBorder} />
             </div>
             {variant === 'primary' && (
                 <div className={styles.dummy} />

app/src/components/NavigationTab/styles.module.css

@@ -140,9 +140,19 @@
         font-size: var(--go-ui-font-size-lg);
 
         .children-wrapper {
+            display:flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-sm);
             border-bottom-color: var(--border-color);
             background-color: var(--go-ui-color-background);
-            padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
+            padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg) var(--go-ui-spacing-xs);
+
+        }
+
+        .active-children-border {
+            background-color: transparent;
+            width: 100%;
+            height: var(--go-ui-width-separator-small);
         }
 
         &.active {
@@ -152,6 +162,10 @@
                 border-color: var(--border-color);
                 border-bottom-color: transparent;
                 background-color: var(--go-ui-color-white);
+
+                .active-children-border {
+                    background-color: var(--go-ui-color-primary-red);
+                }
             }
         }
 

packages/ui/src/components/Popup/styles.module.css

@@ -1,15 +1,10 @@
 .popup {
     position: fixed;
     border-radius: var(--go-ui-spacing-xs);
-    box-shadow: var(--go-ui-box-shadow-2xl);
+    box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.08);
     background-color: var(--go-ui-color-white);
     max-height: 40vh;
     overflow: auto;
-
-    &.top-orientation {
-        /* FIXME: add variable */
-        box-shadow: 0 -8pt 20pt -5pt rgb(0 0 0 / 0.5);
-    }
 }
 
 .pointer {

packages/ui/src/components/ProgressBar/styles.module.css

@@ -11,13 +11,13 @@
     .total {
         display: flex;
         flex-shrink: 0;
-        border-radius: var(--go-ui-border-radius-md);
+        border-radius: 0 var(--go-ui-border-radius-md) var(--go-ui-border-radius-md) 0;
         background-color: var(--go-ui-color-separator);
         height: 0.5rem;
 
         .progress {
             transition: var(--go-ui-duration-transition-medium) width ease-in-out;
-            border-radius: var(--go-ui-border-radius-md);
+        border-radius: 0 var(--go-ui-border-radius-md) var(--go-ui-border-radius-md) 0;
             background-color: currentColor;
         }
     }