diff --git a/src/components/DropdownButton/DropdownButton.module.css b/src/components/DropdownButton/DropdownButton.module.css index a84fccd..acd2533 100644 --- a/src/components/DropdownButton/DropdownButton.module.css +++ b/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); } \ No newline at end of file diff --git a/src/components/DropdownButton/index.tsx b/src/components/DropdownButton/index.tsx index 8e22a95..1daf8f4 100644 --- a/src/components/DropdownButton/index.tsx +++ b/src/components/DropdownButton/index.tsx @@ -17,19 +17,23 @@ const DropdownButton: React.FC = (props: DropdownProps) => { } = props; return - -
- +
+ + -
- + +
- + + {dropdownChildren} diff --git a/src/components/Launch/LaunchButton/index.tsx b/src/components/Launch/LaunchButton/index.tsx index 6c60fe6..3856611 100644 --- a/src/components/Launch/LaunchButton/index.tsx +++ b/src/components/Launch/LaunchButton/index.tsx @@ -50,6 +50,12 @@ export function LaunchButton(props: LaunchButtonProps) { ; const dropdownChildren = <> + + Open Folder + + + Clear Caches + Uninstall diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css index 6a22dd2..a25ef29 100644 --- a/src/components/Sidebar/Sidebar.module.css +++ b/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; diff --git a/src/styles.css b/src/styles.css index 9173836..ae72754 100644 --- a/src/styles.css +++ b/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;