Skip to content

Commit 9c9d03b

Browse files
awolfdenAdam Wolfman
awolfden
and
Adam Wolfman
authored
Update SSO UI with new website branding (#18)
* Add top-level python flask env for Semaphore * Update sdk versions and readme files * Update UI with new website branding * Update link urls Co-authored-by: Adam Wolfman <[email protected]>
1 parent eb40741 commit 9c9d03b

File tree

2 files changed

+141
-46
lines changed

2 files changed

+141
-46
lines changed

‎python-flask-sso-example/static/login.css‎

Lines changed: 94 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
body {
22
font-family: Inter, sans-serif;
3+
background-color: #f9f9fb;
4+
35
}
46

57
.container_login {
@@ -34,6 +36,14 @@ body {
3436
align-items: center;
3537
}
3638

39+
.space-between {
40+
justify-content: space-between;
41+
}
42+
43+
.width-75 {
44+
width: 75%;
45+
}
46+
3747
.container_success {
3848
display: flex;
3949
flex-direction: column;
@@ -72,19 +82,33 @@ body {
7282
margin: 4px 2px;
7383
transition-duration: 0.4s;
7484
cursor: pointer;
75-
}
76-
77-
.button:hover {
85+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
86+
}
87+
88+
.button-outline {
89+
background-color: #f9f9fb;
90+
color: #6363f1;
91+
padding: 8px 16px;
92+
}
93+
94+
.button:hover,
95+
.button-outline:hover {
7896
background-color: #555555;
7997
border: 2px solid #555555;
8098
color: white;
8199
}
82100

101+
.sales-button {
102+
margin-left: 10px;
103+
}
104+
83105
.login_button {
84106
width: 95%;
107+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
85108
}
86109

87-
h2, h1 {
110+
h2,
111+
h1 {
88112
text-align: center;
89113
color: #555555;
90114
}
@@ -98,16 +122,18 @@ h2, h1 {
98122
align-items: center;
99123
position: relative;
100124
bottom: 10%;
101-
125+
/* background-color: #f9f9fb; */
102126
}
127+
103128
.logged_in_div_left {
104129
width: 40%;
105130
height: 100vh;
106131
display: flex;
107132
flex-direction: column;
108133
justify-content: center;
109-
align-items: center;
110-
background-color: #dad8d8;
134+
align-items: left;
135+
background-color: #f9f9fb;
136+
margin-left: 4vw;
111137
}
112138

113139
.logged_in_div_left div {
@@ -125,39 +151,69 @@ h2, h1 {
125151
letter-spacing: -.05em;
126152
}
127153

128-
.logged_in_div_left h2 {
129-
color: #6363f1;
130-
font-size: 75px;
154+
.home-hero-gradient {
155+
background-image: linear-gradient(45deg, #a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0));
156+
background-size: 150% 100%;
157+
background-repeat: no-repeat;
158+
-webkit-background-clip: text;
159+
-webkit-text-fill-color: transparent;
160+
background-clip: text;
161+
animation: intro-gradient 1.2s cubic-bezier(0.85, 0.26, 0.89, 0.93);
162+
animation-iteration-count: 1;
163+
animation-fill-mode: backwards;
164+
animation-delay: 0.4s;
131165
text-align: left;
132-
margin-top: 0px;
133-
font-weight: normal;
166+
font-size: 75px;
134167
letter-spacing: -.05em;
168+
font-weight: normal;
169+
margin-top: 0px;
170+
}
171+
172+
.title-text {
173+
margin-bottom: -50px;
174+
}
175+
176+
.title-subtext {
177+
color: gray;
178+
line-height: 10px;
179+
margin-bottom: 15px;
180+
font-weight: 200;
135181
}
136182

137183
.logged_in_div_left button {
138184
padding: 8px 22px;
185+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
139186
}
140187

141188
div.text_box {
142-
background-color: #dad8d8;
143-
border-radius: 5px;
144-
border: 2px solid #6363f1;
189+
background-color: #f9f9fb;
190+
/* border-radius: 5px;
191+
border: 2px solid #6363f1; */
145192
width: 75%;
193+
max-height: 30vh;
146194
padding: 10px;
147195
word-wrap: break-word;
196+
overflow: scroll;
197+
border-width: 3px;
198+
border-style: solid;
199+
border-image:
200+
linear-gradient(#a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0)) 0 100%;
148201
}
149202

150203
.logged_in_nav {
151204
display: flex;
152205
justify-content: space-between;
153-
background-color: #6363f1;
206+
background-color: #f9f9fb;
154207
height: 60px;
155-
padding: 7px 7px 7px 10px;
208+
padding: 15px 30px 15px 30px;
209+
210+
z-index: 1000;
156211
}
212+
157213
.logged_in_nav p {
158214
padding: 4px 0px 0px 15px;
159215
line-height: 1;
160-
color: white;
216+
color: #29363d;
161217
}
162218

163219
.logged_in_nav img {
@@ -169,3 +225,23 @@ div.text_box {
169225
.logged_in_nav img:hover {
170226
border: 2px solid #555555;
171227
}
228+
229+
.nav-item {
230+
color: black;
231+
border: 2px solid #f9f9fb;
232+
background-color: #f9f9fb;
233+
box-shadow: none;
234+
border-radius: 5px;
235+
}
236+
237+
.blog-nav-button {
238+
margin-right: 20px;
239+
background-color: #f9f9fb;
240+
border: 2px solid #f9f9fb;
241+
}
242+
243+
.nav-item:hover {
244+
background-color: #f9f9fb;
245+
border: 2px solid #f9f9fb;
246+
color: #a6a4a4;
247+
}

‎python-flask-sso-example/templates/login_successful.html‎

Lines changed: 47 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,59 @@
11
<html>
2-
<head>
3-
<link rel="stylesheet" href="{{ url_for('static', filename='login.css')}}">
4-
</head>
5-
<body class="container_success">
6-
<div class="logged_in_nav">
7-
<div class="flex">
8-
<p>You're logged in {{first_name}}, welcome!</p>
9-
</div>
2+
3+
<head>
4+
<link rel="stylesheet" href="{{ url_for('static', filename='login.css')}}">
5+
</head>
6+
7+
<body class="container_success">
8+
<div class="logged_in_nav">
9+
<div class="flex">
1010
<div>
1111
<img src="../static/images/workos_logo_new.png" alt="workos logo">
1212
</div>
13+
<div class="flex">
14+
<p>You're logged in {{first_name}}, welcome!</p>
15+
</div>
1316
</div>
14-
<div class='flex'>
15-
<div class="logged_in_div_left">
16-
<div>
17-
<h1>Your app,</h1>
18-
<h2>Enterprise Ready</h2>
19-
</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-
26-
</div>
17+
<div>
18+
<a href="https://workos.com/docs" target="_blank"><button class='button nav-item'>Documentation</button></a>
19+
<a href="https://workos.com/docs/reference" target="_blank"><button class='button nav-item'>API
20+
Reference</button></a>
21+
<a href="https://workos.com/blog" target="_blank"><button
22+
class='button nav-item blog-nav-button'>Blog</button></a>
23+
<a href="https://workos.com/" target="_blank"><button class='button button-outline'>WorkOS</button></a>
24+
</div>
25+
</div>
26+
<div class='flex'>
27+
<div class="logged_in_div_left">
28+
<div class="title-text">
29+
<h1>Your app,</h1>
30+
<h2 class="home-hero-gradient">Enterprise Ready</h2>
31+
</div>
32+
<div class="title-subtext">
33+
<p>Start selling to enterprise customers with just a few lines of code.</p>
34+
<p>Implement features like single sign-on in minutes instead of months.</p>
35+
</div>
36+
<div class="flex success-buttons">
37+
<a href="https://workos.com/signup" target="_blank"><button class='button'>Get Started</button></a>
38+
<a href="mailto:[email protected]?subject=WorkOS Sales Inquiry" target="_blank"><button
39+
class='button button-outline sales-button'>Contact
40+
Sales</button></a>
2741
</div>
28-
<div class="logged_in_div_right">
29-
<div class="flex_column">
42+
</div>
43+
<div class="logged_in_div_right">
44+
<div class="flex_column">
45+
<div class="flex width-75 space-between">
3046
<h2>Raw Profile Response Details</h2>
31-
<div class="text_box">
32-
<p>{{raw_profile}}</p>
33-
</div>
34-
<a href="/logout"><button class="button">Log Out</button></a>
47+
<a href="/logout"><button class="button button-outline">Log Out</button></a>
3548
</div>
3649

50+
<div class="text_box">
51+
<p>{{raw_profile}}</p>
52+
</div>
3753
</div>
54+
3855
</div>
39-
</body>
56+
</div>
57+
</body>
58+
4059
</html>

0 commit comments

Comments
 (0)