General UI fixes (#4005)

29ki · Nov 3, 2023 · 2295283 · 2295283
2 parents 06bd0a1 + 45d1fa1
commit 2295283
Show file tree

Hide file tree

Showing 9 changed files with 259 additions and 183 deletions.
diff --git a/client/src/lib/components/BackgroundBlock/BackgroundBlock.library.tsx b/client/src/lib/components/BackgroundBlock/BackgroundBlock.library.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {Spacer48, Spacer96} from '../Spacers/Spacer';
+import BackgroundBlock from './BackgroundBlock';
+import {COLORS} from '../../../../../shared/src/constants/colors';
+import styled from 'styled-components/native';
+import {Heading24} from '../Typography/Heading/Heading';
+
+const Wrapper = styled.View({
+  flex: 1,
+  backgroundColor: COLORS.BLACK,
+});
+
+export const AllTypes = () => (
+  <Wrapper>
+    <Spacer96 />
+
+    <BackgroundBlock backgroundColor={COLORS.PURE_WHITE}>
+      <Heading24>Test test</Heading24>
+    </BackgroundBlock>
+    <Spacer48 />
+
+    <BackgroundBlock backgroundColor={COLORS.PURE_WHITE}>
+      <Spacer96 />
+      <Heading24>Test test</Heading24>
+      <Spacer96 />
+    </BackgroundBlock>
+    <Spacer48 />
+
+    <BackgroundBlock backgroundColor={COLORS.ERROR}>
+      <Spacer96 />
+      <Heading24>Test test</Heading24>
+      <Spacer96 />
+    </BackgroundBlock>
+  </Wrapper>
+);
diff --git a/client/src/lib/components/BackgroundBlock/BackgroundBlock.tsx b/client/src/lib/components/BackgroundBlock/BackgroundBlock.tsx
@@ -0,0 +1,69 @@
+import hexToRgba from 'hex-to-rgba';
+import React from 'react';
+import LinearGradient, {
+  LinearGradientProps,
+} from 'react-native-linear-gradient';
+import styled from 'styled-components/native';
+
+const FADE_HEIGHT = 36;
+
+type FadeProps = {
+  color: string;
+};
+const Fade = styled(LinearGradient).attrs({
+  pointerEvents: 'none',
+})<FadeProps>({
+  position: 'absolute',
+  height: FADE_HEIGHT,
+  left: 0,
+  right: 0,
+  backgroundColor: 'none',
+});
+
+const TopFade = styled(Fade).attrs<FadeProps, LinearGradientProps>(
+  ({color}) => ({
+    colors: [hexToRgba(color, 0), hexToRgba(color, 1)],
+  }),
+)({
+  top: 0,
+});
+
+const BottomFade = styled(Fade).attrs<FadeProps, LinearGradientProps>(
+  ({color}) => ({
+    colors: [hexToRgba(color, 1), hexToRgba(color, 0)],
+  }),
+)({
+  bottom: 0,
+});
+
+const Background = styled.View<{backgroundColor: string}>(
+  ({backgroundColor}) => ({
+    position: 'absolute',
+    top: FADE_HEIGHT,
+    bottom: FADE_HEIGHT,
+    left: 0,
+    right: 0,
+    backgroundColor,
+  }),
+);
+
+const Wrapper = styled.View({
+  minHeight: FADE_HEIGHT * 2,
+  justifyContent: 'center',
+});
+
+type Props = {
+  backgroundColor: string;
+  children: React.ReactNode;
+};
+
+const BackgroundBlock: React.FC<Props> = ({backgroundColor, children}) => (
+  <Wrapper>
+    <Background backgroundColor={backgroundColor} />
+    <TopFade color={backgroundColor} />
+    <BottomFade color={backgroundColor} />
+    {children}
+  </Wrapper>
+);
+
+export default BackgroundBlock;
diff --git a/client/src/lib/components/DateTimePicker/DateTimePicker.tsx b/client/src/lib/components/DateTimePicker/DateTimePicker.tsx
@@ -14,7 +14,7 @@ import TouchableOpacity from '../TouchableOpacity/TouchableOpacity';
 import {Body16, BodyBold} from '../Typography/Body/Body';
 
 const Wrapper = styled.View({
-  backgroundColor: COLORS.WHITE,
+  backgroundColor: COLORS.PURE_WHITE,
   borderRadius: SPACINGS.EIGHT,
 });
 

diff --git a/client/src/lib/components/DescriptionBlock/DescriptionBlock.library.tsx b/client/src/lib/components/DescriptionBlock/DescriptionBlock.library.tsx
@@ -6,7 +6,7 @@ import {Heading16} from '../Typography/Heading/Heading';
 import DescriptionBlock from './DescriptionBlock';
 import {Body16} from '../Typography/Body/Body';
 
-export const DescriptionBlocks = () => (
+export const AllTypes = () => (
   <ScreenWrapper>
     <Heading16>DescriptionBlock</Heading16>
     <Spacer8 />

diff --git a/client/src/lib/uiLib/components/UiLibRootComponent.tsx b/client/src/lib/uiLib/components/UiLibRootComponent.tsx
@@ -16,6 +16,7 @@ import * as ProfilePicture from '../../components/User/ProfilePicture.library';
 import * as TopBar from '../../components/TopBar/TopBar.library';
 import * as ErrorBanner from '../../components/ErrorBanner/ErrorBanner.library';
 import * as DescriptionBlock from '../../components/DescriptionBlock/DescriptionBlock.library';
+import * as BackgroundBlock from '../../components/BackgroundBlock/BackgroundBlock.library';
 import * as ExerciseGraphic from '../../components/ExerciseGraphic/ExerciseGraphic.library';
 
 export type ComponentLibrary = {[key: string]: React.ComponentType};
@@ -27,6 +28,7 @@ const menuItems: ComponentList = {
   Icons: [Icons],
   ActionList: [ActionList],
   DescriptionBlock: [DescriptionBlock],
+  BackgroundBlock: [BackgroundBlock],
   Modals: [Modals],
   Typography: [Typography],
   Screen: [Screen],

diff --git a/client/src/routes/modals/CompletedSessionModal/CompletedSessionModal.tsx b/client/src/routes/modals/CompletedSessionModal/CompletedSessionModal.tsx
@@ -241,19 +241,19 @@ const CompletedSessionModal = () => {
             <Spacer4 />
           </VerticalAlign>
         </StatusRow>
+        <Spacer16 />
         {feedback && feedback.payload.comment && (
           <Gutters>
-            <Spacer16 />
             <FeedbackCard
               date={feedback.timestamp}
               answer={feedback.payload.answer}>
               {feedback.payload.comment}
             </FeedbackCard>
+            <Spacer24 />
           </Gutters>
         )}
         {sharingPosts && sharingPosts.length > 0 && (
           <>
-            <Spacer24 />
             <Gutters>
               {sharingPosts.map((post, index) => (
                 <SharingPost
@@ -265,21 +265,21 @@ const CompletedSessionModal = () => {
                   }
                 />
               ))}
+              <Spacer8 />
             </Gutters>
           </>
         )}
-        <Spacer24 />
         <Gutters>
           <ButtonWrapper>
             <Button size="small" variant="secondary" onPress={onStartSession}>
               {t('doAgainButton')}
             </Button>
           </ButtonWrapper>
         </Gutters>
+        <Spacer24 />
 
         {Boolean(sessions?.length) && (
           <Gutters>
-            <Spacer24 />
             <View>
               {sessions.map(item => (
                 <Fragment key={item.id}>
@@ -292,24 +292,25 @@ const CompletedSessionModal = () => {
                 </Fragment>
               ))}
             </View>
+            <Spacer8 />
           </Gutters>
         )}
 
-        {Boolean(exercise.coCreators?.length) && (
+        {Boolean(exercisesByTags?.length) && (
           <Gutters>
-            <Spacer24 />
-            <Heading16>{t('coCreatorsHeading')}</Heading16>
+            <Heading16>{t('moreLikeThis')}</Heading16>
+            <Spacer8 />
+            {moreLikeThisExercises}
             <Spacer8 />
-            <CoCreators coCreators={exercise.coCreators} />
           </Gutters>
         )}
 
-        {Boolean(exercisesByTags?.length) && (
+        {Boolean(exercise.coCreators?.length) && (
           <Gutters>
-            <Spacer24 />
-            <Heading16>{t('moreLikeThis')}</Heading16>
+            <Heading16>{t('coCreatorsHeading')}</Heading16>
             <Spacer8 />
-            <View>{moreLikeThisExercises}</View>
+            <CoCreators coCreators={exercise.coCreators} />
+            <Spacer24 />
           </Gutters>
         )}
 

diff --git a/client/src/routes/modals/CreateSessionModal/CreateSessionModal.tsx b/client/src/routes/modals/CreateSessionModal/CreateSessionModal.tsx
@@ -26,6 +26,7 @@ import UpdateProfileStep from './components/steps/ProfileStep';
 import {RouteProp, useRoute} from '@react-navigation/native';
 import {ModalStackProps} from '../../../lib/navigation/constants/routes';
 import Fade from '../../../lib/components/Fade/Fade';
+import {COLORS} from '../../../../../shared/src/constants/colors';
 
 const Wrapper = styled.View({flex: 1});
 
@@ -122,7 +123,12 @@ const CreateSessionModal = () => {
   const firstStep = useCallback(() => setCurrentStep(0), []);
 
   return (
-    <SheetModal>
+    <SheetModal
+      backgroundColor={
+        currentSteps[currentStep] === SelectContentStep
+          ? COLORS.PURE_WHITE
+          : COLORS.WHITE
+      }>
       <Wrapper>
         {PreviousStepComponent && (
           <Fade visible={false} key={currentStep - 1}>