Clone button enhancements (#33362)

- Add box-shadow to default tippy theme
- Make colors for tabs match the ones from `.ui.tabular.menu`
- Remove tippy arrow and slightly offset tooltip closer to the button
- Fix setting of `aria-haspopup` when default role is used with tippy

---------

Co-authored-by: wxiaoguang <[email protected]>

web_src/css/modules/tippy.css

@@ -28,6 +28,10 @@
   z-index: 1;
 }
 
+.tippy-box[data-theme="default"] {
+  box-shadow: 0 6px 18px var(--color-shadow);
+}
+
 /* bare theme, no styling at all, except box-shadow */
 .tippy-box[data-theme="bare"] {
   border: none;

web_src/css/repo.css

@@ -1630,7 +1630,7 @@ td .commit-summary {
 }
 
 .repo-button-row-left {
-  flex: 1;
+  flex-grow: 1;
 }
 
 .repo-button-row .button {

web_src/css/repo/clone.css

@@ -20,10 +20,12 @@
 .clone-panel-tab .item {
   padding: 5px 10px;
   background: none;
+  color: var(--color-text-light-2);
 }
 
 .clone-panel-tab .item.active {
-  border-bottom: 3px solid var(--color-secondary);
+  color: var(--color-text-dark);
+  border-bottom: 3px solid currentcolor;
 }
 
 .clone-panel-tab + .divider {

web_src/js/features/repo-common.ts

@@ -99,6 +99,7 @@ function initClonePanelButton(btn: HTMLButtonElement) {
     placement: 'bottom-end',
     interactive: true,
     hideOnClick: true,
+    arrow: false,
   });
 }
 

web_src/js/modules/tippy.ts

@@ -42,16 +42,17 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance {
       visibleInstances.add(instance);
       return onShow?.(instance);
     },
-    arrow: arrow || (theme === 'bare' ? false : arrowSvg),
+    arrow: arrow ?? (theme === 'bare' ? false : arrowSvg),
     // HTML role attribute, ideally the default role would be "popover" but it does not exist
     role: role || 'menu',
     // CSS theme, either "default", "tooltip", "menu", "box-with-header" or "bare"
     theme: theme || role || 'default',
+    offset: [0, arrow ? 10 : 6],
     plugins: [followCursor],
     ...other,
   } satisfies Partial<Props>);
 
-  if (role === 'menu') {
+  if (instance.props.role === 'menu') {
     target.setAttribute('aria-haspopup', 'true');
   }