feat: add dark magic theme

contrib/dark-magic-vscode-theme/.vscodeignore

@@ -0,0 +1,4 @@
+.vscode/**
+.vscode-test/**
+.gitignore
+vsc-extension-quickstart.md

contrib/dark-magic-vscode-theme/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "dark-magic-vscode-theme" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

contrib/dark-magic-vscode-theme/README.md

@@ -0,0 +1,22 @@
+# Dark Magic VSCode Theme
+
+## Development
+* Press `F5` to open a new window with your extension loaded.
+* Open `File > Preferences > Color Themes` and pick your color theme.
+* Open a file that has a language associated. The languages' configured grammar will tokenize the text and assign 'scopes' to the tokens. To examine these scopes, invoke the `Developer: Inspect Editor Tokens and Scopes` command from the Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac).
+
+Changes to the theme file are automatically applied to the Extension Development Host window.
+
+## What's in the folder
+* This folder contains all of the files necessary for the theme extension.
+* `package.json` - this is the manifest file that defines the location of the theme file and specifies the base theme of the theme.
+* `themes/Dark Magic-color-theme.json` - the color theme definition file.
+
+## Adopt your theme to Visual Studio Code
+* The token colorization is done based on standard TextMate themes. Colors are matched against one or more scopes.
+
+To learn more about scopes and how they're used, check out the [color theme](https://code.visualstudio.com/api/extension-guides/color-theme) documentation.
+
+## Install your extension
+* To start using your extension with Visual Studio Code copy it into the `<user home>/.vscode/extensions` folder and restart Code.
+* To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension.

contrib/dark-magic-vscode-theme/demo/go.go

@@ -0,0 +1,29 @@
+package main
+
+import (
+	"fmt"
+	"strings"
+	"net/http"
+	"io/ioutil"
+)
+
+func main() {
+
+	url := "https://api.magicbell.com/users"
+
+	payload := strings.NewReader("{\"user\":{\"external_id\":\"56780\",\"email\":\"hana@supportbee.com\",\"first_name\":\"Hana\",\"last_name\":\"Mohan\",\"custom_attributes\":{\"plan\":\"enterprise\",\"pricing_version\":\"v10\",\"preferred_pronoun\":\"She\"},\"phone_numbers\":[\"+15005550001\"]}}")
+
+	req, _ := http.NewRequest("POST", url, payload)
+
+	req.Header.Add("X-MAGICBELL-API-KEY", "[MAGICBELL_API_KEY]")
+	req.Header.Add("X-MAGICBELL-API-SECRET", "[MAGICBELL_API_SECRET]")
+
+	res, _ := http.DefaultClient.Do(req)
+
+	defer res.Body.Close()
+	body, _ := ioutil.ReadAll(res.Body)
+
+	fmt.Println(res)
+	fmt.Println(string(body))
+
+}

contrib/dark-magic-vscode-theme/demo/java.java

@@ -0,0 +1,12 @@
+OkHttpClient client = new OkHttpClient();
+
+MediaType mediaType = MediaType.parse("application/json");
+RequestBody body = RequestBody.create(mediaType, "{\"user\":{\"external_id\":\"56780\",\"email\":\"hana@supportbee.com\",\"first_name\":\"Hana\",\"last_name\":\"Mohan\",\"custom_attributes\":{\"plan\":\"enterprise\",\"pricing_version\":\"v10\",\"preferred_pronoun\":\"She\"},\"phone_numbers\":[\"+15005550001\"]}}");
+Request request = new Request.Builder()
+  .url("https://api.magicbell.com/users")
+  .post(body)
+  .addHeader("X-MAGICBELL-API-KEY", "[MAGICBELL_API_KEY]")
+  .addHeader("X-MAGICBELL-API-SECRET", "[MAGICBELL_API_SECRET]")
+  .build();
+
+Response response = client.newCall(request).execute();

contrib/dark-magic-vscode-theme/demo/node.js

@@ -0,0 +1,37 @@
+const http = require("https");
+
+const options = {
+  "method": "POST",
+  "hostname": "api.magicbell.com",
+  "port": null,
+  "path": "/users",
+  "headers": {
+    "X-MAGICBELL-API-KEY": "[MAGICBELL_API_KEY]",
+    "X-MAGICBELL-API-SECRET": "[MAGICBELL_API_SECRET]"
+  }
+};
+
+const req = http.request(options, function (res) {
+  const chunks = [];
+
+  res.on("data", function (chunk) {
+    chunks.push(chunk);
+  });
+
+  res.on("end", function () {
+    const body = Buffer.concat(chunks);
+    console.log(body.toString());
+  });
+});
+
+req.write(JSON.stringify({
+  user: {
+    external_id: '56780',
+    email: 'hana@supportbee.com',
+    first_name: 'Hana',
+    last_name: 'Mohan',
+    custom_attributes: {plan: 'enterprise', pricing_version: 'v10', preferred_pronoun: 'She'},
+    phone_numbers: ['+15005550001']
+  }
+}));
+req.end();

contrib/dark-magic-vscode-theme/demo/python.py

@@ -0,0 +1,28 @@
+import requests
+
+url = "https://api.magicbell.com/users"
+
+payload = {
+    "user": {
+        "external_id": "56780",
+        "email": "hana@supportbee.com",
+        "first_name": "Hana",
+        "last_name": "Mohan",
+        "custom_attributes": {
+            "plan": "enterprise",
+            "pricing_version": "v10",
+            "preferred_pronoun": "She"
+        },
+        "phone_numbers": [
+            "+15005550001"
+        ]
+    }
+}
+
+headers = {
+    "X-MAGICBELL-API-KEY": "[MAGICBELL_API_KEY]",
+    "X-MAGICBELL-API-SECRET": "[MAGICBELL_API_SECRET]"
+}
+
+response = requests.post(url, json=payload, headers=headers)
+print(response.json())

contrib/dark-magic-vscode-theme/demo/react.js

@@ -0,0 +1,27 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import MagicBell, {
+  FloatingNotificationInbox,
+} from "@magicbell/magicbell-react";
+
+const theme = {
+  icon: { borderColor: "#5225C1", width: "24px" },
+  unseenBadge: { backgroundColor: "#F80808" },
+};
+
+/**
+ * You can use userExternalId instead of the userEmail - https://bit.ly/3oiDSAe
+ */
+ReactDOM.render(
+  <MagicBell
+    apiKey="74ef9cfa81a890814732b624c2664cfefeaa63d0"
+    userEmail="stephan@magicbell.io"
+    theme={theme}
+    locale="en"
+  >
+    {(props) => (
+      <FloatingNotificationInbox width={400} height={500} {...props} />
+    )}
+  </MagicBell>,
+  document.body
+);

