feat: cleanup css

packages/web/src/App.tsx

@@ -6,7 +6,7 @@ import { ManageBookCollectionsDialog } from "./books/ManageBookCollectionsDialog
 import { plugins } from "./plugins/configure"
 import { UpdateAvailableDialog } from "./workers/UpdateAvailableDialog"
 import { PreloadQueries } from "./PreloadQueries"
-import { SplashScreen } from "./SplashScreen"
+import { SplashScreen } from "./common/SplashScreen"
 import { BlurFilterReference } from "./books/BlurFilterReference"
 import "./i18n"
 import { ErrorBoundary } from "@sentry/react"
@@ -72,7 +72,6 @@ export function App() {
         <ThemeProvider>
           <QueryClientProvider client={queryClient}>
             <Suspense fallback={<SplashScreen show />}>
-              {/* <SplashScreen show={!isAppReady} /> */}
               {!isHydratingProfile && isAuthHydrated && (
                 <>
                   {plugins.reduce(

packages/web/src/books/bookList/BookListCoverContainer.tsx

@@ -115,7 +115,7 @@ export const BookListCoverContainer: FC<
             <Chip
               color="primary"
               size="small"
-              icon={<LoopRounded color="primary" className="icon-spin" />}
+              icon={<LoopRounded color="primary" className="oboku-infinite-spin" />}
               label="metadata..."
             />
           )}

packages/web/src/books/bookList/BookListListItem.tsx

@@ -164,7 +164,7 @@ export const BookListListItem: FC<
                 >
                   <Chip
                     size="small"
-                    avatar={<LoopRounded className="icon-spin" />}
+                    avatar={<LoopRounded className="oboku-infinite-spin" />}
                     label="metadata..."
                   />
                 </div>

packages/web/src/SplashScreen.tsx → packages/web/src/common/SplashScreen.tsx

@@ -1,6 +1,6 @@
 import { Box, Fade } from "@mui/material"
 import { memo, useState } from "react"
-import { Logo } from "./common/Logo"
+import { Logo } from "./Logo"
 
 export const SplashScreen = memo(({ show }: { show: boolean }) => {
   const [hidden, setHidden] = useState(false)

packages/web/src/common/animations.css

@@ -0,0 +1,15 @@
+@keyframes obokuSpin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.oboku-infinite-spin {
+  animation-name: obokuSpin;
+  animation-duration: 1500ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}

packages/web/src/main.css

@@ -0,0 +1,14 @@
+html,
+body,
+#root {
+  height: 100%;
+  /* height: 100%; */
+  /* Disables pull-to-refresh but allows overscroll glow effects. */
+  overscroll-behavior-y: contain;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}

packages/web/src/main.tsx

@@ -7,7 +7,8 @@ import "@fontsource/roboto/400.css"
 import "@fontsource/roboto/500.css"
 import "@fontsource/roboto/700.css"
 import "react-responsive-carousel/lib/styles/carousel.min.css"
-import "./index.css"
+import "./main.css"
+import "./common/animations.css"
 import { App } from "./App"
 import * as Sentry from "@sentry/react"
 

packages/web/src/plugins/google/Provider.tsx

@@ -5,6 +5,7 @@ import { useLoadGapi } from "./lib/gapi"
 import { useLoadGsi } from "./lib/gsi"
 import { useSignalValue } from "reactjrx"
 import { consentShownSignal } from "./lib/auth"
+import "./lib/picker.css"
 
 export const Provider: ObokuPlugin["Provider"] = memo(({ children }) => {
   const consentPopupShown = useSignalValue(consentShownSignal)

packages/web/src/plugins/google/lib/picker.css

@@ -0,0 +1,16 @@
+/* google Picker overwrite to have it fullscreen and mobile friendly */
+.picker-dialog {
+  z-index: 3000 !important;
+  height: 100%;
+  width: 100%;
+}
+.picker-dialog {
+  height: 100% !important;
+  width: 100% !important;
+  left: 0 !important;
+}
+.picker-dialog-content {
+  height: 100% !important;
+  width: 100% !important;
+  left: 0 !important;
+}

packages/web/src/reader/navigation/Scrubber.tsx

@@ -6,7 +6,7 @@ import { useTotalPages } from "../pagination/useTotalPages"
 import { useCurrentPages } from "../pagination/useCurrentPages"
 import { useIsUsingReverseNavigation } from "./useIsUsingReverseNavigation"
 import { useIsUsingPagesPerChapter } from "../pagination/useIsUsingPagesPerChapter"
-import { ObokuRcSlider } from "./ObokuRcSlider"
+import { ObokuRcSlider } from "./slider/ObokuRcSlider"
 
 export const Scrubber = memo(({ bookId }: { bookId: string }) => {
   const reader = useSignalValue(readerSignal)

packages/web/src/reader/navigation/ObokuRcSlider.tsx → packages/web/src/reader/navigation/slider/ObokuRcSlider.tsx

@@ -1,6 +1,7 @@
 import { ComponentProps, forwardRef } from "react"
 import RcSlider from "rc-slider"
 import "rc-slider/assets/index.css"
+import "./index.css"
 import { ComponentsVariants, useTheme, useThemeProps } from "@mui/material"
 
 interface ScrubberProps extends ComponentProps<typeof RcSlider> {

packages/web/src/reader/navigation/slider/index.css

@@ -0,0 +1,3 @@
+.rc-slider-disabled {
+  background-color: inherit !important;
+}