(feature) Zap Editor Styling and Instructions (#11)

Co-authored-by: Zach Waterfield <[email protected]>

contributing.md

@@ -0,0 +1,93 @@
+# Contributing
+
+Suggestions and pull requests are highly encouraged! Have a look at the [open issues](https://github.com/zlwaterfield/refined-zapier/issues).
+
+## Notions
+
+- You will need to be familiar with [npm](https://docs.npmjs.com/getting-started/) and TypeScript to build this extension.
+- The extension can be loaded into Chrome or Firefox manually ([See notes below](#loading-into-the-browser))
+- [JSX](https://reactjs.org/docs/introducing-jsx.html) is used to create DOM elements.
+- All the [latest DOM APIs](https://github.com/WebReflection/dom4#features) and JavaScript features are available because the extension only has to work in the latest Chrome and Firefox. 🎉
+- Each JavaScript feature lives in its own file under [`source/features`](https://github.com/sindresorhus/refined-github/tree/main/source/features) and it's imported in [`source/refined-zapier.ts`](https://github.com/zlwaterfield/refined-zapier/blob/main/source/refined-zapier.ts).
+- See what a feature [looks like]https://github.com/zlwaterfield/refined-zapier/blob/main/source/features/improved-zap-list-styling.tsx).
+
+
+## `features.add`
+
+The simplest usage of `feature.add` is the following. This will be run instantly on all page-loads:
+
+```js
+import * as pageDetect from 'github-url-detection';
+import features from '.';
+
+function init() {
+	console.log('✨');
+}
+
+void features.add(__filebasename, {
+	include: [
+		isZaps
+	],
+	awaitDomReady: false,
+	init
+});
+```
+
+Here's an example using `feature.add` options:
+
+```ts
+import './improved-sidebar-styling.css';
+import features from '.';
+import {isDashboard, isMyZaps, isZapHistory, isZaps} from '../helpers/page-detect';
+
+async function init(): Promise<false | void> {
+  // This is all done via styling
+}
+
+void features.add(__filebasename, {
+	include: [
+		isZaps,
+		isMyZaps,
+		isDashboard,
+		isZapHistory
+	],
+	init
+});
+
+```
+
+## Requirements
+
+[Node.js](https://nodejs.org/en/download/) version 15 or later is required.
+
+## Workflow
+
+First clone:
+
+```sh
+git clone https://github.com/zlwaterfield/refined-zapier  
+cd refined-zapier
+yarn install
+```
+
+When working on the extension or checking out branches, use this to have it constantly build your changes:
+
+```sh
+yarn watch # Listen to file changes and automatically rebuild
+```
+
+Then load or reload it into the browser to see the changes.
+
+## Loading into the browser
+
+Once built, load it in the browser of your choice with [web-ext](https://github.com/mozilla/web-ext):
+
+```sh
+npx web-ext run --target=chromium # Open extension in Chrome
+```
+
+```sh
+npx web-ext run # Open extension in Firefox
+```
+
+Or you can [load it manually in Chrome](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#google-chrome-opera-vivaldi) or [Firefox](https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/#mozilla-firefox).

readme.md

@@ -4,15 +4,48 @@
 
 ## Install (coming soon)
 
-[link-chrome]: https://chrome.google.com/webstore/detail/ 'Version published on Chrome Web Store'
+## Chrome
+
+1. [Download Chrome Extension Zip](https://github.com/zlwaterfield/refined-zapier/releases/download/0.0.1/refined-zapier-0.0.1.zip)
+2. Open the "Extensions" page (chrome://extensions/) in the browser and turn on the "Developer mode".
+3. In Settings > Extensions click "Load unpacked extension" and select the `distribution/` subfolder of this repository.
+<table>
+	<tr>
+		<th width="100%">
+			<p><a title="Enable developer mode"></a> Enable developer mode and Load unpacked extension
+			<p><img src="./media/Chrome-extension-instructions.png">
+</table>
+
+## Highlights
+<table>
+	<tr>
+		<th width="50%">
+			<p><a title="Improve Zapier UX by 10x"></a> Improve Zapier UX by 10x 
+			<p><img src="./media/dashboard.png">
+		<th width="50%">
+			<p><a title="Track changes with commit messages"></a> Track changes with commit messages
+			<p><img src="./media/commit-message.png">
+	<tr>
+		<th width="50%">
+			<p><a title="Detailed history of all the commits"></a> Detailed history of all the commits
+			<p><img src="./media/commit-details.png">
+		<th width="50%">
+			<p><a title="Filter by Folder or Zap"></a> Filter by Folder or Zap
+			<p><img src="./media/folder-search.gif">
+  <tr>
+		<th width="50%">
+			<p><a title="Detailed history of all the commits"></a> Name your zap before publishing
+			<p><img src="./media/name_before_publish.gif">
+</table>
+
 
-<!--
 
+<!--
 ############################
   Descriptions style guide
 ############################
 
-- Starts with: "(Refined GitHub) <verb in third person> ..."
+- Starts with: "(Refined Zapier) <verb in third person> ..."
 - Ends with period (inside link or parens, if present, like this.)
 - Keyboard shortcuts must follow:
 	- "Adds a keyboard shortcut to ...: <kbd>key1</kbd> <kbd>key2</kbd>"
@@ -46,8 +79,11 @@ Thanks for contributing! 🦋🙌
 
 ### Styling
 - [](# "load-styles") 🎨 Load fonts (Poppins)
-- [](# "improved-sidebar-styling") 🎛  [Improve the styling of Zapier sidebar]()
-- [](# "improved-zap-list-styling") 🎛  [Improve the styling of the Zap list]()
+
+- [](# "improved-sidebar-styling") 🎛 [Improve the styling of Zapier sidebar.]()
+- [](# "improved-zap-list-styling") 🎛 [Improve the styling of the Zap list.]()
+- [](# "improved-zap-editor-styling") 🎛 [Improve the styling of the Zap Editor]()
+
 
 <!-- Refer to style guide above. Keep this message between sections. -->
 

source/features/improved-zap-editor-styling.css

@@ -0,0 +1,45 @@
+
+.flow-container__editor {
+    background-color: white;
+}
+
+div[class*='flow-sidebar__beta-timeline']{
+    width: 1000px;
+    margin: 0 auto;
+    border: 2px solid #E3E9ED;
+    border-radius: 16px;
+    box-sizing: border-box;
+    padding-top: 25px;
+    padding-bottom: 25px;
+}  
+
+
+div[class*='flow-detail-steps']{
+    font-family: Poppins, sans-serif !important;
+    padding-right: 25px;
+    padding-left: 25px;
+    position: relative;
+    width: 100%;
+}
+
+
+div[class*='css-wra4y2'] {
+    background-color: white;
+} 
+
+
+/* Not solved */
+div[class*='flow-container__app-bar'] > button[aria-label="share this zap"] {
+    background-color: black !important;
+}
+
+.button[aria-label="share this zap"]{
+    background-color: black;
+}
+
+div[class*='flow-detail-steps'] > span[class*="Text--subtitle800--black"]{
+    font-family: Poppins, sans-serif !important;
+    font-size: 20px !important;
+    font-weight: 700 !important;
+    line-height: 25px  !important;
+} 

source/features/improved-zap-editor-styling.tsx

@@ -0,0 +1,14 @@
+import './improved-zap-editor-styling.css';
+import features from '.';
+import {isZapEditor} from '../helpers/page-detect';
+
+async function init(): Promise<false | void> {
+  // This is all done via styling
+}
+
+void features.add(__filebasename, {
+	include: [
+		isZapEditor
+	],
+	init
+});

source/refined-zapier.ts

@@ -15,6 +15,7 @@ import './features/improved-sidebar-styling';
 import './features/improved-zap-list-styling';
 import './features/folder-searching';
 import './features/show-zap-details-on-hover';
+import './features/improved-zap-editor-styling';
 
 // Add global for easier debugging
 (window as any).select = select;