Skip to content

Commit f6495d1

Browse files
testflyjetstestflyjets
authored
Merge pull request #76 from topcoder-platform/PROD-1070_restyle-settings
PROD-1070 settings desktop - PROD-1069_re-style
2 parents 7541c8f + 062f74f commit f6495d1

34 files changed

+422
-166
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"react": "^17.0.2",
1212
"react-dom": "^17.0.2",
1313
"react-gtm-module": "^2.0.11",
14+
"react-responsive-modal": "^6.2.0",
1415
"react-router-dom": "^6.2.1",
1516
"react-scripts": "5.0.0",
1617
"react-toastify": "^8.2.0",

‎src/header/Header.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,8 @@
2828
@include xl {
2929
grid-template-columns: $left-col-width-xl 1fr auto;
3030
}
31+
32+
@include xxl {
33+
grid-template-columns: $left-col-width-xl 1fr auto;
34+
}
3135
}

‎src/lib/avatar/Avatar.module.scss‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
@import '../../lib/styles';
22

33
$avatar-size-sm: 32px;
4+
$border-size-sm: $border;
45
$avatar-size-xl: 120px;
6+
$border-size-xl: $pad-xs;
57

68
.avatar-container {
79
overflow: hidden;
810
background-color: $tc-white;
911
border-radius: 50%;
1012

1113
&.sm {
12-
height: calc($avatar-size-sm + 2 * $border);
13-
width: calc($avatar-size-sm + 2 * $border);
14+
height: calc($avatar-size-sm + 2 * $border-size-sm);
15+
width: calc($avatar-size-sm + 2 * $border-size-sm);
1416
}
1517

1618
&.xl {
17-
height: calc($avatar-size-xl + 2 * $border);
18-
width: calc($avatar-size-xl + 2 * $border);
19+
height: calc($avatar-size-xl + 2 * $border-size-xl);
20+
width: calc($avatar-size-xl + 2 * $border-size-xl);
1921
}
2022

2123
.avatar {
2224
background-color: $tc-white;
2325
border-radius: 50%;
24-
border: 2px solid $tc-white;
26+
border: solid $tc-white;
2527

2628
&.sm {
29+
border-width: $border-size-sm;
2730
height: $avatar-size-sm;
2831
width: $avatar-size-sm;
2932
}
3033

3134
&.xl {
35+
border-width: $border-size-xl;
3236
height: $avatar-size-xl;
3337
width: $avatar-size-xl;
3438
}
@@ -48,7 +52,8 @@ $avatar-size-xl: 120px;
4852
}
4953

5054
&.xl {
51-
font-size: 48px;
55+
@extend h1;
56+
padding: 0;
5257
}
5358
}
5459
}

‎src/lib/button/Button.module.scss‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
line-height: 24px;
1414

1515
&:focus {
16-
outline: 2px solid $turq-140;
16+
outline: $border solid $turq-140;
1717
}
1818

1919
&.button-sm {
@@ -98,6 +98,43 @@
9898
}
9999
}
100100

101+
&.link {
102+
margin: 0;
103+
padding: 0;
104+
display: flex;
105+
align-items: center;
106+
font-size: 16px;
107+
color: $turq-160;
108+
background-color: $tc-white;
109+
border: none;
110+
outline: none;
111+
border-radius: 0;
112+
113+
&:focus {
114+
outline: $border solid $turq-140;
115+
}
116+
117+
&:hover {
118+
color: $turq-120;
119+
}
120+
121+
&:active {
122+
color: $turq-180;
123+
}
124+
125+
&.disabled {
126+
color: $black-60;
127+
background-color: $tc-white;
128+
border-color: $black-5;
129+
}
130+
131+
svg {
132+
margin-left: $pad-xs;
133+
height: $pad-lg;
134+
width: $pad-lg;
135+
}
136+
}
137+
101138
&.text {
102139
border-color: transparent;
103140
}

