Remove aspect ratio component (#70)

* Update height on Datepicker (sc2516) * Comment aspectratio that's affecting web height (sc2516) * Comment aspectratio that's affecting web height (sc2516) * Remove aspect ratio component in order to prevent error on web project (sc2516)
gameflow-tv · Mar 14, 2022 · f6824a3 · f6824a3
1 parent eeeac50
commit f6824a3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/lib/components/inputs/DatePicker/DatePicker.styles.tsx b/src/lib/components/inputs/DatePicker/DatePicker.styles.tsx
@@ -3,10 +3,11 @@ import { typographyToCss } from '../../../theme'
 import { DatePickerProps } from './DatePicker'
 
 export const Wrapper = styled.div<DatePickerProps>`
+  box-sizing: border-box;
   display: inline-block;
   position: relative;
   width: ${(props) => props.width};
-  height: 45px;
+  height: ${(props) => props.height};
   z-index: ${(props) => (props.zIndex ? props.zIndex : 'inherit')};
 `
 

diff --git a/src/lib/components/inputs/DatePicker/DatePicker.tsx b/src/lib/components/inputs/DatePicker/DatePicker.tsx
@@ -9,6 +9,7 @@ import { DateInput, DateSpan, Grid, NavBtn, Wrapper } from './DatePicker.styles'
 
 export type DatePickerProps = {
   width?: string
+  height?: string
   navBgColor?: string
   navTextColor?: string
   navHoverBgColor?: string
@@ -78,6 +79,7 @@ const formatFieldValue = (dt: Date) => {
 
 export const DatePicker = ({
   width,
+  height,
   navBgColor,
   navTextColor,
   navHoverBgColor,
@@ -96,6 +98,7 @@ export const DatePicker = ({
 
   const styles = {
     width: width || '328px',
+    height: height || '45px',
     navBgColor: navBgColor || theme.colors.card,
     navTextColor: navTextColor || theme.colors.secondaryText,
     navHoverBgColor: navHoverBgColor || theme.colors.calendarOnHover,
@@ -158,11 +161,9 @@ export const DatePicker = ({
   return (
     <Wrapper ref={pickerRef} {...styles}>
       <Grid>
-        <AspectRatio aspectRatio={100}>
-          <NavBtn className="prevmtharea" onClick={() => handleDay(-1)} {...styles}>
-            <Icon icon="arrow_left" size="large" />
-          </NavBtn>
-        </AspectRatio>
+        <NavBtn className="prevmtharea" onClick={() => handleDay(-1)} {...styles}>
+          <Icon icon="arrow_left" size="large" />
+        </NavBtn>
         <DateInput className="mthdescarea" onClick={handleEdition} {...styles}>
           <Icon icon="calendar" />
           {editionMode ? (
@@ -171,11 +172,9 @@ export const DatePicker = ({
             <DateSpan {...styles}>{dayLabel}</DateSpan>
           )}
         </DateInput>
-        <AspectRatio aspectRatio={100}>
-          <NavBtn className="nextmtharea" onClick={() => handleDay(1)} {...styles}>
-            <Icon icon="arrow_right" size="large" />
-          </NavBtn>
-        </AspectRatio>
+        <NavBtn className="nextmtharea" onClick={() => handleDay(1)} {...styles}>
+          <Icon icon="arrow_right" size="large" />
+        </NavBtn>
       </Grid>
       <div style={{ position: 'relative' }}>
         {editionMode && (