CB-4417 module styles for AuthProvidersList

webapp/packages/plugin-user-profile/src/UserProfileForm/AuthProviders/AuthProvidersList.m.css

@@ -0,0 +1,25 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.list {
+  overflow: auto;
+}
+
+.cell {
+  composes: theme-border-color-secondary from global;
+  border-bottom: 1px solid;
+  padding: 0 16px;
+}
+
+.iconOrImage {
+  width: 100%;
+  height: 100%;
+}
+
+.providerLoginIcon {
+  width: 24px;
+  height: 24px;
+}

webapp/packages/plugin-user-profile/src/UserProfileForm/AuthProviders/AuthProvidersList.tsx

@@ -6,36 +6,13 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
 import { AuthProvidersResource } from '@cloudbeaver/core-authentication';
-import { Cell, getComputed, IconOrImage, Link, Loader, useResource, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Cell, getComputed, IconOrImage, Link, Loader, s, useResource, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { resourceKeyList } from '@cloudbeaver/core-resource';
 import type { UserInfo } from '@cloudbeaver/core-sdk';
 
-const styles = css`
-  container {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-  }
-  list {
-    overflow: auto;
-  }
-  Cell {
-    composes: theme-border-color-secondary from global;
-    border-bottom: 1px solid;
-    padding: 0 16px;
-  }
-  IconOrImage {
-    width: 100%;
-    height: 100%;
-  }
-  provider-login-icon {
-    width: 24px;
-    height: 24px;
-  }
-`;
+import styles from './AuthProvidersList.m.css';
 
 interface Props {
   user: UserInfo;
@@ -46,43 +23,46 @@ interface Props {
 export const AuthProvidersList = observer<Props>(function AuthProvidersList({ user, providers, className }) {
   const providersResource = useResource(AuthProvidersList, AuthProvidersResource, resourceKeyList(providers));
   const translate = useTranslate();
-  const style = useStyles(styles);
+  const style = useS(styles);
   const activeProviders = getComputed(() => user.authTokens.map(token => token.authProvider));
 
-  return styled(style)(
-    <container className={className}>
+  return (
+    <div className={s(style, { container: true }, className)}>
       <Loader state={providersResource}>
-        {() =>
-          styled(style)(
-            <list>
-              {providersResource.data.map(provider => {
-                if (!provider) {
-                  return null;
-                }
+        {() => (
+          <div className={s(style, { list: true })}>
+            {providersResource.data.map(provider => {
+              if (!provider) {
+                return null;
+              }
 
-                const title = `${provider.label}\n${provider.description || ''}`;
-                return (
-                  <Link key={provider.id} title={title} wrapper>
-                    <Cell
-                      before={provider.icon ? <IconOrImage icon={provider.icon} /> : undefined}
-                      after={
-                        activeProviders.includes(provider.id) ? (
-                          <provider-login-icon>
-                            <IconOrImage icon="/icons/success_sm.svg" title={translate('plugin_user_profile_auth_providers_active')} />
-                          </provider-login-icon>
-                        ) : undefined
-                      }
-                      description={provider.description}
-                    >
-                      {provider.label}
-                    </Cell>
-                  </Link>
-                );
-              })}
-            </list>,
-          )
-        }
+              const title = `${provider.label}\n${provider.description || ''}`;
+              return (
+                <Link key={provider.id} title={title} wrapper>
+                  <Cell
+                    className={s(style, { cell: true })}
+                    before={provider.icon ? <IconOrImage className={s(style, { iconOrImage: true })} icon={provider.icon} /> : undefined}
+                    after={
+                      activeProviders.includes(provider.id) ? (
+                        <div className={s(style, { providerLoginIcon: true })}>
+                          <IconOrImage
+                            className={s(style, { iconOrImage: true })}
+                            icon="/icons/success_sm.svg"
+                            title={translate('plugin_user_profile_auth_providers_active')}
+                          />
+                        </div>
+                      ) : undefined
+                    }
+                    description={provider.description}
+                  >
+                    {provider.label}
+                  </Cell>
+                </Link>
+              );
+            })}
+          </div>
+        )}
       </Loader>
-    </container>,
+    </div>
   );
 });