Skip to content

Commit babf8e9

Browse files
clowreedclowreed
authored
Signup flow component style updates (#82)
* fix: Fix ArrowUp icon * fix: Applied latest changes based from feedback
1 parent 36326f0 commit babf8e9

File tree

8 files changed

+141
-30
lines changed

8 files changed

+141
-30
lines changed

‎components/Icons.es6.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1944,8 +1944,9 @@ function ArrowCircleUp ({ className, width='16', height='16', color = '#766bff',
19441944
function ArrowUp ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 16 16' }) {
19451945
return (
19461946
<svg width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
1947-
<path d="M6.0001 12.8811V1.42867M6.0001 1.42867V1.7382M6.0001 1.42867L10.3334 5.76203M6.0001 1.42867L1.66677 5.76203" stroke={color} strokeWidth="2" strokeMiterlimit="10" strokeLinecap={color} />
1947+
<path d="M6.0001 12.8811V1.42867M6.0001 1.42867V1.7382M6.0001 1.42867L10.3334 5.76203M6.0001 1.42867L1.66677 5.76203" stroke={color} strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" />
19481948
</svg>
1949+
19491950
)
19501951
}
19511952

‎components/form/button/Button.es6.js‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@ import classnames from 'classnames'
55
/**
66
* Buttons trigger actions when clicked.
77
*/
8-
function Button ({ label, badge, primary, danger, loading, superSmall, small, large, wide, icon, iconWithLabel, active, block, disabled, onClick, className, buttonRef, id, alternative, chevron, type, title, round, roundedRectangle, hasSelection, selected, recording, highlighted }) {
8+
function Button({ label, badge, primary, danger,
9+
loading, superSmall, small, large, wide,
10+
icon, iconWithLabel, active, block, disabled,
11+
onClick, className, buttonRef, id, alternative,
12+
chevron, type, title, round, roundedRectangle,
13+
hasSelection, selected, recording, processing,
14+
highlighted, disabledStyle,
15+
}) {
916

1017
const renderButtonContent = () => {
1118
// Icon with label
@@ -56,7 +63,10 @@ function Button ({ label, badge, primary, danger, loading, superSmall, small, la
5663
'button--has-selection': hasSelection,
5764
'button--selected': selected,
5865
'button--recording-indicator': recording && round,
66+
'button--processing-indicator': processing && round,
5967
'button--highlighted': highlighted && (round || roundedRectangle),
68+
'button--disabled-dark': disabled && disabledStyle === 'dark' && (roundedRectangle || round),
69+
'button--disabled-light': disabled && disabledStyle === 'light' && (roundedRectangle || round),
6070
active,
6171
}, className)}
6272
disabled={disabled}
@@ -75,6 +85,10 @@ function Button ({ label, badge, primary, danger, loading, superSmall, small, la
7585
{chevron && (
7686
<span className="button__chevron"></span>
7787
)}
88+
89+
{processing && round && (
90+
<span className="button__processing-indicator"></span>
91+
)}
7892
</button>)
7993
}
8094

@@ -103,7 +117,9 @@ Button.defaultProps = {
103117
hasSelection: false,
104118
selected: false,
105119
recording: false,
120+
processing: false,
106121
highlighted: false,
122+
disabledStyle: 'light',
107123
}
108124

109125
Button.propTypes = {
@@ -209,10 +225,20 @@ Button.propTypes = {
209225
*/
210226
recording: PropTypes.bool,
211227

228+
/**
229+
* Whether this button is processing
230+
*/
231+
processing: PropTypes.bool,
232+
212233
/**
213234
* Whether this button is highlighted
214235
*/
215236
highlighted: PropTypes.bool,
237+
238+
/**
239+
* Style for the disabled button
240+
*/
241+
disabledStyle: PropTypes.oneOf(['dark', 'light']),
216242
}
217243

218244
export default Button

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@b12/metronome",
3-
"version": "1.1.24",
3+
"version": "1.1.25",
44
"description": "",
55
"main": "index.es6.js",
66
"scripts": {

‎src/react-demo/Buttons.es6.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,20 +92,20 @@ function Buttons () {
9292
</div>
9393

9494
<CodeExample code={`
95-
<Button round disabled icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" />} />
96-
<Button round highlighted icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" />} />
95+
<Button round disabled disabledStyle="dark" icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" color="#ffffff" />} />
96+
<Button round highlighted icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" color="#ffffff" />} />
9797
<Button round loading highlighted icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" />} />
9898
<Button round highlighted icon={<Stop width={10} height={10} viewBox="0 0 10 10" />} />
99-
<Button round disabled icon={<Microphone width={14} height={14} viewBox="0 0 11 13" />} />
99+
<Button round disabled disabledStyle="light" icon={<Microphone width={14} height={14} viewBox="0 0 11 13" />} />
100100
<Button round icon={<Microphone width={14} height={14} viewBox="0 0 11 13" />} />
101101
<Button round recording icon={<Microphone width={14} height={14} viewBox="0 0 11 13" />} />
102102
`}
103103
>
104-
<Button round disabled icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" />} />
105-
<Button round highlighted icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" />} />
104+
<Button round disabled disabledStyle="dark" icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" color="#ffffff" />} />
105+
<Button round highlighted icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" color="#ffffff" />} />
106106
<Button round loading highlighted icon={<ArrowUp width={14} height={14} viewBox="0 0 12 14" />} />
107107
<Button round highlighted icon={<Stop width={10} height={10} viewBox="0 0 10 10" />} />
108-
<Button round disabled icon={<Microphone width={14} height={14} viewBox="0 0 11 13" />} />
108+
<Button round disabled disabledStyle="light" icon={<Microphone width={14} height={14} viewBox="0 0 11 13" />} />
109109
<Button round icon={<Microphone width={14} height={14} viewBox="0 0 11 13" />} />
110110
<Button round recording icon={<Microphone width={14} height={14} viewBox="0 0 11 13" />} />
111111
<br /><br />

‎src/react-demo/PromptInput.js‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -97,28 +97,28 @@ export default function PromptInputPage () {
9797
{
9898
id: 'website-style',
9999
label: 'Website style',
100-
icon: <Website width={14} height={14} />,
100+
icon: <Website width={14} height={14} color="#84839c" />,
101101
itemOptions: mockWebsiteStyleOptions,
102102
disabled: isProcessing || isRecording,
103103
},
104104
{
105105
id: 'color',
106106
label: 'Color',
107-
icon: <EditColor width={14} height={14} />,
107+
icon: <EditColor width={14} height={14} color="#84839c" />,
108108
itemOptions: [{ value: 'none', color: null, label: 'None' }, ...mockColorOptions],
109109
disabled: isProcessing || isRecording,
110110
},
111111
{
112112
id: 'image-style',
113113
label: 'Image style',
114-
icon: <AiImage width={14} height={14} viewBox='0 0 14 12' />,
114+
icon: <AiImage width={14} height={14} viewBox='0 0 14 12' color="#84839c" />,
115115
itemOptions: mockImageStyleOptions,
116116
disabled: isProcessing || isRecording,
117117
},
118118
{
119119
id: 'enhance-prompt',
120120
label: 'Enhance prompt',
121-
icon: <AiAssist width={14} height={14} />,
121+
icon: <AiAssist width={14} height={14} color="#84839c" />,
122122
disabled: isTextareaEmpty || isProcessing || isRecording,
123123
isActive: !isTextareaEmpty,
124124
isEnhancing: isEnhancingPrompt || (isTypingPrompt && !isTypingFromRecording),
@@ -188,16 +188,22 @@ export default function PromptInputPage () {
188188
setSelectedImageStyleTab(tabId)
189189
}
190190

191+
// No need to add a progress state - the CSS animation handles the visual progress
192+
191193
const handleEnhancePrompt = () => {
192194
if (isProcessing || isRecording) return
193195

194196
resetTyping()
195-
196197
setCanTriggerSend(false)
197-
198198
setIsEnhancingPrompt(true)
199199
setIsSubmitting(true)
200200

201+
// The duration of the CSS animation (process-circle) should match this timeout
202+
const processDuration = 1000
203+
204+
// Update the CSS variable for animation duration dynamically to match the process time
205+
document.documentElement.style.setProperty('--processing-duration', `${processDuration}ms`)
206+
201207
enhancePromptTimerRef.current = window.setTimeout(() => {
202208
setIsEnhancingPrompt(false)
203209
setIsSubmitting(false)
@@ -214,7 +220,7 @@ export default function PromptInputPage () {
214220
}
215221

216222
enhancePromptTimerRef.current = null
217-
}, 1000)
223+
}, processDuration)
218224
}
219225

220226
const handleMicrophoneClick = () => {
@@ -381,7 +387,7 @@ export default function PromptInputPage () {
381387
roundedRectangle
382388
disabled={isProcessing || isRecording}
383389
iconWithLabel
384-
icon={<Website width={14} height={14} />}
390+
icon={<Website width={14} height={14} color="#84839c" />}
385391
label="Website style"
386392
selected={activePopover === 'websiteStyle'}
387393
/>
@@ -408,7 +414,7 @@ export default function PromptInputPage () {
408414
roundedRectangle
409415
disabled={isProcessing || isRecording}
410416
iconWithLabel
411-
icon={<EditColor width={14} height={14} />}
417+
icon={<EditColor width={14} height={14} color="#84839c"/>}
412418
label="Color" viewBox="0 0 14 14"
413419
selected={activePopover === 'color'}
414420
/>
@@ -430,7 +436,7 @@ export default function PromptInputPage () {
430436
roundedRectangle
431437
disabled={isProcessing || isRecording}
432438
iconWithLabel
433-
icon={<AiImage width={14} height={14} viewBox='0 0 14 12' />}
439+
icon={<AiImage width={14} height={14} viewBox='0 0 14 12' color="#84839c" />}
434440
label="Image style"
435441
selected={activePopover === 'imageStyle'}
436442
/>
@@ -452,7 +458,7 @@ export default function PromptInputPage () {
452458
selected={isEnhancingPrompt || (isTypingPrompt && !isTypingFromRecording)}
453459
onClick={handleEnhancePrompt}
454460
iconWithLabel
455-
icon={<AiAssist width={14} height={14} />}
461+
icon={<AiAssist width={14} height={14} color="#84839c" />}
456462
label="Enhance Prompt"
457463
className="desktop-only"
458464
/>
@@ -466,8 +472,7 @@ export default function PromptInputPage () {
466472
className="mobile-only"
467473
roundedRectangle
468474
disabled={isProcessing || isRecording}
469-
icon={<ThreeDots viewBox="0 0 23 7" width="16" height="5" />}
470-
selected={activePopover === 'mobileOptions'}
475+
icon={<ThreeDots viewBox="0 0 23 7" width="16" height="5" color="#84839c" />}
471476
/>
472477
}
473478
>
@@ -493,14 +498,16 @@ export default function PromptInputPage () {
493498
disabled={isProcessing && !isTypingFromRecording}
494499
recording={isRecording}
495500
onClick={handleMicrophoneClick}
496-
icon={<Microphone width={14} height={14} viewBox="0 0 11 13" />}
501+
icon={<Microphone width={14} height={14} viewBox="0 0 11 13" color="#ffffff" />}
497502
/>
498503
<Button
499504
round
500505
disabled={!isSubmitButtonActive || isRecording || isTypingFromRecording}
501506
loading={isSubmitting && !isEnhancingPrompt}
502507
highlighted={isSubmitButtonActive}
503-
icon={ isSubmitting ? <Stop width={10} height={10} viewBox="0 0 10 10" /> :<ArrowUp width={14} height={14} viewBox="0 0 12 14" />}
508+
disabledStyle="dark"
509+
processing={isEnhancingPrompt}
510+
icon={ isSubmitting ? <Stop width={10} height={10} viewBox="0 0 10 10" color="#ffffff" /> : <ArrowUp width={14} height={14} viewBox="0 0 12 14" color="#ffffff" />}
504511
onClick={handleSubmitButtonClick}
505512
/>
506513
</PromptInputCommands>

‎style/_buttons.scss‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@
108108

109109
&:disabled {
110110
background: $ds-body-lighter-color;
111+
opacity: 0.5;
111112
}
112113

113114
&:enabled {
@@ -282,6 +283,32 @@
282283
fill: $ds-brand-medium-color;
283284
}
284285
}
286+
287+
&:not(.button--selected):hover {
288+
color: $ds-body-lighter-color;
289+
}
290+
}
291+
}
292+
293+
// Disabled styles for round buttons
294+
.button--round.button--disabled-dark {
295+
opacity: 1 !important;
296+
pointer-events: none;
297+
cursor: not-allowed;
298+
}
299+
300+
.button--round.button--disabled-light {
301+
background-color: $ds-ui-background-color !important;
302+
color: $ds-body-lighter-color;
303+
opacity: 1 !important;
304+
pointer-events: none;
305+
cursor: not-allowed;
306+
> svg {
307+
path,
308+
rect,
309+
circle {
310+
fill: $ds-body-lighter-color;
311+
}
285312
}
286313
}
287314

@@ -492,3 +519,52 @@
492519
opacity: 0;
493520
}
494521
}
522+
523+
.button__processing-indicator {
524+
position: absolute;
525+
top: -4px;
526+
left: -4px;
527+
width: calc(100% + 8px);
528+
height: calc(100% + 8px);
529+
border-radius: 50%;
530+
border: 2px solid transparent;
531+
border-top-color: $ds-brand-medium-color;
532+
animation: process-circle var(--processing-duration) linear forwards;
533+
pointer-events: none;
534+
box-sizing: border-box;
535+
}
536+
537+
@keyframes process-circle {
538+
0% {
539+
transform: rotate(0deg);
540+
border-top-color: $ds-brand-medium-color;
541+
border-right-color: transparent;
542+
border-bottom-color: transparent;
543+
border-left-color: transparent;
544+
}
545+
25% {
546+
transform: rotate(90deg);
547+
border-top-color: $ds-brand-medium-color;
548+
border-right-color: $ds-brand-medium-color;
549+
border-bottom-color: transparent;
550+
border-left-color: transparent;
551+
}
552+
50% {
553+
transform: rotate(180deg);
554+
border-top-color: $ds-brand-medium-color;
555+
border-right-color: $ds-brand-medium-color;
556+
border-bottom-color: $ds-brand-medium-color;
557+
border-left-color: transparent;
558+
}
559+
75% {
560+
transform: rotate(270deg);
561+
border-top-color: $ds-brand-medium-color;
562+
border-right-color: $ds-brand-medium-color;
563+
border-bottom-color: $ds-brand-medium-color;
564+
border-left-color: $ds-brand-medium-color;
565+
}
566+
100% {
567+
transform: rotate(360deg);
568+
border-color: $ds-brand-medium-color;
569+
}
570+
}

‎style/base.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
@import 'forms/RangeSlider';
3333
@import 'forms/ButtonGroup';
3434
@import 'forms/ToggleButton';
35-
@import 'forms/PromptInput.scss';
35+
@import 'forms/PromptInput';
3636

3737
// Custom datetime picker css needs to be imported after react-datepicker
3838
// library css file so custom css is not overwritten by defaults.
@@ -60,7 +60,7 @@
6060
@import 'components/StatusIndicator';
6161
@import 'components/TabbedNavigation';
6262
@import 'components/NavIndicator';
63-
@import 'components/Popover.scss';
64-
@import 'components/ColorSwatchPickerDesktop.scss';
65-
@import 'components/SwitchTabPicker.scss';
66-
@import 'components/MobileOptionsPopover.scss';
63+
@import 'components/Popover';
64+
@import 'components/ColorSwatchPickerDesktop';
65+
@import 'components/SwitchTabPicker';
66+
@import 'components/MobileOptionsPopover';

‎style/components/Popover.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
position: absolute;
88
bottom: 100%;
99
left: 0;
10-
margin-bottom: 8px;
10+
margin-bottom: 2px;
1111
background: $ds-ui-lightest-color;
1212
border: $ds-card-border;
1313
border-radius: 6px;
@@ -18,5 +18,6 @@
1818

1919
@media (min-width: 993px) {
2020
padding: 12px;
21+
margin-bottom: 8px;
2122
}
2223
}

0 commit comments

Comments
 (0)