feat(app-create-game): update ui

eficode · Jan 28, 2021 · 39673fe · 39673fe
1 parent 3e9cdb6
commit 39673fe
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 36 deletions.
diff --git a/packages/game-app/src/_shared/components/Box/Box.tsx b/packages/game-app/src/_shared/components/Box/Box.tsx
@@ -6,15 +6,23 @@ import {
   layout,
   flexbox,
   position,
+  color,
   SpaceProps,
   LayoutProps,
   FlexboxProps,
   PositionProps,
   MarginProps,
   TextAlignProps,
+  ColorProps,
 } from 'styled-system';
 
-export type BoxProps = SpaceProps & LayoutProps & FlexboxProps & PositionProps & MarginProps & TextAlignProps;
+export type BoxProps = SpaceProps &
+  LayoutProps &
+  FlexboxProps &
+  PositionProps &
+  MarginProps &
+  TextAlignProps &
+  ColorProps;
 
 /**
  * Simple div wrapper that exposes flex, margin and other inline props
@@ -30,6 +38,7 @@ const Box = styled.div<BoxProps>(
   margin,
   textAlign,
   position,
+  color,
 );
 
 Box.displayName = 'Box';

diff --git a/packages/game-app/src/_shared/components/ErrorMessage/ErrorMessage.tsx b/packages/game-app/src/_shared/components/ErrorMessage/ErrorMessage.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
+import Box from '../Box';
 
 type Props = {
   message: string;
 };
 
 const ErrorMessage: React.FC<Props> = ({ message }) => {
-  return <span className="error-message">{message}</span>;
+  return (
+    <Box as="span" color="red">
+      {message}
+    </Box>
+  );
 };
 
 ErrorMessage.displayName = 'ErrorMessage';

diff --git a/packages/game-app/src/_shared/components/TextArea/TextArea.tsx b/packages/game-app/src/_shared/components/TextArea/TextArea.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import ErrorMessage from '../ErrorMessage';
 
 type Props = {
   name: string;
@@ -14,14 +15,15 @@ const StyledTextArea = styled.textarea`
   border: 0;
   border-radius: 10px;
   resize: none;
+  width: 100%;
 `;
 
 const TextArea: React.FC<Props> = ({ name, value, errorMessage, label, onChange, disabled }) => {
   return (
     <div className="column">
       {label ? <label htmlFor={name}>{label}</label> : null}
       <StyledTextArea rows={4} disabled={disabled} value={value} name={name} id={name} onChange={onChange as any} />
-      {errorMessage ? <span className="error-message">{errorMessage}</span> : null}
+      {errorMessage ? <ErrorMessage message={errorMessage} /> : null}
     </div>
   );
 };

diff --git a/packages/game-app/src/_shared/components/TextLogo/TextLogo.tsx b/packages/game-app/src/_shared/components/TextLogo/TextLogo.tsx
@@ -4,7 +4,7 @@ import Box from '../Box';
 
 type Props = {};
 
-const TextLogo: React.FC<Props> = ({}) => {
+const TextLogo: React.FC<Props> = () => {
   return (
     <Box width="100px">
       <TextLogoImage />

diff --git a/packages/game-app/src/assets/i18n/en.ts b/packages/game-app/src/assets/i18n/en.ts
@@ -7,7 +7,7 @@ const translations = {
   },
   createGame: {
     title: 'Choose a scenario',
-    subtitle: 'Premade {{cardsCount}}',
+    subtitle: 'Premade ({{cardsCount}})',
     writeYours: 'Make your own',
     createButtonText: 'Start Game',
   },

diff --git a/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.styled.tsx b/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.styled.tsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const CreateGameContainer = styled.div`
+  background-color: rgb(170, 180, 175, 0.4);
+  backdrop-filter: blur(15px);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+CreateGameContainer.displayName = 'CreateGameContainer';
+
+export const CreateGameContent = styled.div`
+  width: 80%;
+  max-width: 900px;
+  background: rgba(255, 255, 255, 0.5);
+  box-shadow: 0px 0px 6px #d7d2cb80;
+  border-radius: 10px;
+  padding: 24px 40px;
+`;
+
+CreateGameContent.displayName = 'CreateGameContent';
diff --git a/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.tsx b/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.tsx
@@ -7,11 +7,12 @@ import useCards from '../../../gameView/hooks/useCards';
 import { CardTypes } from '@pipeline/common';
 import ScenariosList from '../ScenariosList';
 import { FormTextField } from '@pipeline/form';
-import { Button, Link, Box, TextArea } from '@pipeline/components';
+import { Button, Link, Box, TextArea, Typography, ErrorMessage } from '@pipeline/components';
 import { RoutingPath, useNavigateOnCondition } from '@pipeline/routing';
 import useCreateGame from '../../hook/useCreateGame';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { createGameValidationSchema } from '../../utils/validation';
+import { CreateGameContainer, CreateGameContent } from './CreateGameView.styled';
 
 type Props = {};
 
@@ -72,38 +73,41 @@ const CreateGameView: React.FC<Props> = () => {
   }, [history]);
 
   return (
-    <div className="signup">
-      <div
-        className="content card"
-        style={{ width: '90%', maxWidth: '1000px', background: 'rgba(255,255,255, 0.5)', marginTop: '40px' }}
-      >
-        <h2>{t('createGame.title')}</h2>
-        <h5>{t('createGame.subtitle', { data: { cardsCount: cards.length } })}</h5>
+    <CreateGameContainer>
+      <CreateGameContent>
+        <Typography variant="dialogHead">{t('createGame.title')}</Typography>
+        <Typography variant="content" fontWeight="600">
+          {t('createGame.subtitle', { data: { cardsCount: cards.length } })}
+        </Typography>
         <FormProvider {...methods}>
           <form>
             <ScenariosList cards={cards} onScenarioSelected={selectScenario} selectedScenario={selectedScenarioCard} />
-            <div>
-              <h4>{t('createGame.writeYours')}</h4>
+            <Box mt={3}>
+              <Typography variant="content" fontWeight="600">
+                {t('createGame.writeYours')}
+              </Typography>
               <FormTextField disabled={!!selectedScenarioCard} name="scenarioTitle" label=" " />
-              <FormTextField
-                disabled={!!selectedScenarioCard}
-                CustomInput={TextArea}
-                label=" "
-                name="scenarioContent"
-              />
-              <Box textAlign="center">
+              <Box mt={2}>
+                <FormTextField
+                  disabled={!!selectedScenarioCard}
+                  CustomInput={TextArea}
+                  label=" "
+                  name="scenarioContent"
+                />
+              </Box>
+              <Box textAlign="center" mt={4}>
                 <Button label={t('createGame.createButtonText')} onClick={submit} />
                 {loading && <span>Loading...</span>}
-                {translatedError && <span className="error-message">{translatedError}</span>}
+                {translatedError && <ErrorMessage message={translatedError} />}
               </Box>
-              <Box textAlign="center">
+              <Box textAlign="center" mt={2}>
                 <Link onClick={cancel}>{t('general.cancel')}</Link>
               </Box>
-            </div>
+            </Box>
           </form>
         </FormProvider>
-      </div>
-    </div>
+      </CreateGameContent>
+    </CreateGameContainer>
   );
 };
 

diff --git a/packages/game-app/src/createGame/components/ScenariosList/ScenariosList.tsx b/packages/game-app/src/createGame/components/ScenariosList/ScenariosList.tsx
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
   flex-direction: row;
   padding: 5px;
   overflow-x: scroll;
-  height: 433px;
+  height: 390px;
   padding-top: 20px;
 
   ::-webkit-scrollbar {

diff --git a/packages/game-app/src/createGame/components/SelectableScenario/SelectableScenario.tsx b/packages/game-app/src/createGame/components/SelectableScenario/SelectableScenario.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 const ScenarioCard = styled.div<{ selected: boolean }>`
   min-width: 400px;
-  height: 408px;
+  height: 360px;
   background: white;
   border-radius: 10px;
   backdrop-filter: blur(20px);

diff --git a/packages/game-app/src/login/components/Login/Login.tsx b/packages/game-app/src/login/components/Login/Login.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { FormTextField } from '@pipeline/form';
-import { Box, Button, Link, PasswordInput, TowColumnPage, Typography } from '@pipeline/components';
+import { Box, Button, ErrorMessage, Link, PasswordInput, TowColumnPage, Typography } from '@pipeline/components';
 import { useTranslate } from '@pipeline/i18n';
 import { useLogin } from '@pipeline/auth';
 import { useLocation } from 'react-router-dom';
@@ -45,7 +45,7 @@ const Login: React.FC<Props> = () => {
               <Box textAlign="center" mt={5}>
                 <Button label={t('login.form.buttonText')} onClick={submit} />
               </Box>
-              {loginTranslateError ? <span className="error-message">{loginTranslateError}</span> : null}
+              {loginTranslateError ? <ErrorMessage message={loginTranslateError} /> : null}
               {loginLoading ? <span>Loading</span> : null}
               <Box display="flex" flexDirection="row" justifyContent="center" mt={4}>
                 <span>{t('login.notYetAccount')}</span>&nbsp;

diff --git a/...es/game-app/src/signup/components/EmailVerificationRequired/EmailVerificationRequired.tsx b/...es/game-app/src/signup/components/EmailVerificationRequired/EmailVerificationRequired.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslate } from '@pipeline/i18n';
 import { useLogout, useResendVerificationEmail } from '@pipeline/auth';
-import { Button, Link } from '@pipeline/components';
+import { Button, ErrorMessage, Link } from '@pipeline/components';
 
 type Props = {};
 
@@ -19,7 +19,7 @@ const EmailVerificationRequired: React.FC<Props> = () => {
         &nbsp;
         <Link onClick={executeLogout}>{t('auth.logout')}</Link>
         {success ? t('signup.verificationRequired.resendSuccess') : null}
-        {translatedError ? <span className="error-message">{translatedError}</span> : null}
+        {translatedError ? <ErrorMessage message={translatedError} /> : null}
       </div>
     </div>
   );

diff --git a/packages/game-app/src/signup/components/Signup/Signup.tsx b/packages/game-app/src/signup/components/Signup/Signup.tsx
@@ -5,7 +5,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 
 import { FormSelect, FormTextField } from '@pipeline/form';
 import { useDevOpsMaturities, useGameRoles } from '@pipeline/dynamicData';
-import { Box, Button, Link, PasswordInput, TowColumnPage, Typography } from '@pipeline/components';
+import { Box, Button, ErrorMessage, Link, PasswordInput, TowColumnPage, Typography } from '@pipeline/components';
 import { useTranslate } from '@pipeline/i18n';
 import { RoutingPath, useNavigateOnCondition, useNavigateTo } from '@pipeline/routing';
 
@@ -87,7 +87,7 @@ const Signup: React.FC<Props> = () => {
                 </Box>
 
                 {signupLoading ? <span>Loading</span> : null}
-                {signupTranslateError ? <span className="error-message">{signupTranslateError}</span> : null}
+                {signupTranslateError ? <ErrorMessage message={signupTranslateError} /> : null}
                 {signupSuccess ? <span>Success</span> : null}
                 <Box mt={4} display="flex" flexDirection="row" justifyContent="center">
                   <span>{t('signup.alreadyAccount')}</span>&nbsp;

diff --git a/packages/game-app/src/signup/components/VerifyEmail/VerifyEmail.tsx b/packages/game-app/src/signup/components/VerifyEmail/VerifyEmail.tsx
@@ -3,6 +3,7 @@ import { VerifyEmailParams } from '../../types/emailValidationParams';
 import { RoutingPath, useNavigateOnCondition, useQueryParams } from '@pipeline/routing';
 import { useEmailVerification } from '@pipeline/auth';
 import { useLocation } from 'react-router-dom';
+import { ErrorMessage } from '@pipeline/components';
 
 type Props = {};
 
@@ -40,7 +41,7 @@ const VerifyEmail: React.FC<Props> = () => {
     <div>
       {translatedError ? (
         <div>
-          <span className="error-message">{translatedError}</span>
+          <ErrorMessage message={translatedError} />
         </div>
       ) : null}
     </div>