contrib/dark-magic-vscode-theme/demo/ruby.rb

@@ -0,0 +1,28 @@
+import requests
+
+url = "https://api.magicbell.com/users"
+
+payload = {
+    "user": {
+        "external_id": "56780",
+        "email": "hana@supportbee.com",
+        "first_name": "Hana",
+        "last_name": "Mohan",
+        "custom_attributes": {
+            "plan": "enterprise",
+            "pricing_version": "v10",
+            "preferred_pronoun": "She"
+        },
+        "phone_numbers": [
+            "+15005550001"
+        ]
+    }
+}
+
+headers = {
+    "X-MAGICBELL-API-KEY": "[MAGICBELL_API_KEY]",
+    "X-MAGICBELL-API-SECRET": "[MAGICBELL_API_SECRET]"
+}
+
+response = requests.post(url, json=payload, headers=headers)
+print(response.json())

contrib/dark-magic-vscode-theme/demo/swift.swift

@@ -0,0 +1,39 @@
+import Foundation
+
+let headers = [
+  "X-MAGICBELL-API-KEY": "[MAGICBELL_API_KEY]",
+  "X-MAGICBELL-API-SECRET": "[MAGICBELL_API_SECRET]"
+]
+let parameters = ["user": [
+    "external_id": "56780",
+    "email": "hana@supportbee.com",
+    "first_name": "Hana",
+    "last_name": "Mohan",
+    "custom_attributes": [
+      "plan": "enterprise",
+      "pricing_version": "v10",
+      "preferred_pronoun": "She"
+    ],
+    "phone_numbers": ["+15005550001"]
+  ]] as [String : Any]
+
+let postData = JSONSerialization.data(withJSONObject: parameters, options: [])
+
+let request = NSMutableURLRequest(url: NSURL(string: "https://api.magicbell.com/users")! as URL,
+                                        cachePolicy: .useProtocolCachePolicy,
+                                    timeoutInterval: 10.0)
+request.httpMethod = "POST"
+request.allHTTPHeaderFields = headers
+request.httpBody = postData as Data
+
+let session = URLSession.shared
+let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
+  if (error != nil) {
+    print(error)
+  } else {
+    let httpResponse = response as? HTTPURLResponse
+    print(httpResponse)
+  }
+})
+
+dataTask.resume()

contrib/dark-magic-vscode-theme/demo/vue.js

@@ -0,0 +1,18 @@
+<template>
+  <div ref="notifications">Notifications</div>
+</template>
+
+<script>
+  import { renderWidget } from '@magicbell/embeddable/dist/magicbell.esm.js';
+
+  export default {
+    name: 'Notifications',
+    mounted: function () {
+      const options = {
+        apiKey: 'MAGICBELL_API_KEY',
+        userEmail: 'mary@example.com',
+      };
+      renderWidget(this.$refs.notifications, options);
+    },
+  };
+</script>

contrib/dark-magic-vscode-theme/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "dark-magic-vscode-theme",
+  "displayName": "dark-magic-vscode-theme",
+  "description": "Magic Bell color theme",
+  "version": "0.0.1",
+  "engines": {
+    "vscode": "^1.73.0"
+  },
+  "categories": [
+    "Themes"
+  ],
+  "contributes": {
+    "themes": [
+      {
+        "label": "Dark Magic",
+        "uiTheme": "vs-dark",
+        "path": "./themes/Dark Magic-color-theme.json"
+      }
+    ]
+  }
+}