Skip to content

Commit 87dcc91

Browse files
edignotedignot
authored
Merge pull request #3 from workos/feature/sup-595-typescript-update-admin-portal-app-ui
New UI style added
2 parents f1b4c4c + b581901 commit 87dcc91

File tree

3 files changed

+193
-56
lines changed

3 files changed

+193
-56
lines changed

‎typescript-admin-portal-example/public/stylesheets/style.css

Lines changed: 160 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
12
body {
23
font-family: Inter, sans-serif;
4+
background-color: #f9f9fb;
5+
36
}
47

58
.container_login {
@@ -22,26 +25,6 @@ body {
2225
bottom: 10px;
2326
}
2427

25-
.text_input {
26-
border: 1px solid #555555;
27-
border-radius: 10px;
28-
margin: 20px 0px 7px 0px;
29-
padding: 5px;
30-
height: 35px;
31-
width: 30vw;
32-
text-align: center;
33-
}
34-
35-
.text_input_2 {
36-
border: 1px solid #555555;
37-
border-radius: 10px;
38-
margin: 0px 0px 20px 0px;
39-
padding: 5px;
40-
height: 35px;
41-
width: 30vw;
42-
text-align: center;
43-
}
44-
4528
.flex {
4629
display: flex;
4730
justify-content: center;
@@ -54,6 +37,24 @@ body {
5437
align-items: center;
5538
}
5639

40+
.space-between {
41+
justify-content: space-between;
42+
}
43+
44+
.width-75 {
45+
width: 75%;
46+
}
47+
48+
.width-40vw {
49+
width: 40vw;
50+
overflow: scroll;
51+
word-wrap: break-word;
52+
}
53+
54+
.width-95 {
55+
width: 95%;
56+
}
57+
5758
.container_success {
5859
display: flex;
5960
flex-direction: column;
@@ -84,7 +85,7 @@ body {
8485
border: 2px solid #6363f1;
8586
border-radius: 26px;
8687
color: white;
87-
padding: 16px 32px;
88+
padding: 8px 16px;
8889
text-align: center;
8990
text-decoration: none;
9091
display: inline-block;
@@ -108,13 +109,14 @@ body {
108109
color: white;
109110
}
110111

111-
.login_button {
112-
width: 95%;
113-
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
112+
.sales-button {
113+
margin-left: 10px;
114114
}
115115

116116

117-
h2, h1 {
117+
118+
h2,
119+
h1 {
118120
text-align: center;
119121
color: #555555;
120122
}
@@ -128,16 +130,17 @@ h2, h1 {
128130
align-items: center;
129131
position: relative;
130132
bottom: 10%;
131-
132133
}
134+
133135
.logged_in_div_left {
134136
width: 40%;
135137
height: 100vh;
136138
display: flex;
137139
flex-direction: column;
138140
justify-content: center;
139-
align-items: center;
140-
background-color: #dad8d8;
141+
align-items: left;
142+
background-color: #f9f9fb;
143+
margin-left: 4vw;
141144
}
142145

143146
.logged_in_div_left div {
@@ -155,39 +158,72 @@ h2, h1 {
155158
letter-spacing: -.05em;
156159
}
157160

158-
.logged_in_div_left h2 {
159-
color: #6363f1;
160-
font-size: 75px;
161+
.home-hero-gradient {
162+
background-image: linear-gradient(45deg, #a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0));
163+
background-size: 150% 100%;
164+
background-repeat: no-repeat;
165+
-webkit-background-clip: text;
166+
-webkit-text-fill-color: transparent;
167+
background-clip: text;
168+
animation: intro-gradient 1.2s cubic-bezier(0.85, 0.26, 0.89, 0.93);
169+
animation-iteration-count: 1;
170+
animation-fill-mode: backwards;
171+
animation-delay: 0.4s;
161172
text-align: left;
162-
margin-top: 0px;
163-
font-weight: normal;
173+
font-size: 75px;
164174
letter-spacing: -.05em;
175+
font-weight: normal;
176+
margin-top: 0px;
177+
}
178+
179+
.title-text {
180+
margin-bottom: -50px;
181+
}
182+
183+
.title-subtext {
184+
color: gray;
185+
line-height: 10px;
186+
margin-bottom: 15px;
187+
font-weight: 200;
165188
}
166189

167190
.logged_in_div_left button {
168191
padding: 8px 22px;
192+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
193+
}
194+
195+
.logged_in_div_right button {
196+
padding: 8px 22px;
197+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
169198
}
170199

171200
div.text_box {
172-
background-color: #dad8d8;
173-
border-radius: 5px;
174-
border: 2px solid #6363f1;
175-
width: 45vw;
201+
background-color: #f9f9fb;
202+
width: 40vw;
203+
max-height: 30vh;
176204
padding: 10px;
177205
word-wrap: break-word;
206+
overflow: scroll;
207+
border-width: 3px;
208+
border-style: solid;
209+
border-image:
210+
linear-gradient(#a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0)) 0 100%;
178211
}
179212

180213
.logged_in_nav {
181214
display: flex;
182215
justify-content: space-between;
183-
background-color: #6363f1;
216+
background-color: #f9f9fb;
184217
height: 60px;
185-
padding: 7px 7px 7px 10px;
218+
padding: 15px 30px 15px 30px;
219+
220+
z-index: 1000;
186221
}
222+
187223
.logged_in_nav p {
188224
padding: 4px 0px 0px 15px;
189225
line-height: 1;
190-
color: white;
226+
color: #29363d;
191227
}
192228

193229
.logged_in_nav img {
@@ -199,3 +235,87 @@ div.text_box {
199235
.logged_in_nav img:hover {
200236
border: 2px solid #555555;
201237
}
238+
239+
.nav-item {
240+
color: black;
241+
border: 2px solid #f9f9fb;
242+
background-color: #f9f9fb;
243+
box-shadow: none;
244+
border-radius: 5px;
245+
}
246+
247+
.blog-nav-button {
248+
margin-right: 20px;
249+
background-color: #f9f9fb;
250+
border: 2px solid #f9f9fb;
251+
}
252+
253+
.directory-buttons {
254+
justify-content: space-between;
255+
width: 40vw;
256+
}
257+
258+
.nav-item:hover {
259+
background-color: #f9f9fb;
260+
border: 2px solid #f9f9fb;
261+
color: #a6a4a4;
262+
}
263+
264+
pre.prettyprint {
265+
border: none !important;
266+
}
267+
268+
ul {
269+
list-style-type: none;
270+
margin-right: 35px;
271+
text-decoration: none;
272+
}
273+
274+
li {
275+
padding: 6px;
276+
}
277+
278+
a:link {
279+
text-decoration: none;
280+
}
281+
282+
a:visited {
283+
text-decoration: none;
284+
}
285+
286+
li.even {
287+
background-color: rgb(228, 228, 228);
288+
}
289+
290+
.card {
291+
border: 1px solid #555555;
292+
border-radius: 10px;
293+
margin: 0px 15px 0px 15px;
294+
padding: 25px 50px;
295+
margin-bottom: 20px;
296+
text-align: center;
297+
}
298+
299+
#clear_button_div {
300+
301+
margin-bottom: 50px;
302+
}
303+
304+
.hidden {
305+
display: none;
306+
}
307+
308+
.text_input {
309+
border: 1px solid #555555;
310+
border-radius: 10px;
311+
margin: 20px 0px 7px 0px;
312+
padding: 5px;
313+
height: 35px;
314+
width: 25vw;
315+
text-align: center;
316+
}
317+
318+
.text_input_2 {
319+
margin-top: 5px;
320+
margin-bottom: 20px;
321+
}

‎typescript-admin-portal-example/views/index.ejs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</div>
2424
<div>
2525
<input type="text" placeholder='Enter a Space Separated List of Domains Used By the Org' id="domain"
26-
name="domain" class="text_input_2" required>
26+
name="domain" class="text_input text_input_2" required>
2727
</div>
2828
<div>
2929
<button type="submit" class="button">Create Organization and Log In</button>

‎typescript-admin-portal-example/views/logged_in.ejs

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,52 @@
55
<body class="container_success">
66
<div class="logged_in_nav">
77
<div class="flex">
8-
<p>You're on your way to setting up connections!</p>
8+
<div>
9+
<img src="../public/images/workos_logo_new.png" alt="workos logo">
10+
</div>
11+
<div class="flex">
12+
<p>WorkOS</p>
13+
</div>
914
</div>
1015
<div>
11-
<img src="../public/images/workos_logo_new.png" alt="workos logo">
16+
<a href="https://workos.com/docs" target="_blank"><button class='button nav-item'>Documentation</button></a>
17+
<a href="https://workos.com/docs/reference" target="_blank"><button class='button nav-item'>API
18+
Reference</button></a>
19+
<a href="https://workos.com/blog" target="_blank"><button
20+
class='button nav-item blog-nav-button'>Blog</button></a>
21+
<a href="https://workos.com/" target="_blank"><button class='button button-outline'>WorkOS</button></a>
1222
</div>
1323
</div>
1424
<div class='flex'>
1525
<div class="logged_in_div_left">
16-
<div>
26+
<div class="title-text">
1727
<h1>Your app,</h1>
18-
<h2>Enterprise Ready</h2>
28+
<h2 class="home-hero-gradient">Enterprise Ready</h2>
1929
</div>
20-
<div>
21-
<a href="https://workos.com/" target="_blank"><button class='button'>WorkOS</button></a>
22-
<a href="https://workos.com/docs" target="_blank"><button class='button'>Documentation</button></a>
23-
<a href="https://workos.com/docs/reference" target="_blank"><button class='button'>API Reference</button></a>
24-
<a href="https://workos.com/blog" target="_blank"><button class='button'>Blog</button></a>
25-
30+
<div class="title-subtext">
31+
<p>Start selling to enterprise customers with just a few lines of code.</p>
32+
<p>Implement features like single sign-on in minutes instead of months.</p>
33+
</div>
34+
<div class="flex success-buttons">
35+
<a href="https://workos.com/signup" target="_blank"><button class='button'>Get Started</button></a>
36+
<a href="mailto:[email protected]?subject=WorkOS Sales Inquiry" target="_blank"><button
37+
class='button button-outline sales-button'>Contact
38+
Sales</button></a>
2639
</div>
2740
</div>
2841
<div class="logged_in_div_right">
2942
<div class="flex_column">
3043
<h2>Which Admin Portal would you like to launch?</h2>
31-
<div>
32-
<a href="/sso-admin-portal"><button class='button dsync_button'>Launch SSO</button></a>
33-
</div>
34-
<div>
35-
<a href="/dsync-admin-portal"><button class='button dsync_button'>Launch Directory Sync</button></a>
44+
<div class="flex">
45+
<div>
46+
<a href="/sso-admin-portal"><button class='button dsync_button'>Launch SSO</button></a>
47+
</div>
48+
<div class="sales-button"></div>
49+
<div>
50+
<a href="/dsync-admin-portal"><button class='button dsync_button'>Launch Directory Sync</button></a>
51+
</div>
3652
</div>
53+
3754
</div>
3855
</div>
3956
</div>

0 commit comments

Comments
 (0)