Revert "Test with bottom sheet"

This reverts commit 44faad1172580bf4b7ca85d00f0495f76226dc2d.

packages/web/components/elements/DropdownElements.tsx

@@ -115,6 +115,7 @@ export function Dropdown({
   sideOffset = 0,
   css
 }: DropdownProps): JSX.Element {
+  console.log('side', side)
   return (
     <Root modal={false}>
       <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>

packages/web/components/templates/article/ArticleActionsMenu.tsx

@@ -1,7 +1,5 @@
 import { Separator } from "@radix-ui/react-separator"
 import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from "phosphor-react"
-import { useState } from "react"
-import { BottomSheet } from "react-spring-bottom-sheet"
 import { useGetUserPreferences, UserPreferences } from "../../../lib/networking/queries/useGetUserPreferences"
 import { Button } from "../../elements/Button"
 import { Dropdown } from "../../elements/DropdownElements"
@@ -10,10 +8,6 @@ import { styled, theme } from "../../tokens/stitches.config"
 import { EditLabelsModal } from "./EditLabelsModal"
 import { ReaderSettings } from "./ReaderSettingsModal"
 
-// if setting up the CSS is tricky, you can add this to your page somewhere:
-// <link rel="stylesheet" href="https://unpkg.com/react-spring-bottom-sheet/dist/style.css" crossorigin="anonymous">
-import 'react-spring-bottom-sheet/dist/style.css'
-
 export type ArticleActionsMenuLayout = 'horizontal' | 'vertical'
 
 type ArticleActionsMenuProps = {
@@ -37,7 +31,6 @@ export function MenuSeparator(props: MenuSeparatorProps) {
 
 export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element {
   const { preferencesData } = useGetUserPreferences()
-  const [open, setOpen] = useState(false)
 
   return (
     <>
@@ -63,7 +56,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
             <TextAa size={24} color={theme.colors.readerFont.toString()} />
           </SpanBox>
         }
-        css={{ m: '0px', p: '0px' }}
+        css={{  m: '0px', p: '0px' }}
       >
         <ReaderSettings userPreferences={preferencesData} articleActionHandler={props.articleActionHandler} />
       </Dropdown>
@@ -90,8 +83,8 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
         <HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />
       </Button>
       <MenuSeparator layout={props.layout} />
-{/* // props.articleActionHandler('archive') */}
-      <Button style='articleActionIcon' onClick={() => setOpen(true)}>
+
+      <Button style='articleActionIcon' onClick={() => props.articleActionHandler('archive')}>
         <ArchiveBox size={24} color={theme.colors.readerFont.toString()} />
       </Button>
       {/* <MenuSeparator layout={props.layout} />
@@ -99,12 +92,6 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
       <Button style='articleActionIcon'>
         <DotsThree size={24} color={theme.colors.readerFont.toString()} />
       </Button> */}
-      <BottomSheet 
-          snapPoints={({ minHeight }) => minHeight}
-          open={open} onDismiss={() => setOpen(false)}>
-        <EditLabelsModal />
-        {/* <ReaderSettings userPreferences={preferencesData} articleActionHandler={props.articleActionHandler} /> */}
-      </BottomSheet>
     </Box>
     </>
   )

packages/web/components/templates/article/EditLabelsModal.tsx

@@ -241,8 +241,7 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
     //   >
         <VStack distribution="start" css={{ 
           p: '0', maxHeight: '400px',
-          width: '100%',
-          minWidth: '265px',
+          width: '265px',
         }}>
           <Header setFilterText={setFilterText} filterText={filterText} />
           <LabelsList

packages/web/components/templates/article/ReaderSettingsModal.tsx

@@ -36,9 +36,8 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
       <HStack 
         alignment='center'
         css={{
-          width: '100%',
+          width: '265px',
           height: '70px',
-          minWidth: '265px',
           borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
         }}
       >
@@ -66,9 +65,7 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
           <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => props.articleActionHandler('decrementMarginWidth')}>
             <ArrowsInLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
           </Button>
-          <TickedRangeSlider min={10} max={28} value={props.userPreferences?.margin || 0} onChange={() => {
-            console.log('range changed')
-          }} />
+          <TickedRangeSlider min={10} max={28} value={props.userPreferences?.margin || 0} onChange={() => {}} />
           <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => props.articleActionHandler('incrementMarginWidth')}>
             <ArrowsOutLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
           </Button>

packages/web/package.json

@@ -40,7 +40,6 @@
     "react-hot-toast": "^2.1.1",
     "react-intl": "^5.20.12",
     "react-loading-skeleton": "^3.0.2",
-    "react-spring-bottom-sheet": "^3.4.0",
     "react-twitter-widgets": "^1.10.0",
     "swr": "^1.0.1",
     "uuid": "^8.3.2"