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

This reverts commit ffcc5c8.

Hit some visual regressions.

Author: jesec

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: {

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: {

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}

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) => {

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>

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={() => {

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;
-}

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;

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}
-  >
-    {children}
-  </div>
-);
+}: 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,

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';

client/src/sass/base/_layout.scss

@@ -6,6 +6,11 @@ body {
   overflow: hidden;
 }
 
+.container {
+  height: 100%;
+  width: 100%;
+}
+
 #app,
 .application,
 .application__view {

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%;
+  }
+}

client/src/sass/components/_textbox-repeater.scss

@@ -0,0 +1,6 @@
+.textbox-repeater {
+  .icon {
+    height: 12px;
+    width: 12px;
+  }
+}

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;
+    }
+  }
+}

client/src/sass/modules/app-wrapper.module.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';

client/src/sass/style.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;

client/src/sass/tools/_colors.scss

@@ -0,0 +1,3 @@
+.container {
+  max-width: 900px;
+}

client/src/sass/ui/components/container.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;
+  }
+}