Update django admin portal app (#35)

Co-authored-by: Adam Wolfman <[email protected]>

Author: awolfden

python-django-admin-portal-example/README.md

@@ -1,5 +1,5 @@
 # python-django-admin-portal-example
-A basic Django app that uses the [WorkOS Python SDK](https://github.com/workos-inc/workos-python) to access the Admin Portal.
+A basic Django app that uses the [WorkOS Python SDK](https://github.com/workos/workos-python) to access the Admin Portal.
 
 ## Prerequisites
 - Python 3.6+
@@ -10,14 +10,14 @@ A basic Django app that uses the [WorkOS Python SDK](https://github.com/workos-i
 1. Clone the main git repo for these Python example apps using your preferred secure method (HTTPS or SSH).
    ```bash
    # HTTPS
-   $ git clone https://github.com/workos-inc/python-django-example-applications.git
+   $ git clone https://github.com/workos/python-django-example-applications.git
    ```
 
    or
 
    ```bash
    # SSH
-   $ git clone [email protected]:workos-inc/python-django-example-applications.git
+   $ git clone [email protected]:workos/python-django-example-applications.git
    ```
 
 2. Navigate to the Admin Portal example app within the cloned repo.

python-django-admin-portal-example/workos_django/admin_portal/static/css/login.css

@@ -1,5 +1,7 @@
 body {
     font-family: Inter, sans-serif;
+    background-color: #f9f9fb;
+
 }
 
 .container_login {
@@ -22,26 +24,6 @@ body {
     bottom: 10px;
 }
 
-.text_input {
-    border: 1px solid #555555;
-    border-radius: 10px;
-    margin: 20px 0px 7px 0px;
-    padding: 5px;
-    height: 35px;
-    width: 375px;
-    text-align: center;
-}
-
-.text_input_2 {
-    border: 1px solid #555555;
-    border-radius: 10px;
-    margin: 0px 0px 20px 0px;
-    padding: 5px;
-    height: 35px;
-    width: 375px;
-    text-align: center;
-}
-
 .flex {
     display: flex;
     justify-content: center;
@@ -54,6 +36,24 @@ body {
     align-items: center;
 }
 
+.space-between {
+    justify-content: space-between;
+}
+
+.width-75 {
+    width: 75%;
+}
+
+.width-40vw {
+    width: 40vw;
+    overflow: scroll;
+    word-wrap: break-word;
+}
+
+.width-95 {
+    width: 95%;
+}
+
 .container_success {
     display: flex;
     flex-direction: column;
@@ -84,31 +84,38 @@ body {
     border: 2px solid #6363f1;
     border-radius: 26px;
     color: white;
-    padding: 16px 32px;
+    padding: 8px 16px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     transition-duration: 0.4s;
     cursor: pointer;
-  }
-  
-.button:hover {
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+.button-outline {
+    background-color: #f9f9fb;
+    color: #6363f1;
+    padding: 8px 16px;
+}
+
+.button:hover,
+.button-outline:hover {
     background-color: #555555;
     border: 2px solid #555555;
     color: white;
 }
 
-.dsync_button {
-    width: 400px;
+.sales-button {
+    margin-left: 10px;
 }
 
-.login_button {
-    width: 95%;
-}
 
-h2, h1 {
+
+h2,
+h1 {
     text-align: center;
     color: #555555;
 }
@@ -122,16 +129,18 @@ h2, h1 {
     align-items: center;
     position: relative;
     bottom: 10%;
-
+    /* background-color: #f9f9fb; */
 }
+
 .logged_in_div_left {
     width: 40%;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    background-color: #dad8d8;
+    align-items: left;
+    background-color: #f9f9fb;
+    margin-left: 4vw;
 }
 
 .logged_in_div_left div {
@@ -149,39 +158,72 @@ h2, h1 {
     letter-spacing: -.05em;
 }
 
-.logged_in_div_left h2 {
-    color: #6363f1;
-    font-size: 75px;
+.home-hero-gradient {
+    background-image: linear-gradient(45deg, #a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0));
+    background-size: 150% 100%;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: intro-gradient 1.2s cubic-bezier(0.85, 0.26, 0.89, 0.93);
+    animation-iteration-count: 1;
+    animation-fill-mode: backwards;
+    animation-delay: 0.4s;
     text-align: left;
-    margin-top: 0px;
-    font-weight: normal;
+    font-size: 75px;
     letter-spacing: -.05em;
+    font-weight: normal;
+    margin-top: 0px;
+}
+
+.title-text {
+    margin-bottom: -50px;
+}
+
+.title-subtext {
+    color: gray;
+    line-height: 10px;
+    margin-bottom: 15px;
+    font-weight: 200;
 }
 
 .logged_in_div_left button {
     padding: 8px 22px;
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+.logged_in_div_right button {
+    padding: 8px 22px;
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
 }
 
 div.text_box {
-    background-color: #dad8d8;
-    border-radius: 5px;
-    border: 2px solid #6363f1;
-    width: 75%;
+    background-color: #f9f9fb;
+    width: 40vw;
+    max-height: 30vh;
     padding: 10px;
     word-wrap: break-word;
+    overflow: scroll;
+    border-width: 3px;
+    border-style: solid;
+    border-image:
+        linear-gradient(#a163f1, #6363f1 22%, #3498ea 40%, #40dfa3 67%, rgba(64, 223, 163, 0)) 0 100%;
 }
 
 .logged_in_nav {
     display: flex;
     justify-content: space-between;
-    background-color: #6363f1;
+    background-color: #f9f9fb;
     height: 60px;
-    padding: 7px 7px 7px 10px;
+    padding: 15px 30px 15px 30px;
+
+    z-index: 1000;
 }
+
 .logged_in_nav p {
     padding: 4px 0px 0px 15px;
     line-height: 1;
-    color: white;
+    color: #29363d;
 }
 
 .logged_in_nav img {
@@ -194,14 +236,93 @@ div.text_box {
     border: 2px solid #555555;
 }
 
-#note_div {
-    border-left: 1px solid #6363f1b6;
-    border-right: 1px solid #6363f1b6;
-    background-color: #6363f122;
-    color: #2f2e2e;
-    margin-top: 20px;
-    padding: 0px 5px 0px 5px;
+.nav-item {
+    color: black;
+    border: 2px solid #f9f9fb;
+    background-color: #f9f9fb;
+    box-shadow: none;
+    border-radius: 5px;
+}
+
+.blog-nav-button {
+    margin-right: 20px;
+    background-color: #f9f9fb;
+    border: 2px solid #f9f9fb;
+}
+
+.directory-buttons {
+    justify-content: space-between;
+    width: 40vw;
+}
+
+.nav-item:hover {
+    background-color: #f9f9fb;
+    border: 2px solid #f9f9fb;
+    color: #a6a4a4;
+}
+
+pre.prettyprint {
+    border: none !important;
+}
+
+ul {
+    list-style-type: none;
+    margin-right: 35px;
+    text-decoration: none;
+}
+
+li {
+    padding: 6px;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:visited {
+    text-decoration: none;
+}
+
+li.even {
+    background-color: rgb(228, 228, 228);
+}
+
+.card {
+    border: 1px solid #555555;
+    border-radius: 10px;
+    margin: 0px 15px 0px 15px;
+    padding: 25px 50px;
+    margin-bottom: 20px;
     text-align: center;
-    font-size: smaller;
-    width: 75%;
+}
+
+.webhooks-container {
+    width: 45vw;
+    padding: 25px;
+    max-height: 450px;
+    overflow-y: scroll;
+}
+
+#clear_button_div {
+
+    margin-bottom: 50px;
+}
+
+.hidden {
+    display: none;
+}
+
+.text_input {
+    border: 1px solid #555555;
+    border-radius: 10px;
+    margin: 20px 0px 7px 0px;
+    padding: 5px;
+    height: 35px;
+    width: 25vw;
+    text-align: center;
+}
+
+.text_input_2 {
+    margin-top: 5px;
+    margin-bottom: 20px;
 }