‎src/lib/button/Button.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import classNames from 'classnames'
22
import { FC } from 'react'
33
import { Link } from 'react-router-dom'
44

5+
import { IconOutline } from '../svgs'
6+
57
import styles from './Button.module.scss'
68

79
export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl'
8-
export type ButtonStyle = 'primary' | 'secondary' | 'tertiary' | 'text'
10+
export type ButtonStyle = 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
911
export type ButtonType = 'button' | 'submit'
1012

1113
export interface ButtonProps {
@@ -61,6 +63,7 @@ const Button: FC<ButtonProps> = (props: ButtonProps) => {
6163
type={props.type || 'button'}
6264
>
6365
{props.label}
66+
{props.buttonStyle === 'link' && <IconOutline.ArrowRightIcon />}
6467
</button>
6568
)
6669
}

‎src/lib/content-layout/ContentLayout.module.scss‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,33 @@
22

33
.content {
44
@include content-height;
5-
padding: 0;
5+
padding: 0 $pad-content-lg;
66
display: grid;
77
grid-template-columns: 1fr;
88
justify-content: center;
99

10+
@include xxl {
11+
padding: 0;
12+
}
13+
14+
@include md {
15+
padding: 0 $pad-xxl;
16+
}
17+
18+
@include ltesm {
19+
padding: 0;
20+
}
21+
1022
.content-outer {
1123
display: flex;
1224
justify-content: center;
1325

1426
.content-inner {
1527
flex: 1;
16-
max-width: $xl-max-content;
28+
max-width: $xl-max;
1729
padding: 0;
30+
display: flex;
31+
flex-direction: column;
1832
}
1933
}
2034
}

‎src/lib/form/Form.module.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
@import '../../lib/styles';
22

