From 9f13c9e91da36e972a4ea69201562fceba396930 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Fri, 23 Feb 2018 15:05:01 -0500
Subject: [PATCH] More style/color updates.
---
src/components/close-button/close-button.css | 15 ++++++++++
src/components/close-button/close-button.jsx | 19 ++++++++----
src/components/close-button/icon--back.svg | Bin 0 -> 1137 bytes
src/components/import-modal/import-modal.css | 29 +++++++------------
src/components/import-modal/import-modal.jsx | 2 +-
src/css/colors.css | 2 --
6 files changed, 40 insertions(+), 27 deletions(-)
create mode 100644 src/components/close-button/icon--back.svg
diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css
index 1864e7b2a..88ebb526e 100644
--- a/src/components/close-button/close-button.css
+++ b/src/components/close-button/close-button.css
@@ -49,3 +49,18 @@
width: 0.75rem;
height: 0.75rem;
}
+
+.back-icon {
+ position: relative;
+ margin: 0.25rem;
+ user-select: none;
+}
+
+.small .back-icon {
+ width: 50%;
+}
+
+.large .back-icon {
+ width: 2rem;
+ height: 2rem;
+}
diff --git a/src/components/close-button/close-button.jsx b/src/components/close-button/close-button.jsx
index 039a8750b..befac229f 100644
--- a/src/components/close-button/close-button.jsx
+++ b/src/components/close-button/close-button.jsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
import styles from './close-button.css';
import closeIcon from './icon--close.svg';
+import backIcon from './icon--back.svg';
const CloseButton = props => (
<div
@@ -20,10 +21,16 @@ const CloseButton = props => (
tabIndex="0"
onClick={props.onClick}
>
- <img
- className={styles.closeIcon}
- src={closeIcon}
- />
+ {props.buttonType === 'back' ?
+ <img
+ className={styles.backIcon}
+ src={backIcon}
+ /> :
+ <img
+ className={styles.closeIcon}
+ src={closeIcon}
+ />
+ }
</div>
);
@@ -31,13 +38,15 @@ CloseButton.SIZE_SMALL = 'small';
CloseButton.SIZE_LARGE = 'large';
CloseButton.propTypes = {
+ buttonType: PropTypes.oneOf(['back', 'close']),
className: PropTypes.string,
onClick: PropTypes.func.isRequired,
size: PropTypes.oneOf([CloseButton.SIZE_SMALL, CloseButton.SIZE_LARGE])
};
CloseButton.defaultProps = {
- size: CloseButton.SIZE_LARGE
+ size: CloseButton.SIZE_LARGE,
+ buttonType: 'close'
};
export default CloseButton;
diff --git a/src/components/close-button/icon--back.svg b/src/components/close-button/icon--back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e3f82a6fdb679c27301413397fc8838f74bbb9ae
GIT binary patch
literal 1137
zcmZuw+iu%141MocXxd8)#Io*}AWne==w4D_z_t%?W7Rg|*nzDj`TS9i(>g!}1C|cS
zL-L4PJzowDI{AL6yEem&P>g)L>x#N9GyM0@OJec!`e8MkN_4J^P-U3Y;{~J2*JTxM
zr&I0EKe|hXDWZtS56?*%Mv$f*GF*jlT&C&yd?sf>y1q;~r8EWl$z^$I>URH?BXiEB
zqZO|o5Uka=BtbuY>-#)({Sy7&`>?B!w1lHaX#_V<C_%G~Z(ZdNbw0I6cHJQzt}#h6
zQHDA+e*Kp3_DQ|#+Esc5uK5Z-?ADv!=fM}CMyRHgWR;Glo7elWjtKm&NQvqq!@u&<
zC!oX-`fl$t+;*+MosvmgFu&JLb2G+$(*J9~+n;>f6~)y0*#4FFqt;vK_m^?aJV)<i
z4)sDAuaYoosdS7lEK$a2MU_HZM}**1XkizE2qm-@+@XylfN(0A0GLXpEZhTPlrW}M
z<hVyA=SI0X!<H$cr8ZLE<=Ze#n3P;wyKsaW#f)GQfwQqxJE;M+PE)I-h$wZ;GQ;QS
zmT@Aj6Ao&dId7pj03|bQ0ZFK^3Q9s7fQ{7xx{NSvv~_Ci#0ck%iKuf*D9Vu|%2MNu
zwh^_^7040AV9G%mbfhrSg0DoDSddFPK2k_7Kp_sOQNX~goL8|mgaa`!-<2$h*4!DO
zp2HhKoRN%DbJw6Cno-5Iis*-OUtTL7C+{VW5sX&o^LBXe`a_1tZ3Bb+2+A1{z%HT`
q@D^b`p}q^zmbg#oGa~s6NoFw^hCUA2b?C>LOUvm6#LX(c^7VhBxE^N!
literal 0
HcmV?d00001
diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
index f62237368..b794fd753 100644
--- a/src/components/import-modal/import-modal.css
+++ b/src/components/import-modal/import-modal.css
@@ -20,9 +20,6 @@
border-radius: $space;
user-select: none;
width: 500px;
-
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-
color: $text-primary;
overflow: hidden;
}
@@ -48,10 +45,6 @@ $sides: 20rem;
box-sizing: border-box;
width: 100%;
background-color: $import-primary;
-
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 1rem;
- font-weight: normal;
}
.header-item {
@@ -78,6 +71,10 @@ $sides: 20rem;
cursor: default;
}
+.header-item-title h2 {
+ font-size: 1.25rem;
+}
+
.header-item-close {
display: flex;
flex-basis: $sides;
@@ -108,7 +105,7 @@ $sides: 20rem;
.bad-input-container {
border-color: $data-primary;
- box-shadow: 0 0 0 0.2rem $data-transparent;
+ box-shadow: 0 0 0 0.2rem hsla(30, 100%, 55%, 0.15);
}
.input-row input {
@@ -145,9 +142,9 @@ $sides: 20rem;
text-align: center;
display: flex;
justify-content: center;
- background: $data-tertiary;
+ background: hsla(30, 100%, 55%, 0.25);
color: $data-primary;
- border: 1px solid $ui-pane-border;
+ border: 1px solid $data-primary;
border-radius: 0.25rem;
}
@@ -166,21 +163,15 @@ $sides: 20rem;
}
.button-row button {
- padding: 0.5rem 2rem;
+ border: 1px solid $motion-primary;
+ border-radius: 0.25rem;
+ padding: 0.5rem 1.5rem;
background: white;
font-weight: bold;
font-size: .875rem;
cursor: pointer;
-}
-
-.button-row button.no-button {
- border: 1px solid $motion-primary;
- border-radius: 0.25rem;
color: $motion-primary;
}
-.button-row button + button {
- margin-left: 0.5rem;
-}
.faq-link-text {
margin: 2rem 0 .5rem 0;
diff --git a/src/components/import-modal/import-modal.jsx b/src/components/import-modal/import-modal.jsx
index 92185f75c..ad42929e7 100644
--- a/src/components/import-modal/import-modal.jsx
+++ b/src/components/import-modal/import-modal.jsx
@@ -45,6 +45,7 @@ const ImportModal = ({intl, ...props}) => (
)}
>
<CloseButton
+ buttonType="back"
size={CloseButton.SIZE_LARGE}
onClick={props.onGoBack}
/>
@@ -104,7 +105,6 @@ const ImportModal = ({intl, ...props}) => (
}
<Box className={styles.buttonRow}>
<button
- className={styles.noButton}
onClick={props.onGoBack}
>
<FormattedMessage
diff --git a/src/css/colors.css b/src/css/colors.css
index de484da27..5dd2f325c 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -17,8 +17,6 @@ $sound-tertiary: #A63FA6;
$control-primary: #FFAB19;
$data-primary: #FF8C1A;
-$data-tertiary: rgba(255,140,26,0.25);
-$data-transparent: rgba(255,140,26,0.1);
$form-border: #E9EEF2;
--
GitLab