fix(AdSettingsCog): switch to dorris icon; fix positioning issue (#1327)

* fix(AdSettingsCog): switch to dorris icon; fix positioning issue * fix(AdSettingsCog): Increase contrast for better readability * fix(AdSettingsCog): use filled icon
dbmedialab-archive · Jul 19, 2019 · dd9a659 · dd9a659
1 parent 5d2f686
commit dd9a659
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/src/atoms/AdSettingsCog.js b/src/atoms/AdSettingsCog.js
@@ -1,29 +1,24 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { getVariable } from '../utils';
-import { FontIcon } from './FontIcon';
+import { getColor, getVariable } from '../utils';
+import { SvgIcon } from './SvgIcon';
 
 const StyledCog = styled.div`
 	position: absolute;
 	left: 0;
 	top: ${getVariable('verticalBase')};
-	height: 3rem !important;
-	width: 3rem !important;
-	background-color: white;
+	padding: calc(1/2 * ${getVariable('horizontalBase')});
+	background-color: ${getColor('white')};
 	opacity: 0.5;
 	filter: alpha(opacity=50);
-	border-bottom-right-radius: 1.5rem;
+	line-height: 0;
+	border-bottom-right-radius: 50%;
 	cursor: pointer;
-
-	& span {
-		opacity: 0.5;
-		filter: alpha(opacity=50);
-	}
 `;
 
 const AdSettingsCog = props => (
 	<StyledCog {...props}>
-		<FontIcon name="settings-alt-2" size={2.4} />
+		<SvgIcon name="settings" set="dorris" color="type" size={1.6} fill="currentColor" />
 	</StyledCog>
 );
 

diff --git a/src/atoms/AdWrapper.js b/src/atoms/AdWrapper.js
@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import PropTypes from 'prop-types';
 
 import { getColor, getVariable } from '../utils';
@@ -33,7 +34,13 @@ const AdWrapperBase = styled.div`
 		width: 100%;
 		background: ${props => getColor(props.sticky ? 'white' : 'adWrapperBackgroundColor')};
 		color: ${getColor('adWrapperFontColor')};
-		padding: ${props => (props.sticky ? '0.35rem 1.0rem' : '0.35rem 0')};
+		padding: ${props => (
+		`calc(1/2 * (${getVariable('verticalBase')(props)} - ${getVariable('uiSmallLineHeight')(props)})) 0`
+	)};
+		${props => props.sticky && css`
+			padding-left: 1.0rem;
+			padding-right: 1.0rem;
+		`}
 		box-sizing: border-box;
 		opacity: ${props => (props.shouldHideAttribution ? '0' : '1')};
 		transition: opacity .3s;

diff --git a/src/atoms/SvgIcon/dorris/Svg.js b/src/atoms/SvgIcon/dorris/Svg.js
@@ -9,6 +9,7 @@ const Svg = ({ color, ...rest }) => {
 
 	return (<svg
 		viewBox="0 0 33 33"
+		color={stroke}
 		fill="none"
 		stroke={stroke}
 		strokeWidth={1.5}