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

Jump to bottom

Update integration page styling and added intro summary #95

Merged
merged 16 commits into from
Jun 4, 2024
Merged

Update integration page styling and added intro summary #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
c3ba5c4
Update page styling and added intro summary
codecovdesign Mar 20, 2024
4662820
update styles and html and removed images
codecovdesign Apr 10, 2024
58c4277
Delete core/templates/pages/images/slack_codecov.svg
codecovdesign Apr 10, 2024
f86aec0
Delete core/templates/pages/main.css
codecovdesign Apr 10, 2024
5a4a435
Update with new landing page styles
RulaKhaled Apr 29, 2024
1ad18bc
update CRS policy
RulaKhaled Apr 29, 2024
56b6f0a
update CRS policy
RulaKhaled Apr 29, 2024
2f8c534
update CRS policy
RulaKhaled Apr 29, 2024
4162b75
update CRS policy
RulaKhaled Apr 29, 2024
524d177
update CRS policy
RulaKhaled Apr 29, 2024
a8d05ec
update CRS policy
RulaKhaled Apr 29, 2024
7909f7a
update CRS policy
RulaKhaled Apr 29, 2024
767e0c2
Update with imgs from storage
RulaKhaled May 30, 2024
de33541
Linter
RulaKhaled Jun 3, 2024
c050b42
Update CRS
RulaKhaled Jun 3, 2024
adf8f9c
Update CRS
RulaKhaled Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 25 additions & 14 deletions codecov_slack_app/settings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,7 @@
if RUN_ENV == "STAGING":
ALLOWED_HOSTS = [".codecov.dev"]
elif RUN_ENV == "LOCAL":
ALLOWED_HOSTS = [
"0.0.0.0",
"localhost",
"webapp",
"django",
"app"
]
ALLOWED_HOSTS = ["0.0.0.0", "localhost", "webapp", "django", "app"]
else:
ALLOWED_HOSTS = [".codecov.io"]
if THIS_POD_IP:
Expand Down Expand Up @@ -97,9 +91,7 @@

DATABASES = {
"default": {
"ENGINE": os.environ.get(
"SQL_ENGINE", "django.db.backends.postgresql"
),
"ENGINE": os.environ.get("SQL_ENGINE", "django.db.backends.postgresql"),
"NAME": os.environ.get("POSTGRES_DB", "codecov_slack_app"),
"USER": os.environ.get("POSTGRES_USER", "user"),
"PASSWORD": os.environ.get("POSTGRES_PASSWORD", "password"),
Expand Down Expand Up @@ -127,12 +119,31 @@
},
]

#CSP Configuration
CSP_IMG_SRC = ("'self'", 'https://platform.slack-edge.com', 'data:', 'https://storage.googleapis.com/codecov-cdn/codecov.svg')
# CSP Configuration
CSP_IMG_SRC = (
"'self'",
"https://platform.slack-edge.com",
"data:",
"https://storage.googleapis.com/codecov-cdn/codecov.svg",
"https://storage.googleapis.com/codecov-cdn/comparison.png",
"https://storage.googleapis.com/codecov-cdn/pulls.png",
"https://storage.googleapis.com/codecov-cdn/slack_onboarding.png",
)

CSP_STYLE_SRC = (
"'self'",
"'sha256-XUpurJYPfudnKesBwHWGnVTMcFyg5inchJcdAppSMcY='",
"'sha256-xuBr9YVS7V3hqBkhwLDtyohNbGFdO8PSWO/QDH0orxk='",
"fonts.googleapis.com",
)

CSP_STYLE_SRC = ("'self'", "'sha256-D+iNaQqqton9W916d40qgS+X8nOP2VHjDjx0w3cEujI='","'sha256-u5UAC0Jr1hm3lANIezHbaLlVsjmh/8jbWf7rIYw3Rso='", "'sha256-G9kZzyN24irmY+hg/rWbW9P5DYILFdr63wXKRPMJlCc='")
CSP_SCRIPT_SRC = (
"'self'",
"'sha256-XUpurJYPfudnKesBwHWGnVTMcFyg5inchJcdAppSMcY='",
"'sha256-AOvatN1zbevXu86FuiKCrZsAX85CK5HI7toSinbJ7rY='",
)

CSP_SCRIPT_SRC = ("'self'", "'sha256-bRshlyP6k3QGX2IqYLKFxJzV5neO8GwydiNKAi6jOYo='")
CSP_FONT_SRC = ("'self'", "https://fonts.gstatic.com")

# Internationalization
# https://docs.djangoproject.com/en/4.1/topics/i18n/
Expand Down
281 changes: 170 additions & 111 deletions core/templates/pages/slack_install.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,136 +2,195 @@
<html>

