diff --git a/components/shared/dropdown-btn.tsx b/components/shared/dropdown-btn.tsx index 90af8703..2705afe0 100644 --- a/components/shared/dropdown-btn.tsx +++ b/components/shared/dropdown-btn.tsx @@ -9,6 +9,7 @@ function DropdownBtn({ extensionOptions, onClick, disabled, + popoverClassName, }: { title: React.ReactNode; extension?: string; @@ -17,6 +18,7 @@ function DropdownBtn({ value: string; }[]; disabled?: boolean; + popoverClassName?: string; onClick?: (option: string) => void; }) { const [anchorEl, setAnchorEl] = useState(null); @@ -74,7 +76,7 @@ function DropdownBtn({ }} slotProps={{ paper: { - className: `dropdown-btn__popover-paper`, + className: `dropdown-btn__popover-paper ${popoverClassName ?? ''}`, style: { width: ref.current?.clientWidth, }, diff --git a/components/shared/linux-btn-group.tsx b/components/shared/linux-btn-group.tsx index f023fc56..47dd0d67 100644 --- a/components/shared/linux-btn-group.tsx +++ b/components/shared/linux-btn-group.tsx @@ -27,11 +27,11 @@ function LinuxBtnGroup({ title }: { title: string }) { value: 'tar.gz', }, { - label: 'Flatpak', + label: '.Flatpak', value: 'Flatpak', }, { - label: 'Snap', + label: '.Snap', value: 'Snap', }, ]; @@ -43,6 +43,7 @@ function LinuxBtnGroup({ title }: { title: string }) { title={title} extension={'AppImage'} extensionOptions={linuxOptions} + popoverClassName={'linux-download-popover'} onClick={(extension: string) => { if (extension === 'AppImage') downloadLinux86AppImage(); if (extension === 'deb') downloadLinux86Deb(); diff --git a/styles/download.scss b/styles/download.scss index 1b630df6..43010ada 100644 --- a/styles/download.scss +++ b/styles/download.scss @@ -75,7 +75,7 @@ } .apps-col { - @apply flex flex-col rounded-[20px] border border-primary-10 bg-white p-[40px]; + @apply flex flex-col rounded-[20px] bg-white p-[40px]; @apply max-sm:p-[24px]; } @@ -125,7 +125,7 @@ } .light-testimonial-card { - @apply flex w-[600px] shrink-0 flex-col justify-between gap-[36px] rounded-[16px] border border-primary-10 bg-white p-[28px]; + @apply flex w-[600px] shrink-0 flex-col justify-between gap-[36px] rounded-[16px] border border-[#E6E6E6] bg-white p-[28px]; @apply max-lg:w-[480px] max-md:w-full max-md:max-w-[480px] max-md:gap-[24px]; // Only the middle card is fully in view; the ones on either side are @@ -190,3 +190,33 @@ @apply h-full flex-1 justify-start py-0 pl-5 text-base font-medium; } } + +#body .linux-download-popover { + box-sizing: border-box; + padding: 12px !important; + border: 0 !important; + border-radius: 16px !important; + background: #fff !important; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.12) !important; + + .dropdown-btn__extension-options { + gap: 0; + } + + .dropdown-btn__extension-option { + box-sizing: border-box; + min-height: 48px; + height: 48px; + padding: 12px 16px !important; + border-radius: 8px !important; + color: #140f28; + font-size: 16px; + font-weight: 500; + line-height: 24px; + background: transparent !important; + + &:hover { + background: rgba(20, 15, 40, 0.04) !important; + } + } +}