Merge pull request stakwork#779 from jordan-ae/bounty-modal-width

Update Bounty modal width
aliraza556 · Dec 17, 2024 · d6ffbdb · d6ffbdb
2 parents c11a632 + 3a88be4
commit d6ffbdb
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/src/components/form/bounty/index.tsx b/src/components/form/bounty/index.tsx
@@ -442,8 +442,8 @@ function Form(props: FormProps) {
 
                 {schemaData.step !== 1 && (
                   <>
-                    <SchemaTagsContainer>
-                      <div className="LeftSchema" style={{ width: '292px' }}>
+                    <SchemaTagsContainer style={{ display: 'flex', gap: '20px' }}>
+                      <div className="LeftSchema" style={{ width: '100%' }}>
                         {schema
                           .filter((item: any) => schemaData.schema.includes(item.name))
                           .map((item: FormField) => (
@@ -515,7 +515,7 @@ function Form(props: FormProps) {
                             </div>
                           ))}
                       </div>
-                      <div className="RightSchema" style={{ width: '292px' }}>
+                      <div className="RightSchema" style={{ width: '100%' }}>
                         {schema
                           .filter((item: any) => schemaData.schema2.includes(item.name))
                           .map((item: FormField) => (
@@ -571,7 +571,7 @@ function Form(props: FormProps) {
                       <div
                         className="ButtonContainer"
                         style={{
-                          width: stepTracker < 5 ? '45%' : '100%',
+                          width: stepTracker < 5 ? '20%' : '100%',
                           height: stepTracker < 5 ? '48px' : '48px',
                           marginTop: stepTracker === 5 || stepTracker === 3 ? '20px' : ''
                         }}

diff --git a/src/components/form/inputs/LoomVideoInputNew.tsx b/src/components/form/inputs/LoomVideoInputNew.tsx
@@ -11,11 +11,11 @@ interface styleProps {
 }
 
 const LoomVideoContainer = styled.div<styleProps>`
-  width: 292px;
   height: 175px;
-  left: 698px;
-  top: 313px;
   background: ${(p: any) => !p.isVideo && "url('/static/loom_video_outer_border.svg')"};
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
   border-radius: 4px;
   display: flex;
   flex-direction: column;

diff --git a/src/people/utils/BountyCreationConstant.ts b/src/people/utils/BountyCreationConstant.ts
@@ -8,9 +8,10 @@ export const BountyDetailsCreationData = {
     schema2: [''],
     required: [''],
     outerContainerStyle: {
-      minWidth: '712px',
-      maxWidth: '712px',
-      height: '560px'
+      minWidth: '712px', // Retains the current minimum width
+      maxWidth: 'min(75vw, calc(712px * 2.5))', // 2.5x the minimum width (712 * 2.5 = 1780)
+      width: '75vw', // Retains the fixed height
+      margin: '0 auto' // Ensures modal is centered horizontally
     },
     headingStyle: {},
     extraText: ''
@@ -24,9 +25,10 @@ export const BountyDetailsCreationData = {
     schema2: ['wanted_type', 'coding_languages'],
     required: ['one_sentence_summary', 'wanted_type'],
     outerContainerStyle: {
-      minWidth: '712px',
-      maxWidth: '712px',
-      height: 'auto'
+      minWidth: '712px', // Retains the current minimum width
+      maxWidth: 'min(75vw, calc(712px * 2.5))', // 2.5x the minimum width (712 * 2.5 = 1780)
+      width: '75vw', // Retains the fixed height
+      margin: '0 auto' // Ensures modal is centered horizontally
     },
     headingStyle: {},
     extraText: '* Required fields'
@@ -40,9 +42,10 @@ export const BountyDetailsCreationData = {
     schema2: [' ', 'loomEmbedUrl'],
     required: [''],
     outerContainerStyle: {
-      minWidth: '712px',
-      maxWidth: '712px',
-      height: 'auto'
+      minWidth: '712px', // Retains the current minimum width
+      maxWidth: 'min(75vw, calc(712px * 2.5))', // 2.5x the minimum width (712 * 2.5 = 1780)
+      width: '75vw', // Retains the fixed height
+      margin: '0 auto' // Ensures modal is centered horizontally
     },
     headingStyle: {},
     extraText: '* Required fields'
@@ -56,9 +59,10 @@ export const BountyDetailsCreationData = {
     schema2: ['tribe', 'deliverables', 'show'],
     required: ['price'],
     outerContainerStyle: {
-      minWidth: '712px',
-      maxWidth: '712px',
-      height: 'auto'
+      minWidth: '712px', // Retains the current minimum width
+      maxWidth: 'min(75vw, calc(712px * 2.5))', // 2.5x the minimum width (712 * 2.5 = 1780)
+      width: '75vw', // Retains the fixed height
+      margin: '0 auto' // Ensures modal is centered horizontally
     },
     headingStyle: {},
     extraText: '* Required fields'
@@ -74,7 +78,8 @@ export const BountyDetailsCreationData = {
     outerContainerStyle: {
       minWidth: '388px',
       maxWidth: '388px',
-      height: 'auto'
+      width: '388px',
+      margin: '0 auto'
     },
     headingStyle: {},
     extraText: ''