Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SI 2483 #220

Merged
merged 9 commits into from
Jul 6, 2024
Merged

SI 2483 #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ce9ca93
a start
lauradeng23 Jun 26, 2024
16ed9a2
dylan help
lauradeng23 Jun 28, 2024
9fb4833
additional styling
lauradeng23 Jun 28, 2024
bbf6d86
get rid of background color for icons
lauradeng23 Jun 28, 2024
a123914
added apple logo
lauradeng23 Jun 28, 2024
58b4c9f
added wallet icon
lauradeng23 Jun 28, 2024
ab44a47
Remove .DS_Store, put in .gitignore
elffjs Jul 6, 2024
693760e
Revert changes to the Apple connector and example config
elffjs Jul 6, 2024
88f6b72
Do keep the dark theme
elffjs Jul 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
/docker-compose.override.yaml
/var/
/vendor/
.DS_Store
2 changes: 1 addition & 1 deletion examples/config-dev.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ frontend:
issuer: DIMO
# logoURL: theme/logo.png
# dir: web/
# theme: light
theme: dark

# Configuration for telemetry
telemetry:
Expand Down
13 changes: 13 additions & 0 deletions web/static/DIMO_Logo_White.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions web/static/DriveDIMO_mint.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added web/static/EuclidCircularA-Regular.otf
View file
Open in desktop
Binary file not shown.
9 changes: 9 additions & 0 deletions web/static/img/apple-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions web/static/img/wallet-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 7 additions & 13 deletions web/static/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,63 +41,58 @@ body {
height: 36px;
margin-right: 5px;
width: 36px;
display: inline-block;
vertical-align: middle;
}

.dex-btn-icon--apple {
background-image: url(../static/img/apple-icon.svg);;
}

.dex-btn-icon--google {
background-color: #FFFFFF;
background-image: url(../static/img/google-icon.svg);;
}

.dex-btn-icon--local {
background-color: #84B6EF;
background-image: url(../static/img/email-icon.svg);
}

.dex-btn-icon--gitea {
background-color: #F5F5F5;
background-image: url(../static/img/gitea-icon.svg);
}

.dex-btn-icon--github {
background-color: #F5F5F5;
background-image: url(../static/img/github-icon.svg);
}

.dex-btn-icon--gitlab {
background-color: #F5F5F5;
background-image: url(../static/img/gitlab-icon.svg);
background-size: contain;
}

.dex-btn-icon--keystone {
background-color: #F5F5F5;
background-image: url(../static/img/keystone-icon.svg);
background-size: contain;
}

.dex-btn-icon--oidc {
background-color: #EBEBEE;
background-image: url(../static/img/oidc-icon.svg);
background-size: contain;
}

.dex-btn-icon--bitbucket-cloud {
background-color: #205081;
background-image: url(../static/img/bitbucket-icon.svg);
}

.dex-btn-icon--atlassian-crowd {
background-color: #CFDCEA;
background-image: url(../static/img/atlassian-crowd-icon.svg);
}

.dex-btn-icon--ldap {
background-color: #84B6EF;
background-image: url(../static/img/ldap-icon.svg);
}

.dex-btn-icon--saml {
background-color: #84B6EF;
background-image: url(../static/img/saml-icon.svg);
}

Expand All @@ -111,8 +106,7 @@ body {
}

.dex-btn-icon--web3 {
background-color: #FFFFFF;
background-image: url(../static/img/metamask-icon.svg);
background-image: url(../static/img/wallet-icon.svg);
background-size: contain;
}

Expand Down
5 changes: 0 additions & 5 deletions web/templates/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,5 @@
</head>

<body class="theme-body">
<div class="theme-navbar">
<div class="theme-navbar__logo-wrap">
<img class="theme-navbar__logo" src="{{ url .ReqPath logo }}">
</div>
</div>

<div class="dex-container">
29 changes: 15 additions & 14 deletions web/templates/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
{{ template "header.html" . }}

