Merge 8795d95 into f9bb8ad

ONEARMY · Apr 11, 2020 · eb1fc8d · eb1fc8d
2 parents f9bb8ad + 8795d95
commit eb1fc8d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/cypress/integration/settings.spec.ts b/cypress/integration/settings.spec.ts
@@ -50,7 +50,7 @@ describe('[Settings]', () => {
     cy.get('[data-cy=info-description')
       .clear()
       .type(info.description)
-    cy.get('[data-cy=cover_image-1]')
+    cy.get('[data-cy=coverImages0]')
       .find(':file')
       .uploadFiles(info.coverImage)
   }

diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx
@@ -83,7 +83,7 @@ const Label = styled.label`
 
 @inject('howtoStore')
 @observer
-export class HowtoForm extends React.Component<IProps, IState> {
+export class HowtoForm extends React.PureComponent<IProps, IState> {
   uploadRefs: { [key: string]: UploadedFile | null } = {}
   constructor(props: any) {
     super(props)

diff --git a/src/pages/Settings/content/formSections/UserInfos.section.tsx b/src/pages/Settings/content/formSections/UserInfos.section.tsx
@@ -126,8 +126,8 @@ export class UserInfosSection extends React.Component<IProps, IState> {
               <Field
                 canDelete
                 hasText={false}
-                id="cover_image-1"
-                data-cy="cover_image-1"
+                id="coverImages[0]"
+                data-cy="coverImages0"
                 name="coverImages[0]"
                 src={
                   initialFormValues.coverImages
@@ -142,8 +142,8 @@ export class UserInfosSection extends React.Component<IProps, IState> {
               <Field
                 canDelete
                 hasText={false}
-                id="cover_image-2"
-                data-cy="cover_image-2"
+                id="coverImages[1]"
+                data-cy="coverImages[1]"
                 name="coverImages[1]"
                 src={
                   initialFormValues.coverImages
@@ -158,8 +158,8 @@ export class UserInfosSection extends React.Component<IProps, IState> {
               <Field
                 canDelete
                 hasText={false}
-                id="cover_image-3"
-                data-cy="cover_image-3"
+                id="coverImages[2]"
+                data-cy="coverImages[2]"
                 name="coverImages[2]"
                 src={
                   initialFormValues.coverImages
@@ -174,8 +174,8 @@ export class UserInfosSection extends React.Component<IProps, IState> {
               <Field
                 canDelete
                 hasText={false}
-                id="cover_image-4"
-                data-cy="cover_image-4"
+                id="coverImages[3]"
+                data-cy="coverImages[3]"
                 name="coverImages[3]"
                 src={
                   initialFormValues.coverImages
@@ -186,6 +186,22 @@ export class UserInfosSection extends React.Component<IProps, IState> {
                 customChange={v => this.props.onCoverImgChange(v, 3)}
               />
             </Box>
+            <Box
+              bg={theme.colors.softblue}
+              mt={2}
+              p={2}
+              width={1}
+              sx={{ borderRadius: '3px' }}
+            >
+              <Text small>
+                The cover images are shown in your profile and helps us evaluate
+                your account.
+              </Text>
+              <Text small>
+                Make sure the first image shows your space. Best size is
+                1920x1080.
+              </Text>
+            </Box>
           </Flex>
           <Flex wrap={'nowrap'} alignItems={'center'} width={1}>
             <Text mb={2} mt={7} medium>