Skip to content

Commit 3c30449

Browse files
silviyabotevasilviyaboteva
committed
chore: update styles of the stackblitz app
1 parent aab26f3 commit 3c30449

File tree

4 files changed

+67
-67
lines changed

4 files changed

+67
-67
lines changed

‎examples/kendo-react-stackblitz-app/src/components/FormsPage.jsx‎

Lines changed: 44 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
22
import { Input } from '@progress/kendo-react-inputs';
33
import { DatePicker } from '@progress/kendo-react-dateinputs';
44
import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
5+
import { Button } from '@progress/kendo-react-buttons';
56
import ThemeChooser from './ThemeChooser';
67
const FormsPage = (props) => {
78
const [formData, setFormData] = useState({
@@ -55,57 +56,53 @@ const FormsPage = (props) => {
5556
<div className='col-12 col-lg-8 border-right'>
5657
<div className="row example-wrapper">
5758
<div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
58-
<div className="card">
59-
<div className="card-block">
60-
<form className="k-form" onSubmit={handleSubmit}>
61-
<fieldset>
62-
<legend className='m-1'>User Details</legend>
59+
<form className="k-form" onSubmit={handleSubmit}>
60+
<fieldset>
61+
<legend className='m-1'>User Details</legend>
6362

64-
<label className="k-form-field p-2">
65-
<span>First Name</span>
66-
<Input placeholder="Your Name" value={formData.firstName} onChange={(e) => onFormFieldChange(e, "firstName")} />
67-
</label>
68-
<label className="k-form-field p-2">
69-
<span>Last Name</span>
70-
<Input placeholder="Your Last Name" value={formData.lastName} onChange={(e) => onFormFieldChange(e, "lastName")} />
71-
</label>
72-
<div className="k-form-field p-2">
73-
<span>Date of Birth</span>
74-
<DatePicker value={formData.dateOfBirth} onChange={(e) => onFormFieldChange(e, "dateOfBirth")} />
75-
</div>
76-
<label className="k-form-field p-2">
77-
<span>Email <span className="k-required">*</span></span>
78-
<Input type="email" required={true} placeholder="Your Email" value={formData.email} onChange={(e) => onFormFieldChange(e, "email")} />
79-
</label>
80-
<label className="k-form-field p-2">
81-
<span>Company<span className="k-field-info">optional</span></span>
82-
<Input placeholder="Your Company" value={formData.company} onChange={(e) => onFormFieldChange(e, "company")} />
83-
</label>
84-
</fieldset>
63+
<label className="k-form-field p-2">
64+
<span>First Name</span>
65+
<Input placeholder="Your Name" value={formData.firstName} onChange={(e) => onFormFieldChange(e, "firstName")} />
66+
</label>
67+
<label className="k-form-field p-2">
68+
<span>Last Name</span>
69+
<Input placeholder="Your Last Name" value={formData.lastName} onChange={(e) => onFormFieldChange(e, "lastName")} />
70+
</label>
71+
<div className="k-form-field p-2">
72+
<span>Date of Birth</span>
73+
<DatePicker value={formData.dateOfBirth} onChange={(e) => onFormFieldChange(e, "dateOfBirth")} />
74+
</div>
75+
<label className="k-form-field p-2">
76+
<span>Email <span className="k-required">*</span></span>
77+
<Input type="email" required={true} placeholder="Your Email" value={formData.email} onChange={(e) => onFormFieldChange(e, "email")} />
78+
</label>
79+
<label className="k-form-field p-2">
80+
<span>Company<span className="k-field-info">optional</span></span>
81+
<Input placeholder="Your Company" value={formData.company} onChange={(e) => onFormFieldChange(e, "company")} />
82+
</label>
83+
</fieldset>
8584

86-
<fieldset>
87-
<legend className='m-1'>Credentials</legend>
88-
<label className="k-form-field p-2">
89-
<span>Username</span>
90-
<Input required={true} placeholder="Your username" value={formData.userName} onChange={(e) => onFormFieldChange(e, "userName")} />
91-
</label>
92-
<label className="k-form-field p-2">
93-
<span>Password</span>
94-
<Input type="password" required={true} placeholder="Your password" value={formData.password} onChange={(e) => onFormFieldChange(e, "password")} />
95-
</label>
96-
<label className="k-form-field p-2">
97-
<input type="checkbox" id="auth-2fa" className="k-checkbox" checked={formData.twoFactor} onChange={(e)=> setFormData({...formData, twoFactor: e.target.checked})}/>
98-
<label className="k-checkbox-label" htmlFor="auth-2fa">Enable two-factor authentication</label>
99-
</label>
100-
</fieldset>
85+
<fieldset>
86+
<legend className='m-1'>Credentials</legend>
87+
<label className="k-form-field p-2">
88+
<span>Username</span>
89+
<Input required={true} placeholder="Your username" value={formData.userName} onChange={(e) => onFormFieldChange(e, "userName")} />
90+
</label>
91+
<label className="k-form-field p-2">
92+
<span>Password</span>
93+
<Input type="password" required={true} placeholder="Your password" value={formData.password} onChange={(e) => onFormFieldChange(e, "password")} />
94+
</label>
95+
<label className="k-form-field p-2">
96+
<input type="checkbox" id="auth-2fa" className="k-checkbox" checked={formData.twoFactor} onChange={(e)=> setFormData({...formData, twoFactor: e.target.checked})}/>
97+
<label className="k-checkbox-label" htmlFor="auth-2fa">Enable two-factor authentication</label>
98+
</label>
99+
</fieldset>
101100

102-
<div className="text-right m-2">
103-
<button type="button" className="k-button" onClick={clearForm}>Clear</button> &nbsp;
104-
<button type="submit" className="k-button k-primary">Submit</button>
105-
</div>
106-
</form>
101+
<div className="text-right m-2">
102+
<Button type="button" onClick={clearForm}>Clear</Button> &nbsp;
103+
<Button type="submit" themeColor={'primary'}>Submit</Button>
107104
</div>
108-
</div>
105+
</form>
109106
</div>
110107
</div>
111108
</div>

‎examples/kendo-react-stackblitz-app/src/components/GridPage.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
22
import { sampleProducts } from '../common/sample-products';
33
import { MyCommandCell } from './MyCommandCell.jsx';
44
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';
5+
import { Button } from '@progress/kendo-react-buttons';
56
import { process } from '@progress/kendo-data-query';
67
import ThemeChooser from './ThemeChooser';
78

@@ -122,21 +123,20 @@ const GridPage = (props) => {
122123
{...dataState} // uncomment to enable data operations
123124
>
124125
<GridToolbar>
125-
<button
126+
<Button
126127
title="Add new"
127-
className="k-button k-primary"
128+
themeColor={'primary'}
128129
onClick={addNew}
129130
>
130131
Add new
131-
</button>
132+
</Button>
132133
{hasEditedItem && (
133-
<button
134+
<Button
134135
title="Cancel current changes"
135-
className="k-button"
136136
onClick={cancelCurrentChanges}
137137
>
138138
Cancel current changes
139-
</button>
139+
</Button>
140140
)}
141141
</GridToolbar>
142142
<Column field="ProductID" title="Id" width="50px" editable={false} />

‎examples/kendo-react-stackblitz-app/src/components/MyCommandCell.jsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,49 @@
11
import * as React from "react";
2+
import { Button } from '@progress/kendo-react-buttons';
23

34
export const MyCommandCell = (props) => {
45
const { dataItem } = props;
56
const inEdit = dataItem[props.editField];
67
const isNewItem = dataItem.ProductID === undefined;
78
return inEdit ? (
89
<td className="k-command-cell">
9-
<button
10-
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-save-command"
10+
<Button
11+
className="k-grid-save-command"
12+
themeColor={"primary"}
1113
onClick={() =>
1214
isNewItem ? props.add(dataItem) : props.update(dataItem)
1315
}
1416
>
1517
{isNewItem ? "Add" : "Update"}
16-
</button>
17-
<button
18-
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-cancel-command"
18+
</Button>
19+
<Button
20+
className="k-grid-cancel-command"
1921
onClick={() =>
2022
isNewItem ? props.discard(dataItem) : props.cancel(dataItem)
2123
}
2224
>
2325
{isNewItem ? "Discard" : "Cancel"}
24-
</button>
26+
</Button>
2527
</td>
2628
) : (
2729
<td className="k-command-cell">
28-
<button
29-
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-grid-edit-command"
30+
<Button
31+
className="k-grid-edit-command"
32+
themeColor={"primary"}
3033
onClick={() => props.edit(dataItem)}
3134
>
3235
Edit
33-
</button>
34-
<button
35-
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-remove-command"
36+
</Button>
37+
<Button
38+
className="k-grid-remove-command"
3639
onClick={() =>
3740
// eslint-disable-next-line no-restricted-globals
3841
confirm("Confirm deleting: " + dataItem.ProductName) &&
3942
props.remove(dataItem)
4043
}
4144
>
4245
Remove
43-
</button>
46+
</Button>
4447
</td>
4548
);
4649
};

‎examples/kendo-react-stackblitz-app/src/components/ThemeChooser.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const ThemeChooser = (props) => {
3333
{ id: 3, text: 'bootstrap', link: "https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" }
3434
]
3535
return (
36-
<div className='container-fluid'>
36+
<>
3737
<Tooltip ref={tooltip} position="left" anchorElement='target'/>
3838
<div className="d-flex my-2" >
3939
<div className="ml-auto d-flex">
@@ -50,7 +50,7 @@ const ThemeChooser = (props) => {
5050
/>
5151
</div>
5252
</div>
53-
</div>
53+
</>
5454
)
5555
}
5656

0 commit comments

Comments
 (0)