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.

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

fix: update deps #163

Draft
wants to merge 11 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
refactor: update to use newer css classes
wolfy1339 committed Jul 23, 2024
commit 768e75f50302f961aa11b4ad945e3d7398c11047
6 changes: 3 additions & 3 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -6,9 +6,9 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>smee.io | Webhook payload delivery service</title>
<link rel="shortcut icon" href="/public/favicon.png">
<link rel="stylesheet" href="main.min.css">
<link rel="stylesheet" href="/public/main.min.css">
</head>
<body>
<body data-color-mode="light" data-light-theme="light">
<header class="fgColor-onEmphasis text-center p-responsive bgColor-accent-emphasis d-flex flex-column flex-items-center flex-justify-center" style="height: 80vh">
<div class="header__anim">
<div class="header__anim__payload"></div>
@@ -42,7 +42,7 @@ <h2 class="blue-700">Webhook payload delivery service</h2>
<p class="lead text-center col-12 col-md-8 mx-auto">Tell your webhook source to send payloads to your <strong>smee.io</strong> channel, then either use the <a href="https://github.com/probot/smee-client" target="_blank" rel="noopener noreferrer">smee client</a> or, if you're using <a href="https://probot.github.io" target="_blank" rel="noopener noreferrer">Probot</a> to build a GitHub App, just <a href="https://probot.github.io/docs/development/#configure-a-github-app">set the environment variable</a>.</p>
</main>

<footer class="border-top text-center py-4 text-gray">
<footer class="border-top text-center py-4 fgColor-muted">
Made with <svg height="16" class="octicon octicon-heart" viewBox="0 0 12 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M11.2 3c-.52-.63-1.25-.95-2.2-1-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-.95.05-1.69.38-2.2 1-.52.61-.78 1.28-.8 2 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.02-.72-.28-1.39-.8-2.02V3z"></path></svg> by the <a href="https://github.com/probot" target="_blank" rel="noopener noreferrer">Probot team</a>.
</footer>
</body>
4 changes: 2 additions & 2 deletions public/webhooks.html
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>smee.io | Webhook deliveries</title>
<link rel="shortcut icon" href="/public/favicon.png">
<link rel="stylesheet" href="main.min.css">
<link rel="stylesheet" href="/public/main.min.css">
</head>
<body>
<noscript>
@@ -16,6 +16,6 @@ <h1>You must enable JavaScript to use try out Smee.</h1>
</div>
</noscript>
<div class="mount"></div>
<script src="main.min.js"></script>
<script src="/public/main.min.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions src/components/App.js
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import get from 'get-value'
import { AlertIcon, PulseIcon, SearchIcon, PinIcon } from '@primer/octicons-react'
import Blank from './Blank.js'
import { BaseStyles, Button, FormControl, Heading, Link, Octicon, ThemeProvider, Tooltip } from '@primer/react'
import "../style.scss";

export default class App extends Component {
constructor (props) {
4 changes: 1 addition & 3 deletions src/components/Blank.js
Original file line number Diff line number Diff line change
@@ -9,12 +9,10 @@ export default function Blank () {
<div className="Box p-3 mt-4 mb-6">
<Box sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 2
}}>
<label htmlFor="url">Webhook Proxy URL</label>
<Tooltip direction="n" className="ml-2 text-gray-light" text="Tell your service of choice to send webhook payloads to this URL."><Octicon icon={InfoIcon}/></Tooltip>
<Tooltip direction="n" className="ml-2 fgColor-muted" text="Tell your service of choice to send webhook payloads to this URL."><Octicon icon={InfoIcon}/></Tooltip>
</Box>
<TextInput
id="url"
2 changes: 1 addition & 1 deletion src/components/ListItem.js
Original file line number Diff line number Diff line change
@@ -82,7 +82,7 @@ export default class ListItem extends Component {
onClick={this.handleCopy}
className="ml-2 btn btn-sm tooltipped tooltipped-s js-copy-btn"
aria-label={copied ? 'Copied!' : 'Copy payload to clipboard'}
><PaperclipIcon />
><Octicon icon={PaperclipIcon} />
</button>
<button
onBlur={() => this.setState({ redelivered: false })}
4 changes: 2 additions & 2 deletions src/style.scss
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ $animationSpeed: 1500ms;
@import 'styles/github';

body {
background-color: var(--bgColor-inset);
background-color: #f6f8fa;
}

.btn-outline-blue {
@@ -17,7 +17,7 @@ body {
border-color: white !important;

&:hover {
color: var(--bgColor-accent-muted);
color: var(--bgColor-accent-emphasis);
background-color: white;
}
}
4 changes: 2 additions & 2 deletions src/styles/header-anim.scss
Original file line number Diff line number Diff line change
@@ -62,7 +62,7 @@
border-radius: 50%;
width: 10%;
height: 20%;
background-color: var(--base-color-blue-3);
background-color: #54aeff;
z-index: 3;
}

@@ -76,7 +76,7 @@
width: 10%;
height: 3px;
z-index: 2;
background-color: var(--base-color-blue-8);
background-color: #0a3069;
animation: payload $animationSpeed linear infinite;

@keyframes payload {
8 changes: 4 additions & 4 deletions src/styles/main-anim.scss
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ $bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
left: 25%;
height: 6px;
border-radius: 2px;
background-color: var(--base-color-red-7);
background-color: #82071e;
animation: scaleIn 6000ms ease-in-out infinite;
transform: scaleX(0);
}
@@ -51,7 +51,7 @@ $bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
left: 0;
width: 100%;
height: 6px;
background-color: var(--base-color-neutral-3);
background-color: #afb8c1;
}

&__left, &__right, &__line {
@@ -70,7 +70,7 @@ $bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

span {
position: absolute;
bottom: -var(--base-size-8);
bottom: calc(var(--base-size-8) * -1);
font-family: var(--fontStack-monospace);
text-align: center;
transform: translateY(100%);
@@ -88,7 +88,7 @@ $bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 6px;
border-radius: 3px;
z-index: 2;
background-color: var(--base-color-blue-3);
background-color: #54aeff;
animation: payload $animationSpeed linear infinite;

@keyframes payload {
15 changes: 8 additions & 7 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -26,6 +26,7 @@ const cfg = {
// new webpack.optimize.UglifyJsPlugin(),
new MiniCssExtractPlugin({ filename: '[name].min.css' })
],
devtool: process.env.NODE_ENV === "production" ? "no" : "source-map",
module: {
rules: [{
test: /\.jsx?$/,
@@ -37,7 +38,12 @@ const cfg = {
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
@@ -48,12 +54,7 @@ const cfg = {
}, {
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
includePaths: [
'node_modules'
]
}
sourceMap: true
}
}
]