2.2.1 release

README.ja-jp.md

@@ -19,7 +19,11 @@
 
 ## スクリーンショット
 
-![screenshot](./assets/screenshot.png)
+![screenshot1](./assets/screenshots/001.png)
+
+![screenshot2](./assets/screenshots/002.png)
+
+![screenshot3](./assets/screenshots/003.png)
 
 ## インストール
 
@@ -45,11 +49,11 @@
 
 5. **作成** をクリックして操作が完了するまで待機します。
 
-### Azure AD アプリケーションの登録
+### Microsoft Entra ID アプリケーションの登録
 
 1. [Azure ポータル](https://portal.azure.com) に移動します。
 
-2. **≡** - **Azure Active Directory** をクリックします。
+2. **≡** - **Microsoft Entra ID** をクリックします。
 
 3. **アプリの登録** - **新規登録** をクリックします。
 
@@ -203,3 +207,7 @@ Compress-Archive -Path ./* -DestinationPath ../manifest.zip
 2. **Teams のアプリ** - **アプリを管理** をクリックします。
 
 3. **アップロード** をクリックして `manifest.zip` を選択します。
+
+# 素材
+
+アプリで使用している素材は [unDraw](https://undraw.co/illustrations) にライセンスされています。

README.md

@@ -19,7 +19,11 @@ Are you frustrated with finding a team? Teamtile provides these features to you
 
 ## Screenshot
 
-![screenshot](./assets/screenshot.png)
+![screenshot1](./assets/screenshots/001.png)
+
+![screenshot2](./assets/screenshots/002.png)
+
+![screenshot3](./assets/screenshots/003.png)
 
 ## Installation
 
@@ -45,11 +49,11 @@ Are you frustrated with finding a team? Teamtile provides these features to you
 
 5. Click **Create** and wait until creation is completed.
 
-### Register Azure AD Application
+### Register Microsoft Entra ID Application
 
 1. Go to [Azure Portal](https://portal.azure.com).
 
-2. Click **≡** - **Azure Active Directory**.
+2. Click **≡** - **Microsoft Entra ID**.
 
 3. Click **App registrations** - **New registration**.
 
@@ -203,3 +207,7 @@ Compress-Archive -Path ./* -DestinationPath ../manifest.zip
 2. Click **Teams apps** - **Manage apps**.
 
 3. Click **Upload** and select `manifest.zip` file.
+
+## Assets
+
+The assets are licensed by [unDraw](https://undraw.co/illustrations).

source/client/index.html

@@ -5,15 +5,15 @@
   <meta charset="utf-8" />
   <meta name="author" content="karamem0">
   <meta name="description" content="You can quickly access participating teams by displaying them as tiles.">
-  <meta name="keywords" content="Microsoft Teams,Teams App,Teams アプリ,Microsoft 365">
+  <meta name="keywords" content="Microsoft Teams,Teams,チームス,チームズ,Teams App,Teams アプリ,Microsoft 365,マイクロソフト 365,生産性">
   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <meta name="twitter:card" content="summary">
   <meta name="twitter:site" content="@karamem0">
   <meta name="twitter:creator" content="@karamem0">
   <meta property="og:url" content="%VITE_PUBLIC_URL%">
   <meta property="og:title" content="Teamtile">
   <meta property="og:description" content="You can quickly access participating teams by displaying them as tiles.">
-  <meta property="og:image" content="%VITE_PUBLIC_URL%/assets/screenshot.png">
+  <meta property="og:image" content="%VITE_PUBLIC_URL%/assets/screenshots/001.png">
   <title>Teamtile</title>
 </head>
 

source/client/src/features/error/messages.ts

@@ -10,9 +10,9 @@ import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
   Error404Description: { defaultMessage: 'Page not found' },
-  Error404Title: { defaultMessage: '404 Error' },
+  Error404Title: { defaultMessage: '404 Not Found' },
   Error500Description: { defaultMessage: 'Something went wrong' },
-  Error500Title: { defaultMessage: '500 Error' }
+  Error500Title: { defaultMessage: '500 Internal Server Error' }
 });
 
 export default messages;

source/client/src/features/error/pages/Error404Page.presenter.tsx

@@ -8,44 +8,66 @@
 
 import React from 'react';
 
-import CenterLayout from '../../../common/components/CenterLayout';
-import { FormattedMessage } from 'react-intl';
-import { Text } from '@fluentui/react-components';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Image, Text } from '@fluentui/react-components';
 import { css } from '@emotion/react';
 import messages from '../messages';
 import { useTheme } from '../../../providers/ThemeProvider';
 
-function Error404Page() {
+interface Error404PageProps {
+  error?: string
+}
+
+function Error404Page(props: Readonly<Error404PageProps>) {
+
+  const { error } = props;
 
+  const intl = useIntl();
   const { theme } = useTheme();
 
   return (
-    <CenterLayout>
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        background-color: ${theme.colorNeutralBackground3};
+      `}>
       <div
         css={css`
           display: flex;
           flex-direction: column;
-          grid-gap: 0.5rem;
+          grid-gap: 1rem;
           align-items: center;
           justify-content: center;
         `}>
+        <Text as="h1">
+          <Image
+            alt={intl.formatMessage(messages.Error404Title)}
+            src="/assets/errors/404.svg"
+            css={css`
+              max-width: 32rem;
+              max-height: 24rem;
+            `} />
+        </Text>
         <Text
-          as="h1"
           css={css`
-            font-size: 3rem;
-            line-height: calc(3rem * 1.25);
             color: ${theme.colorNeutralForegroundDisabled};
           `}>
-          <FormattedMessage {...messages.Error404Title} />
+          <FormattedMessage {...messages.Error404Description} />
         </Text>
         <Text
           css={css`
+            font-size: 0.75rem;
+            line-height: calc(0.75rem * 1.25);
             color: ${theme.colorNeutralForegroundDisabled};
           `}>
-          <FormattedMessage {...messages.Error404Description} />
+          {error}
         </Text>
       </div>
-    </CenterLayout>
+    </div>
   );
 
 }

source/client/src/features/error/pages/Error500Page.presenter.tsx

@@ -8,9 +8,8 @@
 
 import React from 'react';
 
-import CenterLayout from '../../../common/components/CenterLayout';
-import { FormattedMessage } from 'react-intl';
-import { Text } from '@fluentui/react-components';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Image, Text } from '@fluentui/react-components';
 import { css } from '@emotion/react';
 import messages from '../messages';
 import { useTheme } from '../../../providers/ThemeProvider';
@@ -23,26 +22,35 @@ function Error500Page(props: Readonly<Error500PageProps>) {
 
   const { error } = props;
 
+  const intl = useIntl();
   const { theme } = useTheme();
 
   return (
-    <CenterLayout>
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        background-color: ${theme.colorNeutralBackground3};
+      `}>
       <div
         css={css`
           display: flex;
           flex-direction: column;
-          grid-gap: 0.5rem;
+          grid-gap: 1rem;
           align-items: center;
           justify-content: center;
         `}>
-        <Text
-          as="h1"
-          css={css`
-            font-size: 3rem;
-            line-height: calc(3rem * 1.25);
-            color: ${theme.colorNeutralForegroundDisabled};
-          `}>
-          <FormattedMessage {...messages.Error500Title} />
+        <Text as="h1">
+          <Image
+            alt={intl.formatMessage(messages.Error500Title)}
+            src="/assets/errors/500.svg"
+            css={css`
+              max-width: 32rem;
+              max-height: 24rem;
+            `} />
         </Text>
         <Text
           css={css`
@@ -59,7 +67,7 @@ function Error500Page(props: Readonly<Error500PageProps>) {
           {error}
         </Text>
       </div>
-    </CenterLayout>
+    </div>
   );
 
 }

source/client/src/features/error/pages/__snapshots__/Error404Page.test.tsx.snap

@@ -24,13 +24,8 @@ exports[`should create shapshot 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  min-height: calc(100vh - 0.5rem);
-}
-
-@media (width >= 600px) {
-  .emotion-1 {
-    min-height: calc(100vh - 2rem);
-  }
+  min-height: 100vh;
+  background-color: #f5f5f5;
 }
 
 .emotion-2 {
@@ -41,7 +36,7 @@ exports[`should create shapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  grid-gap: 0.5rem;
+  grid-gap: 1rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -53,15 +48,20 @@ exports[`should create shapshot 1`] = `
 }
 
 .emotion-3 {
-  font-size: 3rem;
-  line-height: calc(3rem * 1.25);
-  color: #bdbdbd;
+  max-width: 32rem;
+  max-height: 24rem;
 }
 
 .emotion-4 {
   color: #bdbdbd;
 }
 
+.emotion-5 {
+  font-size: 0.75rem;
+  line-height: calc(0.75rem * 1.25);
+  color: #bdbdbd;
+}
+
 <div
     class="fui-FluentProvider fui-FluentProviderr0 ___jdtuxv0_17k0bs4 f19n0e5 fxugw4r f1o700av fk6fouc fkhj508 figsok6 f1i3iumi"
     dir="ltr"
@@ -76,15 +76,22 @@ exports[`should create shapshot 1`] = `
           class="emotion-2"
         >
           <h1
-            class="fui-Text emotion-3 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+            class="fui-Text ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
           >
-            404 Error
+            <img
+              alt="404 Not Found"
+              class="fui-Image emotion-3 ___1erkwlp_1hna692 fj3muxo f1akhkt f1aperda f1lxtadh f1fabniw f1ewtqcl f14t3ns0"
+              src="/assets/errors/404.svg"
+            />
           </h1>
           <span
             class="fui-Text emotion-4 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
           >
             Page not found
           </span>
+          <span
+            class="fui-Text emotion-5 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+          />
         </div>
       </div>
     </div>

source/client/src/features/error/pages/__snapshots__/Error500Page.test.tsx.snap

@@ -24,13 +24,8 @@ exports[`should create shapshot 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  min-height: calc(100vh - 0.5rem);
-}
-
-@media (width >= 600px) {
-  .emotion-1 {
-    min-height: calc(100vh - 2rem);
-  }
+  min-height: 100vh;
+  background-color: #f5f5f5;
 }
 
 .emotion-2 {
@@ -41,7 +36,7 @@ exports[`should create shapshot 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  grid-gap: 0.5rem;
+  grid-gap: 1rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -53,9 +48,8 @@ exports[`should create shapshot 1`] = `
 }
 
 .emotion-3 {
-  font-size: 3rem;
-  line-height: calc(3rem * 1.25);
-  color: #bdbdbd;
+  max-width: 32rem;
+  max-height: 24rem;
 }
 
 .emotion-4 {
@@ -82,9 +76,13 @@ exports[`should create shapshot 1`] = `
           class="emotion-2"
         >
           <h1
-            class="fui-Text emotion-3 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+            class="fui-Text ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
           >
-            500 Error
+            <img
+              alt="500 Internal Server Error"
+              class="fui-Image emotion-3 ___1erkwlp_1hna692 fj3muxo f1akhkt f1aperda f1lxtadh f1fabniw f1ewtqcl f14t3ns0"
+              src="/assets/errors/500.svg"
+            />
           </h1>
           <span
             class="fui-Text emotion-4 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"