Merge branch 'dev/7.0.x' into imprv/133910-141426-replace-spinner-pulse

apps/app/src/components/LoadingSpinner.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import styles from './LoadingSpinner.module.scss';
+
+export const LoadingSpinner = () => (
+  <span className={`material-symbols-outlined pb-0 ${styles.spinner}`}>progress_activity</span>
+);

apps/app/src/components/LoadingSpinner.module.scss

@@ -0,0 +1,39 @@
+.spinner {
+  animation: animation-rotate 750ms infinite linear;
+}
+
+// refs: https://github.com/weseek/growi/blob/master/apps/app/src/styles/atoms/_spinners.scss
+@keyframes animation-rotate {
+  100% {
+    transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes animation-rotate {
+  100% {
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-ms-keyframes animation-rotate {
+  100% {
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes animation-rotate {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes animation-rotate {
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

apps/app/src/components/LoginForm.tsx

@@ -14,6 +14,7 @@ import { RegistrationMode } from '~/interfaces/registration-mode';
 import { toArrayIfNot } from '~/utils/array-utils';
 
 import { CompleteUserRegistration } from './CompleteUserRegistration';
+import { LoadingSpinner } from './LoadingSpinner';
 import { LoadingSpinnerPulse } from './LoadingSpinnerPulse';
 
 import styles from './LoginForm.module.scss';
@@ -237,8 +238,11 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             >
               <div className="eff"></div>
               <span className="btn-label">
-                {/* spinner.Tentative decision meiri-k 11.17 */}
-                <span className="material-symbols-outlined">{isLoading ? 'hoge' : 'login'}</span>
+                {isLoading ? (
+                  <LoadingSpinner />
+                ) : (
+                  <span className="material-symbols-outlined">login</span>
+                )}
               </span>
               <span className="btn-label-text">{t('Sign in')}</span>
             </button>
@@ -512,8 +516,11 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             >
               <div className="eff"></div>
               <span className="btn-label">
-                {/* spinner.Tentative decision meiri-k 11.17 */}
-                <span className="material-symbols-outlined">{isLoading ? 'hoge' : 'login'}</span>
+                {isLoading ? (
+                  <LoadingSpinner />
+                ) : (
+                  <span className="material-symbols-outlined">login</span>
+                )}
               </span>
               <span className="btn-label-text">{submitText}</span>
             </button>

packages/custom-icons/svg/drawer_io.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a,.c{fill:none;}.a{stroke:#707070;}.b{clip-path:url(#a);}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(-14953 -18037)"/></clipPath></defs><g class="b" transform="translate(14953 18037)"><path class="c" d="M70.158,9.041H67.433L65.921,6.46a.909.909,0,0,0,.35-.706V1.477a.942.942,0,0,0-.95-.932H60.932a.942.942,0,0,0-.95.932V5.755a.911.911,0,0,0,.35.706l-1.511,2.58H56.057a.942.942,0,0,0-.949.932v4.277a.942.942,0,0,0,.949.932h4.389a.941.941,0,0,0,.949-.932V9.972a.941.941,0,0,0-.949-.932h-.107l1.38-2.354h2.815l1.379,2.354H65.77a.942.942,0,0,0-.95.932v4.277a.942.942,0,0,0,.95.932h4.388a.942.942,0,0,0,.95-.932V9.972a.942.942,0,0,0-.95-.932m-10.08,4.848H56.425V10.333h3.653ZM61.3,1.838h3.653V5.394H61.3Zm8.491,12.051H66.137V10.333h3.653Z" transform="translate(-15004.108 -18032.863)"/></g></svg>

packages/custom-icons/svg/header.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c{fill:none;}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(-14908 -18037)"/></clipPath></defs><g class="b" transform="translate(14908 18037)"><path class="c" d="M10.813.26v7H2.008v-7H0v16H2.008v-7h8.805v7h2.008V.26Z" transform="translate(-14902.41 -18033.26)"/></g></svg>

packages/editor/src/components/CodeMirrorEditor/Toolbar/DiagramButton.tsx

@@ -14,7 +14,9 @@ export const DiagramButton = (props: Props): JSX.Element => {
   }, [editorKey, openDrawioModal]);
   return (
     <button type="button" className="btn btn-toolbar-button" onClick={onClickDiagramButton}>
-      <span className="growi-custom-icons">drawer_io</span>
+      {/* TODO: https://github.com/weseek/growi/pull/8558 */}
+      {/* <span className="growi-custom-icons">drawer_io</span> */}
+      <span className="material-symbols-outlined fs-5">block</span>
     </button>
   );
 };

packages/editor/src/components/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -69,7 +69,9 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             <span className="material-symbols-outlined fs-5">format_strikethrough</span>
           </button>
           <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertPrefix('#', true)}>
-            <span className="growi-custom-icons">header</span>
+            {/* TODO: https://github.com/weseek/growi/pull/8558 */}
+            {/* <span className="growi-custom-icons">header</span> */}
+            <span className="material-symbols-outlined fs-5">block</span>
           </button>
           <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertMarkdownElements('`', '`')}>
             <span className="material-symbols-outlined fs-5">code</span>