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

client/config/webpack.config.dev.js

@@ -23,8 +23,31 @@ 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',
@@ -84,10 +107,11 @@ module.exports = {
   },
   entry: paths.appIndex,
   resolve: {
-    extensions: ['.cjs', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
+    extensions: ['.cjs', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.scss', '.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,6 +108,7 @@ 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,6 +14,8 @@ 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;
@@ -42,8 +44,8 @@ const AppWrapper: FC<AppWrapperProps> = observer((props: AppWrapperProps) => {
 
   if (AuthStore.isAuthenticated && !ClientStatusStore.isConnected && ConfigStore.authMethod !== 'none') {
     overlay = (
-      <div className="application__loading-overlay">
-        <div className="application__entry-barrier">
+      <div className={AppWrapperStyles['loading-overlay']}>
+        <div className={AppWrapperStyles['entry-barrier']}>
           <LogoutButton className={css({position: 'absolute', left: '5px', top: '5px'})} />
           <ClientConnectionInterruption />
         </div>
@@ -56,7 +58,7 @@ const AppWrapper: FC<AppWrapperProps> = observer((props: AppWrapperProps) => {
       <WindowTitle />
       <TransitionGroup>
         {overlay != null ? (
-          <CSSTransition timeout={{enter: 1000, exit: 1000}} classNames="application__loading-overlay">
+          <CSSTransition timeout={{enter: 1000, exit: 1000}} classNames={AppWrapperStyles['loading-overlay']}>
             {overlay}
           </CSSTransition>
         ) : null}

client/src/javascript/components/auth/AuthForm.tsx

@@ -10,6 +10,8 @@ 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'>;
@@ -29,7 +31,7 @@ const AuthForm: FC<AuthFormProps> = ({mode}: AuthFormProps) => {
   const isLoginMode = mode === 'login';
 
   return (
-    <div className="application__entry-barrier">
+    <div className={AppWrapperStyles['loading-overlay']}>
       <Panel spacing="large">
         <Form
           onSubmit={(submission) => {

client/src/javascript/components/general/LoadingOverlay.tsx

@@ -6,6 +6,8 @@ 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 = {
@@ -41,7 +43,7 @@ const LoadingOverlay: FC<{dependencies?: Dependencies}> = (props: {dependencies?
   const {dependencies} = props;
 
   return (
-    <div className="application__loading-overlay">
+    <div className={AppWrapperStyles['loading-overlay']}>
       <LoadingIndicator inverse />
       {dependencies != null ? <LoadingDependencyList dependencies={dependencies} /> : null}
     </div>

client/src/javascript/components/general/form-elements/TextboxRepeater.tsx

@@ -1,3 +1,4 @@
+import {css} from '@emotion/css';
 import {FC, ReactNode, useRef, useState} from 'react';
 
 import {AddMini, RemoveMini} from '@client/ui/icons';
@@ -54,7 +55,12 @@ const TextboxRepeater: FC<TextboxRepeaterProps> = ({defaultValues, id, label, pl
               defaultValue={textbox.value}
               label={index === 0 && label}
               placeholder={placeholder}
-              wrapperClassName="textbox-repeater"
+              wrapperClassName={css({
+                '.icon': {
+                  height: '12px',
+                  width: '12px',
+                },
+              })}
             >
               <FormElementAddon
                 onClick={() => {

client/src/javascript/typings.d.ts

@@ -7,3 +7,8 @@ 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/Overlay.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import {rgba} from 'polished';
 import {FC, MouseEvent, ReactNode} from 'react';
 
 export interface OverlayProps {
@@ -17,18 +17,32 @@ const Overlay: FC<OverlayProps> = ({
   onContextMenu,
   isInteractive,
   isTransparent,
-}: OverlayProps) => {
-  const classes = classnames('overlay', additionalClassNames, {
-    'overlay--no-interaction': !isInteractive,
-    'overlay--transparent': isTransparent,
-  });
-
-  return (
-    <div className={classes} onClickCapture={onClick} onContextMenuCapture={onContextMenu}>
-      {children}
-    </div>
-  );
-};
+}: 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>
+);
 
 Overlay.defaultProps = {
   additionalClassNames: undefined,

client/src/javascript/ui/index.tsx

@@ -1,6 +1,5 @@
 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,11 +6,6 @@ body {
   overflow: hidden;
 }
 
-.container {
-  height: 100%;
-  width: 100%;
-}
-
 #app,
 .application,
 .application__view {

client/src/sass/modules/app-wrapper.module.scss

@@ -0,0 +1,31 @@
+@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%;
+}

client/src/sass/style.scss

@@ -14,7 +14,6 @@
 @import 'base/typography';
 
 @import 'components/action-bar';
-@import 'components/app-wrapper';
 @import 'components/alerts';
 @import 'components/attached-panel';
 @import 'components/badge';
@@ -44,13 +43,11 @@
 @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/tools/_colors.scss

@@ -39,7 +39,6 @@ $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;