3-
.form-fields {
4-
display: grid;
5-
grid-template-columns: .5fr;
6-
justify-content: flex-end;
3+
form {
4+
flex: 1;
5+
display: flex;
6+
flex-direction: column;
77

8-
@include ltemd {
8+
.form-fields {
9+
display: grid;
910
grid-template-columns: 1fr;
1011
justify-content: center;
1112
}

‎src/lib/form/Form.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import {
88
FormErrorMessage,
99
formGetInputModel,
1010
formInitializeValues,
11+
formOnChange,
1112
formReset,
1213
formSubmitAsync,
13-
formValidateAndUpdateAsync,
1414
} from './form-functions'
1515
import { InputText, InputTextarea } from './form-input'
1616
import { FormInputModel } from './form-input.model'
@@ -22,13 +22,14 @@ interface FormProps<ValueType, RequestType> {
2222
readonly requestGenerator: (inputs: ReadonlyArray<FormInputModel>) => RequestType
2323
readonly resetOnError: boolean
2424
readonly save: (value: RequestType) => Promise<void>
25+
readonly succeeded?: () => void
2526
}
2627

2728
const Form: <ValueType extends any, RequestType extends any>(props: FormProps<ValueType, RequestType>) => JSX.Element
2829
= <ValueType extends any, RequestType extends any>(props: FormProps<ValueType, RequestType>) => {
2930

3031
const [disableSave, setDisableSave]: [boolean, Dispatch<SetStateAction<boolean>>]
31-
= useState<boolean>(true)
32+
= useState<boolean>(false)
3233

3334
const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
3435
= useState<FormDefinition>({ ...props.formDef })
@@ -48,14 +49,14 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
4849
}
4950

5051
async function onChange(event: FormEvent<HTMLFormElement>): Promise<void> {
51-
const isValid: boolean = await formValidateAndUpdateAsync(event, formDef.inputs)
52+
const isValid: boolean = await formOnChange(event, formDef.inputs)
5253
setFormDef({ ...formDef })
5354
setDisableSave(!isValid)
5455
}
5556

5657
function onFocus(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>): void {
5758
const inputDef: FormInputModel = formGetInputModel(props.formDef.inputs, event.target.name)
58-
inputDef.dirtyOrTouched = true
59+
inputDef.touched = true
5960
setFormDef({ ...formDef })
6061
}
6162

@@ -67,7 +68,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
6768

6869
async function onSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
6970
const values: RequestType = props.requestGenerator(formDef.inputs)
70-
formSubmitAsync<RequestType, void>(event, formDef.inputs, props.formDef.title, values, props.save, setDisableSave)
71+
formSubmitAsync<RequestType, void>(event, formDef.inputs, props.formDef.title, values, props.save, setDisableSave, props.succeeded)
7172
.then(() => {
7273
setFormKey(Date.now())
7374
formReset(formDef.inputs, props.formValues)
@@ -85,9 +86,10 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
8586

8687
formInitializeValues(formDef.inputs, props.formValues)
8788

88-
const formInputs: Array<JSX.Element> = props.formDef.inputs
89-
.map(input => formGetInputModel(props.formDef.inputs, input.name))
89+
const formInputs: Array<JSX.Element> = formDef.inputs
90+
.map(input => formGetInputModel(formDef.inputs, input.name))
9091
.map((inputModel, index) => {
92+
const tabIndex: number = inputModel.notTabbable ? -1 : index + 1 + (formDef.tabIndexStart || 0)
9193
switch (inputModel.type) {
9294
case 'textarea':
9395
return (
@@ -96,7 +98,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
9698
key={inputModel.name}
9799
onBlur={onBlur}
98100
onFocus={onFocus}
99-
tabIndex={inputModel.notTabbable ? -1 : index + 1}
101+
tabIndex={tabIndex}
100102
value={inputModel.value}
101103
/>
102104
)
@@ -107,7 +109,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
107109
key={inputModel.name}
108110
onBlur={onBlur}
109111
onFocus={onFocus}
110-
tabIndex={inputModel.notTabbable ? -1 : index + 1}
112+
tabIndex={tabIndex}
111113
type={inputModel.type || 'text'}
112114
value={inputModel.value}
113115
/>
@@ -116,7 +118,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
116118

117119
})
118120

119-
const buttons: Array<JSX.Element> = props.formDef.buttons
121+
const buttons: Array<JSX.Element> = formDef.buttons
120122
.map((button, index) => {
121123
// if this is a reset button, set its onclick to reset
122124
if (!!button.isReset) {
@@ -130,7 +132,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
130132
{...button}
131133
disable={button.isSave && disableSave}
132134
key={button.label}
133-
tabIndex={button.notTabble ? -1 : index + props.formDef.inputs.length}
135+
tabIndex={button.notTabble ? -1 : index + formDef.inputs.length + (formDef.tabIndexStart || 0)}
134136
/>
135137
)
136138
})
@@ -145,12 +147,16 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
145147

146148
<h2>{props.formDef.title}</h2>
147149

150+
<hr />
151+
148152
<div className={styles['form-fields']}>
149153
{formInputs}
150154
</div>
151155

152-
<div className='button-container'>
153-
{buttons}
156+
<div className='button-container-outer'>
157+
<div className='button-container-inner'>
158+
{buttons}
159+
</div>
154160
</div>
155161

156162
</form>

‎src/lib/form/form-button.model.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface FormButton {
77
readonly label: string
88
readonly notTabble?: boolean
99
readonly onClick?: (event?: any) => void
10-
route?: string
10+
readonly route?: string
1111
readonly size?: ButtonSize
1212
readonly type?: ButtonType
1313
readonly url?: string

‎src/lib/form/form-definition.model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ import { FormInputModel } from './form-input.model'
44
export interface FormDefinition {
55
readonly buttons: ReadonlyArray<FormButton>
66
readonly inputs: ReadonlyArray<FormInputModel>
7+
readonly tabIndexStart?: number
78
readonly title: string
89
}

0 commit comments

Comments
 (0)