Skip to content

Commit 7a3c35b

Browse files
vr-varadvr-varad
authored
Merge pull request #6725 from ARYANSHAH1567/aryanshah/enhance_dialog_component
Enhanced the Dialog component based on code section
2 parents 5babdca + 51ab919 commit 7a3c35b

4 files changed

Lines changed: 307 additions & 124 deletions

File tree

‎src/components/SistentNavigation/content.js‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -42,53 +42,57 @@ export const content = [
4242
{ id: 29, link: "/projects/sistent/components/container/guidance", text: "Container" },
4343
{ id: 30, link: "/projects/sistent/components/container/code", text: "Container" },
4444

45-
{ id: 31, link: "/projects/sistent/components/icons", text: "Icons" },
45+
{ id: 31, link: "/projects/sistent/components/dialog", text: "Dialog" },
46+
{ id: 32, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
47+
{ id: 33, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
4648

47-
{ id: 32, link: "/projects/sistent/components/link", text: "Link" },
48-
{ id: 33, link: "/projects/sistent/components/link/guidance", text: "Link" },
49-
{ id: 34, link: "/projects/sistent/components/link/code", text: "Link" },
49+
{ id: 34, link: "/projects/sistent/components/icons", text: "Icons" },
5050

51-
{ id: 35, link: "/projects/sistent/components/modal", text: "Modal" },
52-
{ id: 36, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
53-
{ id: 37, link: "/projects/sistent/components/modal/code", text: "Modal" },
51+
{ id: 35, link: "/projects/sistent/components/link", text: "Link" },
52+
{ id: 36, link: "/projects/sistent/components/link/guidance", text: "Link" },
53+
{ id: 37, link: "/projects/sistent/components/link/code", text: "Link" },
5454

55-
{ id: 38, link: "/projects/sistent/components/pagination", text: "Pagination" },
56-
{ id: 39, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
57-
{ id: 40, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
55+
{ id: 38, link: "/projects/sistent/components/modal", text: "Modal" },
56+
{ id: 39, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
57+
{ id: 40, link: "/projects/sistent/components/modal/code", text: "Modal" },
5858

59-
{ id: 41, link: "/projects/sistent/components/paper", text: "Paper" },
60-
{ id: 42, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
61-
{ id: 43, link: "/projects/sistent/components/paper/code", text: "Paper" },
59+
{ id: 41, link: "/projects/sistent/components/pagination", text: "Pagination" },
60+
{ id: 42, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
61+
{ id: 43, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
6262

63-
{ id: 44, link: "/projects/sistent/components/popper", text: "Popper" },
64-
{ id: 45, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
65-
{ id: 46, link: "/projects/sistent/components/popper/code", text: "Popper" },
63+
{ id: 44, link: "/projects/sistent/components/paper", text: "Paper" },
64+
{ id: 45, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
65+
{ id: 46, link: "/projects/sistent/components/paper/code", text: "Paper" },
6666

67-
{ id: 47, link: "/projects/sistent/components/select", text: "Select" },
68-
{ id: 48, link: "/projects/sistent/components/select/guidance", text: "Select" },
69-
{ id: 49, link: "/projects/sistent/components/select/code", text: "Select" },
67+
{ id: 47, link: "/projects/sistent/components/popper", text: "Popper" },
68+
{ id: 48, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
69+
{ id: 49, link: "/projects/sistent/components/popper/code", text: "Popper" },
7070

71-
{ id: 50, link: "/projects/sistent/components/switch", text: "Switch" },
72-
{ id: 51, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
73-
{ id: 52, link: "/projects/sistent/components/switch/code", text: "Switch" },
71+
{ id: 50, link: "/projects/sistent/components/select", text: "Select" },
72+
{ id: 51, link: "/projects/sistent/components/select/guidance", text: "Select" },
73+
{ id: 52, link: "/projects/sistent/components/select/code", text: "Select" },
7474

75-
{ id: 53, link: "/projects/sistent/components/tabs", text: "Tabs" },
76-
{ id: 54, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
77-
{ id: 55, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
75+
{ id: 53, link: "/projects/sistent/components/switch", text: "Switch" },
76+
{ id: 54, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
77+
{ id: 55, link: "/projects/sistent/components/switch/code", text: "Switch" },
7878

79-
{ id: 56, link: "/projects/sistent/components/text-field", text: "Text Field" },
80-
{ id: 57, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
81-
{ id: 58, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
79+
{ id: 56, link: "/projects/sistent/components/tabs", text: "Tabs" },
80+
{ id: 57, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
81+
{ id: 58, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
8282

83-
{ id: 59, link: "/projects/sistent/components/text-input", text: "Text Input" },
84-
{ id: 60, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
85-
{ id: 61, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
83+
{ id: 59, link: "/projects/sistent/components/text-field", text: "Text Field" },
84+
{ id: 60, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
85+
{ id: 61, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
8686

87-
{ id: 62, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
88-
{ id: 63, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
89-
{ id: 64, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
87+
{ id: 62, link: "/projects/sistent/components/text-input", text: "Text Input" },
88+
{ id: 63, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
89+
{ id: 64, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
9090

91-
{ id: 65, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
92-
{ id: 66, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
93-
{ id: 67, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
91+
{ id: 63, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
92+
{ id: 64, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
93+
{ id: 65, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
94+
95+
{ id: 66, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
96+
{ id: 67, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
97+
{ id: 68, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
9498
];

‎src/sections/Projects/Sistent/components/dialog/code.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -162,15 +162,15 @@ const DialogCode = () => {
162162
<div className="showcase">
163163
<div className="items">
164164
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
165-
<Button onClick={handleOpen}>Open Dialog</Button>
165+
<Button variant="contained" onClick={handleOpen}>Open Dialog</Button>
166166
<Dialog open={open} onClose={handleClose}>
167167
<DialogTitle>Confirm Action</DialogTitle>
168168
<DialogContent>
169169
Do you want to proceed with this action?
170170
</DialogContent>
171171
<DialogActions>
172-
<Button onClick={handleClose}>Cancel</Button>
173-
<Button color="primary" onClick={handleClose}>
172+
<Button variant="contained" onClick={handleClose}>Cancel</Button>
173+
<Button variant="contained" color="primary" onClick={handleClose}>
174174
Confirm
175175
</Button>
176176
</DialogActions>
@@ -190,7 +190,7 @@ const DialogCode = () => {
190190
<div className="showcase">
191191
<div className="items">
192192
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
193-
<Button onClick={() => setOpenFull(true)}>
193+
<Button variant="contained" onClick={() => setOpenFull(true)}>
194194
Open Full-Screen Dialog
195195
</Button>
196196
<Dialog
@@ -206,9 +206,9 @@ const DialogCode = () => {
206206
full attention is needed for complex tasks or on mobile devices.
207207
</p>
208208
</DialogContent>
209-
<DialogActions>
210-
<Button onClick={() => setOpenFull(false)}>Cancel</Button>
211-
<Button color="primary" onClick={() => setOpenFull(false)}>
209+
<DialogActions style={{ justifyContent: "flex-start", paddingLeft: "24px" }}>
210+
<Button variant="contained" onClick={() => setOpenFull(false)}>Cancel</Button>
211+
<Button variant="contained" color="primary" onClick={() => setOpenFull(false)}>
212212
Save
213213
</Button>
214214
</DialogActions>
@@ -228,7 +228,7 @@ const DialogCode = () => {
228228
<div className="showcase">
229229
<div className="items">
230230
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
231-
<Button onClick={() => setOpenForm(true)}>
231+
<Button variant="contained" onClick={() => setOpenForm(true)}>
232232
Open Form Dialog
233233
</Button>
234234
<Dialog open={openForm} onClose={() => setOpenForm(false)}>
@@ -250,8 +250,8 @@ const DialogCode = () => {
250250
</div>
251251
</DialogContent>
252252
<DialogActions>
253-
<Button onClick={() => setOpenForm(false)}>Cancel</Button>
254-
<Button color="primary" onClick={() => setOpenForm(false)}>
253+
<Button variant="contained" onClick={() => setOpenForm(false)}>Cancel</Button>
254+
<Button variant="contained" color="primary" onClick={() => setOpenForm(false)}>
255255
Subscribe
256256
</Button>
257257
</DialogActions>

0 commit comments

Comments
 (0)