Apply base style to dropdown component

src/apps/explorer/components/OrdersTableWidget/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
@@ -8,7 +8,7 @@ import { OrdersTableWithData } from './OrdersTableWithData'
 import { OrdersTableContext } from './context/OrdersTableContext'
 import { useGetOrders } from './useGetOrders'
 import { TabItemInterface } from 'components/common/Tabs/Tabs'
-import { Dropdown } from '../../components/common/Dropdown'
+import { Dropdown, DropdownOption } from '../../components/common/Dropdown'
 
 const StyledTabLoader = styled.span`
   padding-left: 4px;
@@ -29,19 +29,19 @@ const tabItems = (isLoadingOrders: boolean): TabItemInterface[] => {
   ]
 }
 
-const PaginationDropdownButton = styled.div`
-  font-size: 13px;
+const PaginationTextCSS = css`
+  color: ${({ theme }): string => theme.textPrimary1};
+  font-size: ${({ theme }): string => theme.fontSizeDefault};
   font-weight: normal;
   white-space: nowrap;
-  cursor: pointer;
 `
-const PaginationWrapper = styled.div`
+const PaginationDropdownButton = styled.div`
+  ${PaginationTextCSS}
   align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 50px;
-  padding: 0 15px;
+`
+
+const PaginationWrapper = styled.div`
+  ${PaginationTextCSS}
 `
 
 const PaginationText = styled.p`
@@ -51,13 +51,17 @@ const PaginationText = styled.p`
 `
 
 const DropdownPagination = styled(Dropdown)`
-  .dropdownItems {
+  .dropdown-options {
     min-width: 70px;
   }
 `
-const PaginationItem = styled.option`
+const PaginationItem = styled(DropdownOption)`
   align-items: center;
   cursor: pointer;
+  height: 32px;
+  line-height: 1.2;
+  padding: 0 10px;
+  white-space: nowrap;
 `
 
 const Pagination: React.FC = () => {

src/apps/explorer/components/common/Dropdown/Drodown.stories.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components'
 import { Meta, Story } from '@storybook/react'
 import { GlobalStyles, ThemeToggler } from 'storybook/decorators'
 
-import { Dropdown, DropdownProps, DropdownOption } from './index'
+import { Dropdown, DropdownProps, DropdownOption, DropdownDirection } from './index'
 
 export default {
   title: 'ExplorerApp/Dropdown',
@@ -22,7 +22,7 @@ const onSetPageSize = (pageOption: number): void => {
 
 const PaginationTextCSS = css`
   color: ${({ theme }): string => theme.textPrimary1};
-  font-size: 13px;
+  font-size: ${({ theme }): string => theme.fontSizeDefault};
   font-weight: normal;
   white-space: nowrap;
 `
@@ -43,6 +43,7 @@ const Template: Story<DropdownProps> = (args) => <Dropdown {...args} />
 
 export const DefaultTabs = Template.bind({})
 DefaultTabs.args = {
+  dropdownDirection: DropdownDirection.downwards,
   items: dropdownOptions,
   dropdownButtonContent: <PaginationDropdownButton>{pageSize} ▼</PaginationDropdownButton>,
 }

src/apps/explorer/components/common/Dropdown/index.tsx

@@ -1,8 +1,28 @@
 import React, { DOMAttributes, useState, useCallback, createRef, ReactElement } from 'react'
-import styled from 'styled-components'
+import styled, { FlattenSimpleInterpolation } from 'styled-components'
 
-import { BaseCard } from './styled'
-import useOnClickOutside from './useOnClickOutside'
+import {
+  BaseCard,
+  PositionCenterCSS,
+  PositionLeftCSS,
+  PositionRightCSS,
+  DirectionDownwardsCSS,
+  DirectionUpwardsCSS,
+  DropdownItemProps,
+  DropdownItemCSS,
+} from './styled'
+import useOnClickOutside from 'hooks/useOnClickOutside'
+
+export enum DropdownPosition {
+  center,
+  left,
+  right,
+}
+
+export enum DropdownDirection {
+  downwards = 'down',
+  upwards = 'up',
+}
 
 const Wrapper = styled.div<{ isOpen: boolean; disabled: boolean }>`
   outline: none;
@@ -33,38 +53,62 @@ export interface DropdownProps extends DOMAttributes<HTMLDivElement> {
   items: Array<ReactElement>
   triggerClose?: boolean
   dropdownButtonContent?: React.ReactNode | string
+  dropdownDirection?: DropdownDirection | undefined
+  dropdownPosition?: DropdownPosition | undefined
 }
 
