polyculeconnect/static/style/index.css

@@ -1,98 +0,0 @@
-:root {
-    --crust: #dce0e8;
-    --mantle: #e6e9ef;
-    --base: #eff1f5;
-    --surface-0: #ccd0da;
-    --surface-1: #bcc0cc;
-    --surface-2: #acb0be;
-    --overlay-0: #9ca0b0;
-    --overlay-1: #8c8fa1;
-    --overlay-2: #7c7f93;
-    --subtext-0: #6c6f85;
-    --subtext-1: #5c5f77;
-    --text: #4c4f69;
-
-    --logo-purple: #340c46;
-    --logo-yellow: #fcbf00;
-    --logo-pink: #e50051;
-    --logo-blue: #009fe3;
-}
-
-body {
-    background-color: var(--base);
-    color: var(--text);
-    margin: 0;
-}
-
-.site-header {
-    width: 100%;
-    display: flex;
-    padding: 10px;
-    margin-bottom: 40px;
-
-    .site-logo img {
-        height: 100px;
-    }
-}
-
-.container {
-    background-color: var(--mantle);
-    display: grid;
-    grid-template-columns: 1;
-    row-gap: 20px;
-    padding: 15px 50px;
-    max-width: 50%;
-    width: fit-content;
-    margin: auto;
-    border: 1px solid var(--surface-0);
-    border-radius: 5px;
-}
-
-.container-content {
-    margin-bottom: 10px;
-    margin-top: 10px;
-}
-
-.form-elements {
-    display: grid;
-    grid-template-columns: 1;
-    row-gap: 10px;
-    margin-bottom: 15px;
-    padding: 0 10px;
-}
-
-.form-buttons {
-    display: flex;
-    justify-content: space-between;
-}
-
-.form-input {
-    width: 100%;
-    padding: 5px;
-    box-sizing: border-box;
-}
-
-.form-input::placeholder {
-    color: var(--subtext-1);
-}
-
-.button {
-    border: none;
-    color: var(--mantle);
-    padding: 5px 20px;
-    border-radius: 3px;
-    text-align: center;
-    vertical-align: middle;
-    text-decoration: none;
-    display: inline-block;
-    font-size: medium;
-    cursor: pointer;
-}
-
-.button-accept {
-    background-color: var(--logo-blue);
-}
-
-.button-cancel {
-    background-color: var(--logo-pink);
-}

polyculeconnect/templates/approval.html

@@ -1,34 +1,42 @@
 {{ template "header.html" . }}
 
-<div class="container">
+<div class="theme-panel">
-    <div class="container-content">
+    <h2 class="theme-heading">Grant Access</h2>
+
+    <hr class="dex-separator">
+    <div>
         {{ if .Scopes }}
-        <div>{{ .Client }} would like to:</div>
+        <div class="dex-subtle-text">{{ .Client }} would like to:</div>
-        <ul>
+        <ul class="dex-list">
             {{ range $scope := .Scopes }}
             <li>{{ $scope }}</li>
             {{ end }}
         </ul>
         {{ else }}
-        <div>{{ .Client }} has not requested any personal information</div>
+        <div class="dex-subtle-text">{{ .Client }} has not requested any personal information</div>
         {{ end }}
     </div>
+    <hr class="dex-separator">
 
-    <div class="form-buttons">
+    <div>
-        <form method="post" class="container-form">
+        <div class="theme-form-row">
-            <input type="hidden" name="req" value="{{ .AuthReqID }}" />
+            <form method="post">
-            <input type="hidden" name="approval" value="approve">
+                <input type="hidden" name="req" value="{{ .AuthReqID }}" />
-            <button type="submit" class="button button-accept">
+                <input type="hidden" name="approval" value="approve">
-                <span>Grant Access</span>
+                <button type="submit" class="dex-btn theme-btn--success">
-            </button>
+                    <span class="dex-btn-text">Grant Access</span>
-        </form>
+                </button>
-        <form method="post" class="container-form">
+            </form>
-            <input type="hidden" name="req" value="{{ .AuthReqID }}" />
+        </div>
-            <input type="hidden" name="approval" value="rejected">
+        <div class="theme-form-row">
-            <button type="submit" class="button button-cancel">
+            <form method="post">
-                <span>Cancel</span>
+                <input type="hidden" name="req" value="{{ .AuthReqID }}" />
-            </button>
+                <input type="hidden" name="approval" value="rejected">
-        </form>
+                <button type="submit" class="dex-btn theme-btn-provider">
+                    <span class="dex-btn-text">Cancel</span>
+                </button>
+            </form>
+        </div>
     </div>
 
 </div>

polyculeconnect/templates/error.html

@@ -1,10 +1,8 @@
 {{ template "header.html" . }}
 
-<div class="container">
+<div class="theme-panel">
-    <div class="container-content">
+    <h2 class="theme-heading">{{ .ErrType }}</h2>
-        <h2>{{ .ErrType }}</h2>
+    <p>{{ .ErrMsg }}</p>
-        <p>{{ .ErrMsg }}</p>
-    </div>
 </div>
 
 {{ template "footer.html" . }}

polyculeconnect/templates/header.html

@@ -7,8 +7,6 @@
     <title>PolyculeConnect</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="stylesheet" href="/static/style/index.css">
-
     <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
@@ -18,11 +16,4 @@
     <meta name="theme-color" content="#ffffff">
 </head>
 
-<body>
+<body>
-
-    <div class="site-header">
-        <div class="site-logo">
-            <img src="/static/img/logo-text.png" alt="PolyculeConnect website logo">
-        </div>
-
-    </div>

polyculeconnect/templates/login.html

@@ -2,22 +2,12 @@
 
 <script src="/static/scripts/index.js" defer></script>
 
-<div class="container">
+<div>
-    <div class="container-content">
+    <form action="" id="connectorform">
-        Enter the service to use for login.
+        <label for="cname">Connector name</label>
-    </div>
+        <input type="text" id="cname" name="connector_id">
-
+        <input type="submit">
-    <div class="container-content">
+    </form>
-        <form action="" id="connectorform" class="container-form">
-            <div class="form-elements">
-                <input type="text" id="cname" name="connector_id" placeholder="Service name" required
-                    class="form-input">
-            </div>
-            <div class="form-buttons">
-                <input type="submit" class="button button-accept" value="Continue">
-            </div>
-        </form>
-    </div>
 </div>
 
 {{ template "footer.html" . }}