Use global Styled System theme in DatePeriodPicker

Instead of the old "shared-styles".
Faithlife · Jan 8, 2021 · c76ca22 · c76ca22
1 parent eb7df02
commit c76ca22
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 55 deletions.
diff --git a/components/date-period-picker/component.jsx b/components/date-period-picker/component.jsx
@@ -4,6 +4,7 @@ import debounce from 'lodash.debounce';
 import { DatePicker } from '../date-picker';
 import { Input } from '../input';
 import { dateFunctionProps } from '../date-picker/date-function-props';
+import { DefaultThemeProvider } from '../DefaultThemeProvider';
 import * as Styled from './styled';
 
 const DATE_FORMAT_STRING = 'M/d/yyyy';
@@ -187,49 +188,51 @@ export class DatePeriodPicker extends PureComponent {
 		} = this.state;
 
 		return (
-			<Styled.Container>
-				{this.getUniqueDatePeriods().map(({ displayName, dateRange, originalIndex }) => (
-					<Styled.DatePeriod
-						key={displayName}
-						onClick={() => {
-							setSelectedDate(dateRange, originalIndex);
-						}}
-					>
-						{displayName}
-					</Styled.DatePeriod>
-				))}
-				<Styled.DateInputContainer>
-					<Styled.Label>
-						<Styled.LabelText>From</Styled.LabelText>
-						<Input
-							placeholder="mm/dd/yyyy"
-							value={start}
-							onChange={event => this.handleInputValueChange(event.target.value, 'start')}
-							small
+			<DefaultThemeProvider>
+				<Styled.Container>
+					{this.getUniqueDatePeriods().map(({ displayName, dateRange, originalIndex }) => (
+						<Styled.DatePeriod
+							key={displayName}
+							onClick={() => {
+								setSelectedDate(dateRange, originalIndex);
+							}}
+						>
+							{displayName}
+						</Styled.DatePeriod>
+					))}
+					<Styled.DateInputContainer>
+						<Styled.Label>
+							<Styled.LabelText>From</Styled.LabelText>
+							<Input
+								placeholder="mm/dd/yyyy"
+								value={start}
+								onChange={event => this.handleInputValueChange(event.target.value, 'start')}
+								small
+							/>
+						</Styled.Label>
+						<Styled.Label>
+							<Styled.LabelText>To</Styled.LabelText>
+							<Input
+								placeholder="mm/dd/yyyy"
+								value={end}
+								onChange={event => this.handleInputValueChange(event.target.value, 'end')}
+								small
+							/>
+						</Styled.Label>
+					</Styled.DateInputContainer>
+					<Styled.DatePickerContainer>
+						<DatePicker
+							asDateRangePicker
+							selectedDateRange={selectedDateRange}
+							setSelectedDate={dateRange =>
+								setSelectedDate(dateRange, this.getDatePeriodIndex(dateRange))
+							}
+							validate={validate}
+							dateFunctions={dateFunctions}
 						/>
-					</Styled.Label>
-					<Styled.Label>
-						<Styled.LabelText>To</Styled.LabelText>
-						<Input
-							placeholder="mm/dd/yyyy"
-							value={end}
-							onChange={event => this.handleInputValueChange(event.target.value, 'end')}
-							small
-						/>
-					</Styled.Label>
-				</Styled.DateInputContainer>
-				<Styled.DatePickerContainer>
-					<DatePicker
-						asDateRangePicker
-						selectedDateRange={selectedDateRange}
-						setSelectedDate={dateRange =>
-							setSelectedDate(dateRange, this.getDatePeriodIndex(dateRange))
-						}
-						validate={validate}
-						dateFunctions={dateFunctions}
-					/>
-				</Styled.DatePickerContainer>
-			</Styled.Container>
+					</Styled.DatePickerContainer>
+				</Styled.Container>
+			</DefaultThemeProvider>
 		);
 	}
 }
diff --git a/components/date-period-picker/styled.jsx b/components/date-period-picker/styled.jsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { colors, thickness, fonts } from '../shared-styles';
+import { themeGet } from '@styled-system/theme-get';
 
 export const Container = styled.div`
 	display: flex;
@@ -12,48 +12,50 @@ export const Container = styled.div`
 		max-width: 324px;
 	}
 
-	padding: ${thickness.four} 0 ${thickness.twelve} 0;
+	padding: ${themeGet('space.2')} 0 ${themeGet('space.4')} 0;
 	overflow: hidden;
 `;
 
 export const DatePickerContainer = styled.div`
-	padding: ${thickness.eight};
+	padding: ${themeGet('space.3')};
 `;
 
 export const DatePeriod = styled.div`
-	font: ${fonts.ui14};
-	padding: ${thickness.eight};
-	background: ${colors.white};
+	${themeGet('textStyles.ui.14')}
+
+	padding: ${themeGet('space.3')};
+	background: ${themeGet('colors.datePeriodPicker.background')};
 	cursor: pointer;
 	width: 100%;
 	text-align: initial;
 
 	&:hover {
-		background: ${colors.blueBase};
-		color: ${colors.white};
+		background: ${themeGet('colors.datePeriodPicker.hoverBackground')};
+		color: ${themeGet('colors.datePeriodPicker.hoverText')};
 		transition: background 0.2s ease-out, color 0.2s ease-out;
 	}
 `;
 
 export const DateInputContainer = styled.div`
 	display: flex;
 	flex-direction: row;
-	border-top: 1px solid ${colors.gray14};
-	padding: ${thickness.twelve} ${thickness.eight};
+	border-top: 1px solid ${themeGet('colors.datePeriodPicker.inputBorder')};
+	padding: ${themeGet('space.4')} ${themeGet('space.3')};
 `;
 
 export const Label = styled.label`
 	min-width: 0;
 	text-align: initial;
 	display: flex;
 	flex-direction: column;
-	font: ${fonts.ui14};
+
+	${themeGet('textStyles.ui.14')}
 
 	&:first-of-type {
-		padding-right: ${thickness.eight};
+		padding-right: ${themeGet('space.3')};
 	}
 `;
 
 export const LabelText = styled.span`
-	padding-bottom: ${thickness.four};
+	padding-bottom: ${themeGet('space.2')};
 `;
diff --git a/theme/core.js b/theme/core.js
@@ -209,6 +209,13 @@ colors.datePicker = {
 	weekBorder: colors.gray14,
 };
 
+colors.datePeriodPicker = {
+	background: colors.datePicker.background,
+	hoverBackground: colors.blue4,
+	hoverText: colors.white,
+	inputBorder: colors.datePicker.weekBorder,
+};
+
 colors.datePickerInput = {
 	iconColor: colors.gray52,
 };