nik/OMDSCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 182: cssについて「app.module.scss」と「GlobalStyle.css」をマージして、個別の参照をなくす

Browse Source 
## 概要
[Task1895: cssについて「app.module.scss」と「GlobalStyle.css」をマージして、個別の参照をなくす](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/1895)

- GlobalStyle.cssをなくしてデザイナさんのCSSをapp.module.scssにまとめるとともに、個別でcssを作成していた画面についてapp.module.scssを参照するように修正しました。
- 修正の過程で、最新のcss及び画像の取り込みを行いました。
- トップページのレイアウトについて最新化を行いました。
（適用前後でレイアウトにずれが発生したため、調査の過程で最新化を実施）
- 影響範囲は全画面レイアウトになります。適用前後の画面イメージを比較して確認しております。

## レビューポイント
- 各画面の変更前後のイメージについてスクリーンショットを格納しています。前後比較いただき問題ないか確認いただきたいです。
※変更後についてヘッダとシステム名の文字サイズが大きくなっていますが、最新の画面デザイン上そうなっています。
※トップページについては最新化を行ったため、デザイナさんの画面と比較いただければと思います。

## UIの変更
- https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task1895?csf=1&web=1&e=heIWaD

## 動作確認状況
- ローカルで確認

## 補足
- 相談、参考資料などがあれば
This commit is contained in:
masaaki 2023-06-27 07:19:41 +00:00
parent 8c3e1db63b
commit 4f69a57b84
30 changed files with 711 additions and 1186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dictation_client/src/App.tsx
View File

@ -8,7 +8,6 @@ import { useDispatch, useSelector } from "react-redux";
import globalAxios, { AxiosError, AxiosResponse } from "axios";
import { clearToken } from "features/auth";
import { useTranslation } from "react-i18next";
import "./styles/GlobalStyle.css";
import Snackbar from "components/snackbar";
import { selectSnackber } from "features/ui/selectors";
import { closeSnackbar } from "features/ui/uiSlice";

BIN
dictation_client/src/assets/images/ODMScloud.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