+type CssString = FlattenSimpleInterpolation | string
+
 const Items = styled(BaseCard)<{
+  dropdownDirection?: DropdownDirection
+  dropdownPosition?: DropdownPosition
   fullWidth?: boolean
   isOpen: boolean
 }>`
-  border-radius: 5px;
-  border: ${({ theme }): string => `1px solid ${theme.borderPrimary}`};
+  background: ${({ theme }): string => theme.bg1};
+  border-radius: 0.6rem;
+  border: 1px solid ${({ theme }): string => theme.borderPrimary};
+  box-shadow: ${({ theme }): string => theme.boxShadow};
   display: ${(props): string => (props.isOpen ? 'block' : 'none')};
   min-width: 160px;
   position: absolute;
   white-space: nowrap;
+
+  ${(props): CssString => (props.fullWidth ? 'width: 100%;' : '')}
+  ${(props): CssString => (props.dropdownPosition === DropdownPosition.left ? PositionLeftCSS : '')}
+  ${(props): CssString => (props.dropdownPosition === DropdownPosition.right ? PositionRightCSS : '')}
+  ${(props): CssString => (props.dropdownPosition === DropdownPosition.center ? PositionCenterCSS : '')}
+  ${(props): CssString => (props.dropdownDirection === DropdownDirection.downwards ? DirectionDownwardsCSS : '')}
+  ${(props): CssString => (props.dropdownDirection === DropdownDirection.upwards ? DirectionUpwardsCSS : '')}
 `
 
-export const DropdownOption = styled.li`
-  align-items: center;
-  cursor: pointer;
+Items.defaultProps = {
+  dropdownDirection: DropdownDirection.downwards,
+  dropdownPosition: DropdownPosition.left,
+  fullWidth: false,
+  isOpen: false,
+}
+
+export const DropdownOption = styled.li<DropdownItemProps>`
+  ${DropdownItemCSS}
+  list-style-type: none;
 `
 
 export const Dropdown: React.FC<DropdownProps> = (props) => {
   const {
     activeItemHighlight = true,
-    closeOnClick = true,
     className = '',
+    closeOnClick = true,
     currentItem = 0,
     disabled = false,
-    items,
     dropdownButtonContent = '▼',
+    dropdownDirection,
+    dropdownPosition,
+    items,
   } = props
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const dropdownContainerRef = createRef<HTMLDivElement>()
-  useOnClickOutside(dropdownContainerRef, () => setIsOpen(!isOpen))
+  useOnClickOutside(dropdownContainerRef, () => setIsOpen(false))
 
   const onButtonClick = useCallback(
     (e) => {
@@ -83,7 +127,12 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
       ref={dropdownContainerRef}
     >
       <ButtonContainer onClick={onButtonClick}>{dropdownButtonContent}</ButtonContainer>
-      <Items className="dropdown-options" isOpen={isOpen}>
+      <Items
+        className="dropdown-options"
+        dropdownDirection={dropdownDirection}
+        dropdownPosition={dropdownPosition}
+        isOpen={isOpen}
+      >
         {items.map((item: ReactElement, index: number) => {
           const isActive = activeItemHighlight && index === currentItem
 

src/apps/explorer/components/common/Dropdown/styled.tsx

@@ -1,6 +1,9 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const BaseCard = styled.div<{ noPadding?: boolean }>`
+  background-color: ${({ theme }): string => theme.bg1};
+  border-radius: 0.6rem;
+  border: 1px solid ${({ theme }): string => theme.borderPrimary};
   display: flex;
   flex-direction: column;
   position: relative;
@@ -9,3 +12,85 @@ export const BaseCard = styled.div<{ noPadding?: boolean }>`
 BaseCard.defaultProps = {
   noPadding: false,
 }
+
+export const DropdownTextCSS = css`
+  color: ${({ theme }): string => theme.textPrimary1};
+  font-size: ${({ theme }): string => theme.fontSizeDefault};
+  font-weight: normal;
+  white-space: nowrap;
+`
+
+export const PositionLeftCSS = css`
+  left: 0;
+`
+
+export const PositionRightCSS = css`
+  right: 0;
+`
+
+export const PositionCenterCSS = css`
+  left: 50%;
+  transform: translateX(-50%);
+`
+
+export const DirectionDownwardsCSS = css`
+  top: calc(100% + 10px);
+`
+
+export const DirectionUpwardsCSS = css`
+  bottom: calc(100% + 10px);
+`
+
+export interface DropdownItemProps {
+  disabled?: boolean
+}
+
+export const DropdownItemCSS = css<DropdownItemProps>`
+  align-items: center;
+  background-color: ${(props): string => props.theme.bg1};
+  border-bottom: 1px solid ${(props): string => props.theme.borderPrimary};
+  color: ${(props): string => props.theme.textPrimary1};
+  cursor: pointer;
+  display: flex;
+  font-size: var(--font-size-default);
+  font-weight: 400;
+  line-height: 1.4;
+  min-height: 37px;
+  overflow: hidden;
+  padding: 10px 13px;
+  text-decoration: none;
+  user-select: none;
+
+  &.active {
+    background-color: var(--color-gradient-2);
+    color: var(--color-text-primary);
+    font-weight: 600;
+  }
+
+  &:first-child {
+    border-top-left-radius: 0.6rem;
+    border-top-right-radius: 0.6rem;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 0.6rem;
+    border-bottom-right-radius: 0.6rem;
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: var(--color-gradient-1);
+  }
+
+  &:disabled,
+  &[disabled] {
+    &,
+    &:hover {
+      background-color: transparent;
+      cursor: not-allowed;
+      font-weight: 400;
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+`