Fix button placement in sell modal and arrow svg (#66)

- Fixed the placement of confirm and previous buttons in sell modal (for
items and characters). Wrapped the buttons in wrapper and made the step
components a bit smaller so the buttons can fit nicely at the bottom.
- Removed padding from some arrow icons in the button so they show up
properly
 
closes #64

Co-authored-by: Pandelis Symeonidis <pandelis@kryha.io>

frontend/src/pages/buy/styles.ts

@@ -42,7 +42,6 @@ export const ContentWrapper = styled.div<ViewProps>`
 `;
 
 export const ArrowUp = styled(ArrowUpRightIcon)`
-  padding-left: 13px;
   path {
     stroke: ${color.white};
   }

frontend/src/pages/sell/sell-form.tsx

@@ -21,6 +21,7 @@ import { SellData, SellStep } from "./types";
 import { ISTTouIST } from "../../util";
 import { SellDescription } from "../../components/sell-description/sell-description";
 import { useCharacterBuilder } from "../../context/character-builder-context";
+import { ButtonWrapper } from "../create-character/styles";
 
 interface SellFormProps {
   data: SellData;
@@ -73,19 +74,21 @@ export const SellForm: FC<SellFormProps> = ({ data, changeStep, onSubmit, isPlac
           )}
         </Step>
       </StepContainer>
-      {isOnFirstStep && (
-        <PreviousButtonContainer onClick={() => changeStep(INFORMATION_STEP)}>
-          <SecondaryButton>
-            <ButtonText>{text.mint.previous}</ButtonText>
-          </SecondaryButton>
-        </PreviousButtonContainer>
-      )}
-      <ButtonContainer>
-        <PrimaryButton onClick={() => changeStep(CONFIRMATION_STEP)} disabled={!isPlacedInShop}>
-          <ButtonText customColor={color.white}>{text.mint.confirm}</ButtonText>
-          {isOfferPending ? <LoadingPage /> : <ArrowUp />}
-        </PrimaryButton>
-      </ButtonContainer>
+      <ButtonWrapper>
+        {isOnFirstStep && (
+          <PreviousButtonContainer onClick={() => changeStep(INFORMATION_STEP)}>
+            <SecondaryButton>
+              <ButtonText>{text.mint.previous}</ButtonText>
+            </SecondaryButton>
+          </PreviousButtonContainer>
+        )}
+        <ButtonContainer>
+          <PrimaryButton onClick={() => changeStep(CONFIRMATION_STEP)} disabled={!isPlacedInShop}>
+            <ButtonText customColor={color.white}>{text.mint.confirm}</ButtonText>
+            {isOfferPending ? <LoadingPage /> : <ArrowUp />}
+          </PrimaryButton>
+        </ButtonContainer>
+      </ButtonWrapper>
     </>
   );
 };

frontend/src/pages/sell/styles.ts

@@ -55,7 +55,6 @@ export const Header = styled.div`
   margin-top: 16px;
 `;
 export const ArrowUp = styled(ArrowUpRightIcon)`
-  padding-left: 13px;
   path {
     stroke: ${color.white};
   }
@@ -98,7 +97,7 @@ export const InputWrapper = styled.div`
 `;
 
 export const StepContainer = styled.div`
-  margin-top: ${margins.big};
+  margin-top: ${margins.small};
 `;
 
 export const StepText = styled(ButtonText)`
@@ -114,7 +113,7 @@ export const Step = styled.div<ActiveProps>`
   padding: ${margins.medium};
   position: static;
   width: 100%;
-  height: 88px;
+  height: 82px;
   left: 0;
   top: 0;
   background: ${color.white};
@@ -141,10 +140,10 @@ export const Step = styled.div<ActiveProps>`
 `;
 
 export const Line = styled.div`
-  width: ${margins.small};
+  width: ${margins.mini};
   border: 0.5px solid ${color.darkGrey};
   transform: rotate(90deg);
-  margin: ${margins.small} 20px ${margins.small} 39px;
+  margin: ${margins.mini} 20px ${margins.mini} 39px;
 `;
 
 interface NumberProps {
@@ -185,7 +184,6 @@ export const NumberContainer = styled.div<NumberProps>`
 `;
 
 export const PreviousButtonContainer = styled.div`
-  position: absolute;
   bottom: ${margins.big};
   :hover {
     ${ArrowUp} {
@@ -286,7 +284,7 @@ export const GeneralInfo = styled.div<ActiveProps>`
   padding: ${margins.medium};
   position: static;
   width: 100%;
-  height: 88px;
+  height: 82px;
   left: 0;
   top: 0;
   background: ${color.white};