From e7c1f6e07630dce5b1a36ce60b80428a103b1cc8 Mon Sep 17 00:00:00 2001
From: Svenstar74 <sven.firmbach@gmx.de>
Date: Wed, 10 Jul 2024 00:49:06 +0200
Subject: [PATCH 1/5] Improve rendering of sources in details modals

---
 .../components/ClimateDetailsModal.tsx            | 15 +++++++++------
 .../myth-feed/components/MythDetailsModal.tsx     |  9 ++++++---
 .../components/SolutionDetailsModal.tsx           | 11 +++++++----
 .../components/UserBSharedImpactDetailsModal.tsx  | 11 +++++++----
 .../UserBSharedSolutionDetailsModal.tsx           | 11 +++++++----
 5 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/features/climate-feed/components/ClimateDetailsModal.tsx b/src/features/climate-feed/components/ClimateDetailsModal.tsx
index 68507d67..1647a2c9 100644
--- a/src/features/climate-feed/components/ClimateDetailsModal.tsx
+++ b/src/features/climate-feed/components/ClimateDetailsModal.tsx
@@ -63,8 +63,8 @@ function ClimateDetailsModal({ showDetails, effectTitle, effectDescription, effe
               </div>
 
               {effectSolutions.map((solution) => (
-                <div style={{ marginTop: 20 }}>
-                  <ActionCard {...solution} key={solution.solutionTitle} onLearnMore={learnMoreHandler} />
+                <div style={{ marginTop: 20 }} key={solution.solutionTitle}>
+                  <ActionCard {...solution} onLearnMore={learnMoreHandler} />
                 </div>
               ))}
 
@@ -72,9 +72,9 @@ function ClimateDetailsModal({ showDetails, effectTitle, effectDescription, effe
             </>
           }
           sources={
-            <div style={{ padding: 20 }}>
+            <div style={{ padding: 20, marginBottom: 50 }}>
               {effectSources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingTop: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -112,10 +112,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     maxHeight: 360,
     objectFit: 'cover',
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 
diff --git a/src/features/myth-feed/components/MythDetailsModal.tsx b/src/features/myth-feed/components/MythDetailsModal.tsx
index b04dd71a..6109517a 100644
--- a/src/features/myth-feed/components/MythDetailsModal.tsx
+++ b/src/features/myth-feed/components/MythDetailsModal.tsx
@@ -36,7 +36,7 @@ function MythDetailsModal({ showDetails, mythTitle, mythRebuttal, faultyLogicDes
           sources={
             <div style={{ marginTop: 20, marginBottom: 50 }}>
               {mythSources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingBottom: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -72,10 +72,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     letterSpacing: 1.2,
     lineHeight: 1.5,
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 
diff --git a/src/features/solution-feed/components/SolutionDetailsModal.tsx b/src/features/solution-feed/components/SolutionDetailsModal.tsx
index 13824b8e..58456daa 100644
--- a/src/features/solution-feed/components/SolutionDetailsModal.tsx
+++ b/src/features/solution-feed/components/SolutionDetailsModal.tsx
@@ -55,9 +55,9 @@ function SolutionDetailsModal({ showDetails, solutionTitle, solutionType, imageU
             </div>
           }
           sources={
-            <div style={{ padding: 20 }}>
+            <div style={{ padding: 20, marginBottom: 50 }}>
               {solutionSources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingTop: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -92,10 +92,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     maxHeight: 360,
     objectFit: 'cover',
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 
diff --git a/src/features/userB/components/UserBSharedImpactDetailsModal.tsx b/src/features/userB/components/UserBSharedImpactDetailsModal.tsx
index 2df6c39e..836be214 100644
--- a/src/features/userB/components/UserBSharedImpactDetailsModal.tsx
+++ b/src/features/userB/components/UserBSharedImpactDetailsModal.tsx
@@ -55,9 +55,9 @@ function UserBSharedImpactDetailsModal({ showDetails, effectId, effectTitle, ima
             </div>
           }
           sources={
-            <div style={{ padding: 20 }}>
+            <div style={{ padding: 20, marginBottom: 50 }}>
               {sources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingTop: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -93,10 +93,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     maxHeight: 360,
     objectFit: 'cover',
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 
diff --git a/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx b/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx
index 54b2eeb6..c0ed8d7d 100644
--- a/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx
+++ b/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx
@@ -53,9 +53,9 @@ function UserBSharedSolutionDetailsModal({ showDetails, solutionId, solutionTitl
             </div>
           }
           sources={
-            <div style={{ padding: 20 }}>
+            <div style={{ padding: 20, marginBottom: 50 }}>
               {solutionSources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingTop: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -90,10 +90,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     maxHeight: 360,
     objectFit: 'cover',
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 

From 91ade692fc6019904ca4eccec5ba3754b1daa0ab Mon Sep 17 00:00:00 2001
From: Svenstar74 <sven.firmbach@gmx.de>
Date: Thu, 11 Jul 2024 22:32:30 +0200
Subject: [PATCH 2/5] change input field to take up full width

---
 src/pages/UserAAuthorizedPages/ConversationsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/UserAAuthorizedPages/ConversationsPage.tsx b/src/pages/UserAAuthorizedPages/ConversationsPage.tsx
index 1f5ab14f..4048abcb 100644
--- a/src/pages/UserAAuthorizedPages/ConversationsPage.tsx
+++ b/src/pages/UserAAuthorizedPages/ConversationsPage.tsx
@@ -57,7 +57,6 @@ function ConversationsPage() {
             value={friendsName}
             onChange={(e) => setFriendsName(e.target.value)}
             helperText={friendsName.length > 20 && 'Name must be less than 20 characters'}
-            fullWidth={false}
             style={{ marginTop: 30, marginBottom: 30 }}
           />
 
@@ -84,6 +83,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    width: '100%',
   },
   openDrawerButton: {
     backgroundColor: '#D0EEEB',

From a110d9b22f25fb1a4036fd5122ed2bc08424e9eb Mon Sep 17 00:00:00 2001
From: Svenstar74 <sven.firmbach@gmx.de>
Date: Thu, 11 Jul 2024 23:12:44 +0200
Subject: [PATCH 3/5] improve styling for small personal value card

---
 src/features/quiz/components/PersonalValueCardSmall.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/features/quiz/components/PersonalValueCardSmall.tsx b/src/features/quiz/components/PersonalValueCardSmall.tsx
index 7f15389f..40e81b85 100644
--- a/src/features/quiz/components/PersonalValueCardSmall.tsx
+++ b/src/features/quiz/components/PersonalValueCardSmall.tsx
@@ -20,8 +20,8 @@ function PersonalValueCardSmall({ valueName, shortDescription, subTitle }: Props
         <img src={`/personal_values/small/${valueName.split(' ').join('_')}.gif`} alt={`${valueName} icon`} style={styles.image} />
 
         <div style={styles.textContainer}>
-          <CmTypography variant="h3" style={{ margin: 0 }}>{capitalizeFirstLetter(valueName)}</CmTypography>
-          <CmTypography variant="h2" style={{ margin: 0 }}>{subTitle}</CmTypography>
+          <CmTypography variant="h3" style={{ margin: 0, textAlign: 'left' }}>{capitalizeFirstLetter(valueName)}</CmTypography>
+          <CmTypography variant="h2" style={{ margin: 0, textAlign: 'left' }}>{subTitle}</CmTypography>
         </div>
 
         <div onClick={() => setExpanded(!expanded)} style={{ cursor: 'pointer', marginRight: 20, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -47,8 +47,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     justifyContent: 'space-between',
   },
   image: {
-    width: 80,
-    height: 80,
+    width: 70,
+    height: 70,
     margin: 20,
   },
   textContainer: {

From b0b9ff82e2f3da2f09b72068d6aa329065173a3a Mon Sep 17 00:00:00 2001
From: Svenstar74 <sven.firmbach@gmx.de>
Date: Thu, 11 Jul 2024 23:17:00 +0200
Subject: [PATCH 4/5] bugfix: hide images if not existing

---
 src/features/climate-feed/components/ClimateDetailsModal.tsx    | 2 +-
 src/features/solution-feed/components/SolutionDetailsModal.tsx  | 2 +-
 src/features/userB/components/UserBSharedImpactDetailsModal.tsx | 1 +
 .../userB/components/UserBSharedSolutionDetailsModal.tsx        | 1 +
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/features/climate-feed/components/ClimateDetailsModal.tsx b/src/features/climate-feed/components/ClimateDetailsModal.tsx
index 1647a2c9..8f3f5969 100644
--- a/src/features/climate-feed/components/ClimateDetailsModal.tsx
+++ b/src/features/climate-feed/components/ClimateDetailsModal.tsx
@@ -51,7 +51,7 @@ function ClimateDetailsModal({ showDetails, effectTitle, effectDescription, effe
       <DialogContent sx={{ padding: 0 }}>
         <CmTypography variant="h3" style={styles.title}>{capitalizeFirstLetter(effectTitle)}</CmTypography>
 
-        <img src={imageUrl} alt={effectTitle} style={styles.image} />
+        {imageUrl && <img src={imageUrl} alt={effectTitle} style={styles.image} />}
 
         <TabbedContent
           details={
diff --git a/src/features/solution-feed/components/SolutionDetailsModal.tsx b/src/features/solution-feed/components/SolutionDetailsModal.tsx
index 58456daa..1fd87ccc 100644
--- a/src/features/solution-feed/components/SolutionDetailsModal.tsx
+++ b/src/features/solution-feed/components/SolutionDetailsModal.tsx
@@ -31,7 +31,7 @@ function SolutionDetailsModal({ showDetails, solutionTitle, solutionType, imageU
       <DialogContent sx={{ padding: 0 }}>
         <CmClimateHeader preHeader={solutionType.toUpperCase() + ' ACTION'} header={solutionTitle} headerIcon={solutionType} />
 
-        <img src={imageUrl} alt={solutionTitle} style={styles.image} />
+        {imageUrl && <img src={imageUrl} alt={solutionTitle} style={styles.image} />}
 
         <TabbedContent
           details={
diff --git a/src/features/userB/components/UserBSharedImpactDetailsModal.tsx b/src/features/userB/components/UserBSharedImpactDetailsModal.tsx
index 836be214..0604e175 100644
--- a/src/features/userB/components/UserBSharedImpactDetailsModal.tsx
+++ b/src/features/userB/components/UserBSharedImpactDetailsModal.tsx
@@ -44,6 +44,7 @@ function UserBSharedImpactDetailsModal({ showDetails, effectId, effectTitle, ima
 
       <DialogContent sx={{ padding: 0 }}>
         <CmTypography variant="h3" style={styles.title}>{capitalizeFirstLetter(effectTitle)}</CmTypography>
+
         {imageUrl && <img src={imageUrl} alt={effectTitle} style={styles.image} />}
 
         <TabbedContent
diff --git a/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx b/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx
index c0ed8d7d..918f2d9f 100644
--- a/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx
+++ b/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx
@@ -44,6 +44,7 @@ function UserBSharedSolutionDetailsModal({ showDetails, solutionId, solutionTitl
 
       <DialogContent sx={{ padding: 0 }}>
         <CmClimateHeader preHeader={solutionType.toUpperCase() + ' ACTION'} header={solutionTitle} headerIcon={solutionType} />
+
         {imageUrl && <img src={imageUrl} alt={solutionTitle} style={styles.image} />}
 
         <TabbedContent

From 1aa483ff423ad9c7f9447853ff24a68b81c9902f Mon Sep 17 00:00:00 2001
From: Svenstar74 <sven.firmbach@gmx.de>
Date: Fri, 12 Jul 2024 00:01:19 +0200
Subject: [PATCH 5/5] design improvements for userB journey

---
 src/features/auth/components/SignUpForm.tsx               | 4 ++--
 src/features/userB/components/UserBSharedImpactCard.tsx   | 3 ++-
 src/features/userB/components/UserBSharedSolutionCard.tsx | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/features/auth/components/SignUpForm.tsx b/src/features/auth/components/SignUpForm.tsx
index 422eda12..250c3288 100644
--- a/src/features/auth/components/SignUpForm.tsx
+++ b/src/features/auth/components/SignUpForm.tsx
@@ -91,9 +91,9 @@ function SignUpForm({ isLoading, onCancel, onSignUp }: Props) {
         style={styles.textInput}
       />
 
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 30 }}>
+      <div style={{ display: 'flex', justifyContent: onCancel ? 'space-between' : 'center', marginTop: 30, marginBottom: 30, width: '100%', maxWidth: 400 }}>
         {onCancel && <CmButton text='Cancel' style={{ backgroundColor: 'transparent', borderColor: 'black' }} onClick={onCancel} />}
-        <CmButton text='Create Account' isLoading={isLoading} type='submit' disabled={!formIsValid} onClick={handleSubmit} style={{ marginLeft: 'auto' }} />
+        <CmButton text='Create Account' isLoading={isLoading} type='submit' disabled={!formIsValid} onClick={handleSubmit} />
       </div>
     </form>
   );
diff --git a/src/features/userB/components/UserBSharedImpactCard.tsx b/src/features/userB/components/UserBSharedImpactCard.tsx
index ccd5f8cf..7e4df091 100644
--- a/src/features/userB/components/UserBSharedImpactCard.tsx
+++ b/src/features/userB/components/UserBSharedImpactCard.tsx
@@ -25,7 +25,7 @@ function UserBSharedImpactCard({ effectId, effectTitle, effectShortDescription,
 
       <CmTypography variant='body' style={styles.description}>{effectShortDescription}</CmTypography>
 
-      <div style={{ paddingLeft: 20 }}>
+      <div style={{ paddingLeft: 20, textAlign: 'left' }}>
         {relatedPersonalValues.map((value: string) => (
           <PersonalValueTooltip value={value} key={value}>
             <CmChip text={value} style={{ marginRight: 5, marginTop: 10 }} />
@@ -49,6 +49,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   title: {
     textAlign: 'left',
     paddingLeft: 20,
+    paddingRight: 20,
   },
   image: {
     width: '100%',
diff --git a/src/features/userB/components/UserBSharedSolutionCard.tsx b/src/features/userB/components/UserBSharedSolutionCard.tsx
index 09fb91c1..a8a101be 100644
--- a/src/features/userB/components/UserBSharedSolutionCard.tsx
+++ b/src/features/userB/components/UserBSharedSolutionCard.tsx
@@ -50,6 +50,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   title: {
     textAlign: 'left',
     paddingLeft: 20,
+    paddingRight: 20,
   },
   image: {
     width: '100%',