Page MenuHomePhabricator
Files F2770519

D8313.id28115.diff
No OneTemporary
Actions

D8313.id28115.diff
View Options

diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
--- a/web/avatars/emoji-avatar-selection-modal.css
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -15,6 +15,7 @@
}
div.tabBody {
+ height: 300px;
padding-top: 20px;
display: flex;
justify-content: center;
@@ -33,10 +34,6 @@
align-items: center;
}
-div.colorSelectorContainer {
- margin: 20px 60px;
-}
-
div.saveButtonContainer {
display: flex;
flex-direction: column;
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -139,10 +139,11 @@
</div>
</Tabs.Item>
<Tabs.Item id="color" header="Color">
- <div className={css.colorSelectorContainer}>
+ <div className={css.tabBody}>
<ColorSelector
currentColor={pendingAvatarColor}
onColorSelection={onColorSelection}
+ size="large"
/>
</div>
</Tabs.Item>
diff --git a/web/modals/threads/color-selector-button.css b/web/modals/threads/color-selector-button.css
--- a/web/modals/threads/color-selector-button.css
+++ b/web/modals/threads/color-selector-button.css
@@ -4,6 +4,12 @@
border-radius: 24px;
}
+.containerLarge {
+ height: 80px;
+ width: 80px;
+ border-radius: 40px;
+}
+
.active,
.container:hover {
background-color: var(--color-selector-active-bg);
@@ -15,3 +21,9 @@
border-radius: 16px;
cursor: pointer;
}
+
+div.colorSplotchLarge {
+ height: 60px;
+ width: 60px;
+ border-radius: 30px;
+}
diff --git a/web/modals/threads/color-selector-button.react.js b/web/modals/threads/color-selector-button.react.js
--- a/web/modals/threads/color-selector-button.react.js
+++ b/web/modals/threads/color-selector-button.react.js
@@ -11,15 +11,23 @@
+color: string,
+currentColor: string,
+onColorSelection: (hex: string) => void,
+ +size?: 'small' | 'large',
};
function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
- const { color, currentColor, onColorSelection } = props;
+ const { color, currentColor, onColorSelection, size } = props;
const active = tinycolor.equals(color, currentColor);
- const containerClassName = classNames(css.container, {
+ const containerClassName = classNames({
+ [css.container]: true,
+ [css.containerLarge]: size === 'large',
[css.active]: active,
});
+ const colorSplotchClassName = classNames({
+ [css.colorSplotch]: true,
+ [css.colorSplotchLarge]: size === 'large',
+ });
+
const colorSplotchStyle = React.useMemo(
() => ({
backgroundColor: `#${color}`,
@@ -33,7 +41,7 @@
return (
<Button onClick={onColorSplotchClicked} className={containerClassName}>
- <div className={css.colorSplotch} style={colorSplotchStyle} />
+ <div className={colorSplotchClassName} style={colorSplotchStyle} />
</Button>
);
}
diff --git a/web/modals/threads/color-selector.css b/web/modals/threads/color-selector.css
--- a/web/modals/threads/color-selector.css
+++ b/web/modals/threads/color-selector.css
@@ -9,3 +9,7 @@
width: 100%;
padding: 6px 0;
}
+
+div.containerLarge {
+ row-gap: 36px;
+}
diff --git a/web/modals/threads/color-selector.react.js b/web/modals/threads/color-selector.react.js
--- a/web/modals/threads/color-selector.react.js
+++ b/web/modals/threads/color-selector.react.js
@@ -1,5 +1,6 @@
// @flow
+import classNames from 'classnames';
import * as React from 'react';
import { selectedThreadColors } from 'lib/shared/color-utils.js';
@@ -10,9 +11,10 @@
type ColorSelectorProps = {
+currentColor: string,
+onColorSelection: (hex: string) => void,
+ +size?: 'small' | 'large',
};
function ColorSelector(props: ColorSelectorProps): React.Node {
- const { currentColor, onColorSelection } = props;
+ const { currentColor, onColorSelection, size } = props;
const colorSelectorButtons = React.useMemo(
() =>
@@ -22,12 +24,18 @@
color={color}
currentColor={currentColor}
onColorSelection={onColorSelection}
+ size={size}
/>
)),
- [currentColor, onColorSelection],
+ [currentColor, onColorSelection, size],
);
- return <div className={css.container}>{colorSelectorButtons}</div>;
+ const containerClassName = classNames({
+ [css.container]: true,
+ [css.containerLarge]: size === 'large',
+ });
+
+ return <div className={containerClassName}>{colorSelectorButtons}</div>;
}
export default ColorSelector;

File Metadata

Mime Type
text/plain
Expires
Fri, Sep 20, 8:45 PM (22 h, 7 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2154220
Default Alt Text
D8313.id28115.diff (4 KB)

Event Timeline