From 097bae6d80577652a682799eed3f0665ce437834 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Tue, 27 Mar 2018 19:31:59 -0400
Subject: [PATCH] WIP: Most of menubar
---
src/components/button/button.css | 11 ++
src/components/button/button.jsx | 17 ++-
.../language-selector/dropdown-caret.svg | Bin 0 -> 904 bytes
.../language-selector/language-icon.svg | Bin 1898 -> 1881 bytes
.../language-selector/language-selector.css | 7 +-
.../language-selector/language-selector.jsx | 33 +++--
src/components/menu-bar/icon--mystuff.png | Bin 0 -> 1464 bytes
src/components/menu-bar/icon--profile.png | Bin 0 -> 5213 bytes
.../menu-bar/icon--see-community.svg | Bin 0 -> 2190 bytes
src/components/menu-bar/menu-bar.css | 67 +++++----
src/components/menu-bar/menu-bar.jsx | 127 +++++++++++++++---
src/css/colors.css | 4 +
12 files changed, 205 insertions(+), 61 deletions(-)
create mode 100644 src/components/language-selector/dropdown-caret.svg
create mode 100644 src/components/menu-bar/icon--mystuff.png
create mode 100644 src/components/menu-bar/icon--profile.png
create mode 100644 src/components/menu-bar/icon--see-community.svg
diff --git a/src/components/button/button.css b/src/components/button/button.css
index 44243650f..1062748fe 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -1,3 +1,14 @@
.button {
cursor: pointer;
+ border-radius: 4px;
+ padding: .75rem;
+ font-weight: bold;
+ border: 1px solid rgba(0,0,0,.1);
+}
+
+.icon {
+ margin-right: .5rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ vertical-align: middle;
}
diff --git a/src/components/button/button.jsx b/src/components/button/button.jsx
index 59b39668f..a85e8e6ab 100644
--- a/src/components/button/button.jsx
+++ b/src/components/button/button.jsx
@@ -6,14 +6,26 @@ import styles from './button.css';
const ButtonComponent = ({
className,
+ disabled,
+ iconClassName,
+ iconSrc,
onClick,
children,
...props
}) => {
- if (props.disabled === true) {
+
+ if (disabled) {
onClick = function () {};
}
+ const icon = iconSrc && (
+ <img
+ className={classNames(iconClassName, styles.icon)}
+ draggable={false}
+ src={iconSrc}
+ />
+ );
+
return (
<span
className={classNames(
@@ -24,6 +36,7 @@ const ButtonComponent = ({
onClick={onClick}
{...props}
>
+ {icon}
{children}
</span>
);
@@ -33,6 +46,8 @@ ButtonComponent.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
disabled: PropTypes.bool,
+ iconClassName: PropTypes.string,
+ iconSrc: PropTypes.string,
onClick: PropTypes.func.isRequired
};
diff --git a/src/components/language-selector/dropdown-caret.svg b/src/components/language-selector/dropdown-caret.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9ed9f8a5499f221d2ec0a7999fc3b4f6305d5243
GIT binary patch
literal 904
zcmZuw+m4$s5PjdTaNU<y3dZ+K1gz9Z+n23WsqF{Q-~|){5x60r-{F#$RP_s<Gc#vq
zj)&y=c5cws_e0&aDQ1LX<lAFc)NPsKAKzahi=VTnWVn`Stcy^k*j{cJRlY8(kYY6%
z*V>Ptx?74VqR1iz$X`N+5tL|$6jvc!_HjIpBN+wh`ZDH}(io`Mko~Qx+tdF7nR70l
zy*PV9aFTaXgg*P$_j&00J^FU?;aDMQ2}d8K5!`%45!zJz*;W2r=j&+X*q!5H$%&$s
zGSs2*S<!cwq8r=jnD;&;@q#Wz3qKsQL+|t83y>pJYh9AWv+Ex9He?e5p9LvVU8MMH
zUit{+7((Bje2Uwy^>-^;#Rd0U-86USbdUO94Mh8^Z@Z#c=btrLXdfHC=f8iM&nA3M
zx#Z9^^zudS6gmiExZ>1M3zi^KF)b+7J4vk5PEk3bTrzH)5rArdm0%3LQX-htOen*5
zj999*=G>q|L<ytP8pa$0hj4;xWd(Y`DU_93a>@nT5>0nX;q?SV2M7|}S}uj%&Dlao
z2c-?+8t9GE|G?TRVYL*y2O9gQAHWS4QVL@@+Q6GG4NSO_Y=(N3#3<*4W@f9wK@ugM
mvM}COFiE)4ltSmADX5HL6(-e}RhS<kF4w)7F3I!*WWNDLK<V)S
literal 0
HcmV?d00001
diff --git a/src/components/language-selector/language-icon.svg b/src/components/language-selector/language-icon.svg
index 42bd409ab18e8ed0e737e6547c7ecc89ea57df0d..e3a712ffb3d7cf6cab15c7ea03751733a6852082 100644
GIT binary patch
delta 57
zcmaFGcav{|%0!b5To!sp3K}Nn#zy87-@TgroY9)i4Gbo0Fsboorr0XwB<7`;CZ?w<
KZT4l7Wd#5=RT60c
delta 73
zcmcb~_lj?V3co^eNn&0~VorWus;yF9{zT=CT;_U)3K}M+CPqdR@4e#9FGx(zEUC0r
aGSD+JoqUYZmdyYRCUY{WZMJ2SVFdu0a2AaK
diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css
index 0ae9e0a10..bae30cdd3 100644
--- a/src/components/language-selector/language-selector.css
+++ b/src/components/language-selector/language-selector.css
@@ -9,8 +9,11 @@
}
.language-icon {
- height: 2rem;
- display: none;
+ height: 1.5rem;
+}
+
+.disabled {
+ opacity: .5;
}
.language-select {
diff --git a/src/components/language-selector/language-selector.jsx b/src/components/language-selector/language-selector.jsx
index db846fef5..e4779d8c6 100644
--- a/src/components/language-selector/language-selector.jsx
+++ b/src/components/language-selector/language-selector.jsx
@@ -1,27 +1,22 @@
+import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Box from '../box/box.jsx';
-import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
import locales from 'scratch-l10n';
import languageIcon from './language-icon.svg';
+import dropdownCaret from './dropdown-caret.svg';
import styles from './language-selector.css';
const LanguageSelector = ({
currentLocale,
onChange,
+ open,
...props
}) => (
<Box {...props}>
- <ComingSoonTooltip
- place="bottom"
- tooltipId="language-selector"
- >
- <div className={styles.group}>
- <img
- className={styles.languageIcon}
- src={languageIcon}
- />
+ <div className={styles.group}>
+ {open ? (
<select
disabled
aria-label="language selector"
@@ -38,15 +33,27 @@ const LanguageSelector = ({
</option>
))}
</select>
- </div>
- </ComingSoonTooltip>
+ ) : (
+ <React.Fragment>
+ <img
+ className={classNames(styles.languageIcon, styles.disabled)}
+ src={languageIcon}
+ />
+ <img
+ className={classNames(styles.dropdownCaret, styles.disabled)}
+ src={dropdownCaret}
+ />
+ </React.Fragment>
+ )}
+ </div>
</Box>
);
LanguageSelector.propTypes = {
currentLocale: PropTypes.string,
- onChange: PropTypes.func
+ onChange: PropTypes.func,
+ open: PropTypes.boolean
};
export default LanguageSelector;
diff --git a/src/components/menu-bar/icon--mystuff.png b/src/components/menu-bar/icon--mystuff.png
new file mode 100644
index 0000000000000000000000000000000000000000..79bbcb7f9da39c0a73db5a142082b9c39c2825bc
GIT binary patch
literal 1464
zcmaJ>eM}Q~7%s)4@-diT0t?$NN2VpAch{D3^wNUZQfX$fmJ01Qm7_iA3B5b62W^2l
zU^4~?aT_=%DPlIaj3qK8Q~6NA1qN&bbQ76GB4$g-2!e5cNd$J~%l$ES$=&<=y?LMK
z{d#gW#>@j@!LJ1i1cESqhStPegnz|5g7|OeX>T!aVz_h*mqq7uZk#0qX?8k~0Q640
zfG`ob-CI0Ns04yQF=@7N7Q;czMmr(g9|L)u438EFRH+^Yw-pi`kVh1dlp0*<=>-AO
zt_E`y2E@Q<2nU%_#u8a&nPyvAp-pKAQ&Rwy2jdBx1cw72XA$MXJZf;27vs-<Hw*%+
zAzYyvTr0|AFajEyB>)AKB(Wh$D1a&<sRBh4(F8z-NEI+5hvkSwCdU#HEKvrmKOmot
zwdZ3dt!_ORe^Y}Fj$<$wcDvn>TMp4|0W4K2l`tZMWikmLA#r&r4);hXSKJ1JmT=iv
zlHo|20{o149$mtzLB7(p7M#o`E#+Dt6F)H6gEO!cLi{al1R4zgAL?{&M!Pr@@v`3k
zBzBp-3;~-67hS^I_{HVN`BO2Nh9z*0X3aERv@u1agXU<LgJuAYW_4<S*nrze%I}O{
zMHvj3o^o+GWh3-jHOTWoBx%Qzm5HbfQOFcZR3Vk7^G1W}bTUmMDo>UrBl|b7TH03P
zBq(kJYk!HAZ;AB_!pZQNwFFC+5_TO+JAu{4F>>o#kS+PvvG%QNk#32F`C?%IdjGZV
z4HvH=|8Y~i{AE-A1jTEf<;5K}m3~Gb5bn`y)6Aa9x%0=xn!~Y!XRLMg8Ox20XB(dZ
z;kD;(ik~;^JyaOp2);GYQ{XkKh9WPhzWpk`N#zBu?AoQjf8x)oPpwHuAGJ)qJ8@-X
z`8_OWCa2}<(&*I9-h~GX?)muzB>k`@D6vZOw9QVt`<fq@bbMWT>|}c|v(1;_uB*;w
zZigoQ9RA0tT*=t<aBW|0*{#&wNLY7RclP#Z^qqa(QL~~HOg9r!^+v=n!``@Pohc8H
zOfRA$b2Zey<EN5kbXvIG>g#=duDI0|`oj8SOyIfP5LHFY-6P)zCR93V$L$G&XY(?p
zqj|YI8_Ago$RrYyw>p~!O*x^^ZrhXCd!$fYU;10@!5`+lZ4*!gYUxjDH$Gh&x)cV@
zeDiy0U(Dw#pSioNd!vVn<Hu(^KKi@dQF>oVOk8|?ectCahG%wJu9HB&a!MHV-QB@~
zMaRIHabzihn>ZR&-#6Odp2LWQzFyynefXZF5P8@6W0i_iE85E+wgbhc=2xn((Q$ez
z;$&_lBkB;sZx(e#H62;$tjRA%8uVcgLwwKhu3&wDsWJ)>WvrPO@_<9WF^IWQaa^nu
zQpqzP_X&f##?s0zJ+#+MMULpKUzF>n{whclx+`(y_Vf4eWw+ur7v63i{<Y=W<)(z$
z$mo&o2aB49>Fkv|a{;fWSA4lt_ldcu@oH|cad2{HQS~oLPws3RFKf<v^ugq5L7>3x
VEC~l0V8H(`)u(4_+xF*H{{v_a7~TK?
literal 0
HcmV?d00001
diff --git a/src/components/menu-bar/icon--profile.png b/src/components/menu-bar/icon--profile.png
new file mode 100644
index 0000000000000000000000000000000000000000..41e62b6140efe34784c1c5fa697f1bf73c236b85
GIT binary patch
literal 5213
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
X?GceYo~S%s00000NkvXXu0mjfu(-5L
literal 0
HcmV?d00001
diff --git a/src/components/menu-bar/icon--see-community.svg b/src/components/menu-bar/icon--see-community.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1f5b6ee6e58a29ba0ddf03372fff213c0e2948b5
GIT binary patch
literal 2190
zcmZuz%WhjY5Z&i1*xOA4NEBx{<O~DL0V*KfI6#54o9tZcMiOF6fuz{(-}ek9KLX^!
zu*t*WJkC7miw}=?x8Z)=A2z$~e4v<yFm7*l%guH*AO89K<J5)^mv1f(_p9)*SsvH(
zfz$WLA*{#EYJGg#-EYQ+KX#AvA%zs!e}>meX$Ua0J<Nyo@%a7yZ1(W*5Fc{f?N>8S
zDb1k%Eb{*GcC-EVD?w_l&HCwZ`6l4I_-#53e~#O6e|_BT--plN#^cR8h(!)>MKkNW
zFb%IP{<~X`cbn^Tc=2X;H#?l}Os8j+$IbC}y!<?lVX?cr`?1{||GSu-z?048c(}P-
z?8oclxCA4|_1SE^nDwJ4sjr7iNATx_tionFAO5;tjZ?63IPQ1f#`&<_ZO5nG^vo}g
zziw`CpALOJ-T%0S^mspRcgy8D{7%71E&QE6`}=hL_mBO1CEag)zlP6n<r7gPZN;ok
zO03OluGYeWQcPKd#Nm>1tN0ZxT1zb#187>aC9MF7C^ai(Qe%NCPMpJ4i<H>JXri%L
z;R>m+Xi-eKB^JO<r6#c)T4c&exJ)e8T&l1Z=&hBLroyk$D~Xj%EjM}%FC?-yW#Rl9
z7Hps|=hRB@O`_UZEL_PX$7V^Sl7xlt;Fd_j4i?~StyzImX_8HIC@~dECanQ2xruVB
z;R-}F91Gb*Vzy#R0);hJO{qz9&5B#BW&uo8t0^bfoJ-~^)DUQK$y`tN60v2dXt5@4
z@PsEE8|7x)C?GMKwbd++A~cX}0a;WdC@WCRsx3<`$YPFWNLPm&arZM2GK!38X`XU)
zh)8p=slqbyQjuFN9tPEzOhwhXBZX^V(q+{+GYIk|5h?`)0p-@nX|t$Gsn+g;L?<n^
z3fQbyiUyJ>2|@MTvXa82gUC(78lp__D?7zM!>C1VfIT?P1eX+bXGL?-DuLK5tW^`Q
zQRKREF3!&{s{Bj%1eZ7of!ztr<V1x*2Don(F@Z>jrIqaE?^+UU3p)xfz`28FXbX}F
zJdz}+g#xD&tSc3Q2Dn6$ig53%LPgOo4x<gg6Wl{m4LqW@pe|RzHCLRGX-4v1z$>tf
zwnLM`+_UJyGlI5Lbmj|6)i)L8n-fZ;?@&b9*}L*Bl1uKRli9Zg13(LVD%~_@0%S~*
zqM;FSLvkug0icv-lF{Z)L;`~bPEbvRp^<%lpuW-O<s{AIJ%l*HL<ZLtaiT-e{e@tS
zkTMJyq`jMK=<m)H1PN6;Aw?Bd)QI_{Ku3UY$O460R5v<^35z6MgEBtFu&J0#=&&T+
zoEI{q%8*aoXC$PjoGWU!0Zo1h3OHtz9tL4pU_=lX=1v`0Oo#%KOx4(GM>7TyJBW6-
zjN#>+GeU0#9u&+Ei~)=`hlxOaW{i^3Qew1C&z5q-3`7Qzb<DvIq6gGzz<l`$1|tS@
z2#u?qnZ%It&R6yM0(+Ti4-Fk?r4Q|2l=zpSKSc+;8F&FtZ`=@$`|IuD>u!HHANukZ
z58PXS3;H+lLOm_th5hd6hwTM<xiNi~n}nD3yD;E2^q1%K8uo{1wmLtJzPRvz0WSXs
DlX~(T
literal 0
HcmV?d00001
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index d1f4c3185..937908b64 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -6,24 +6,26 @@
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
-
- /*
- For most things, we shouldn't explicitly set height, and let the
- content push the element to whatever fits. Using a fixed height
- instead, will help us subtract the value we assign from the body,
- adding up to a perfect 100%. This means we don't need to set
- overflow: hidden, which makes it hard to debug. border-box
- simplifies by all of this by removing padding from the equation.
+
+ /*
+ For most things, we shouldn't explicitly set height, and let the
+ content push the element to whatever fits. Using a fixed height
+ instead, will help us subtract the value we assign from the body,
+ adding up to a perfect 100%. This means we don't need to set
+ overflow: hidden, which makes it hard to debug. border-box
+ simplifies by all of this by removing padding from the equation.
*/
box-sizing: border-box;
- height: $menu-bar-height;
+ height: $menu-bar-height;
- /*
- @todo: This adds ~20px in Chrome, when scrolling to the right,
+ /*
+ @todo: This adds ~20px in Chrome, when scrolling to the right,
but fixes [FFx + Safari] [resize window down + scroll to the right] bug.
- width: 100%;
+ width: 100%;
*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: .85rem;
+ font-weight: bold;
background-color: $motion-primary;
color: white;
}
@@ -33,18 +35,20 @@
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
+ align-items: center;
}
-/*
- Using a wrapper so when logo is hovered, it transforms via its center point
- @todo: not sure if this is needed
+/*
+ Using a wrapper so when logo is hovered, it transforms via its center point
+ @todo: not sure if this is needed
*/
.logo-wrapper {
}
.scratch-logo {
- height: $menu-bar-height;
+ height: $menu-bar-height;
padding: 0.8rem 0;
+ vertical-align: middle;
}
.scratch-logo:hover {
@@ -61,10 +65,10 @@
.menu-item {
display: block;
padding: 0 1.5rem;
- line-height: $menu-bar-height;
+ line-height: $menu-bar-height;
cursor: pointer;
text-decoration: none;
- color: $motion-tertiary;
+ color: #fff;
user-select: none;
}
@@ -75,21 +79,28 @@
}
.feedback-button {
- border-radius: 5px;
- padding: .75rem;
background-color: #FFF;
- cursor: pointer;
- font-size: .75rem;
- font-weight: bold;
color: $motion-primary;
}
-.feedback-button-icon {
- vertical-align: middle;
+.divider {
+ border-right: 1px dashed $menubar-gray;
+ margin: 0 1rem;
+ height: 1.5rem;
}
-.feedback-button-icon {
- margin-right: .5rem;
- width: 1.5rem;
+.title-field {
+ border: 1px dashed $menubar-gray;
+ border-radius: 4px;
+ width: 190px;
height: 1.5rem;
+ padding: .75rem;
+}
+
+.share-button {
+ background: #FFAB19;
+}
+
+.coming-soon >:not(.coming-soon-tooltip) {
+ opacity: 0.5;
}
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 580729454..6a760672f 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -6,15 +6,18 @@ import React from 'react';
import Box from '../box/box.jsx';
import Button from '../button/button.jsx';
-import LoadButton from '../../containers/load-button.jsx';
-import SaveButton from '../../containers/save-button.jsx';
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
import LanguageSelector from '../../containers/language-selector.jsx';
import {openFeedbackForm} from '../../reducers/modals';
import styles from './menu-bar.css';
+import mystuffIcon from './icon--mystuff.png';
+import profileIcon from './icon--profile.png';
import feedbackIcon from './icon--feedback.svg';
+import communityIcon from './icon--see-community.svg';
+import dropdownCaret from '../language-selector/dropdown-caret.svg';
import scratchLogo from './scratch-logo.svg';
const MenuBar = props => (
@@ -32,29 +35,119 @@ const MenuBar = props => (
src={scratchLogo}
/>
</div>
- <SaveButton className={styles.menuItem} />
- <LoadButton className={styles.menuItem} />
- <LanguageSelector className={styles.menuItem} />
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="menubar-selector"
+ >
+ <LanguageSelector />
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="file-menu"
+ >
+ <div className={classNames(styles.fileMenu)}>File</div>
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="edit-menu"
+ >
+ <div className={classNames(styles.editMenu)}>Edit</div>
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.divider)} />
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="title-field"
+ >
+ <div className={classNames(styles.titleField)} />
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="share-button"
+ >
+ <Button className={classNames(styles.shareButton)}>
+ <FormattedMessage
+ defaultMessage="Share"
+ description="Label for project share button"
+ id="gui.menuBar.share"
+ />
+ </Button>
+ </ComingSoonTooltip>
+ </div>
+ <div className={classNames(styles.menuItem, styles.communityButtonWrapper)}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipClassName={styles.comingSoonTooltip}
+ tooltipId="community-button"
+ >
+ <Button
+ className={classNames(styles.communityButton)}
+ iconSrc={communityIcon}
+ >
+ <FormattedMessage
+ defaultMessage="See Community"
+ description="Label for see community button"
+ id="gui.menuBar.seeCommunity"
+ />
+ </Button>
+ </ComingSoonTooltip>
+ </div>
</div>
- <div className={styles.feedbackButtonWrapper}>
+ <div className={classNames(styles.menuItem, styles.feedbackButtonWrapper)}>
<Button
className={styles.feedbackButton}
+ iconSrc={feedbackIcon}
onClick={props.onGiveFeedback}
>
- <img
- className={styles.feedbackButtonIcon}
- draggable={false}
- src={feedbackIcon}
+ <FormattedMessage
+ defaultMessage="Give Feedback"
+ description="Label for feedback form modal button"
+ id="gui.menuBar.giveFeedback"
/>
- <span className={styles.feedbackText}>
- <FormattedMessage
- defaultMessage="Give Feedback"
- description="Label for feedback form modal button"
- id="gui.menuBar.giveFeedback"
- />
- </span>
</Button>
</div>
+ <div className={styles.accountInfoWrapper}>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipId="mystuff"
+ >
+ <div className={classNames(styles.menuItem, styles.mystuffButton)}>
+ <img src={mystuffIcon} />
+ </div>
+ </ComingSoonTooltip>
+ <ComingSoonTooltip
+ className={styles.comingSoon}
+ place="bottom"
+ tooltipId="account-nav"
+ >
+
+ <div className={classNames(styles.menuItem, styles.accountNavMenu)}>
+ <img src={profileIcon} />
+ <span>scratch-cat</span>
+ <img src={dropdownCaret} />
+ </div>
+ </ComingSoonTooltip>
+ </div>
</Box>
);
diff --git a/src/css/colors.css b/src/css/colors.css
index be8a9a0db..b46bc50bf 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -4,6 +4,8 @@ $ui-background-blue: #e8edf1;
$text-primary: #575e75;
+$menubar-gray: rgba(0,0,0,0.25);
+
$motion-primary: #4C97FF;
$motion-tertiary: #3373CC;
$motion-transparent: hsla(215, 100%, 65%, 0.20);
@@ -11,6 +13,8 @@ $motion-transparent: hsla(215, 100%, 65%, 0.20);
$red-primary: #FF661A;
$red-tertiary: #E64D00;
+$share-orange: #FFAB19;
+
$sound-primary: #CF63CF;
$sound-tertiary: #A63FA6;
--
GitLab