<div class="theme-panel">
<h2 class="theme-heading">Log in to {{ issuer }} </h2>
<div>
{{ range $c := .Connectors }}
<div class="theme-form-row">
<a href="{{ $c.URL }}" target="_self">
<button class="dex-btn theme-btn-provider">
<span class="dex-btn-icon dex-btn-icon--{{ $c.Type }}"></span>
<span class="dex-btn-text">Log in with {{ $c.Name }}</span>
</button>
</a>
</div>
{{ end }}
</div>
<div class="theme-body">
<img src="../dex/static/DriveDIMO_mint.svg" alt="DIMO Logo" class="dimo-logo">
<h2 class="theme-heading">Log in to your account</h2>
<div class="theme-panel">
{{ range $c := .Connectors }}
<div class="theme-form-row">
<a href="{{ $c.URL }}" target="_self">
<button class="dex-btn theme-btn-provider">
<span class="dex-btn-icon dex-btn-icon--{{ $c.Type }}"></span>
<span class="dex-btn-text">Log in with {{ $c.Name }}</span>
</button>
</a>
</div>
{{ end }}
</div>
</div>

{{ template "footer.html" . }}
155 changes: 55 additions & 100 deletions web/themes/dark/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,77 @@
.theme-body {
background-color: #0f1218;
color: #c8d1d9;
font-family: 'Source Sans Pro', Helvetica, sans-serif;
}

.theme-navbar {
background-color: #161b22;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
color: #161B2B;
font-size: 13px;
font-weight: 100;
height: 46px;
overflow: hidden;
padding: 0 10px;
@font-face {
font-family: 'Euclid';
src: url('../static/EuclidCircularA-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

.theme-navbar__logo-wrap {
display: inline-block;
height: 100%;
overflow: hidden;
padding: 10px 15px;
width: 300px;
.theme-body {
background-color: #000000;
color: #ffffff;
font-family: 'Euclid', 'Source Sans Pro', Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
}

.theme-navbar__logo {
height: 100%;
max-height: 25px;
/* Logo */
.dimo-logo {
width: 100px;
margin-bottom: 20px;
}

.theme-heading {
font-size: 20px;
font-weight: 500;
margin-top: 0;
color: #c8d1d9;
font-size: 48px;
font-weight: 500;
margin: 30px 0;
color: #ffffff;
text-align: center;
white-space: pre-wrap;
line-height: 1.2;
}


.theme-panel {
background-color: #161b22;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
padding: 30px;
background-color: transparent;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}

.theme-btn-provider {
background-color: #1e242d;
color: #c8d1d9;
border: 1px solid #30373c;
min-width: 250px;
background-color: #333333;
color: #ffffff;
border: none;
width: 300px;
height: 50px;
padding: 0 20px;
border-radius: 25px;
font-size: 14px;
font-family: 'Euclid', 'Source Sans Pro', Helvetica, sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 5px 0;
text-align: center;
box-shadow: none;
}

.theme-btn-provider:hover {
background-color: #212731;
color: #ffffff;
}

.theme-btn--primary {
background-color: #1e242d;
border: none;
color: #c8d1d9;
min-width: 200px;
padding: 6px 12px;
}

.theme-btn--primary:hover {
background-color: #212731;
color: #e9e9e9;
}

.theme-btn--success {
background-color: #1891bb;
color: #e9e9e9;
width: 250px;
background-color: #3a3a3a;
color: #ffffff;
}

.theme-btn--success:hover {
background-color: #1da5d4;
.dex-btn-icon {
margin-right: 10px;
}

.theme-form-row {
display: block;
margin: 20px auto;
}

.theme-form-input {
display: block;
height: 36px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border: 1px solid #515559;
border-radius: 4px;
color: #c8d1d9;
background-color: #0f1218;
box-shadow: inset 0 1px 1px rgb(27, 40, 46);
width: 250px;
margin: auto;
}

.theme-form-input:focus,
.theme-form-input:active {
outline: none;
border-color: #f8f9f9;
color: #c8d1d9;
}

.theme-form-label {
width: 250px;
margin: 4px auto;
text-align: left;
position: relative;
font-size: 13px;
font-weight: 600;
color: #c8d1d9;
}

.theme-link-back {
margin-top: 4px;
}

.dex-container {
color: #c8d1d9;
display: flex;
justify-content: center;
margin: 5px 0;
}
Loading