Adjust workspace form spacings (#1163)

src/shared/components/FormField/FormField.style.ts

@@ -5,7 +5,7 @@ import { colors, sizes, typography } from '@/shared/theme'
 import { Text } from '../Text'
 
 export const FormFieldWrapper = styled.div`
-  margin-top: ${sizes(2)};
+  margin-top: ${sizes(6)};
   width: 100%;
   max-width: 760px;
 `
@@ -27,5 +27,5 @@ export const FormFieldDescription = styled(Text)`
 `
 
 export const ChildrenWrapper = styled.div`
-  margin-top: ${sizes(5)};
+  margin-top: ${sizes(6)};
 `

src/shared/components/HelperText/HelperText.style.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 
-import { colors, typography } from '@/shared/theme'
+import { colors, sizes, typography } from '@/shared/theme'
 
 import { Text } from '../Text'
 
@@ -21,6 +21,7 @@ export const StyledHelperText = styled(Text)<HelperTextProps>`
 `
 
 export const HelperTextsWrapper = styled.div`
+  min-height: ${sizes(3.5)};
   margin-left: 4px;
   margin-top: 8px;
   font-size: ${typography.sizes.body2};

src/views/studio/EditVideoSheet/EditVideoForm/EditVideoForm.style.ts

@@ -2,6 +2,7 @@ import styled from '@emotion/styled'
 
 import { limitedWidthContainerStyle } from '@/components/LimitedWidthContainer'
 import { Button, TitleArea } from '@/shared/components'
+import { FormField } from '@/shared/components'
 import { colors, media, sizes } from '@/shared/theme'
 
 export const StyledRadioContainer = styled.div`
@@ -71,3 +72,7 @@ export const DeleteVideoContainer = styled.div`
 export const DeleteVideoButton = styled(Button)`
   width: 100%;
 `
+
+export const ExtendedMarginFormField = styled(FormField)`
+  margin-top: ${sizes(10)};
+`

src/views/studio/EditVideoSheet/EditVideoForm/EditVideoForm.tsx

@@ -41,6 +41,7 @@ import { StyledActionBar } from '@/views/studio/EditVideoSheet/EditVideoSheet.st
 import {
   DeleteVideoButton,
   DeleteVideoContainer,
+  ExtendedMarginFormField,
   FormWrapper,
   InputsContainer,
   StyledRadioContainer,
@@ -448,7 +449,7 @@ export const EditVideoForm: React.FC<EditVideoFormProps> = ({
             error={!!errors.description}
             helperText={errors.description?.message}
           />
-          <FormField
+          <ExtendedMarginFormField
             title="Privacy"
             description="Privacy of the video. Please note that because of nature of the blockchain, even unlisted videos can be publicly visible by querying the blockchain data."
           >
@@ -468,7 +469,7 @@ export const EditVideoForm: React.FC<EditVideoFormProps> = ({
                 />
               )}
             />
-          </FormField>
+          </ExtendedMarginFormField>
           <FormField title="Language" description="Main language used in the video">
             <Controller
               name="language"
@@ -562,7 +563,7 @@ export const EditVideoForm: React.FC<EditVideoFormProps> = ({
               )}
             />
           </FormField>
-          <FormField
+          <ExtendedMarginFormField
             title="Content rating"
             description="Whether your video contains explicit material (sex, violence, etc.)"
           >
@@ -595,7 +596,7 @@ export const EditVideoForm: React.FC<EditVideoFormProps> = ({
                 </StyledRadioContainer>
               )}
             />
-          </FormField>
+          </ExtendedMarginFormField>
           <FormField
             title="Prior publication"
             description="If the content you are publishing was originally published outside of Joystream, please provide the original publication date."