Skip to content

Commit adcd268

Browse files
DaneEverittDaneEveritt
committed
Start working on some defined styles, begin implementing password update in account
1 parent 0789b81 commit adcd268

File tree

8 files changed

+226
-91
lines changed

8 files changed

+226
-91
lines changed

‎resources/assets/styles/components/forms.css‎

Lines changed: 69 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,23 @@ input[type=number] {
1515
/**
1616
* Styling for other forms throughout the Panel.
1717
*/
18-
.input {
19-
@apply .appearance-none .p-3 .rounded .border .border-neutral-200 .text-neutral-800 .w-full;
18+
.input, .input-dark {
19+
@apply .appearance-none .w-full;
2020
min-width: 0;
21+
22+
&:required, &:invalid {
23+
box-shadow: none;
24+
}
25+
}
26+
27+
.input {
28+
@apply .p-3 .rounded .border .border-neutral-200 .text-neutral-800;
2129
transition: border 150ms linear;
2230

2331
&:focus {
2432
@apply .border-primary-400;
2533
}
2634

27-
&:required, &:invalid {
28-
box-shadow: none;
29-
}
30-
3135
&.error {
3236
@apply .text-red-600 .border-red-500;
3337
}
@@ -37,6 +41,39 @@ input[type=number] {
3741
@apply .bg-neutral-100 .border-neutral-200;
3842
}
3943

44+
.input + .input-help {
45+
@apply .text-xs .text-neutral-400 .pt-2;
46+
47+
&.error {
48+
@apply .text-red-600;
49+
}
50+
}
51+
52+
.input-dark {
53+
@apply .p-3 .bg-neutral-600 .border .border-neutral-500 .text-sm .rounded .text-neutral-200;
54+
transition: border 150ms linear, box-shaodw 150ms ease-in;
55+
56+
&:focus {
57+
@apply .shadow;
58+
}
59+
60+
& + .input-help {
61+
@apply .text-xs .text-neutral-400 .mt-2
62+
}
63+
64+
&.error {
65+
@apply .text-red-100 .border-red-400;
66+
}
67+
68+
&.error + .input-help {
69+
@apply .text-red-400;
70+
}
71+
72+
&:disabled {
73+
@apply .opacity-75;
74+
}
75+
}
76+
4077
label {
4178
@apply .block .text-xs .font-medium .uppercase .text-neutral-700 .mb-2;
4279
}
@@ -61,6 +98,10 @@ select:not(.appearance-none) {
6198
background-position-x: calc(100% - 0.75rem);
6299
}
63100

101+
.input-dark-label {
102+
@apply .uppercase .text-neutral-200;
103+
}
104+
64105
.input-label {
65106
@apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold;
66107

@@ -69,80 +110,80 @@ select:not(.appearance-none) {
69110
}
70111
}
71112

72-
.input-help {
73-
@apply .text-xs .text-neutral-400 .pt-2;
74-
75-
&.error {
76-
@apply .text-red-600;
77-
}
78-
}
79-
80113
a.btn {
81114
@apply .no-underline;
82115
}
83116

84117
.btn {
85-
@apply .rounded .p-2;
118+
@apply .rounded .p-2 .uppercase .tracking-wide .text-sm;
86119
transition: all 150ms linear;
87120

88121
/**
89122
* Button Colors
90123
*/
91124
&.btn-primary {
92-
@apply .bg-primary-500 .border-primary-600 .border .text-white;
125+
@apply .bg-primary-500 .border-primary-600 .border .text-primary-50;
93126

94127
&:hover:not(:disabled) {
95-
@apply .bg-primary-600 .border-primary-800;
128+
@apply .bg-primary-600 .border-primary-700;
96129
}
97130
}
98131

99132
&.btn-green {
100-
@apply .bg-green-500 .border-green-600 .border .text-white;
133+
@apply .bg-green-500 .border-green-600 .border .text-green-50;
101134

102135
&:hover:not(:disabled) {
103-
@apply .bg-green-600 .border-green-800;
136+
@apply .bg-green-600 .border-green-700;
104137
}
105138
}
106139

107140
&.btn-red {
108141
&:not(.btn-secondary) {
109-
@apply .bg-red-500 .border-red-600 .border .text-white;
142+
@apply .bg-red-500 .border-red-600 .text-red-50;
110143
}
111144

112145
&:hover:not(:disabled) {
113-
@apply .bg-red-600 .border-red-800;
146+
@apply .bg-red-600 .border-red-700;
147+
}
148+
}
149+
150+
&.btn-grey {
151+
@apply .border .border-neutral-600 .bg-neutral-500 .text-neutral-50;
152+
153+
&:hover:not(:disabled) {
154+
@apply .bg-neutral-600 .border-neutral-700;
114155
}
115156
}
116157

117158
&.btn-secondary {
118-
@apply .border .border-neutral-200 .text-neutral-400;
159+
@apply .border .border-neutral-600 .bg-transparent .text-neutral-200;
119160

120161
&:hover:not(:disabled) {
121-
@apply .border-neutral-500 .text-neutral-700;
162+
@apply .border-neutral-500 .text-neutral-100;
122163
}
123164

124165
&.btn-red:hover:not(:disabled) {
125-
@apply .bg-red-600 .border-red-800 .text-white;
166+
@apply .bg-red-500 .border-red-600 .text-red-50;
126167
}
127168
}
128169

129170
/**
130171
* Button Sizes
131172
*/
132173
&.btn-jumbo {
133-
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
174+
@apply .p-4 .w-full;
134175
}
135176

136177
&.btn-lg {
137-
@apply .p-4 .uppercase .tracking-wide .text-sm;
178+
@apply .p-4 .text-sm;
138179
}
139180

140181
&.btn-sm {
141-
@apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
182+
@apply .p-3;
142183
}
143184

144185
&.btn-xs {
145-
@apply .py-2 .px-2 .uppercase .text-xs;
186+
@apply .p-2 .text-xs;
146187
}
147188

148189
&:disabled, &.disabled {

‎resources/scripts/components/account/AccountOverview.tsx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎resources/scripts/components/account/AccountOverviewContainer.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from 'react';
2+
import ContentBox from '@/components/elements/ContentBox';
3+
import UpdatePasswordForm from '@/components/account/forms/UpdatePasswordForm';
4+
5+
export default () => {
6+
return (
7+
<div className={'flex my-10'}>
8+
<ContentBox className={'flex-1 mr-4'} title={'Update Password'}>
9+
<UpdatePasswordForm/>
10+
</ContentBox>
11+
<div className={'flex-1 ml-4'}>
12+
<ContentBox title={'Update Email Address'}>
13+
</ContentBox>
14+
<ContentBox title={'Update Identity'} className={'mt-8'}>
15+
</ContentBox>
16+
</div>
17+
</div>
18+
);
19+
};

‎resources/scripts/components/account/DesignElements.tsx‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎resources/scripts/components/account/DesignElementsContainer.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import * as React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import ContentBox from '@/components/elements/ContentBox';
4+
5+
export default class DesignElementsContainer extends React.PureComponent {
6+
render () {
7+
return (
8+
<div className={'my-10'}>
9+
<div className={'flex'}>
10+
<ContentBox className={'flex-1 mr-4'} title={'A Special Announcement'} borderColor={'border-primary-400'}>
11+
<p className={'text-neutral-200 text-sm'}>
12+
Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
13+
</p>
14+
<p><Link to={'/'}>Back</Link></p>
15+
</ContentBox>
16+
<div className={'ml-4 flex-1'}>
17+
<h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
18+
<div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
19+
<label className={'uppercase text-neutral-200'}>Email</label>
20+
<input type={'text'} className={'input-dark'}/>
21+
<p className={'input-help'}>
22+
This is some descriptive helper text to explain how things work.
23+
</p>
24+
<div className={'mt-6'}/>
25+
<label className={'uppercase text-neutral-200'}>Username</label>
26+
<input type={'text'} className={'input-dark error'}/>
27+
<p className={'input-help'}>
28+
This field has an error.
29+
</p>
30+
<div className={'mt-6'}/>
31+
<label className={'uppercase text-neutral-200'}>Disabled Field</label>
32+
<input type={'text'} className={'input-dark'} disabled={true}/>
33+
<div className={'mt-6'}/>
34+
<label className={'uppercase text-neutral-200'}>Textarea</label>
35+
<textarea className={'input-dark h-32'}></textarea>
36+
<div className={'mt-6'}/>
37+
<button className={'btn btn-primary btn-sm'}>
38+
Blue
39+
</button>
40+
<button className={'btn btn-grey btn-sm ml-2'}>
41+
Grey
42+
</button>
43+
<button className={'btn btn-green btn-sm ml-2'}>
44+
Green
45+
</button>
46+
<button className={'btn btn-red btn-sm ml-2'}>
47+
Red
48+
</button>
49+
<div className={'mt-6'}/>
50+
<button className={'btn btn-secondary btn-sm'}>
51+
Secondary
52+
</button>
53+
<button className={'btn btn-secondary btn-red btn-sm ml-2'}>
54+
Secondary Danger
55+
</button>
56+
<div className={'mt-6'}/>
57+
<button className={'btn btn-primary btn-lg'}>
58+
Large
59+
</button>
60+
<button className={'btn btn-primary btn-xs ml-2'}>
61+
Tiny
62+
</button>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
);
68+
}
69+
}

‎resources/scripts/components/account/forms/UpdatePasswordForm.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { useState } from 'react';
2+
import { State, useStoreState } from 'easy-peasy';
3+
import { ApplicationState } from '@/state/types';
4+
5+
export default () => {
6+
const [ isLoading, setIsLoading ] = useState(false);
7+
const user = useStoreState((state: State<ApplicationState>) => state.user.data);
8+
9+
if (!user) {
10+
return null;
11+
}
12+
13+
return (
14+
<form className={'m-0'}>
15+
<label htmlFor={'current_password'} className={'input-dark-label'}>Current Password</label>
16+
<input
17+
id={'current_password'}
18+
type={'password'}
19+
className={'input-dark'}
20+
/>
21+
<div className={'mt-6'}>
22+
<label htmlFor={'new_password'} className={'input-dark-label'}>New Password</label>
23+
<input
24+
id={'new_password'}
25+
type={'password'}
26+
className={'input-dark'}
27+
/>
28+
<p className={'input-help'}>
29+
Your new password must be at least 8 characters in length.
30+
</p>
31+
</div>
32+
<div className={'mt-6'}>
33+
<label htmlFor={'new_password_confirm'} className={'input-dark-label'}>Confirm New Password</label>
34+
<input
35+
id={'new_password_confirm'}
36+
type={'password'}
37+
className={'input-dark'}
38+
/>
39+
</div>
40+
<div className={'mt-6'}>
41+
<button className={'btn btn-primary btn-sm'} disabled={true}>
42+
Update Password
43+
</button>
44+
</div>
45+
</form>
46+
);
47+
};

0 commit comments

Comments
 (0)