@coorpacademy/components 11.11.1-alpha.0 → 11.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/atom/input-search/index.d.ts.map +1 -1
- package/es/atom/input-search/index.js +1 -0
- package/es/atom/input-search/index.js.map +1 -1
- package/es/atom/input-switch/index.d.ts +2 -0
- package/es/atom/input-switch/index.d.ts.map +1 -1
- package/es/atom/input-switch/index.js +23 -11
- package/es/atom/input-switch/index.js.map +1 -1
- package/es/atom/select/index.d.ts +1 -0
- package/es/atom/select/index.d.ts.map +1 -1
- package/es/atom/select/index.js +13 -8
- package/es/atom/select/index.js.map +1 -1
- package/es/atom/tooltip/index.d.ts +1 -3
- package/es/atom/tooltip/index.d.ts.map +1 -1
- package/es/atom/tooltip/index.js +7 -17
- package/es/atom/tooltip/index.js.map +1 -1
- package/es/atom/tooltip/style.css +2 -10
- package/es/globals.d.js.map +1 -1
- package/es/molecule/brand-form-group/index.d.ts +8 -0
- package/es/molecule/cm-popin/types.d.ts +2 -0
- package/es/molecule/cm-popin/types.d.ts.map +1 -1
- package/es/molecule/draggable-list/index.d.ts +2 -0
- package/es/molecule/filters/filters-wrapper.d.ts.map +1 -1
- package/es/molecule/filters/filters-wrapper.js +4 -1
- package/es/molecule/filters/filters-wrapper.js.map +1 -1
- package/es/molecule/filters/index.d.ts +2 -0
- package/es/molecule/filters/index.d.ts.map +1 -1
- package/es/molecule/filters/index.js +10 -3
- package/es/molecule/filters/index.js.map +1 -1
- package/es/molecule/setup-section/index.d.ts +2 -0
- package/es/molecule/setup-section/index.d.ts.map +1 -1
- package/es/molecule/setup-sections/index.d.ts +2 -0
- package/es/molecule/setup-slide/index.d.ts +3 -0
- package/es/molecule/setup-slider/index.d.ts +3 -0
- package/es/molecule/video-player-mobile/index.native.d.ts +1 -1
- package/es/molecule/video-player-mobile/index.native.d.ts.map +1 -1
- package/es/molecule/video-player-mobile/index.native.js +26 -9
- package/es/molecule/video-player-mobile/index.native.js.map +1 -1
- package/es/organism/brand-form/index.d.ts +8 -0
- package/es/organism/mooc-header/index.d.ts.map +1 -1
- package/es/organism/mooc-header/index.js +4 -1
- package/es/organism/mooc-header/index.js.map +1 -1
- package/es/organism/review-slide/index.native.d.ts.map +1 -1
- package/es/organism/review-slide/index.native.js +32 -15
- package/es/organism/review-slide/index.native.js.map +1 -1
- package/es/organism/user-preferences/index.d.ts +2 -0
- package/es/organism/wizard-contents/index.d.ts +8 -0
- package/es/template/activity/index.d.ts +12 -11
- package/es/template/activity/index.d.ts.map +1 -1
- package/es/template/activity/index.js +6 -3
- package/es/template/activity/index.js.map +1 -1
- package/es/template/app-player/loading/index.d.ts +2 -0
- package/es/template/app-player/player/index.d.ts +4 -0
- package/es/template/app-player/player/slides/index.d.ts +2 -0
- package/es/template/app-player/player/slides/index.d.ts.map +1 -1
- package/es/template/app-player/popin-correction/index.d.ts +2 -0
- package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/es/template/app-player/popin-end/index.d.ts +2 -0
- package/es/template/app-review/index.d.ts +2 -0
- package/es/template/app-review/index.d.ts.map +1 -1
- package/es/template/app-review/player/prop-types.d.ts +2 -0
- package/es/template/app-review/player/prop-types.d.ts.map +1 -1
- package/es/template/app-review/prop-types.d.ts +2 -0
- package/es/template/app-review/prop-types.d.ts.map +1 -1
- package/es/template/back-office/brand-update/index.d.ts +18 -0
- package/es/template/common/dashboard/index.d.ts +2 -0
- package/es/template/common/search-page/index.d.ts +3 -0
- package/es/template/common/search-page/index.d.ts.map +1 -1
- package/es/template/common/search-page/index.js +6 -3
- package/es/template/common/search-page/index.js.map +1 -1
- package/lib/atom/input-search/index.d.ts.map +1 -1
- package/lib/atom/input-search/index.js +1 -0
- package/lib/atom/input-search/index.js.map +1 -1
- package/lib/atom/input-switch/index.d.ts +2 -0
- package/lib/atom/input-switch/index.d.ts.map +1 -1
- package/lib/atom/input-switch/index.js +22 -11
- package/lib/atom/input-switch/index.js.map +1 -1
- package/lib/atom/select/index.d.ts +1 -0
- package/lib/atom/select/index.d.ts.map +1 -1
- package/lib/atom/select/index.js +13 -8
- package/lib/atom/select/index.js.map +1 -1
- package/lib/atom/tooltip/index.d.ts +1 -3
- package/lib/atom/tooltip/index.d.ts.map +1 -1
- package/lib/atom/tooltip/index.js +7 -18
- package/lib/atom/tooltip/index.js.map +1 -1
- package/lib/atom/tooltip/style.css +2 -10
- package/lib/globals.d.js.map +1 -1
- package/lib/molecule/brand-form-group/index.d.ts +8 -0
- package/lib/molecule/cm-popin/types.d.ts +2 -0
- package/lib/molecule/cm-popin/types.d.ts.map +1 -1
- package/lib/molecule/draggable-list/index.d.ts +2 -0
- package/lib/molecule/filters/filters-wrapper.d.ts.map +1 -1
- package/lib/molecule/filters/filters-wrapper.js +4 -1
- package/lib/molecule/filters/filters-wrapper.js.map +1 -1
- package/lib/molecule/filters/index.d.ts +2 -0
- package/lib/molecule/filters/index.d.ts.map +1 -1
- package/lib/molecule/filters/index.js +9 -3
- package/lib/molecule/filters/index.js.map +1 -1
- package/lib/molecule/setup-section/index.d.ts +2 -0
- package/lib/molecule/setup-section/index.d.ts.map +1 -1
- package/lib/molecule/setup-sections/index.d.ts +2 -0
- package/lib/molecule/setup-slide/index.d.ts +3 -0
- package/lib/molecule/setup-slider/index.d.ts +3 -0
- package/lib/molecule/video-player-mobile/index.native.d.ts +1 -1
- package/lib/molecule/video-player-mobile/index.native.d.ts.map +1 -1
- package/lib/molecule/video-player-mobile/index.native.js +29 -9
- package/lib/molecule/video-player-mobile/index.native.js.map +1 -1
- package/lib/organism/brand-form/index.d.ts +8 -0
- package/lib/organism/mooc-header/index.d.ts.map +1 -1
- package/lib/organism/mooc-header/index.js +4 -1
- package/lib/organism/mooc-header/index.js.map +1 -1
- package/lib/organism/review-slide/index.native.d.ts.map +1 -1
- package/lib/organism/review-slide/index.native.js +31 -13
- package/lib/organism/review-slide/index.native.js.map +1 -1
- package/lib/organism/user-preferences/index.d.ts +2 -0
- package/lib/organism/wizard-contents/index.d.ts +8 -0
- package/lib/template/activity/index.d.ts +12 -11
- package/lib/template/activity/index.d.ts.map +1 -1
- package/lib/template/activity/index.js +6 -3
- package/lib/template/activity/index.js.map +1 -1
- package/lib/template/app-player/loading/index.d.ts +2 -0
- package/lib/template/app-player/player/index.d.ts +4 -0
- package/lib/template/app-player/player/slides/index.d.ts +2 -0
- package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-correction/index.d.ts +2 -0
- package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-end/index.d.ts +2 -0
- package/lib/template/app-review/index.d.ts +2 -0
- package/lib/template/app-review/index.d.ts.map +1 -1
- package/lib/template/app-review/player/prop-types.d.ts +2 -0
- package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
- package/lib/template/app-review/prop-types.d.ts +2 -0
- package/lib/template/app-review/prop-types.d.ts.map +1 -1
- package/lib/template/back-office/brand-update/index.d.ts +18 -0
- package/lib/template/common/dashboard/index.d.ts +2 -0
- package/lib/template/common/search-page/index.d.ts +3 -0
- package/lib/template/common/search-page/index.d.ts.map +1 -1
- package/lib/template/common/search-page/index.js +6 -3
- package/lib/template/common/search-page/index.js.map +1 -1
- package/locales/.mtslconfig.json +1 -0
- package/package.json +4 -2
- package/es/atom/battle-opponent/index.d.ts +0 -19
- package/es/atom/battle-opponent/index.d.ts.map +0 -1
- package/es/atom/battle-opponent/index.js +0 -52
- package/es/atom/battle-opponent/index.js.map +0 -1
- package/es/atom/battle-opponent/prop-types.d.ts +0 -19
- package/es/atom/battle-opponent/prop-types.d.ts.map +0 -1
- package/es/atom/battle-opponent/prop-types.js +0 -11
- package/es/atom/battle-opponent/prop-types.js.map +0 -1
- package/es/atom/battle-opponent/style.css +0 -126
- package/lib/atom/battle-opponent/index.d.ts +0 -19
- package/lib/atom/battle-opponent/index.d.ts.map +0 -1
- package/lib/atom/battle-opponent/index.js +0 -70
- package/lib/atom/battle-opponent/index.js.map +0 -1
- package/lib/atom/battle-opponent/prop-types.d.ts +0 -19
- package/lib/atom/battle-opponent/prop-types.d.ts.map +0 -1
- package/lib/atom/battle-opponent/prop-types.js +0 -20
- package/lib/atom/battle-opponent/prop-types.js.map +0 -1
- package/lib/atom/battle-opponent/style.css +0 -126
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React, { useMemo } from 'react';
|
|
4
|
-
import classnames from 'classnames';
|
|
5
|
-
import { NovaCompositionNavigationArrowRight as ArrowRight } from '@coorpacademy/nova-icons';
|
|
6
|
-
import ToolTip from '../tooltip';
|
|
7
|
-
import Provider, { GetTranslateFromContext } from '../provider';
|
|
8
|
-
import propTypes from './prop-types';
|
|
9
|
-
import style from './style.css';
|
|
10
|
-
|
|
11
|
-
const BattleOpponent = ({
|
|
12
|
-
isAlreadyEngaged,
|
|
13
|
-
isRandom,
|
|
14
|
-
userAvatarSrc,
|
|
15
|
-
onClick,
|
|
16
|
-
displayName,
|
|
17
|
-
tooltipText
|
|
18
|
-
}, legacyContext) => {
|
|
19
|
-
const translate = GetTranslateFromContext(legacyContext);
|
|
20
|
-
const wrapperClassnames = useMemo(() => classnames(style.card, style['opponent-card'], isRandom ? style.random : null), [isRandom]);
|
|
21
|
-
const displayNameClassnames = useMemo(() => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null), [isAlreadyEngaged]);
|
|
22
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, !isAlreadyEngaged && {
|
|
23
|
-
onClick
|
|
24
|
-
}, {
|
|
25
|
-
className: wrapperClassnames,
|
|
26
|
-
"data-testid": "battle-opponent-wrapper"
|
|
27
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
28
|
-
className: style.avatar
|
|
29
|
-
}, isRandom ? null : /*#__PURE__*/React.createElement("img", {
|
|
30
|
-
src: userAvatarSrc,
|
|
31
|
-
"aria-hidden": "true"
|
|
32
|
-
})), /*#__PURE__*/React.createElement("p", {
|
|
33
|
-
className: displayNameClassnames
|
|
34
|
-
}, " ", displayName), isAlreadyEngaged ? /*#__PURE__*/React.createElement(ToolTip, {
|
|
35
|
-
fontSize: 12,
|
|
36
|
-
iconSize: "big",
|
|
37
|
-
TooltipContent: tooltipText,
|
|
38
|
-
closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
|
|
39
|
-
iconContainerClassName: style.infoIconTooltip
|
|
40
|
-
}) : /*#__PURE__*/React.createElement(ArrowRight, {
|
|
41
|
-
className: style.rightArrow,
|
|
42
|
-
width: 16,
|
|
43
|
-
height: 16
|
|
44
|
-
}));
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
BattleOpponent.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
48
|
-
BattleOpponent.contextTypes = {
|
|
49
|
-
translate: Provider.childContextTypes.translate
|
|
50
|
-
};
|
|
51
|
-
export default BattleOpponent;
|
|
52
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","classnames","NovaCompositionNavigationArrowRight","ArrowRight","ToolTip","Provider","GetTranslateFromContext","propTypes","style","BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","legacyContext","translate","wrapperClassnames","card","random","displayNameClassnames","name","alreadyEngaged","avatar","infoIconTooltip","rightArrow","contextTypes","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowRight as ArrowRight} from '@coorpacademy/nova-icons';\nimport ToolTip from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n {\n isAlreadyEngaged,\n isRandom,\n userAvatarSrc,\n onClick,\n displayName,\n tooltipText\n }: BattleOpponentProps,\n legacyContext: WebContextValues\n) => {\n const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n const wrapperClassnames = useMemo(\n () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n [isRandom]\n );\n\n const displayNameClassnames = useMemo(\n () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n [isAlreadyEngaged]\n );\n\n return (\n <div\n {...(!isAlreadyEngaged && {onClick})}\n className={wrapperClassnames}\n data-testid=\"battle-opponent-wrapper\"\n >\n <div className={style.avatar}>\n {isRandom ? null : <img src={userAvatarSrc} aria-hidden=\"true\" />}\n </div>\n <p className={displayNameClassnames}> {displayName}</p>\n {isAlreadyEngaged ? (\n <ToolTip\n fontSize={12}\n iconSize=\"big\"\n TooltipContent={tooltipText}\n closeToolTipInformationTextAriaLabel={translate(\n 'Press the escape key to close the information text'\n )}\n iconContainerClassName={style.infoIconTooltip}\n />\n ) : (\n <ArrowRight className={style.rightArrow} width={16} height={16} />\n )}\n </div>\n );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,mCAAmC,IAAIC,UAA/C,QAAgE,0BAAhE;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,QAAP,IAAkBC,uBAAlB,QAAgD,aAAhD;AAEA,OAAOC,SAAP,MAA6C,cAA7C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,cAAc,GAAG,CACrB;EACEC,gBADF;EAEEC,QAFF;EAGEC,aAHF;EAIEC,OAJF;EAKEC,WALF;EAMEC;AANF,CADqB,EASrBC,aATqB,KAUlB;EACH,MAAMC,SAAkD,GAAGX,uBAAuB,CAACU,aAAD,CAAlF;EACA,MAAME,iBAAiB,GAAGlB,OAAO,CAC/B,MAAMC,UAAU,CAACO,KAAK,CAACW,IAAP,EAAaX,KAAK,CAAC,eAAD,CAAlB,EAAqCG,QAAQ,GAAGH,KAAK,CAACY,MAAT,GAAkB,IAA/D,CADe,EAE/B,CAACT,QAAD,CAF+B,CAAjC;EAKA,MAAMU,qBAAqB,GAAGrB,OAAO,CACnC,MAAMC,UAAU,CAACO,KAAK,CAACc,IAAP,EAAaZ,gBAAgB,GAAGF,KAAK,CAACe,cAAT,GAA0B,IAAvD,CADmB,EAEnC,CAACb,gBAAD,CAFmC,CAArC;EAKA,oBACE,wCACO,CAACA,gBAAD,IAAqB;IAACG;EAAD,CAD5B;IAEE,SAAS,EAAEK,iBAFb;IAGE,eAAY;EAHd,iBAKE;IAAK,SAAS,EAAEV,KAAK,CAACgB;EAAtB,GACGb,QAAQ,GAAG,IAAH,gBAAU;IAAK,GAAG,EAAEC,aAAV;IAAyB,eAAY;EAArC,EADrB,CALF,eAQE;IAAG,SAAS,EAAES;EAAd,QAAuCP,WAAvC,CARF,EASGJ,gBAAgB,gBACf,oBAAC,OAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAC,KAFX;IAGE,cAAc,EAAEK,WAHlB;IAIE,oCAAoC,EAAEE,SAAS,CAC7C,oDAD6C,CAJjD;IAOE,sBAAsB,EAAET,KAAK,CAACiB;EAPhC,EADe,gBAWf,oBAAC,UAAD;IAAY,SAAS,EAAEjB,KAAK,CAACkB,UAA7B;IAAyC,KAAK,EAAE,EAAhD;IAAoD,MAAM,EAAE;EAA5D,EApBJ,CADF;AAyBD,CA/CD;;AAiDAjB,cAAc,CAACF,SAAf,2CAA2BA,SAA3B;AAEAE,cAAc,CAACkB,YAAf,GAA8B;EAC5BV,SAAS,EAAEZ,QAAQ,CAACuB,iBAAT,CAA2BX;AADV,CAA9B;AAIA,eAAeR,cAAf"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
|
-
declare const propTypes: {
|
|
3
|
-
isAlreadyEngaged: PropTypes.Requireable<boolean>;
|
|
4
|
-
isRandom: PropTypes.Requireable<boolean>;
|
|
5
|
-
userAvatarSrc: PropTypes.Requireable<string>;
|
|
6
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
7
|
-
displayName: PropTypes.Requireable<string>;
|
|
8
|
-
tooltipText: PropTypes.Requireable<string>;
|
|
9
|
-
};
|
|
10
|
-
export declare type BattleOpponentProps = {
|
|
11
|
-
isAlreadyEngaged?: boolean;
|
|
12
|
-
isRandom?: boolean;
|
|
13
|
-
userAvatarSrc?: string;
|
|
14
|
-
onClick?: () => void;
|
|
15
|
-
displayName: string;
|
|
16
|
-
tooltipText?: string;
|
|
17
|
-
};
|
|
18
|
-
export default propTypes;
|
|
19
|
-
//# sourceMappingURL=prop-types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;;;CAOd,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
|
-
const propTypes = {
|
|
3
|
-
isAlreadyEngaged: PropTypes.bool,
|
|
4
|
-
isRandom: PropTypes.bool,
|
|
5
|
-
userAvatarSrc: PropTypes.string,
|
|
6
|
-
onClick: PropTypes.func,
|
|
7
|
-
displayName: PropTypes.string,
|
|
8
|
-
tooltipText: PropTypes.string
|
|
9
|
-
};
|
|
10
|
-
export default propTypes;
|
|
11
|
-
//# sourceMappingURL=prop-types.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.js","names":["PropTypes","propTypes","isAlreadyEngaged","bool","isRandom","userAvatarSrc","string","onClick","func","displayName","tooltipText"],"sources":["../../../src/atom/battle-opponent/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n isAlreadyEngaged: PropTypes.bool,\n isRandom: PropTypes.bool,\n userAvatarSrc: PropTypes.string,\n onClick: PropTypes.func,\n displayName: PropTypes.string,\n tooltipText: PropTypes.string\n};\n\nexport type BattleOpponentProps = {\n isAlreadyEngaged?: boolean;\n isRandom?: boolean;\n userAvatarSrc?: string;\n onClick?: () => void;\n displayName: string;\n tooltipText?: string;\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,MAAMC,SAAS,GAAG;EAChBC,gBAAgB,EAAEF,SAAS,CAACG,IADZ;EAEhBC,QAAQ,EAAEJ,SAAS,CAACG,IAFJ;EAGhBE,aAAa,EAAEL,SAAS,CAACM,MAHT;EAIhBC,OAAO,EAAEP,SAAS,CAACQ,IAJH;EAKhBC,WAAW,EAAET,SAAS,CAACM,MALP;EAMhBI,WAAW,EAAEV,SAAS,CAACM;AANP,CAAlB;AAkBA,eAAeL,SAAf"}
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
@value breakpoints: "../../variables/breakpoints.css";
|
|
2
|
-
@value mobile from breakpoints;
|
|
3
|
-
@value colors: "../../variables/colors.css";
|
|
4
|
-
@value white from colors;
|
|
5
|
-
@value dark from colors;
|
|
6
|
-
@value black from colors;
|
|
7
|
-
@value cm_grey_75 from colors;
|
|
8
|
-
@value medium from colors;
|
|
9
|
-
@value light from colors;
|
|
10
|
-
@value brand from colors;
|
|
11
|
-
|
|
12
|
-
.rightArrow {
|
|
13
|
-
position: flex;
|
|
14
|
-
padding: 9px;
|
|
15
|
-
cursor: pointer;
|
|
16
|
-
opacity: 1;
|
|
17
|
-
user-select: none;
|
|
18
|
-
text-align: right;
|
|
19
|
-
color: dark;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.card {
|
|
23
|
-
margin: 5px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.opponent-card {
|
|
27
|
-
flex: 1 1 350px;
|
|
28
|
-
height: 80px;
|
|
29
|
-
background-color: white;
|
|
30
|
-
box-shadow: 0 0 4px 1px rgba(0,0,0,0.10);
|
|
31
|
-
border-radius: 3px;
|
|
32
|
-
padding: 20px;
|
|
33
|
-
box-sizing: border-box;
|
|
34
|
-
display: flex;
|
|
35
|
-
align-items: center;
|
|
36
|
-
justify-content: space-between;
|
|
37
|
-
cursor: pointer;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.opponent-card .name {
|
|
41
|
-
font-family: 'Gilroy';
|
|
42
|
-
font-size: 15px;
|
|
43
|
-
font-weight: 700;
|
|
44
|
-
color: black;
|
|
45
|
-
flex-grow: 1;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
.opponent-card .rightArrow {
|
|
50
|
-
margin-left: 20px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* div:not(.random) */
|
|
54
|
-
.avatar {
|
|
55
|
-
width: 50px;
|
|
56
|
-
height: 50px;
|
|
57
|
-
border-radius: 50%;
|
|
58
|
-
overflow: hidden;
|
|
59
|
-
background-color: light;
|
|
60
|
-
margin-right: 20px;
|
|
61
|
-
flex-shrink: 0;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.avatar img {
|
|
65
|
-
width: 100%;
|
|
66
|
-
height: auto;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
.random {
|
|
71
|
-
color: medium;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.alreadyEngaged.name,
|
|
75
|
-
.random .name {
|
|
76
|
-
color: medium;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.random .avatar {
|
|
80
|
-
background-color: brand;
|
|
81
|
-
display: flex;
|
|
82
|
-
align-items: center;
|
|
83
|
-
justify-content: center;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.random .avatar:before {
|
|
87
|
-
content: '?';
|
|
88
|
-
font-family: 'Gilroy';
|
|
89
|
-
font-size: 32px;
|
|
90
|
-
font-weight: 600;
|
|
91
|
-
color: white;
|
|
92
|
-
text-align: center;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.random .avatar img {
|
|
96
|
-
display: none;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.opponent-card:hover {
|
|
100
|
-
background-color: cm_grey_75;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.card .infoIconTooltip {
|
|
104
|
-
background: transparent;
|
|
105
|
-
/* height: 100%; */
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
@media mobile {
|
|
109
|
-
.opponent-card {
|
|
110
|
-
width: 100%;
|
|
111
|
-
padding: 10px;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.opponent-card .avatar {
|
|
115
|
-
margin-right: 10px;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.opponent-card .rightArrow {
|
|
119
|
-
margin-left: 10px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.card {
|
|
123
|
-
margin: 0 0 10px;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { WebContextValues } from '../provider/web-context';
|
|
3
|
-
import { BattleOpponentProps } from './prop-types';
|
|
4
|
-
declare const BattleOpponent: {
|
|
5
|
-
({ isAlreadyEngaged, isRandom, userAvatarSrc, onClick, displayName, tooltipText }: BattleOpponentProps, legacyContext: WebContextValues): JSX.Element;
|
|
6
|
-
propTypes: {
|
|
7
|
-
isAlreadyEngaged: import("prop-types").Requireable<boolean>;
|
|
8
|
-
isRandom: import("prop-types").Requireable<boolean>;
|
|
9
|
-
userAvatarSrc: import("prop-types").Requireable<string>;
|
|
10
|
-
onClick: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
11
|
-
displayName: import("prop-types").Requireable<string>;
|
|
12
|
-
tooltipText: import("prop-types").Requireable<string>;
|
|
13
|
-
};
|
|
14
|
-
contextTypes: {
|
|
15
|
-
translate: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
export default BattleOpponent;
|
|
19
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;uFAQf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;CAsChC,CAAC;AAQF,eAAe,cAAc,CAAC"}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
exports.__esModule = true;
|
|
4
|
-
exports.default = void 0;
|
|
5
|
-
|
|
6
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
-
|
|
8
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
|
-
|
|
10
|
-
var _novaIcons = require("@coorpacademy/nova-icons");
|
|
11
|
-
|
|
12
|
-
var _tooltip = _interopRequireDefault(require("../tooltip"));
|
|
13
|
-
|
|
14
|
-
var _provider = _interopRequireWildcard(require("../provider"));
|
|
15
|
-
|
|
16
|
-
var _propTypes = _interopRequireDefault(require("./prop-types"));
|
|
17
|
-
|
|
18
|
-
var _style = _interopRequireDefault(require("./style.css"));
|
|
19
|
-
|
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
|
|
22
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
-
|
|
24
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
-
|
|
26
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
27
|
-
|
|
28
|
-
const BattleOpponent = ({
|
|
29
|
-
isAlreadyEngaged,
|
|
30
|
-
isRandom,
|
|
31
|
-
userAvatarSrc,
|
|
32
|
-
onClick,
|
|
33
|
-
displayName,
|
|
34
|
-
tooltipText
|
|
35
|
-
}, legacyContext) => {
|
|
36
|
-
const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
|
|
37
|
-
const wrapperClassnames = (0, _react.useMemo)(() => (0, _classnames.default)(_style.default.card, _style.default['opponent-card'], isRandom ? _style.default.random : null), [isRandom]);
|
|
38
|
-
const displayNameClassnames = (0, _react.useMemo)(() => (0, _classnames.default)(_style.default.name, isAlreadyEngaged ? _style.default.alreadyEngaged : null), [isAlreadyEngaged]);
|
|
39
|
-
return /*#__PURE__*/_react.default.createElement("div", _extends({}, !isAlreadyEngaged && {
|
|
40
|
-
onClick
|
|
41
|
-
}, {
|
|
42
|
-
className: wrapperClassnames,
|
|
43
|
-
"data-testid": "battle-opponent-wrapper"
|
|
44
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
45
|
-
className: _style.default.avatar
|
|
46
|
-
}, isRandom ? null : /*#__PURE__*/_react.default.createElement("img", {
|
|
47
|
-
src: userAvatarSrc,
|
|
48
|
-
"aria-hidden": "true"
|
|
49
|
-
})), /*#__PURE__*/_react.default.createElement("p", {
|
|
50
|
-
className: displayNameClassnames
|
|
51
|
-
}, " ", displayName), isAlreadyEngaged ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
52
|
-
fontSize: 12,
|
|
53
|
-
iconSize: "big",
|
|
54
|
-
TooltipContent: tooltipText,
|
|
55
|
-
closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
|
|
56
|
-
iconContainerClassName: _style.default.infoIconTooltip
|
|
57
|
-
}) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowRight, {
|
|
58
|
-
className: _style.default.rightArrow,
|
|
59
|
-
width: 16,
|
|
60
|
-
height: 16
|
|
61
|
-
}));
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
BattleOpponent.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
|
|
65
|
-
BattleOpponent.contextTypes = {
|
|
66
|
-
translate: _provider.default.childContextTypes.translate
|
|
67
|
-
};
|
|
68
|
-
var _default = BattleOpponent;
|
|
69
|
-
exports.default = _default;
|
|
70
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","legacyContext","translate","GetTranslateFromContext","wrapperClassnames","useMemo","classnames","style","card","random","displayNameClassnames","name","alreadyEngaged","avatar","infoIconTooltip","rightArrow","propTypes","contextTypes","Provider","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowRight as ArrowRight} from '@coorpacademy/nova-icons';\nimport ToolTip from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n {\n isAlreadyEngaged,\n isRandom,\n userAvatarSrc,\n onClick,\n displayName,\n tooltipText\n }: BattleOpponentProps,\n legacyContext: WebContextValues\n) => {\n const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n const wrapperClassnames = useMemo(\n () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n [isRandom]\n );\n\n const displayNameClassnames = useMemo(\n () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n [isAlreadyEngaged]\n );\n\n return (\n <div\n {...(!isAlreadyEngaged && {onClick})}\n className={wrapperClassnames}\n data-testid=\"battle-opponent-wrapper\"\n >\n <div className={style.avatar}>\n {isRandom ? null : <img src={userAvatarSrc} aria-hidden=\"true\" />}\n </div>\n <p className={displayNameClassnames}> {displayName}</p>\n {isAlreadyEngaged ? (\n <ToolTip\n fontSize={12}\n iconSize=\"big\"\n TooltipContent={tooltipText}\n closeToolTipInformationTextAriaLabel={translate(\n 'Press the escape key to close the information text'\n )}\n iconContainerClassName={style.infoIconTooltip}\n />\n ) : (\n <ArrowRight className={style.rightArrow} width={16} height={16} />\n )}\n </div>\n );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,MAAMA,cAAc,GAAG,CACrB;EACEC,gBADF;EAEEC,QAFF;EAGEC,aAHF;EAIEC,OAJF;EAKEC,WALF;EAMEC;AANF,CADqB,EASrBC,aATqB,KAUlB;EACH,MAAMC,SAAkD,GAAG,IAAAC,iCAAA,EAAwBF,aAAxB,CAA3D;EACA,MAAMG,iBAAiB,GAAG,IAAAC,cAAA,EACxB,MAAM,IAAAC,mBAAA,EAAWC,cAAA,CAAMC,IAAjB,EAAuBD,cAAA,CAAM,eAAN,CAAvB,EAA+CX,QAAQ,GAAGW,cAAA,CAAME,MAAT,GAAkB,IAAzE,CADkB,EAExB,CAACb,QAAD,CAFwB,CAA1B;EAKA,MAAMc,qBAAqB,GAAG,IAAAL,cAAA,EAC5B,MAAM,IAAAC,mBAAA,EAAWC,cAAA,CAAMI,IAAjB,EAAuBhB,gBAAgB,GAAGY,cAAA,CAAMK,cAAT,GAA0B,IAAjE,CADsB,EAE5B,CAACjB,gBAAD,CAF4B,CAA9B;EAKA,oBACE,iDACO,CAACA,gBAAD,IAAqB;IAACG;EAAD,CAD5B;IAEE,SAAS,EAAEM,iBAFb;IAGE,eAAY;EAHd,iBAKE;IAAK,SAAS,EAAEG,cAAA,CAAMM;EAAtB,GACGjB,QAAQ,GAAG,IAAH,gBAAU;IAAK,GAAG,EAAEC,aAAV;IAAyB,eAAY;EAArC,EADrB,CALF,eAQE;IAAG,SAAS,EAAEa;EAAd,QAAuCX,WAAvC,CARF,EASGJ,gBAAgB,gBACf,6BAAC,gBAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAC,KAFX;IAGE,cAAc,EAAEK,WAHlB;IAIE,oCAAoC,EAAEE,SAAS,CAC7C,oDAD6C,CAJjD;IAOE,sBAAsB,EAAEK,cAAA,CAAMO;EAPhC,EADe,gBAWf,6BAAC,8CAAD;IAAY,SAAS,EAAEP,cAAA,CAAMQ,UAA7B;IAAyC,KAAK,EAAE,EAAhD;IAAoD,MAAM,EAAE;EAA5D,EApBJ,CADF;AAyBD,CA/CD;;AAiDArB,cAAc,CAACsB,SAAf,2CAA2BA,kBAA3B;AAEAtB,cAAc,CAACuB,YAAf,GAA8B;EAC5Bf,SAAS,EAAEgB,iBAAA,CAASC,iBAAT,CAA2BjB;AADV,CAA9B;eAIeR,c"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
|
-
declare const propTypes: {
|
|
3
|
-
isAlreadyEngaged: PropTypes.Requireable<boolean>;
|
|
4
|
-
isRandom: PropTypes.Requireable<boolean>;
|
|
5
|
-
userAvatarSrc: PropTypes.Requireable<string>;
|
|
6
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
7
|
-
displayName: PropTypes.Requireable<string>;
|
|
8
|
-
tooltipText: PropTypes.Requireable<string>;
|
|
9
|
-
};
|
|
10
|
-
export declare type BattleOpponentProps = {
|
|
11
|
-
isAlreadyEngaged?: boolean;
|
|
12
|
-
isRandom?: boolean;
|
|
13
|
-
userAvatarSrc?: string;
|
|
14
|
-
onClick?: () => void;
|
|
15
|
-
displayName: string;
|
|
16
|
-
tooltipText?: string;
|
|
17
|
-
};
|
|
18
|
-
export default propTypes;
|
|
19
|
-
//# sourceMappingURL=prop-types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;;;CAOd,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
exports.__esModule = true;
|
|
4
|
-
exports.default = void 0;
|
|
5
|
-
|
|
6
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
7
|
-
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
-
|
|
10
|
-
const propTypes = {
|
|
11
|
-
isAlreadyEngaged: _propTypes.default.bool,
|
|
12
|
-
isRandom: _propTypes.default.bool,
|
|
13
|
-
userAvatarSrc: _propTypes.default.string,
|
|
14
|
-
onClick: _propTypes.default.func,
|
|
15
|
-
displayName: _propTypes.default.string,
|
|
16
|
-
tooltipText: _propTypes.default.string
|
|
17
|
-
};
|
|
18
|
-
var _default = propTypes;
|
|
19
|
-
exports.default = _default;
|
|
20
|
-
//# sourceMappingURL=prop-types.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.js","names":["propTypes","isAlreadyEngaged","PropTypes","bool","isRandom","userAvatarSrc","string","onClick","func","displayName","tooltipText"],"sources":["../../../src/atom/battle-opponent/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n isAlreadyEngaged: PropTypes.bool,\n isRandom: PropTypes.bool,\n userAvatarSrc: PropTypes.string,\n onClick: PropTypes.func,\n displayName: PropTypes.string,\n tooltipText: PropTypes.string\n};\n\nexport type BattleOpponentProps = {\n isAlreadyEngaged?: boolean;\n isRandom?: boolean;\n userAvatarSrc?: string;\n onClick?: () => void;\n displayName: string;\n tooltipText?: string;\n};\n\nexport default propTypes;\n"],"mappings":";;;;;AAAA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,gBAAgB,EAAEC,kBAAA,CAAUC,IADZ;EAEhBC,QAAQ,EAAEF,kBAAA,CAAUC,IAFJ;EAGhBE,aAAa,EAAEH,kBAAA,CAAUI,MAHT;EAIhBC,OAAO,EAAEL,kBAAA,CAAUM,IAJH;EAKhBC,WAAW,EAAEP,kBAAA,CAAUI,MALP;EAMhBI,WAAW,EAAER,kBAAA,CAAUI;AANP,CAAlB;eAkBeN,S"}
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
@value breakpoints: "../../variables/breakpoints.css";
|
|
2
|
-
@value mobile from breakpoints;
|
|
3
|
-
@value colors: "../../variables/colors.css";
|
|
4
|
-
@value white from colors;
|
|
5
|
-
@value dark from colors;
|
|
6
|
-
@value black from colors;
|
|
7
|
-
@value cm_grey_75 from colors;
|
|
8
|
-
@value medium from colors;
|
|
9
|
-
@value light from colors;
|
|
10
|
-
@value brand from colors;
|
|
11
|
-
|
|
12
|
-
.rightArrow {
|
|
13
|
-
position: flex;
|
|
14
|
-
padding: 9px;
|
|
15
|
-
cursor: pointer;
|
|
16
|
-
opacity: 1;
|
|
17
|
-
user-select: none;
|
|
18
|
-
text-align: right;
|
|
19
|
-
color: dark;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.card {
|
|
23
|
-
margin: 5px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.opponent-card {
|
|
27
|
-
flex: 1 1 350px;
|
|
28
|
-
height: 80px;
|
|
29
|
-
background-color: white;
|
|
30
|
-
box-shadow: 0 0 4px 1px rgba(0,0,0,0.10);
|
|
31
|
-
border-radius: 3px;
|
|
32
|
-
padding: 20px;
|
|
33
|
-
box-sizing: border-box;
|
|
34
|
-
display: flex;
|
|
35
|
-
align-items: center;
|
|
36
|
-
justify-content: space-between;
|
|
37
|
-
cursor: pointer;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.opponent-card .name {
|
|
41
|
-
font-family: 'Gilroy';
|
|
42
|
-
font-size: 15px;
|
|
43
|
-
font-weight: 700;
|
|
44
|
-
color: black;
|
|
45
|
-
flex-grow: 1;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
.opponent-card .rightArrow {
|
|
50
|
-
margin-left: 20px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/* div:not(.random) */
|
|
54
|
-
.avatar {
|
|
55
|
-
width: 50px;
|
|
56
|
-
height: 50px;
|
|
57
|
-
border-radius: 50%;
|
|
58
|
-
overflow: hidden;
|
|
59
|
-
background-color: light;
|
|
60
|
-
margin-right: 20px;
|
|
61
|
-
flex-shrink: 0;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.avatar img {
|
|
65
|
-
width: 100%;
|
|
66
|
-
height: auto;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
.random {
|
|
71
|
-
color: medium;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.alreadyEngaged.name,
|
|
75
|
-
.random .name {
|
|
76
|
-
color: medium;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.random .avatar {
|
|
80
|
-
background-color: brand;
|
|
81
|
-
display: flex;
|
|
82
|
-
align-items: center;
|
|
83
|
-
justify-content: center;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.random .avatar:before {
|
|
87
|
-
content: '?';
|
|
88
|
-
font-family: 'Gilroy';
|
|
89
|
-
font-size: 32px;
|
|
90
|
-
font-weight: 600;
|
|
91
|
-
color: white;
|
|
92
|
-
text-align: center;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.random .avatar img {
|
|
96
|
-
display: none;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.opponent-card:hover {
|
|
100
|
-
background-color: cm_grey_75;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.card .infoIconTooltip {
|
|
104
|
-
background: transparent;
|
|
105
|
-
/* height: 100%; */
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
@media mobile {
|
|
109
|
-
.opponent-card {
|
|
110
|
-
width: 100%;
|
|
111
|
-
padding: 10px;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.opponent-card .avatar {
|
|
115
|
-
margin-right: 10px;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.opponent-card .rightArrow {
|
|
119
|
-
margin-left: 10px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.card {
|
|
123
|
-
margin: 0 0 10px;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|