Added styling to dropdown and fixed the trigger

src/components/DropdownButton/DropdownButton.module.css

@@ -36,35 +36,40 @@
 
 .dropdown_content {
  width: 300px;
- background-color: white;
- border-radius: 6px;
+ background: var(--sideBar_background);
+
+ border-radius: 8px;
  padding: 5px;
+
  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
- animation-duration: 400ms;
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
- will-change: transform, opacity;
 }
 
 .dropdown_item {
- font-size: 16px;
- line-height: 1;
- color: var(--violet-11);
- border-radius: 3px;
  display: flex;
  align-items: center;
- height: 25px;
- padding: 0 5px;
  position: relative;
- padding-left: 25px;
- user-select: none;
+
+ border-radius: 8px;
+ padding: 15px;
+
+ font-size: 14px;
+ font-weight: 700;
+ text-transform: uppercase;
+ background: rgba(255, 255, 255, 0);
+
+ color: var(--primary);
+
+ transition: background 0.1s;
+
  outline: none;
+ user-select: none;
+ cursor: pointer;
 }
 
 .dropdown_item[data-highlighted] {
- background-color: var(--violet-9);
- color: var(--violet-1);
+ background: var(--sideBar_selection);
 }
 
 .dropdown_arrow {
- fill: white;
+ fill: var(--sideBar_background);
 }

src/components/DropdownButton/index.tsx

@@ -17,19 +17,23 @@ const DropdownButton: React.FC<DropdownProps> = (props: DropdownProps) => {
  } = props;
 
  return <DropdownMenu.Root>
- <DropdownMenu.Trigger asChild>
- <div className={[styles.container, className].join(" ")} style={style}>
- <Button {...buttonProps as ButtonProps} className={styles.button}>
-  {children}
-  </Button>
+ <div className={[styles.container, className].join(" ")} style={style}>
+ <Button {...buttonProps as ButtonProps} className={styles.button}>
+ {children}
+ </Button>
+ <DropdownMenu.Trigger asChild>
  <button className={styles.dropdown_button}>
  <DropdownIcon width={12} height={12} />
  </button>
- </div>
- </DropdownMenu.Trigger>
+ </DropdownMenu.Trigger>
+ </div>
 
  <DropdownMenu.Portal>
- <DropdownMenu.Content className={styles.dropdown_content} sideOffset={5}>
+ <DropdownMenu.Content
+ className={styles.dropdown_content}
+ sideOffset={5}
+ align="end">
+
  {dropdownChildren}
  <DropdownMenu.Arrow className={styles.dropdown_arrow} />
  </DropdownMenu.Content>

src/components/Launch/LaunchButton/index.tsx

@@ -50,6 +50,12 @@ export function LaunchButton(props: LaunchButtonProps) {
  </>;
 
  const dropdownChildren = <>
+ <DropdownItem>
+ Open Folder
+ </DropdownItem>
+ <DropdownItem>
+ Clear Caches
+ </DropdownItem>
  <DropdownItem>
  Uninstall
  </DropdownItem>

src/components/Sidebar/Sidebar.module.css

@@ -1,7 +1,7 @@
 .sidebar {
  width: 300px;
  padding: 15px;
- 
+
  background: var(--sideBar_background);
  color: var(--primary);
 
@@ -49,7 +49,7 @@
 .button {
  display: flex;
  gap: 10px;
- 
+
  background: rgba(255, 255, 255, 0);
  border-radius: 13px;
 

src/styles.css

@@ -22,6 +22,7 @@
 
  --sideBar_background: #05060B;
  --sideBar_separator_color: #394452;
+ --sideBar_selection: rgba(255, 255, 255, 0.1);
 
  --button_green: #46E74F;
  --button_blue: #2ED9FF;