<head>
<title>Install Codecov Slack App</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f7fa;
display: flex;
flex-direction: column;
align-items: center;
}
<title>Install Codecov Slack App</title>
<style>
body {
font-family: "Poppins", sans-serif;
background: linear-gradient(162deg,
#f8d1e8 0%,
#ece6fc 36%,
#f9f9ff 95%);

.container {
max-width: 400px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
text-align: center;
margin-top: 80px;
font-weight: 300;
display: flex;
flex-direction: column;
align-items: center;
min-width: none;
background-size: cover;
min-height: 100vh;

h1 {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
h1 {
font-weight: 500;
font-size: 2rem;
margin: 0;
}

.container p {
font-size: 16px;
margin-bottom: 30px;
text-align: center;
}
.main-body {
max-width: 900px;
font-size: 1.4em;
margin: 0;
}

form {
display: flex;
justify-content: center;
}
button {
background: linear-gradient(162deg,
rgba(240, 31, 122, 1) 0%,
rgba(138, 18, 70, 0.5) 200%);
border: none;
color: white;
padding: 15px 60px;
font-size: 1.5em;
border-radius: 3px;
cursor: pointer;
margin: 30px 0px;
transition: 0.3s;
font-family: "Poppins", sans-serif;
}
}

button {
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #f01f7a;
border: none;
border-radius: 4px;
cursor: pointer;
}
a {
text-decoration: none;
color: rgba(0, 113, 194, 1);
}

button:hover {
background-color: #ca1866;
}
a:hover {
text-decoration: underline;
}

footer {
position: fixed;
bottom: 0;
width: 80%;
font-size: 13px;
color: #68737e;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: space-between;
align-items: center;
}
footer {
width: 80%;
font-size: 13px;
color: #68737e;
display: flex;
justify-content: space-between;
align-items: center;
border-top: solid 1px rgba(216, 220, 226, 1);
padding-top: 20px;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;

ul li {
display: inline-block;
margin-left: 9px;
}
li {
display: inline-block;
margin-left: 9px;

.left-ul {
display: flex;
align-items: center;
a {
color: #0071c2;
text-decoration: none;
}
}
}

ul li a {
color: #0071c2;
text-decoration: none;
}
.left-ul {
display: flex;
align-items: center;

ul li a:hover {
text-decoration: underline;
}
</style>
p {
font-size: 13px;
}
}

.features {
text-align: left;
margin: 50px 0;
display: flex;
flex-direction: column;
gap: 10px;

h2 {
font-size: 18px;
font-weight: 600;
margin: 0;
}

p {
font-size: 16px;
width: 600px;
margin: 0;
}

img {
width: 600px;
border-radius: 5px;
}
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
</head>

<body>
<div class="container">
<h1>Install Codecov App for Slack</h1>
<p>Click the button below to install the app in your Slack workspace:</p>
<form action="https://slack.com/oauth/v2/authorize" method="GET">
<input type="hidden" name="client_id" value="{{ client_id }}">
<input type="hidden" name="scope" value="{{ scope }}">
<input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
<input type="hidden" name="state" value="{{ state }}">
<button type="submit">Install Codecov App for Slack</button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this is a form, we should keep type="submit" https://www.w3schools.com/tags/tag_button.asp

</form>
<img src="https://storage.googleapis.com/codecov-cdn/codecov.svg" alt="Codecov Logo" width="120" />
<h1>Streamline Code Coverage with Slack</h1>
<p class="main-body">
Codecov's Slack integration brings the power of code coverage directly
into your Slack channels, enabling you and your team to stay informed and
proactive about your code's quality without ever leaving Slack.
</p>
<form action="https://slack.com/oauth/v2/authorize" method="GET">
<input type="hidden" name="client_id" value="{{ client_id }}" />
<input type="hidden" name="scope" value="{{ scope }}" />
<input type="hidden" name="redirect_uri" value="{{ redirect_uri }}" />
<input type="hidden" name="state" value="{{ state }}" />
<button class="gradient-button">Add to Slack</button>
</form>
<div class="features">
<h2>Code Coverage Changes at a Glance</h2>
<p>
Get automated updates on code coverage changes for your PRs with
/codecov notify. Customize notifications for targeted updates right in
Slack, allowing you to address coverage decreases or celebrate increases
without waiting around for PR calculations.
</p>
<img src="https://storage.googleapis.com/codecov-cdn/slack_onboarding.png" alt="Codecov Logo" />
</div>
<div class="features">
<h2>Efficiently Compare Commits</h2>
<p>
Use /codecov compare to get a snapshot comparison between two commits,
identifying potential regressions or celebrating improvements in your
codebase's coverage. It's a direct line to understanding and improving
your project's code quality.
</p>
<img src="https://storage.googleapis.com/codecov-cdn/comparison.png" alt="Codecov Logo" />
</div>
<div class="features">
<h2>Comprehensive PR List</h2>
<p>
Gain insight into PRs and coverage changes with a simple slash command.
This isn't just limited to PRs; access a list of flags, components,
commits, and branches for a full spectrum view on your project's health,
directly in your Slack workspace.
</p>
<img src="https://storage.googleapis.com/codecov-cdn/pulls.png" alt="Codecov Logo" />
</div>
<footer>
<div class="left-ul">
<p id="sentry-copy"></p>
<ul>
<li><a href="https://codecov.io/privacy">Privacy</a></li>
<li><a href="https://codecov.io/terms">Terms</a></li>
</ul>
</div>
<footer>
<div class="left-ul">
<p id="sentry-copy"></p>
<ul>
<li>
<a href="https://codecov.io/privacy">Privacy</a>
</li>
<li>
<a href="https://codecov.io/terms">Terms</a>
</li>
</ul>
</div>
<img src="https://storage.googleapis.com/codecov-cdn/codecov.svg" alt="Codecov Logo" width="100" height="20">
<ul>
<li>
<a href="https://codecovpro.zendesk.com/hc/en-us">Support</a>
</li>
<li>
<a href="https://github.com/codecov/feedback/issues/44">Feedback</a>
</li>
</ul>
</footer>
<img src="https://storage.googleapis.com/codecov-cdn/codecov.svg" alt="Codecov Logo" />
<ul>
<li><a href="https://codecovpro.zendesk.com/hc/en-us">Support</a></li>
<li>
<a href="https://github.com/codecov/feedback/issues/44">Feedback</a>
</li>
</ul>
</footer>
</body>
<script>
const year = new Date().getFullYear();
document.getElementById("sentry-copy").innerHTML = `© ${year} Sentry`;
const year = new Date().getFullYear();
document.getElementById("sentry-copy").innerHTML = `© ${year} Sentry`;
</script>

</html>