Skip to content

Commit 6b2f4fe

Browse files
neel1996neel1996
committed
replace css styles with tailwind selectors
1 parent a1fe86a commit 6b2f4fe

File tree

4 files changed

+54
-49
lines changed

4 files changed

+54
-49
lines changed

‎ui/package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/CommitComponent.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -100,24 +100,26 @@ export default function CommitComponent(props) {
100100
return (
101101
<>
102102
{!commitDone ? (
103-
<div className="git-ops--commit--wrapper">
104-
<div className="git-ops--commit--header">
103+
<div className="w-11/12 mx-auto my-auto p-4">
104+
<div className="font-font-sans font-semibold text-3xl my-4 text-gray-700">
105105
{stagedCount} {stagedCount > 1 ? "Changes" : "Change"} to
106106
commit...
107107
</div>
108108
<div className="overflow-auto" style={{ height: "300px" }}>
109109
{stagedFilesState.map((stagedFile) => {
110110
return (
111111
<div
112-
className="git-ops--commit--stagedfiles"
112+
className="font-sans text-gray-700 my-1 mx-6 border-b"
113113
key={stagedFile}
114114
>
115115
{stagedFile}
116116
</div>
117117
);
118118
})}
119119
</div>
120-
<div className="text-xl my-4">Commit Message</div>
120+
<div className="text-xl my-4 font-sans font-semibold text-gray-600">
121+
Commit Message
122+
</div>
121123
{commitMessageWarning ? (
122124
<div className="font-sans font-semibold italic p-2 border-b border-dotted border-yellow-400 text-yellow-500">
123125
<span role="img" aria-label="suggestion">
@@ -134,7 +136,7 @@ export default function CommitComponent(props) {
134136
</div>
135137
) : null}
136138
<textarea
137-
className="git-ops--commit--message"
139+
className="w-full outline-none rounded-lg p-4 shadow-lg border border-blue-100"
138140
placeholder="Enter commit message"
139141
cols="20"
140142
rows="5"
@@ -150,17 +152,17 @@ export default function CommitComponent(props) {
150152
}}
151153
></textarea>
152154
{commitError ? (
153-
<div className="git-ops--commit--alert--failed">
155+
<div className="w-full mx-auto my-2 bg-red-200 border-b-2 border-red-400 rounded rounded-b-lg p-3 text-center text-xl text-red-600 font-semibold font-sans">
154156
Commit Failed!
155157
</div>
156158
) : null}
157159
{loadingCommit ? (
158-
<div className="git-ops--commit--alert--progress">
160+
<div className="font-sans font-light my-1 mx-auto my-auto p-2 text-center text-xl bg-gray-100 shadow-md w-full cursor-pointer rounded-lg text-gray-600">
159161
Committing Changes...
160162
</div>
161163
) : (
162164
<div
163-
className="git-ops--commit--btn"
165+
className="w-full my-2 p-3 rounded shadow bg-green-500 font-sans font-semibold text-center text-white text-xl cursor-pointer hover:bg-green-600"
164166
onClick={(event) => {
165167
const commitMsg = commitRef.current.value;
166168

@@ -171,12 +173,12 @@ export default function CommitComponent(props) {
171173
}
172174
}}
173175
>
174-
Commit Changes
176+
COMMIT CHANGES
175177
</div>
176178
)}
177179
</div>
178180
) : (
179-
<div className="git-ops--commit--alert--success">
181+
<div className="mx-auto my-2 p-3 bg-green-200 text-green-600 font-sans font-semibold text-2xl text-center border-b-4 border-dashed border-green-500 rounded">
180182
All changes have been committed!
181183
</div>
182184
)}
@@ -186,11 +188,11 @@ export default function CommitComponent(props) {
186188
}
187189

188190
return (
189-
<div className="git-ops--commit">
191+
<div className="w-11/12 xl:w-3/4 lg:w-3/4 mx-auto my-auto bg-gray-100 rounded-lg shadow p-5">
190192
{stagedFilesState && stagedFilesState.length > 0 ? (
191193
commitComponent()
192194
) : (
193-
<div className="git-ops--commit--alert">
195+
<div className="bg-gray-200 p-3 text-center font-sans text-2xl mx-auto my-2 rounded font-light border-b-4 border-dashed border-gray-400">
194196
{loading ? (
195197
<span>Loading staged files to commit...</span>
196198
) : stagedFilesState.length === 0 ? (

‎ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/PushComponent.js‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export default function PushComponent(props) {
140140
};
141141

142142
return (
143-
<div className="block justify-evenly border shadow rounded p-2">
143+
<div className="block justify-evenly border-b-2 p-2">
144144
{modelLabel.map((label, index) => {
145145
return localModelFormat(label, splitCommit[index]);
146146
})}
@@ -187,17 +187,17 @@ export default function PushComponent(props) {
187187
<>
188188
{!pushDone ? (
189189
<>
190-
<div className="git-ops--push">
191-
<div className="text-center font-sans font-semibold mx-auto w-full p-3 text-2xl border-b-2 border-dashed text-gray-800">
190+
<div className="w-11/12 xl:w-3/4 lg:w-3/4 mx-auto my-auto bg-gray-50 px-10 py-6 rounded-lg">
191+
<div className="text-center mb-4 font-sans font-semibold mx-auto w-full p-3 text-2xl border-b-2 border-dashed text-gray-800">
192192
Push To Remote
193193
</div>
194-
<div className="flex mx-auto justify-around items-center align-middle gap-4">
194+
<div className="flex w-full mx-auto justify-around items-center align-middle gap-4 my-6">
195195
<div className="w-2/3 font-sans text-xl font-semibold text-gray-600">
196196
Available remotes
197197
</div>
198198
<div className="w-3/4">
199199
<select
200-
className="git-ops--push--select"
200+
className="outline-none p-3 font-sans text-xl text-gray-600 rounded shadow-md border border-blue-100"
201201
defaultValue="checked"
202202
onChange={() => {
203203
setIsRemoteSet(true);
@@ -217,14 +217,14 @@ export default function PushComponent(props) {
217217
</div>
218218

219219
{isRemoteSet ? (
220-
<div className="flex mx-auto justify-around items-center align-middle gap-4">
220+
<div className="my-4 flex w-full mx-auto justify-around items-center align-middle gap-4">
221221
<div className="w-2/3 font-sans text-xl font-semibold text-gray-600">
222-
Commits will be pushed
222+
Commits will be pushed to
223223
</div>
224224
<div className="w-3/4">
225225
<select
226226
disabled
227-
className="git-ops--push--select"
227+
className="outline-none p-3 font-sans text-xl text-gray-600 rounded shadow-md border border-blue-100"
228228
defaultValue={remoteData.gitCurrentBranch}
229229
onChange={() => {
230230
getUnpushedCommits();
@@ -238,8 +238,8 @@ export default function PushComponent(props) {
238238
) : null}
239239

240240
{unpushedCommits && unpushedCommits.length > 0 ? (
241-
<div className="git-ops--push--unpushed">
242-
<div className="git-ops--push--unpushed--label">
241+
<div className="my-2 mx-auto w-full bg-purple-50 p-4 rounded-lg shadow border">
242+
<div className="font-sans font-semibold text-2xl text-gray-600 my-1">
243243
{unpushedCommits.length !== 0 ? (
244244
<span className="mx-1 border-b border-dashed border-gray-600">
245245
{unpushedCommits.length}
@@ -251,10 +251,7 @@ export default function PushComponent(props) {
251251
<div className="overflow-auto" style={{ height: "200px" }}>
252252
{unpushedCommits.map((commits, index) => {
253253
return (
254-
<div
255-
key={`unpushed-commit-${index}`}
256-
className="git-ops--push--commits"
257-
>
254+
<div key={`unpushed-commit-${index}`} className="p-2">
258255
{commitModel(commits)}
259256
</div>
260257
);
@@ -267,15 +264,15 @@ export default function PushComponent(props) {
267264

268265
{pushFailed ? (
269266
<>
270-
<div className="git-ops--push--nochange">
267+
<div className="my-4 bg-red-100 text-red-400 text-center text-2xl font-sans font-semibold border-b-4 border-dashed border-red-400 p-4 rounded-lg">
271268
Failed to push changes!
272269
</div>
273270
</>
274271
) : null}
275272

276273
{isRemoteSet && unpushedCommits.length > 0 && !loading ? (
277274
<div
278-
className="git-ops--push--btn"
275+
className="w-full text-center font-sans font-semibold p-3 my-4 bg-indigo-300 text-xl text-white rounded shadow-md cursor-pointer hover:bg-indigo-400 hover:shadow-sm"
279276
onClick={() => {
280277
const remoteHost = remoteRef.current.value.trim();
281278

@@ -284,20 +281,20 @@ export default function PushComponent(props) {
284281
}
285282
}}
286283
>
287-
Push changes
284+
PUSH CHANGES
288285
</div>
289286
) : (
290287
<>
291288
{isCommitEmpty ? (
292-
<div className="git-ops--push--nocommits">
289+
<div className="mt-4 rounded shadow-md p-3 bg-gray-400 text-white font-sans font-semibold text-xl text-center">
293290
No Commits to Push
294291
</div>
295292
) : null}
296293
</>
297294
)}
298295
<>
299296
{loading ? (
300-
<div className="git-ops--push--loader">
297+
<div className="my-2 p-3 bg-green-50 rounded-lg shadow text-green-500 font-sans font-light text-center text-2xl border-2 border-dashed border-green-500">
301298
<div className="text-green-500 text-2xl">
302299
Pushing to remote...
303300
</div>

‎ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/StageComponent.js‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,36 @@ export default function StageComponent(props) {
4646

4747
return (
4848
<>
49-
<div className="git-ops--stage">
49+
<div className="w-11/12 xl:w-3/4 lg:w-3/4 mx-auto my-auto rounded-lg shadow p-10 bg-gray-50">
5050
<>
51-
{stageComponents.length > 0 && !allStaged ? (
51+
{stageComponents && stageComponents.length > 0 && !allStaged ? (
5252
<>
53-
<div className="git-ops--stage--header">
54-
All these changes will be staged:
53+
<div className="font-sans font-bold text-2xl text-gray-700 my-2 mx-4">
54+
{stageComponents.length === 1 ? (
55+
<span>One change will be staged</span>
56+
) : (
57+
<span>{stageComponents.length} changes will be staged:</span>
58+
)}
5559
</div>
56-
<div className="overflow-y-auto" style={{ height: "400px" }}>
60+
<div
61+
className="mx-6 my-4 overflow-y-auto"
62+
style={{ height: "400px" }}
63+
>
5764
{stageComponents &&
5865
stageComponents.map((item) => {
5966
return (
60-
<div className="git-ops--stage--item" key={item}>
67+
<div
68+
className="font-sans my-2 text-gray-600 border-b"
69+
key={item}
70+
>
6171
{item}
6272
</div>
6373
);
6474
})}
6575
</div>
6676

6777
{errorInd ? (
68-
<div className="git-ops--stage--alert--failure">
78+
<div className="w-full mx-auto my-2 bg-red-200 border-b-2 border-red-400 rounded rounded-b-lg p-3 text-center text-xl text-red-600 font-semibold font-sans">
6979
Staging Failed!
7080
</div>
7181
) : null}
@@ -75,22 +85,18 @@ export default function StageComponent(props) {
7585
</div>
7686
) : (
7787
<div
78-
className="git-ops--stage--btn"
88+
className="w-full my-2 p-3 rounded shadow bg-green-500 font-sans font-semibold text-center text-white text-xl cursor-pointer hover:bg-green-600"
7989
onClick={() => {
8090
stageAllChanges();
8191
}}
8292
>
83-
Confirm Staging
93+
STAGE ALL COMPONENTS
8494
</div>
8595
)}
8696
</>
87-
) : (
88-
<div className="git-ops--stage--alert--nochange">
89-
No Changes for staging...
90-
</div>
91-
)}
97+
) : null}
9298
{allStaged ? (
93-
<div className="git-ops--stage--alert--success">
99+
<div className="shadow rounded text-center text-green-700 p-6 bg-green-200 font-sans font-semibold text-2xl border-b-4 border-dashed border-green-400 rounded-b-xl">
94100
All changes Staged!
95101
</div>
96102
) : null}

0 commit comments

Comments
 (0)