From db693284ae50d4942d9afa580cb2f290f269c098 Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sat, 8 Aug 2020 15:09:04 -0400 Subject: [PATCH 1/5] type(fix): fixed StyledCharacter's Body, Head, and Face CSS bottom attribute value --- packages/client/src/pages/Lesson/Story/Story.tsx | 3 ++- packages/ui/components/Character/Character.tsx | 15 ++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/client/src/pages/Lesson/Story/Story.tsx b/packages/client/src/pages/Lesson/Story/Story.tsx index 39616b9e..dabeb95d 100644 --- a/packages/client/src/pages/Lesson/Story/Story.tsx +++ b/packages/client/src/pages/Lesson/Story/Story.tsx @@ -27,7 +27,8 @@ const SkipButton = styled(Button)` export const StyledCharacter = styled(CharacterHTML)` position: absolute; - bottom: ${t.size('giant')}; + bottom: ${t.size('big')}; + /* bottom: 0rem;*/ left: 50%; margin-left: -30rem; transform: translateX(-100%); diff --git a/packages/ui/components/Character/Character.tsx b/packages/ui/components/Character/Character.tsx index d02117f5..8e945c90 100644 --- a/packages/ui/components/Character/Character.tsx +++ b/packages/ui/components/Character/Character.tsx @@ -25,7 +25,8 @@ const StyledCharacter = styled.div` :after { content: ""; display: block; - padding-bottom: 150%; + /*padding-bottom: 150%;*/ + padding-bottom: 130%; } `; @@ -49,13 +50,13 @@ const StyledBody = styled(Svg)` const StyledHead = styled(Svg)` width: 50%; left: 56%; - bottom: 52%; + bottom: 50%; `; const StyledFace = styled(Svg)` width: 34%; left: 61%; - bottom: 59%; + bottom: 48%; `; export interface CharacterProps { @@ -67,7 +68,7 @@ export interface CharacterProps { export const Character: React.FC = ({ body, head, face, ...props }) => - - - {face && } -; + + + {face && } + ; From 71642b028a7b323143aeed771a8f516f92bdbe60 Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sat, 8 Aug 2020 15:18:06 -0400 Subject: [PATCH 2/5] type(fix): fixed StyledCharacter's styledCharacter bottom fro huge t.size to big --- packages/client/src/pages/Lesson/Story/Story.tsx | 1 - packages/ui/components/Character/Character.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/client/src/pages/Lesson/Story/Story.tsx b/packages/client/src/pages/Lesson/Story/Story.tsx index dabeb95d..3005a87c 100644 --- a/packages/client/src/pages/Lesson/Story/Story.tsx +++ b/packages/client/src/pages/Lesson/Story/Story.tsx @@ -28,7 +28,6 @@ const SkipButton = styled(Button)` export const StyledCharacter = styled(CharacterHTML)` position: absolute; bottom: ${t.size('big')}; - /* bottom: 0rem;*/ left: 50%; margin-left: -30rem; transform: translateX(-100%); diff --git a/packages/ui/components/Character/Character.tsx b/packages/ui/components/Character/Character.tsx index 8e945c90..1d3b000b 100644 --- a/packages/ui/components/Character/Character.tsx +++ b/packages/ui/components/Character/Character.tsx @@ -25,7 +25,6 @@ const StyledCharacter = styled.div` :after { content: ""; display: block; - /*padding-bottom: 150%;*/ padding-bottom: 130%; } `; From ef8dcd0c53b74b469da45d87bcf10865dc962eef Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sat, 8 Aug 2020 16:45:54 -0400 Subject: [PATCH 3/5] type(fix): Added link to Dashboard into Logo Icon --- .../client/src/pages/Lesson/LessonHeader.tsx | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/packages/client/src/pages/Lesson/LessonHeader.tsx b/packages/client/src/pages/Lesson/LessonHeader.tsx index eb8bbd63..e5f67f9f 100644 --- a/packages/client/src/pages/Lesson/LessonHeader.tsx +++ b/packages/client/src/pages/Lesson/LessonHeader.tsx @@ -2,7 +2,7 @@ import { Button, Icon, Text, theme as t } from '@codement/ui'; import { Modal, ModalProps } from '@codement/ui/components/Modal/Modal'; import LogoMark from '@codement/ui/images/logo-mark.svg'; import React, { useState } from 'react'; -import { Redirect } from 'react-router-dom'; +import { Redirect, Link } from 'react-router-dom'; import styled from 'styled-components'; import { Lesson, LessonState } from '../../containers/Lesson.container'; import { LessonProgress } from '../../components/LessonProgress/LessonProgress'; @@ -11,6 +11,7 @@ import { routes } from '../../router/routes'; // const offset: Size = 'lg'; const CloseIcon = styled(Icon)` + cursor: pointer; `; const StyledLogo = styled(LogoMark)` @@ -18,28 +19,36 @@ const StyledLogo = styled(LogoMark)` `; const Header = styled.header<{ withProgress: boolean }>` - position: relative; - display: flex; - align-items: center; - padding: ${t.size()} ${t.size('lg')}; +position: relative; +display: flex; +align - items: center; +padding: ${ t.size()} ${t.size('lg')}; & > div { - flex: 1; - text-align: center; - div { - margin: auto; - margin-top: ${t.size('sm')}; - max-width: 40rem; - } + flex: 1; + text - align: center; + div { + margin: auto; + margin - top: ${ t.size('sm')}; + max - width: 40rem; } +} `; const Title = styled(Text)` - font-weight: ${t.fontWeight.bold}; - color: ${t.color('grey')}; +font - weight: ${ t.fontWeight.bold}; +color: ${ t.color('grey')}; `; - +const DashboardLogo = () => { + return ( +
+ + + +
+ ) +}; const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ onClose, ...props @@ -75,7 +84,9 @@ export const LessonHeader: React.FC<{ title?: string }> = ({ return
- + + +
{title && {title}} From 32e8b7d9b6fadc75b72eb8c14d1d6d46b927dcd2 Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sat, 15 Aug 2020 14:01:37 -0400 Subject: [PATCH 4/5] type(fix): removed Dashboard link from the logo icon, added fixed CSS height property size to Characters parts components --- .../client/src/pages/Lesson/LessonHeader.tsx | 102 +++++++++--------- .../client/src/pages/Lesson/Story/Story.tsx | 77 +++++++------ .../ui/components/Character/Character.tsx | 26 +++-- 3 files changed, 113 insertions(+), 92 deletions(-) diff --git a/packages/client/src/pages/Lesson/LessonHeader.tsx b/packages/client/src/pages/Lesson/LessonHeader.tsx index e5f67f9f..433c8599 100644 --- a/packages/client/src/pages/Lesson/LessonHeader.tsx +++ b/packages/client/src/pages/Lesson/LessonHeader.tsx @@ -2,13 +2,12 @@ import { Button, Icon, Text, theme as t } from '@codement/ui'; import { Modal, ModalProps } from '@codement/ui/components/Modal/Modal'; import LogoMark from '@codement/ui/images/logo-mark.svg'; import React, { useState } from 'react'; -import { Redirect, Link } from 'react-router-dom'; +import { Redirect } from 'react-router-dom'; import styled from 'styled-components'; import { Lesson, LessonState } from '../../containers/Lesson.container'; import { LessonProgress } from '../../components/LessonProgress/LessonProgress'; import { routes } from '../../router/routes'; - // const offset: Size = 'lg'; const CloseIcon = styled(Icon)` cursor: pointer; @@ -22,33 +21,34 @@ const Header = styled.header<{ withProgress: boolean }>` position: relative; display: flex; align - items: center; -padding: ${ t.size()} ${t.size('lg')}; +padding: ${t.size()} ${t.size('lg')}; & > div { flex: 1; text - align: center; div { margin: auto; - margin - top: ${ t.size('sm')}; + margin - top: ${t.size('sm')}; max - width: 40rem; } } `; const Title = styled(Text)` -font - weight: ${ t.fontWeight.bold}; -color: ${ t.color('grey')}; +font - weight: ${t.fontWeight.bold}; +color: ${t.color('grey')}; `; -const DashboardLogo = () => { +/*const DashboardLogo = () => { return (
- ) -}; + ); +};*/ + const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ onClose, ...props @@ -63,49 +63,53 @@ const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ setRedirect(true); }; - return Cancel, - - ]} - > - If you quit now, you will lose all your lesson progress! - ; + return ( + + Cancel + , + , + ]} + > + If you quit now, you will lose all your lesson progress! + + ); }; -export const LessonHeader: React.FC<{ title?: string }> = ({ - title -}) => { +export const LessonHeader: React.FC<{ title?: string }> = ({ title }) => { const [modal, setModal] = useState(false); const { progress, lesson, lessonState } = Lesson.useContainer(); - - return
- - - - -
- {title && {title}} - {lessonState === LessonState.lesson && } -
- - setModal(true)} - size="lg" - color="grey.300" - /> - - setModal(false)} - show={modal} - /> -
; + return ( +
+
+ +
+ +
+ {title && {title}} + {lessonState === LessonState.lesson && ( + + )} +
+ + setModal(true)} + size="lg" + color="grey.300" + /> + + setModal(false)} show={modal} /> +
+ ); }; diff --git a/packages/client/src/pages/Lesson/Story/Story.tsx b/packages/client/src/pages/Lesson/Story/Story.tsx index 3005a87c..ae9717af 100644 --- a/packages/client/src/pages/Lesson/Story/Story.tsx +++ b/packages/client/src/pages/Lesson/Story/Story.tsx @@ -1,5 +1,12 @@ import { ModuleLesson } from '@codement/api'; -import { Button, centerAbsolute, NavDots, theme as t, CharacterHTML, CharacterProps } from '@codement/ui'; +import { + Button, + centerAbsolute, + NavDots, + theme as t, + CharacterHTML, + CharacterProps, +} from '@codement/ui'; import { Me } from '@codement/ui/lib/containers/Me.container'; import React, { useState, useMemo } from 'react'; import styled from 'styled-components'; @@ -33,10 +40,7 @@ export const StyledCharacter = styled(CharacterHTML)` transform: translateX(-100%); `; - -export const Story: React.FC = ({ - lesson -}) => { +export const Story: React.FC = ({ lesson }) => { const { me } = Me.useContainer(); const { setLessonState: setState } = Lesson.useContainer(); const steps = lesson.lesson.storySections; @@ -56,38 +60,43 @@ export const Story: React.FC = ({ 'cute', 'explaining', 'calm', - 'contempt' + 'contempt', ]; const face = useMemo(() => faces[page % faces.length], [page]); - return <> - - - + return ( + <> + + + - + - - - - setState(LessonState.storyCompleted)} - color="grey" - > Skip story - - ; + + + + setState(LessonState.storyCompleted)} + color="grey" + > + {' '} + Skip story{' '} + + + + ); }; diff --git a/packages/ui/components/Character/Character.tsx b/packages/ui/components/Character/Character.tsx index 1d3b000b..96f655a7 100644 --- a/packages/ui/components/Character/Character.tsx +++ b/packages/ui/components/Character/Character.tsx @@ -8,7 +8,6 @@ import { theme as t } from '../../css/theme'; export * from './Characters'; - const StyledCharacter = styled.div` position: relative; width: 200px; @@ -18,26 +17,30 @@ const StyledCharacter = styled.div` transform: translateX(-50%); overflow: visible; - .ink { fill: ${t.color('primary.300')}; } - .background { fill: ${t.color('white')}; } + .ink { + fill: ${t.color('primary.300')}; + } + .background { + fill: ${t.color('white')}; + } } :after { - content: ""; + content: ''; display: block; padding-bottom: 130%; } `; interface SvgProps { - value: string, + value: string; obj: any; } const Svg: React.FC = ({ value, obj, ...props }) => { const S = obj[value]; if (!S) throw new Error(`Could not find character part '${value}'`); - return ; + return ; }; const StyledBody = styled(Svg)` @@ -65,9 +68,14 @@ export interface CharacterProps { } export const Character: React.FC = ({ - body, head, face, ...props -}) => + body, + head, + face, + ...props +}) => ( + {face && } - ; + +); From ff9fd10e36af2eaae0d810bf58e59013a88ad46a Mon Sep 17 00:00:00 2001 From: Marcos Silva Date: Sun, 16 Aug 2020 19:52:22 -0400 Subject: [PATCH 5/5] type(fix) refactored LessonHeader, and Sotry components due to lint issues --- packages/client/src/pages/Lesson/LessonHeader.tsx | 12 +----------- packages/client/src/pages/Lesson/Story/Story.tsx | 4 ++-- 2 files changed, 3 insertions(+), 13 deletions(-) diff --git a/packages/client/src/pages/Lesson/LessonHeader.tsx b/packages/client/src/pages/Lesson/LessonHeader.tsx index 433c8599..40d33b25 100644 --- a/packages/client/src/pages/Lesson/LessonHeader.tsx +++ b/packages/client/src/pages/Lesson/LessonHeader.tsx @@ -39,16 +39,6 @@ font - weight: ${t.fontWeight.bold}; color: ${t.color('grey')}; `; -/*const DashboardLogo = () => { - return ( -
- - - -
- ); -};*/ - const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ onClose, ...props @@ -74,7 +64,7 @@ const CloseConfirmModal: React.FC<{ onClose: () => void } & ModalProps> = ({ , , + ]} > If you quit now, you will lose all your lesson progress! diff --git a/packages/client/src/pages/Lesson/Story/Story.tsx b/packages/client/src/pages/Lesson/Story/Story.tsx index ae9717af..bff1aac9 100644 --- a/packages/client/src/pages/Lesson/Story/Story.tsx +++ b/packages/client/src/pages/Lesson/Story/Story.tsx @@ -5,7 +5,7 @@ import { NavDots, theme as t, CharacterHTML, - CharacterProps, + CharacterProps } from '@codement/ui'; import { Me } from '@codement/ui/lib/containers/Me.container'; import React, { useState, useMemo } from 'react'; @@ -60,7 +60,7 @@ export const Story: React.FC = ({ lesson }) => { 'cute', 'explaining', 'calm', - 'contempt', + 'contempt' ]; const face = useMemo(() => faces[page % faces.length], [page]);