👌 CR address

packages/ui/src/App.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { MemoryRouter } from 'react-router-dom';
-import App from '../App';
+import App from './App';
 
 jest.mock('ky', () => ({}));
 

packages/ui/src/App.tsx

@@ -10,7 +10,7 @@ import './scss/normalized.scss';
 initI18n();
 
 const App = () => (
-  <AppContent theme="light">
+  <AppContent theme="dark">
     <Switch>
       <Route exact path="/sign-in" component={SignIn} />
       <Route exact path="/sign-in/consent" component={Consent} />

packages/ui/src/pages/Register/Register.test.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import App from '@/pages/Register';
+import Register from '@/pages/Register';
 import { register } from '@/apis/register';
 
 jest.mock('@/apis/register', () => ({ register: jest.fn(async () => Promise.resolve()) }));
 
-describe('<App />', () => {
+describe('<Register />', () => {
   test('renders without exploding', async () => {
-    const { queryByText, getByText } = render(<App />);
+    const { queryByText, getByText } = render(<Register />);
     expect(queryByText('register.create_account')).not.toBeNull();
     expect(queryByText('register.have_account')).not.toBeNull();
 

packages/ui/src/pages/Register/index.module.scss

@@ -1,23 +1,16 @@
 @use '/src/scss/underscore' as _;
 
 
-@mixin flex-colomn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 .wrapper {
   position: relative;
   padding: _.unit(8);
   height: 100%;
-  @include flex-colomn;
+  @include _.flex-colomn;
 }
 
 .form {
   width: 100%;
-  @include flex-colomn;
+  @include _.flex-colomn;
 
   > * {
     margin-bottom: _.unit(1.5);

packages/ui/src/pages/SignIn/SignIn.test.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import App from '@/pages/SignIn';
+import SignIn from '@/pages/SignIn';
 import { signInBasic } from '@/apis/sign-in';
 
 jest.mock('@/apis/sign-in', () => ({ signInBasic: jest.fn(async () => Promise.resolve()) }));
 
-describe('<App />', () => {
+describe('<SignIn />', () => {
   test('renders without exploding', async () => {
-    const { queryByText, getByText } = render(<App />);
+    const { queryByText, getByText } = render(<SignIn />);
     expect(queryByText('Sign in to Logto')).not.toBeNull();
 
     const submit = getByText('sign_in.title');

packages/ui/src/scss/_underscore.scss

@@ -1,3 +1,10 @@
 @function unit($factor: 1, $unit: 'px') {
   @return #{$factor * 4}#{$unit};
 }
+
+@mixin flex-colomn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}