Revert "client: migrate some styles to CSS module or CSS-in-JS"

This reverts commit ffcc5c8e05. Hit some visual regressions.
2025-12-06 07:16:18 +00:00 · 2021-11-19 01:56:22 -08:00
parent 7d8d107403
commit d746831783
24 changed files with 151 additions and 1520 deletions
--- a/client/config/webpack.config.dev.js
+++ b/client/config/webpack.config.dev.js
@@ -23,31 +23,8 @@ module.exports = {
          },
        ],
      },
-      {
-        test: /\.module\.s?css$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 1,
-              sourceMap: true,
-              modules: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
-        ],
-      },
      {
        test: /\.s?css$/,
-        exclude: /\.module\.s?css$/,
        use: [
          {
            loader: 'style-loader',
@@ -107,11 +84,10 @@ module.exports = {
  },
  entry: paths.appIndex,
  resolve: {
-    extensions: ['.cjs', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.scss', '.json'],
+    extensions: ['.cjs', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
    alias: {
      '@client': path.resolve('./client/src/javascript'),
      '@shared': path.resolve('./shared'),
-      '@styles': path.resolve('./client/src/sass/modules'),
    },
  },
  output: {
--- a/client/config/webpack.config.prod.js
+++ b/client/config/webpack.config.prod.js
@@ -108,7 +108,6 @@ module.exports = {
    alias: {
      '@client': path.resolve('./client/src/javascript'),
      '@shared': path.resolve('./shared'),
-      '@styles': path.resolve('./client/src/sass/modules'),
    },
  },
  output: {
--- a/client/src/javascript/components/AppWrapper.tsx
+++ b/client/src/javascript/components/AppWrapper.tsx
@@ -14,8 +14,6 @@ import WindowTitle from './general/WindowTitle';
 import LoadingOverlay from './general/LoadingOverlay';
 import LogoutButton from './sidebar/LogoutButton';

-import AppWrapperStyles from '@styles/app-wrapper.module.scss';
-
 interface AppWrapperProps {
  children: ReactNode;
  className?: string;
@@ -44,8 +42,8 @@ const AppWrapper: FC<AppWrapperProps> = observer((props: AppWrapperProps) => {

  if (AuthStore.isAuthenticated && !ClientStatusStore.isConnected && ConfigStore.authMethod !== 'none') {
    overlay = (
-      <div className={AppWrapperStyles['loading-overlay']}>
-        <div className={AppWrapperStyles['entry-barrier']}>
+      <div className="application__loading-overlay">
+        <div className="application__entry-barrier">
          <LogoutButton className={css({position: 'absolute', left: '5px', top: '5px'})} />
          <ClientConnectionInterruption />
        </div>
@@ -58,7 +56,7 @@ const AppWrapper: FC<AppWrapperProps> = observer((props: AppWrapperProps) => {
      <WindowTitle />
      <TransitionGroup>
        {overlay != null ? (
-          <CSSTransition timeout={{enter: 1000, exit: 1000}} classNames={AppWrapperStyles['loading-overlay']}>
+          <CSSTransition timeout={{enter: 1000, exit: 1000}} classNames="application__loading-overlay">
            {overlay}
          </CSSTransition>
        ) : null}
--- a/client/src/javascript/components/auth/AuthForm.tsx
+++ b/client/src/javascript/components/auth/AuthForm.tsx
@@ -10,8 +10,6 @@ import {AccessLevel} from '@shared/schema/constants/Auth';
 import type {Credentials} from '@shared/schema/Auth';
 import type {ClientConnectionSettings} from '@shared/schema/ClientConnectionSettings';

-import AppWrapperStyles from '@styles/app-wrapper.module.scss';
-
 import ClientConnectionSettingsForm from '../general/connection-settings/ClientConnectionSettingsForm';

 type LoginFormData = Pick<Credentials, 'username' | 'password'>;
@@ -31,7 +29,7 @@ const AuthForm: FC<AuthFormProps> = ({mode}: AuthFormProps) => {
  const isLoginMode = mode === 'login';

  return (
-    <div className={AppWrapperStyles['loading-overlay']}>
+    <div className="application__entry-barrier">
      <Panel spacing="large">
        <Form
          onSubmit={(submission) => {
--- a/client/src/javascript/components/general/LoadingOverlay.tsx
+++ b/client/src/javascript/components/general/LoadingOverlay.tsx
@@ -6,8 +6,6 @@ import {CheckmarkThick} from '@client/ui/icons';

 import type {Dependencies} from '@client/stores/UIStore';

-import AppWrapperStyles from '@styles/app-wrapper.module.scss';
-
 import LoadingIndicator from './LoadingIndicator';

 const ICONS = {
@@ -43,7 +41,7 @@ const LoadingOverlay: FC<{dependencies?: Dependencies}> = (props: {dependencies?
  const {dependencies} = props;

  return (
-    <div className={AppWrapperStyles['loading-overlay']}>
+    <div className="application__loading-overlay">
      <LoadingIndicator inverse />
      {dependencies != null ? <LoadingDependencyList dependencies={dependencies} /> : null}
    </div>
--- a/client/src/javascript/components/general/form-elements/TextboxRepeater.tsx
+++ b/client/src/javascript/components/general/form-elements/TextboxRepeater.tsx
@@ -1,4 +1,3 @@
-import {css} from '@emotion/css';
 import {FC, ReactNode, useRef, useState} from 'react';

 import {AddMini, RemoveMini} from '@client/ui/icons';
@@ -55,12 +54,7 @@ const TextboxRepeater: FC<TextboxRepeaterProps> = ({defaultValues, id, label, pl
              defaultValue={textbox.value}
              label={index === 0 && label}
              placeholder={placeholder}
-              wrapperClassName={css({
-                '.icon': {
-                  height: '12px',
-                  width: '12px',
-                },
-              })}
+              wrapperClassName="textbox-repeater"
            >
              <FormElementAddon
                onClick={() => {
--- a/client/src/javascript/typings.d.ts
+++ b/client/src/javascript/typings.d.ts
@@ -7,8 +7,3 @@ declare module '*.md' {
 declare module '@lingui/loader!*.json?raw-lingui' {
  export const messages: Record<string, string[]>;
 }
-
-declare module '*.module.scss' {
-  const classes: {[key: string]: string};
-  export default classes;
-}
--- a/client/src/javascript/ui/components/Container.tsx
+++ b/client/src/javascript/ui/components/Container.tsx
@@ -0,0 +1,13 @@
+import classnames from 'classnames';
+import {FC, ReactNode} from 'react';
+
+interface ContainerProps {
+  children: ReactNode;
+}
+
+const Container: FC<ContainerProps> = ({children}: ContainerProps) => {
+  const classes = classnames('container');
+  return <div className={classes}>{children}</div>;
+};
+
+export default Container;
--- a/client/src/javascript/ui/components/Overlay.tsx
+++ b/client/src/javascript/ui/components/Overlay.tsx
@@ -1,4 +1,4 @@
-import {rgba} from 'polished';
+import classnames from 'classnames';
 import {FC, MouseEvent, ReactNode} from 'react';

 export interface OverlayProps {
@@ -17,32 +17,18 @@ const Overlay: FC<OverlayProps> = ({
  onContextMenu,
  isInteractive,
  isTransparent,
-}: OverlayProps) => (
-  <div
-    css={[
-      {
-        background: rgba('#1d2938', 0.95),
-        bottom: 0,
-        left: 0,
-        position: 'fixed',
-        right: 0,
-        top: 0,
-        zIndex: 100,
-      },
-      isInteractive || {
-        pointerEvents: 'none',
-      },
-      isTransparent && {
-        background: 'transparent',
-      },
-      additionalClassNames,
-    ]}
-    onClickCapture={onClick}
-    onContextMenuCapture={onContextMenu}
-  >
+}: OverlayProps) => {
+  const classes = classnames('overlay', additionalClassNames, {
+    'overlay--no-interaction': !isInteractive,
+    'overlay--transparent': isTransparent,
+  });
+
+  return (
+    <div className={classes} onClickCapture={onClick} onContextMenuCapture={onContextMenu}>
      {children}
    </div>
-);
+  );
+};

 Overlay.defaultProps = {
  additionalClassNames: undefined,
--- a/client/src/javascript/ui/index.tsx
+++ b/client/src/javascript/ui/index.tsx
@@ -1,5 +1,6 @@
 export {default as Button} from './components/Button';
 export {default as Checkbox} from './components/Checkbox';
+export {default as Container} from './components/Container';
 export {default as ContextMenu} from './components/ContextMenu';
 export {default as Form} from './components/Form';
 export {default as FormElementAddon} from './components/FormElementAddon';
--- a/client/src/sass/base/_layout.scss
+++ b/client/src/sass/base/_layout.scss
@@ -6,6 +6,11 @@ body {
  overflow: hidden;
 }

+.container {
+  height: 100%;
+  width: 100%;
+}
+
 #app,
 .application,
 .application__view {
--- a/client/src/sass/components/_app-wrapper.scss
+++ b/client/src/sass/components/_app-wrapper.scss
@@ -0,0 +1,33 @@
+@use '../tools/colors';
+
+.application {
+  &__loading-overlay {
+    align-items: center;
+    background: colors.$light-blue;
+    display: flex;
+    flex-direction: column;
+    font-size: 0.8em;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    opacity: 1;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+
+    &-exit {
+      opacity: 1;
+      transition: opacity 1s;
+
+      &-active {
+        opacity: 0;
+      }
+    }
+  }
+
+  &__entry-barrier {
+    max-width: 500px;
+    width: 100%;
+  }
+}
--- a/client/src/sass/components/_textbox-repeater.scss
+++ b/client/src/sass/components/_textbox-repeater.scss
@@ -0,0 +1,6 @@
+.textbox-repeater {
+  .icon {
+    height: 12px;
+    width: 12px;
+  }
+}
--- a/client/src/sass/components/_transfer-data.scss
+++ b/client/src/sass/components/_transfer-data.scss
@@ -0,0 +1,22 @@
+@use '../tools/colors';
+
+$transfer-data--download: colors.$green;
+$transfer-data--upload: colors.$blue;
+
+.transfer-data {
+  &--download {
+    color: $transfer-data--download;
+
+    .icon {
+      fill: $transfer-data--download;
+    }
+  }
+
+  &--upload {
+    color: $transfer-data--upload;
+
+    .icon {
+      fill: $transfer-data--upload;
+    }
+  }
+}
--- a/client/src/sass/modules/app-wrapper.module.scss
+++ b/client/src/sass/modules/app-wrapper.module.scss
@@ -1,31 +0,0 @@
-@use '../tools/colors';
-
-.loading-overlay {
-  align-items: center;
-  background: colors.$light-blue;
-  display: flex;
-  flex-direction: column;
-  font-size: 0.8em;
-  height: 100%;
-  justify-content: center;
-  left: 0;
-  opacity: 1;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 1000;
-
-  &-exit {
-    opacity: 1;
-    transition: opacity 1s;
-
-    &-active {
-      opacity: 0;
-    }
-  }
-}
-
-.entry-barrier {
-  max-width: 500px;
-  width: 100%;
-}
--- a/client/src/sass/style.scss
+++ b/client/src/sass/style.scss
@@ -14,6 +14,7 @@
@import 'base/typography';

@import 'components/action-bar';
+@import 'components/app-wrapper';
@import 'components/alerts';
@import 'components/attached-panel';
@import 'components/badge';
@@ -43,11 +44,13 @@
@import 'components/sortable-list';
@import 'components/table';
@import 'components/tags';
+@import 'components/textbox-repeater';
@import 'components/toolbar';
@import 'components/tooltip';
@import 'components/torrent-details-panel';
@import 'components/torrents';
@import 'components/torrent';
+@import 'components/transfer-data';

@import 'views/login';
@import 'views/feeds';
--- a/client/src/sass/tools/_colors.scss
+++ b/client/src/sass/tools/_colors.scss
@@ -39,6 +39,7 @@ $grey--harder: harden($grey, 1);

 $dark-grey: #34516c;
 $dark-grey--light: color.adjust($dark-grey, $lightness: 7%);
+$darker-grey: #1d2938;
 $darkest-grey: #28303b;
 $darkest-grey--hard: #293341;
 $darkest-grey--darker: #202d3c;
--- a/client/src/sass/ui/components/container.scss
+++ b/client/src/sass/ui/components/container.scss
@@ -0,0 +1,3 @@
+.container {
+  max-width: 900px;
+}
--- a/client/src/sass/ui/components/overlay.scss
+++ b/client/src/sass/ui/components/overlay.scss
@@ -0,0 +1,19 @@
+@use '../../tools/colors';
+
+.overlay {
+  background: rgba(colors.$darker-grey, 0.95);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 100;
+
+  &--transparent {
+    background: transparent;
+  }
+
+  &--no-interaction {
+    pointer-events: none;
+  }
+}
--- a/client/src/sass/ui/components/section.scss
+++ b/client/src/sass/ui/components/section.scss
@@ -0,0 +1,20 @@
+@use '../../tools/colors';
+
+@use '../config/spacing.scss';
+
+.section {
+  margin-bottom: spacing.$spacing--xxx-large;
+
+  &__heading {
+    margin-bottom: spacing.$spacing;
+    margin-top: 0;
+  }
+
+  &.inverse {
+    background: colors.$another-grey;
+  }
+
+  &.padded {
+    padding: spacing.$spacing--large spacing.$spacing--x-large;
+  }
+}
--- a/client/src/sass/ui/index.scss
+++ b/client/src/sass/ui/index.scss
@@ -8,11 +8,14 @@

@import './components/button';
@import './components/context-menu';
+@import './components/container';
@import './components/error';
@import './components/form';
@import './components/element-addon';
@import './components/icon';
@import './components/input';
+@import './components/overlay';
@import './components/panel';
@import './components/portal';
+@import './components/section';
@import './components/select';
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -210,7 +210,6 @@
    "tsconfig-paths": "^3.11.0",
    "typed-emitter": "^1.4.0",
    "typescript": "~4.4.4",
-    "typescript-plugin-css-modules": "^3.4.0",
    "use-query-params": "^1.2.3",
    "webpack": "^5.61.0",
    "webpack-dev-server": "^4.4.0",
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,10 +19,8 @@
    "paths": {
      "@client/*": ["client/src/javascript/*"],
      "@server/*": ["server/*"],
-      "@shared/*": ["shared/*"],
-      "@styles/*": ["client/src/sass/modules/*"]
-    },
-    "plugins": [{"name": "typescript-plugin-css-modules"}]
+      "@shared/*": ["shared/*"]
+    }
  },
  "include": ["./client/**/*.ts", "./client/**/*.tsx", "./server/**/*.ts", "./server/**/*.tsx"],
  "exclude": ["node_modules"]