fix(#1193):fixed icon displacement on window scaling (#1202)

* fix(#1193):fixed icon displacement on window scaling * removed commented code
stakwork · Dec 28, 2023 · 564c05c · 564c05c
1 parent 9161e13
commit 564c05c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/frontend/app/src/components/common/ImageButton.tsx b/frontend/app/src/components/common/ImageButton.tsx
@@ -6,6 +6,8 @@ import styled from 'styled-components';
 interface ButtonContainerProps {
   topMargin?: string;
   disabled?: boolean;
+  paddingLeft?: string;
+  paddingRight?: string;
 }
 
 const ButtonContainer = styled.div<ButtonContainerProps>`
@@ -14,18 +16,15 @@ const ButtonContainer = styled.div<ButtonContainerProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-
   pointer-events: ${({ disabled }: ButtonContainerProps) => (disabled ? 'none' : 'all')};
   cursor: pointer;
-
   opacity: ${({ disabled }: ButtonContainerProps) => (disabled ? 0.8 : 1)};
   margin-top: ${(p: any) => p?.topMargin};
   background: #ffffff;
   border: 1px solid #dde1e5;
   border-radius: 30px;
   user-select: none;
   .ImageContainer {
-    position: absolute;
     min-height: 48px;
     min-width: 48px;
     right: 37px;
@@ -34,10 +33,8 @@ const ButtonContainer = styled.div<ButtonContainerProps>`
     justify-content: center;
   }
   .leadingImageContainer {
-    position: absolute;
-    min-height: 48px;
-    min-width: 48px;
-    left: 300px;
+    padding-left: 20px;
+    padding-right: 15px;
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/frontend/app/src/people/widgetViews/summaries/wantedSummaries/CodingBounty.tsx b/frontend/app/src/people/widgetViews/summaries/wantedSummaries/CodingBounty.tsx
@@ -533,6 +533,9 @@ function MobileView(props: CodingBountiesProps) {
                               left: 320
                             }}
                             buttonAction={props?.editAction}
+                            buttonTextStyle={{
+                              paddingRight: '50px'
+                            }}
                           />
                           <ImageButton
                             buttonText={!props.deletingState ? 'Delete' : 'Deleting'}
@@ -546,6 +549,9 @@ function MobileView(props: CodingBountiesProps) {
                             }}
                             disabled={!props?.deleteAction}
                             buttonAction={props?.deleteAction}
+                            buttonTextStyle={{
+                              paddingRight: '45px'
+                            }}
                           />
                         </div>
                       )}
@@ -658,7 +664,8 @@ function MobileView(props: CodingBountiesProps) {
                           }}
                           buttonTextStyle={{
                             color: color.grayish.G50,
-                            width: '114px'
+                            width: '114px',
+                            paddingLeft: '20px'
                           }}
                           endImageSrc={'/static/addIcon.svg'}
                           endingImageContainerStyle={{