12
dictation_client/src/assets/images/progress_activit.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.6.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<style type="text/css">
.st0{fill:#999999;}
</style>
<path class="st0" d="M24,44c-2.8,0-5.4-0.5-7.9-1.5s-4.5-2.5-6.3-4.2s-3.2-3.9-4.2-6.4S4,26.8,4,24s0.5-5.4,1.6-7.9S8,11.6,9.8,9.8
s3.9-3.2,6.3-4.2S21.2,4,24,4c0.4,0,0.8,0.2,1.1,0.4c0.3,0.3,0.4,0.7,0.4,1.1s-0.1,0.8-0.4,1.1C24.8,6.8,24.4,7,24,7
c-4.7,0-8.7,1.7-12,5s-5,7.3-5,12s1.7,8.7,5,12s7.3,5,12,5s8.7-1.7,12-5s5-7.3,5-12c0-0.4,0.2-0.8,0.5-1c0.3-0.3,0.7-0.5,1-0.5
c0.4,0,0.8,0.1,1,0.5c0.3,0.3,0.5,0.6,0.5,1c0,2.8-0.5,5.4-1.5,7.9s-2.5,4.6-4.2,6.4s-3.9,3.2-6.4,4.2S26.8,44,24,44z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 897 B

10
dictation_client/src/components/footer/footer.module.scss
View File

@ -1,10 +0,0 @@
.footer {
grid-area: footer;
padding: 0.6rem 0;
text-align: center;
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.4px;
font-weight: normal;
color: #999999;
}

4
dictation_client/src/components/footer/footer.module.scss.d.ts vendored
View File

@ -1,4 +0,0 @@
declare const classNames: {
readonly footer: "footer";
};
export = classNames;

2
dictation_client/src/components/footer/index.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import styles from "./footer.module.scss";
import styles from "styles/app.module.scss";
const Footer: React.FC = () => (
<footer className={`${styles.footer}`}>

47
dictation_client/src/components/header/header.module.scss
View File

@ -1,47 +0,0 @@
.header {
grid-area: header;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-shadow: 0 0 3px #282828;
background: linear-gradient(#ffffff, #ffffff 70%, #f0f0f0 100%);
z-index: 4;
}
.headerLogo {
margin: 1.2rem 2rem 1rem;
font-size: 1.71rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
.headerLogo img {
width: 198px;
}
.headerSub {
margin: 1.4rem 2rem 1rem;
font-size: 1.2rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: normal;
font-weight: 600;
text-align: right;
}
@media only screen and (min-width: 1280px) {
.header.home {
display: block;
padding-top: 30vh;
padding-left: 40%;
background: none;
box-shadow: none;
}
.header.home .headerSub {
font-size: 1.4rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: 600;
text-align: left;
}
}

7
dictation_client/src/components/header/header.module.scss.d.ts vendored
View File

@ -1,7 +0,0 @@
declare const classNames: {
readonly header: "header";
readonly headerLogo: "headerLogo";
readonly headerSub: "headerSub";
readonly home: "home";
};
export = classNames;

87
dictation_client/src/components/header/loginedHeader.module.scss
View File

@ -1,87 +0,0 @@
.header {
grid-area: header;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-shadow: 0 0 3px #282828;
background: linear-gradient(#ffffff, #ffffff 70%, #f0f0f0 100%);
z-index: 4;
}
.headerLogo {
margin: 1.2rem 2rem 1rem;
font-size: 1.71rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
.headerLogo img {
width: 198px;
}
.headerSub {
margin: 1.4rem 2rem 1rem;
font-size: 1.2rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: normal;
font-weight: 600;
text-align: right;
}
.headerMenu {
width: 100%;
}
.headerMenu ul {
display: flex;
flex-wrap: wrap;
padding: 0 2rem;
}
.headerMenu ul li {
font-size: 1rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: normal;
border-left: 1px #e6e6e6 solid;
}
.headerMenu ul li a {
display: block;
padding: 0 2rem;
color: #333333;
text-decoration: none;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.headerMenu ul li a:hover {
background: #fafafa;
text-decoration: underline;
}
.headerMenu ul li a.isActive {
font-weight: 600;
pointer-events: none;
position: relative;
}
.headerMenu ul li a.isActive::after {
content: "";
border-right: 0.6rem transparent solid;
border-bottom: 0.6rem #282828 solid;
border-left: 0.6rem transparent solid;
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
}
.accountInfo {
position: absolute;
right: 2rem;
bottom: 0.3rem;
font-size: 0.8rem;
line-height: 1.6rem;
letter-spacing: 0.04rem;
font-weight: normal;
}
.accountIcon {
width: 1.4rem;
vertical-align: top;
}

10
dictation_client/src/components/header/loginedHeader.module.scss.d.ts vendored
View File

@ -1,10 +0,0 @@
declare const classNames: {
readonly header: "header";
readonly headerLogo: "headerLogo";
readonly headerSub: "headerSub";
readonly headerMenu: "headerMenu";
readonly isActive: "isActive";
readonly accountInfo: "accountInfo";
readonly accountIcon: "accountIcon";
};
export = classNames;

2
dictation_client/src/components/header/loginedHeader.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { isAdminUser } from "features/auth/utils";
import styles from "./loginedHeader.module.scss";
import styles from "styles/app.module.scss";
import logo from "../../assets/images/OMS_logo_black.svg";
import ac from "../../assets/images/account_circle.svg";

2
dictation_client/src/components/header/notLoginHeader.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import styles from "./header.module.scss";
import styles from "styles/app.module.scss";
import logo from "../../assets/images/OMS_logo_black.svg";
import { HEADER_NAME } from "./constants";

2
dictation_client/src/components/snackbar/index.tsx
View File

@ -1,8 +1,8 @@
import React, { useCallback, useEffect, useRef } from "react";
import styles from "styles/app.module.scss";
import reportWhite from "../../assets/images/report_white.svg";
import closeWhite from "../../assets/images/close_white.svg";
import checkCircleWhite from "../../assets/images/check_circle_white.svg";
import styles from "../../styles/app.module.scss";
export type SnackbarLevel = "info" | "error";

4
dictation_client/src/pages/SamplePage/index.tsx
View File

@ -6,7 +6,7 @@ import Header from "components/header";
import { clearToken } from "features/auth";
import React from "react";
import { useDispatch } from "react-redux";
import styles from "./sample.module.scss";
import styles from "styles/app.module.scss";
const SamplePage: React.FC = (): JSX.Element => {
const { instance } = useMsal();
@ -18,7 +18,7 @@ const SamplePage: React.FC = (): JSX.Element => {
<div>
<button
type="button"
className={styles.button}
className={styles.buttonText}
onClick={() => {
instance.logout({ postLogoutRedirectUri: "/" });
dispatch(clearToken());

21
dictation_client/src/pages/SamplePage/sample.module.scss
View File

@ -1,21 +0,0 @@
.wrap {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
min-height: 100vh;
}
.button {
display: block;
padding: 12px 0;
color: #ffffff;
text-decoration: none;
background: #005eb8;
border: 1px #005eb8 solid;
margin-left: 100px;
cursor: pointer;
:hover {
background: rgba(0, 94, 184, 0.7);
}
}

5
dictation_client/src/pages/SamplePage/sample.module.scss.d.ts vendored
View File

@ -1,5 +0,0 @@
declare const classNames: {
readonly wrap: "wrap";
readonly button: "button";
};
export = classNames;

213
dictation_client/src/pages/SignupPage/signup.module.scss
View File

@ -1,213 +0,0 @@
.wrap {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
min-height: 100vh;
}
.main {
grid-area: main;
}
.mainSmall {
width: 600px;
margin: 0 auto;
padding: 3.2rem 0;
}
.formList {
display: flex;
flex-wrap: wrap;
margin-bottom: 3rem;
dt {
font-size: 14px;
line-height: 1.7;
letter-spacing: 0;
font-weight: normal;
width: 22%;
padding: 0.5rem 4% 0;
text-align: right;
}
dd {
font-size: 14px;
line-height: 1.7;
letter-spacing: 0;
font-weight: normal;
width: 66%;
padding-right: 4%;
margin-bottom: 1.5rem;
}
dt.formTitle {
width: 100%;
padding: 0.5rem 4%;
text-align: left;
font-size: 1.2rem;
line-height: 1.7;
letter-spacing: 0.07rem;
font-weight: normal;
}
dt.overLine {
padding: 0 4% 0;
line-height: 1.4;
}
dd.full {
width: 100%;
padding-right: 0;
background: none;
}
}
.formListHasbg {
border-top: 2px #282828 solid;
background: #fafafa;
}
.formInput {
width: 350px;
padding: 0.6rem 0.8rem;
border: 1px #999999 solid;
background: #ffffff;
box-sizing: border-box;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
}
.formInputIsError {
background: rgba(229, 0, 0, 0.08);
}
.formInputPassword[type="password"] {
+ {
span {
background: url(../../assets/images/visibility_off.svg) no-repeat top
right;
}
}
}
.formInputPassword[type="text"] {
+ {
span {
background: url(../../assets/images/visibility_off.svg) no-repeat top
right;
}
}
}
.formIconEye {
width: 40px;
height: 40px;
float: right;
margin-top: -40px;
margin-right: 45px;
position: relative;
cursor: pointer;
}
.formIconEyeImg {
width: 2.5rem;
}
.formCheck {
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
vertical-align: bottom;
}
.formError {
display: block;
padding-top: 0.3rem;
color: #e60000;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
}
.formComment {
display: inline-block;
padding-top: 0.5rem;
color: #999999;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
}
.formSubmit {
min-width: 15rem;
padding: 0.8rem 2rem;
border: 1px #999999 solid;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
opacity: 0.7;
pointer-events: none;
border-radius: 0.3rem;
position: relative;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.formSubmitIsActive {
cursor: pointer;
opacity: 1;
color: #ffffff;
background: #004086;
border: 1px #004086 solid;
pointer-events: auto;
&:hover {
background: rgba(0, 94, 184, 0.7);
}
}
.formConfirm {
width: 350px;
padding: 0.6rem 0.6rem;
background: #f0f0f0;
}
.formButtonTx {
padding: 0.2rem 2rem;
border: none;
background: none;
color: #0084b2;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0.04rem;
font-weight: normal;
cursor: pointer;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
&:hover {
text-decoration: underline;
}
}
.formDone {
width: 100px;
}
.linkTx {
color: #0084b2;
text-decoration: none;
cursor: pointer;
img {
width: 1rem;
margin: 0 4px;
vertical-align: middle;
}
&:hover {
text-decoration: underline;
}
}
.alignCenter {
text-align: center;
}
.marginBtm0 {
margin-bottom: 0.5rem;
}
.marginBtm1 {
margin-bottom: 1rem;
}
.marginBtm2 {
margin-bottom: 2rem;
}

29
dictation_client/src/pages/SignupPage/signup.module.scss.d.ts vendored
View File

@ -1,29 +0,0 @@
declare const classNames: {
readonly wrap: "wrap";
readonly main: "main";
readonly mainSmall: "mainSmall";
readonly formList: "formList";
readonly formTitle: "formTitle";
readonly overLine: "overLine";
readonly full: "full";
readonly formListHasbg: "formListHasbg";
readonly formInput: "formInput";
readonly formInputIsError: "formInputIsError";
readonly formInputPassword: "formInputPassword";
readonly formIconEye: "formIconEye";
readonly formIconEyeImg: "formIconEyeImg";
readonly formCheck: "formCheck";
readonly formError: "formError";
readonly formComment: "formComment";
readonly formSubmit: "formSubmit";
readonly formSubmitIsActive: "formSubmitIsActive";
readonly formConfirm: "formConfirm";
readonly formButtonTx: "formButtonTx";
readonly formDone: "formDone";
readonly linkTx: "linkTx";
readonly alignCenter: "alignCenter";
readonly marginBtm0: "marginBtm0";
readonly marginBtm1: "marginBtm1";
readonly marginBtm2: "marginBtm2";
};
export = classNames;

7
dictation_client/src/pages/SignupPage/signupConfirm.tsx
View File

@ -4,8 +4,9 @@ import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { getTranslationID } from "translation";
import { changePageState } from "features/signup/signupSlice";
import styles from "styles/app.module.scss";
import { COUNTRY_LIST } from "./constants";
import styles from "./signup.module.scss";
import {
selectCompany,
selectCountry,
@ -53,7 +54,7 @@ const SignupConfirm: React.FC = (): JSX.Element => {
</div>
<section className="form">
<dl className={`${styles.formList} ${styles.formListHasbg}`}>
<dl className={`${styles.formList} ${styles.hasbg}`}>
<dt className={styles.formTitle}>
{t(getTranslationID("signupConfirmPage.text.accountInfoTitle"))}
</dt>
@ -96,7 +97,7 @@ const SignupConfirm: React.FC = (): JSX.Element => {
value={t(
getTranslationID("signupConfirmPage.label.signupButton")
)}
className={`${styles.formSubmit} ${styles.marginBtm1} ${styles.formSubmitIsActive}`}
className={`${styles.formSubmit} ${styles.marginBtm1} ${styles.isActive}`}
onClick={onSubmit}
/>
<br />

18
dictation_client/src/pages/SignupPage/signupInput.tsx
View File

@ -19,8 +19,8 @@ import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { getTranslationID } from "translation";
import styles from "styles/app.module.scss";
import { COUNTRY_LIST } from "./constants";
import styles from "./signup.module.scss";
const SignupInput: React.FC = (): JSX.Element => {
const dispatch: AppDispatch = useDispatch();
@ -83,7 +83,7 @@ const SignupInput: React.FC = (): JSX.Element => {
</div>
<section>
<form>
<dl className={`${styles.formList} ${styles.formListHasbg}`}>
<dl className={`${styles.formList} ${styles.hasbg}`}>
<dt className={` ${styles.formTitle} ${styles.marginBtm0}`}>
{t(getTranslationID("signupPage.text.accountInfoTitle"))}
</dt>
@ -96,7 +96,7 @@ const SignupInput: React.FC = (): JSX.Element => {
className={`${styles.formInput} ${
isPushCreateButton &&
hasErrorEmptyCompany &&
styles.formInputIsError
styles.isError
}`}
onChange={(e) => {
dispatch(changeCompany({ company: e.target.value }));
@ -117,7 +117,7 @@ const SignupInput: React.FC = (): JSX.Element => {
className={`${styles.formInput} ${
isPushCreateButton &&
hasErrorEmptyCountry &&
styles.formInputIsError
styles.isError
}`}
onChange={(event) => {
dispatch(changeCountry({ country: event.target.value }));
@ -165,7 +165,7 @@ const SignupInput: React.FC = (): JSX.Element => {
className={`${styles.formInput} ${
isPushCreateButton &&
hasErrorEmptyAdminName &&
styles.formInputIsError
styles.isError
}`}
onChange={(e) => {
dispatch(changeAdminName({ adminName: e.target.value }));
@ -191,7 +191,7 @@ const SignupInput: React.FC = (): JSX.Element => {
${
isPushCreateButton &&
(hasErrorEmptyEmail || hasErrorIncorrectEmail) &&
styles.formInputIsError
styles.isError
}`}
onChange={(e) => {
dispatch(changeEmail({ email: e.target.value }));
@ -220,11 +220,11 @@ const SignupInput: React.FC = (): JSX.Element => {
<input
type={isPasswordHide ? "password" : "text"}
size={64}
className={`${styles.formInput} ${styles.formInputPassword}
className={`${styles.formInput} ${styles.password}
${
isPushCreateButton &&
(hasErrorIncorrectPassword || hasErrorEmptyPassword) &&
styles.formInputIsError
styles.isError
}
`}
onChange={(e) => {
@ -302,7 +302,7 @@ const SignupInput: React.FC = (): JSX.Element => {
getTranslationID("signupPage.label.createAccountButton")
)}
className={`${styles.formSubmit}
${isAgreePolicy && styles.formSubmitIsActive}
${isAgreePolicy && styles.isActive}
${styles.marginBtm0}`}
onClick={() => {
setIsPushCreateButton(true);

221
dictation_client/src/pages/TopPage/TopPage.module.scss
View File

@ -1,221 +0,0 @@
.wrap {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
min-height: 100vh;
}
.main {
grid-area: main;
}
.mainSmall {
width: 600px;
margin: 0 auto;
padding: 3.2rem 0;
}
.footer {
grid-area: footer;
padding: 0.6rem 0;
text-align: center;
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.4px;
font-weight: normal;
color: #999999;
background: #282828;
}
.buttonNormal {
display: inline-block;
width: 15rem;
padding: 0.8rem 2rem;
color: #ffffff;
background: #004086;
border: 1px #004086 solid;
text-decoration: none;
border-radius: 0.3rem;
position: relative;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.buttonNormal:hover {
background: rgba(0, 64, 134, 0.7);
}
.buttonNormal.small {
width: auto;
padding: 0.75rem 2rem;
}
.buttonNormal.red {
background: #e60000;
border: 1px #e60000 solid;
}
.buttonNormal.red:hover {
background: rgba(230, 0, 0, 0.7);
}
.buttonBase {
display: inline-block;
width: 15rem;
padding: 0.8rem 2rem;
color: #004086;
background: #ffffff;
border: 1px #004086 solid;
text-decoration: none;
border-radius: 0.3rem;
position: relative;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.buttonBase:hover {
background: rgba(0, 64, 134, 0.04);
}
.buttonBase.small {
width: auto;
padding: 0.75rem 2rem;
}
.form select option[disabled] {
background: #f5f5f5;
}
.form select option[value=""] {
color: #999999;
}
.formInput {
width: 350px;
padding: 0.6rem 0.8rem;
border: 1px #999999 solid;
background: #ffffff;
box-sizing: border-box;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
font-weight: normal;
}
.formInput:focus {
outline: 0;
}
.formInput.isError {
background: rgba(229, 0, 0, 0.08);
}
.wrap.home {
background: url("../../assets/images/top-bg04.png") no-repeat bottom center;
background-size: cover;
}
@media only screen and (min-width: 1280px) {
.wrap.home {
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: 45% 1fr;
grid-template-areas: "header main" "footer footer";
min-height: 100vh;
}
}
.pgHome > div {
width: 400px;
margin: 15vh auto 0;
padding: 2rem;
background: #ffffff;
box-shadow: 0 0 5px #aaa;
border-radius: 0.3rem;
}
@media only screen and (min-width: 1280px) {
.pgHome > div {
margin: 25vh auto 0 50px;
}
}
.pgHomeLinks {
width: calc(400px - 4rem);
margin: 0 auto;
text-align: center;
}
.pgHomeLinks dt {
padding: 0 0 0.5rem 1rem;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0;
font-weight: normal;
text-align: left;
}
.pgHomeLinks dt:first-of-type {
display: inline-block;
// 言語選択時のデザイン崩れ対応のため調整
min-width: 45%;
width: auto;
padding: 0 0 0 0;
margin-right: 0.3rem;
white-space: nowrap;
}
.pgHomeLinks dd a .buttonIcon {
width: 16px;
height: 16px;
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
opacity: 0;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.pgHomeLinks dd a:hover .buttonIcon {
top: 50%;
right: 1.7rem;
opacity: 1;
}
.pgHomeLinks dd:first-of-type {
display: inline-block;
width: 45%;
text-align: left;
}
.pgHomeLinks dd .formInput {
width: auto;
}
.marginBtm1 {
margin-bottom: 1rem;
}
.marginBtm2 {
margin-bottom: 2rem;
}
.marginBtm3 {
margin-bottom: 3rem;
}

21
dictation_client/src/pages/TopPage/TopPage.module.scss.d.ts vendored
View File

@ -1,21 +0,0 @@
declare const classNames: {
readonly wrap: "wrap";
readonly main: "main";
readonly mainSmall: "mainSmall";
readonly footer: "footer";
readonly buttonNormal: "buttonNormal";
readonly small: "small";
readonly red: "red";
readonly buttonBase: "buttonBase";
readonly form: "form";
readonly formInput: "formInput";
readonly isError: "isError";
readonly home: "home";
readonly pgHome: "pgHome";
readonly pgHomeLinks: "pgHomeLinks";
readonly buttonIcon: "buttonIcon";
readonly marginBtm1: "marginBtm1";
readonly marginBtm2: "marginBtm2";
readonly marginBtm3: "marginBtm3";
};
export = classNames;

9
dictation_client/src/pages/TopPage/index.tsx
View File

@ -9,10 +9,11 @@ import { AppDispatch } from "app/store";
import { useDispatch } from "react-redux";
import { closeSnackbar, openSnackbar } from "features/ui";
import { useLocation, useNavigate } from "react-router-dom";
import styles from "styles/app.module.scss";
import { LANGUAGE_LIST } from "../../features/top/constants";
import arrow_forward from "../../assets/images/arrow_forward.svg";
import arrow_forward_bule from "../../assets/images/arrow_forward_blue.svg";
import styles from "./TopPage.module.scss";
import oDMScloud from "../../assets/images/ODMScloud.png";
const TopPage: React.FC = (): JSX.Element => {
const { instance } = useMsal();
@ -43,6 +44,12 @@ const TopPage: React.FC = (): JSX.Element => {
<main className={`${styles.main} ${styles.home}`}>
<section className={`${styles.pgHome}`}>
<p className={styles.ODMSlogo}>
<img
src={`${oDMScloud}?0609`}
alt={t(getTranslationID("topPage.label.logoAlt"))}
/>
</p>
<div>
<dl className={`${styles.pgHomeLinks}`}>
<dt>

194
dictation_client/src/styles/GlobalStyle.css
View File

@ -1,194 +0,0 @@
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button {
appearance: none;
padding: 0;
border: none;
outline: none;
background-color: transparent;
cursor: pointer;
}
html {
color: #333333;
font-size: 16px;
line-height: 1.7;
letter-spacing: 0;
font-weight: normal;
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
position: relative;
}
h1 {
font-size: 2.4rem;
line-height: 3.14rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
h2 {
font-size: 2rem;
line-height: 2.57rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
h3 {
font-size: 1.6rem;
line-height: 2rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
h4 {
font-size: 1.2rem;
line-height: 1.57rem;
letter-spacing: 0.07rem;
font-weight: normal;
}
h5 {
font-size: 1.1rem;
line-height: 1.57rem;
letter-spacing: 0.06rem;
font-weight: normal;
}

943
dictation_client/src/styles/app.module.scss
View File

File diff suppressed because it is too large Load Diff

14
dictation_client/src/styles/app.module.scss.d.ts vendored
View File

@ -41,6 +41,7 @@ declare const classNames: {
readonly formDone: "formDone";
readonly listVertical: "listVertical";
readonly loadingBoxSpinner: "loadingBoxSpinner";
readonly icLoading: "icLoading";
readonly modal: "modal";
readonly isShow: "isShow";
readonly modalBox: "modalBox";
@ -63,6 +64,8 @@ declare const classNames: {
readonly table: "table";
readonly tableHeader: "tableHeader";
readonly hasSort: "hasSort";
readonly isActiveAz: "isActiveAz";
readonly isActiveZa: "isActiveZa";
readonly noLine: "noLine";
readonly home: "home";
readonly pgHome: "pgHome";
@ -72,6 +75,7 @@ declare const classNames: {
readonly user: "user";
readonly license: "license";
readonly dictation: "dictation";
readonly partners: "partners";
readonly isSelected: "isSelected";
readonly menuInTable: "menuInTable";
readonly menuAction: "menuAction";
@ -79,22 +83,22 @@ declare const classNames: {
readonly menuLink: "menuLink";
readonly colorLink: "colorLink";
readonly alignRight: "alignRight";
readonly menuMore: "menuMore";
readonly menuIcon: "menuIcon";
readonly isDisable: "isDisable";
readonly icCheckCircle: "icCheckCircle";
readonly icInTable: "icInTable";
readonly svg: "svg";
readonly history: "history";
readonly cardHistory: "cardHistory";
readonly partner: "partner";
readonly isOpen: "isOpen";
readonly role2: "role2";
readonly role3: "role3";
readonly role4: "role4";
readonly iconver: "iconver";
readonly role5: "role5";
readonly isOpen: "isOpen";
readonly role2: "role2";
readonly displayOptions: "displayOptions";
readonly tableFilter: "tableFilter";
readonly tableFilter2: "tableFilter2";
readonly isDisable: "isDisable";
readonly tableWrap: "tableWrap";
readonly clm0: "clm0";
readonly txWsline: "txWsline";

3
dictation_client/src/translation/de.json
View File

@ -27,7 +27,8 @@
"alreadyHaveAccount": "(de)Already have an account?",
"signInButton": "(de)Sign in",
"newUser": "(de)New user?",
"signUpButton": "(de)Create a new account"
"signUpButton": "(de)Create a new account",
"logoAlt": "(de)OM Dictation Management System in the Cloud"
}
},
"signupPage": {

3
dictation_client/src/translation/en.json
View File

@ -27,7 +27,8 @@
"alreadyHaveAccount": "Already have an account?",
"signInButton": "Sign in",
"newUser": "New user?",
"signUpButton": "Create a new account"
"signUpButton": "Create a new account",
"logoAlt": "OM Dictation Management System in the Cloud"
}
},
"signupPage": {

3
dictation_client/src/translation/es.json
View File

@ -27,7 +27,8 @@
"alreadyHaveAccount": "(es)Already have an account?",
"signInButton": "(es)Sign in",
"newUser": "(es)New user?",
"signUpButton": "(es)Create a new account"
"signUpButton": "(es)Create a new account",
"logoAlt": "(es)OM Dictation Management System in the Cloud"
}
},
"signupPage": {

3
dictation_client/src/translation/fr.json
View File

@ -27,7 +27,8 @@
"alreadyHaveAccount": "(fr)Already have an account?",
"signInButton": "(fr)Sign in",
"newUser": "(fr)New user?",
"signUpButton": "(fr)Create a new account"
"signUpButton": "(fr)Create a new account",
"logoAlt": "(fr)OM Dictation Management System in the Cloud"
}
},
"signupPage": {