Cleaned up icon styles

Refs https://www.notion.so/ghost/Unify-icons-across-Admin-7e3d124d5db34c63beccca029af595e7

- Reduced duplicate plus icons
- Replaced fill trash, info and pen icons by stroke icons
- Removed fill styles from default button classes
- Removed launch-wizard css
This commit is contained in:
Sanne de Vries 2022-09-02 16:56:02 +01:00
parent 84854aa201
commit a2fc31aa0a
60 changed files with 155 additions and 690 deletions

View File

@ -488,10 +488,6 @@ add|ember-template-lint|require-valid-alt-text|19|24|19|24|c1a223c4a0c265ed64685
add|ember-template-lint|no-autofocus-attribute|14|4|14|4|bc0a12a01d16038dd3224726d5c4fe81b2d458b6|1658102400000|1668474000000|1673658000000|app/components/gh-input-with-select/trigger.hbs
add|ember-template-lint|no-down-event-binding|8|9|8|9|e82f6aa36fd44bb3dccff09770613eee19380f9b|1658102400000|1668474000000|1673658000000|app/components/gh-input-with-select/trigger.hbs
add|ember-template-lint|require-input-label|4|0|4|0|ce9c488b3c6a110afe45e2242fb068fd4ed61f22|1658102400000|1668474000000|1673658000000|app/components/gh-input-with-select/trigger.hbs
add|ember-template-lint|no-action|63|39|63|39|dcc09bb23a476d5b83b273b693cd8cb2aba68365|1658102400000|1668474000000|1673658000000|app/components/gh-launch-wizard/set-pricing.hbs
add|ember-template-lint|no-action|78|39|78|39|a80dd18e18dda6fb6f1f97d87bef2b8c2ce3d847|1658102400000|1668474000000|1673658000000|app/components/gh-launch-wizard/set-pricing.hbs
add|ember-template-lint|no-passed-in-event-handlers|63|32|63|32|dcb4785647a50814bcfce82f8d68ac8dd8f54ec2|1658102400000|1668474000000|1673658000000|app/components/gh-launch-wizard/set-pricing.hbs
add|ember-template-lint|no-passed-in-event-handlers|78|32|78|32|70487c008d7dda453fef82f0140699ee93c0055c|1658102400000|1668474000000|1673658000000|app/components/gh-launch-wizard/set-pricing.hbs
add|ember-template-lint|no-invalid-interactive|6|32|6|32|508e64575a985432d0588f3291a126c4b62e68d8|1658102400000|1668474000000|1673658000000|app/components/gh-nav-menu/design.hbs
add|ember-template-lint|no-action|97|83|97|83|40a33b8afd29e93eebeaccdb49d729c06f755e1f|1658102400000|1668474000000|1673658000000|app/components/gh-nav-menu/footer.hbs
add|ember-template-lint|no-invalid-interactive|97|83|97|83|91111b837d1217ec9988076f5263b0e32df72604|1658102400000|1668474000000|1673658000000|app/components/gh-nav-menu/footer.hbs

View File

@ -33,7 +33,7 @@
{{#if this.benefitItem.isNew}}
<button type="button" class="gh-blognav-add" {{action "addItem" this.benefitItem}} data-test-button="add-benefit">
{{svg-jar "add"}}<span class="sr-only">Add</span>
{{svg-jar "plus"}}<span class="sr-only">Add</span>
</button>
{{else}}
<button type="button" class="gh-blognav-delete" {{action "deleteItem" this.benefitItem}} data-test-button="delete-benefit">

View File

@ -1,160 +0,0 @@
<div class="gh-stack" ...attributes>
<div class="gh-stack-item gh-setting-first gh-accent-color">
<div class="gh-setting-content">
<div class="gh-setting-title">Accent color</div>
<div class="gh-setting-desc">Primary color used in your publication theme</div>
{{#each this.uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
{{/each}}
<div class="w-100 flex flex-column flex-row-ns">
<GhErrorMessage @errors={{this.settings.errors}} @property="accentColor" class="w-100 red" />
</div>
</div>
<div class="gh-setting-action" data-test-setting="accentColor">
<GhFormGroup
@errors={{this.settings.errors}}
@hasValidated={{this.settings.hasValidated}}
@property="accentColor"
@class="input-color-form-group"
>
<div class="input-color">
<input
type="text"
placeholder="15171A"
name="accent-color"
autocorrect="off"
maxlength="6"
value={{this.accentColor}}
class="gh-input"
{{on "input" (perform this.debounceUpdateAccentColor)}}
{{on "blur" this.updateAccentColor}}
{{on-key "Enter" this.blurElement}}
data-test-input="accentColor"
/>
<div class="color-picker-horizontal-divider"></div>
<div
class="color-box-container"
style={{this.accentColorBgStlye}}
>
<input
type="color"
name="accent-color"
class="color-picker"
value="{{this.accentColorPickerValue}}"
{{on "input" (perform this.debounceUpdateAccentColor)}}
>
</div>
</div>
</GhFormGroup>
</div>
</div>
<div class="gh-stack-item gh-setting" data-test-setting="icon">
<GhUploader
@extensions={{this.iconExtensions}}
@paramsHash={{hash purpose="icon"}}
@onComplete={{fn this.imageUploaded "icon"}}
as |uploader|
>
<div class="gh-setting-content">
<div class="gh-setting-title">Publication icon</div>
<div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
{{#each uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
{{/each}}
</div>
<div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if this.settings.icon}}
<div class="gh-branding-image-container transparent-bg">
<img class="blog-icon" src="{{this.settings.icon}}" {{on "click" this.triggerFileDialog}} alt="icon" data-test-icon-img>
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "icon")}} data-test-delete-image="icon">
{{svg-jar "trash" class="w4 h4 fill-white"}}
</button>
</div>
{{else}}
<button type="button" class="gh-btn self-center" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="icon">
<span>Upload icon</span>
</button>
{{/if}}
<div style="display:none">
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.iconMimeTypes}} data-test-file-input="icon" />
</div>
</div>
</GhUploader>
</div>
<div class="gh-stack-item gh-setting" data-test-setting="logo">
<GhUploader
@extensions={{this.imageExtensions}}
@onComplete={{fn this.imageUploaded "logo"}}
as |uploader|
>
<div>
<div class="gh-setting-title">Publication logo</div>
<div class="gh-setting-desc mb3">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
<div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
{{#each uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
{{/each}}
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if this.settings.logo}}
<div class="gh-branding-image-container largeimg justify-center transparent-bg">
<img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "logo")}} data-test-delete-image="logo">
{{svg-jar "trash" class="w4 h4 fill-white"}}
</button>
</div>
{{else}}
<button type="button" class="gh-btn self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
<span>Upload logo</span>
</button>
{{/if}}
<div style="display:none">
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
</div>
</div>
</div>
</GhUploader>
</div>
<div class="gh-stack-item gh-setting" data-test-setting="coverImage">
<GhUploader
@extensions={{this.imageExtensions}}
@onComplete={{fn this.imageUploaded "coverImage"}}
as |uploader|
>
<div>
<div class="gh-setting-title">Publication cover</div>
<div class="gh-setting-desc mb3">An optional large background image for your site</div>
{{#each uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
{{/each}}
<div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if this.settings.coverImage}}
<div class="gh-branding-image-container largeimg justify-start">
<img class="blog-cover" src="{{this.settings.coverImage}}" {{on "click" this.triggerFileDialog}} alt="cover photo" data-test-cover-img>
<button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.removeImage "coverImage")}} data-test-delete-image="coverImage">
{{svg-jar "trash" class="w4 h4 fill-white"}}
</button>
</div>
{{else}}
<button type="button" class="gh-btn self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="coverImage">
<span>Upload cover</span>
</button>
{{/if}}
<div style="display:none">
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="coverImage" />
</div>
</div>
</div>
</GhUploader>
</div>
</div>

View File

@ -1,170 +0,0 @@
import Component from '@glimmer/component';
import config from 'ghost-admin/config/environment';
import {
ICON_EXTENSIONS,
ICON_MIME_TYPES,
IMAGE_EXTENSIONS,
IMAGE_MIME_TYPES
} from 'ghost-admin/components/gh-image-uploader';
import {action} from '@ember/object';
import {htmlSafe} from '@ember/template';
import {inject as service} from '@ember/service';
import {task, timeout} from 'ember-concurrency';
export default class GhBrandSettingsFormComponent extends Component {
@service ajax;
@service config;
@service ghostPaths;
@service settings;
@service frontend;
iconExtensions = ICON_EXTENSIONS;
iconMimeTypes = ICON_MIME_TYPES;
imageExtensions = IMAGE_EXTENSIONS;
imageMimeTypes = IMAGE_MIME_TYPES;
get accentColor() {
const color = this.settings.get('accentColor');
if (color && color[0] === '#') {
return color.slice(1);
}
return color;
}
get accentColorPickerValue() {
return this.settings.get('accentColor') || '#ffffff';
}
get accentColorBgStyle() {
return htmlSafe(`background-color: ${this.accentColorPickerValue}`);
}
get previewData() {
const params = new URLSearchParams();
params.append('c', this.accentColorPickerValue);
params.append('icon', this.settings.get('icon'));
params.append('logo', this.settings.get('logo'));
params.append('cover', this.settings.get('coverImage'));
return params.toString();
}
constructor() {
super(...arguments);
this.updatePreviewTask.perform();
}
willDestroy() {
super.willDestroy?.(...arguments);
this.settings.errors.remove('accentColor');
this.settings.rollbackAttributes();
}
@action
triggerFileDialog({target}) {
target.closest('.gh-setting-action')?.querySelector('input[type="file"]')?.click();
}
@action
async imageUploaded(property, results) {
if (results[0]) {
this.settings.set(property, results[0].url);
this.updatePreviewTask.perform();
}
}
@action
async removeImage(imageName) {
this.settings.set(imageName, '');
this.updatePreviewTask.perform();
}
@action
blurElement(event) {
event.preventDefault();
event.target.blur();
}
@action
async updateAccentColor(event) {
let newColor = event.target.value;
const oldColor = this.settings.get('accentColor');
// reset errors and validation
this.settings.errors.remove('accentColor');
this.settings.hasValidated.removeObject('accentColor');
if (newColor === '') {
if (newColor === oldColor) {
return;
}
// Don't allow empty accent color
this.settings.errors.add('accentColor', 'Please select an accent color');
this.settings.hasValidated.pushObject('accentColor');
return;
}
// accentColor will be null unless the user has input something
if (!newColor) {
newColor = oldColor;
}
if (newColor[0] !== '#') {
newColor = `#${newColor}`;
}
if (newColor.match(/#[0-9A-Fa-f]{6}$/)) {
if (newColor === oldColor) {
return;
}
this.settings.set('accentColor', newColor);
this.updatePreviewTask.perform();
} else {
this.settings.errors.add('accentColor', 'Please enter a color in hex format');
this.settings.hasValidated.pushObject('accentColor');
}
}
@task({restartable: true})
*debounceUpdateAccentColor(event) {
yield timeout(500);
this.updateAccentColor(event);
}
@task
*updatePreviewTask() {
// skip during testing because we don't have mocks for the front-end
if (config.environment === 'test') {
return;
}
const previewResponse = yield this.frontend.fetch('/', {
method: 'POST',
headers: {
'Content-Type': 'text/html;charset=utf-8',
'x-ghost-preview': this.previewData,
Accept: 'text/plain'
}
});
const previewContents = yield previewResponse.text();
// inject extra CSS to disable navigation and prevent clicks
const injectedCss = `html { pointer-events: none; }`;
const domParser = new DOMParser();
const htmlDoc = domParser.parseFromString(previewContents, 'text/html');
const stylesheet = htmlDoc.querySelector('style');
const originalCSS = stylesheet.innerHTML;
stylesheet.innerHTML = `${originalCSS}\n\n${injectedCss}`;
const doctype = new XMLSerializer().serializeToString(htmlDoc.doctype);
const html = doctype + htmlDoc.documentElement.outerHTML;
// replace the iframe contents with the doctored preview html
this.args.replacePreviewContents(html);
}
}

View File

@ -1 +1 @@
<span class="gh-btn-create-snippet">{{@option.text}}{{svg-jar "add"}}</span>
<span class="gh-btn-create-snippet">{{@option.text}}{{svg-jar "plus"}}</span>

View File

@ -24,8 +24,10 @@
{{label.name}}
</span>
{{#if (and @allowEdit label.slug)}}
<button type="button" class="dropdown-action-icon" {{on "mouseup" (fn this.editLabel label)}} aria-label="Edit label {{label.name}}" data-test-edit-label={{label.name}}>
{{svg-jar "pen"}}
<button type="button" class="gh-btn-icon dropdown-action-icon" {{on "mouseup" (fn this.editLabel label)}} aria-label="Edit label {{label.name}}" data-test-edit-label={{label.name}}>
<span>
{{svg-jar "pen"}}
</span>
</button>
{{/if}}
</div>

View File

@ -123,7 +123,7 @@
{{on "click" (toggle-action "showMemberTierModal" this)}}
data-test-button="add-complimentary"
>
<span>{{svg-jar "add"}} Add complimentary subscription</span>
<span>{{svg-jar "plus"}} Add complimentary subscription</span>
</button>
{{/if}}
{{/if}}
@ -214,7 +214,7 @@
<span class="action-menu">
<GhDropdownButton
@dropdownName="subscription-menu-complimentary"
@classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action icon-only"
@classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only"
@title="Actions"
data-test-button="subscription-actions"
>
@ -241,7 +241,7 @@
</span>
{{else}}
<span class="action-menu">
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action icon-only" @title="Actions">
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
<span>
{{svg-jar "dotdotdot"}}
<span class="hidden">Subscription menu</span>
@ -297,7 +297,7 @@
<div class="period">yearly</div>
</div>
<span class="action-menu">
<GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action icon-only" @title="Actions">
<GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
<span>
{{svg-jar "dotdotdot"}}
<span class="hidden">Subscription menu</span>
@ -329,7 +329,7 @@
{{on "click" (toggle-action "showMemberTierModal" this)}}
data-test-button="add-complimentary"
>
<span>{{svg-jar "add"}} Add complimentary subscription</span>
<span>{{svg-jar "plus"}} Add complimentary subscription</span>
</button>
{{/if}}
</div>

View File

@ -36,7 +36,7 @@
{{#if (eq this.type "active" )}}
<div class="gh-tier-cards-footer">
<button class="gh-btn gh-btn-link gh-btn-text gh-btn-icon gh-btn-add-tier green" type="button" {{action "openNewTier" this.tier}}>
<span>{{svg-jar "add-stroke" class="stroke-green"}}Add tier</span>
<span>{{svg-jar "plus"}}Add tier</span>
</button>
</div>
{{/if}}

View File

@ -36,7 +36,7 @@
<ul class="gh-nav-list gh-nav-manage">
<li class="gh-nav-list-new relative">
<GhLinkToCustomViewsIndex @route="posts" @query={{reset-query-params "posts"}} data-test-nav="posts">{{svg-jar "posts"}}Posts</GhLinkToCustomViewsIndex>
<LinkTo @route="editor.new" @model="post" class="gh-secondary-action gh-nav-new-post" @alt="New post" title="New post" data-test-nav="new-story"><span>{{svg-jar "add-stroke"}}</span></LinkTo>
<LinkTo @route="editor.new" @model="post" class="gh-secondary-action gh-nav-new-post" @alt="New post" title="New post" data-test-nav="new-story"><span>{{svg-jar "plus"}}</span></LinkTo>
{{#if this.session.user.isAuthorOrContributor}}
{{#if this.customViews.forPosts}}
<ul class="gh-nav-view-list">

View File

@ -45,7 +45,7 @@
{{#if this.navItem.isNew}}
<button type="button" class="gh-blognav-add" {{action "addItem" this.navItem}}>
{{svg-jar "add"}}<span class="sr-only">Add</span>
{{svg-jar "plus"}}<span class="sr-only">Add</span>
</button>
{{else}}
<button type="button" class="gh-blognav-delete" {{action "deleteItem" this.navItem}}>

View File

@ -177,7 +177,9 @@
@onTemplateSelect={{action (mut this.post.customTemplate)}} />
{{#unless this.post.isNew}}
<button type="button" class="gh-btn gh-btn-hover-red gh-btn-icon settings-menu-delete-button" {{action "deletePostInternal"}}><span>{{svg-jar "trash"}} Delete {{this.post.displayName}}</span></button>
<button type="button" class="gh-btn gh-btn-hover-red gh-btn-icon settings-menu-delete-button" {{action "deletePostInternal"}}>
<span>{{svg-jar "trash"}} Delete {{this.post.displayName}}</span>
</button>
{{/unless}}
</form>

View File

@ -88,7 +88,7 @@
{{!-- Mail not sent yet --}}
{{#if this.mailgunError}}
<p class="gh-box gh-box-alert settings-menu-mailgun-alert">
{{svg-jar "info" class="w5 h5 fill-yellow nl1"}}
{{svg-jar "info" class="w5 h5 stroke-yellow nl1"}}
You need to configure Mailgun in <LinkTo @route="settings.newsletters" data-test-nav="labs">Settings &rarr; Email newsletter</LinkTo> to enable email newsletters.
</p>
{{/if}}

View File

@ -74,7 +74,7 @@
{{#if @post.isDraft}}
<span class="gh-content-status-draft gh-badge gh-badge-pink nowrap">
{{svg-jar "pen-stroke" class="gh-post-status-icon"}}
{{svg-jar "pen" class="gh-post-status-icon"}}
Draft
</span>
{{/if}}

View File

@ -13,7 +13,7 @@
<button type="button" {{on "click" (fn this.activateTheme theme.model this.dd)}} class="apps-configured-action darkgrey apps-configured-action-activate green-hover green-bg-hover" data-test-button="activate">Activate</button>
{{/unless}}
<GhBasicDropdown @verticalPosition="below" @horizontalPosition="right" @buttonPosition="right" as |dd|>
<dd.Trigger class="gh-btn gh-btn-icon" data-test-button="actions"><span>{{svg-jar "dotdotdot"}}</span></dd.Trigger>
<dd.Trigger class="gh-btn gh-btn-icon fill" data-test-button="actions"><span>{{svg-jar "dotdotdot"}}</span></dd.Trigger>
<dd.Content class="relative-dropdown-menu">
<ul class="dropdown-menu" data-test-actions-for={{theme.name}}>

View File

@ -67,7 +67,7 @@
<span class="dropdown">
<GhDropdownButton
@dropdownName="tiers-actions-menu-{{@tier.name}}"
@classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-tier-card-actions-button icon-only"
@classNames="gh-btn gh-btn-action-icon gh-btn-icon fill gh-btn-outline gh-tier-card-actions-button icon-only"
@title="Tiers Actions"
data-test-button="tiers-actions"
>

View File

@ -70,7 +70,7 @@
{{on "click" this.addFilter}}
data-test-button="add-members-filter"
>
<span>{{svg-jar "add"}} Add filter</span>
<span>{{svg-jar "plus"}} Add filter</span>
</button>
</div>
</section>

View File

@ -55,7 +55,7 @@
class="gh-btn gh-btn-red gh-btn-icon" data-test-button="delete-label" type="button" {{on "click" (action "toggleDeleteLabelModal")}}
{{on "mousedown" (optional this.noop)}}
>
<span>{{svg-jar "trash"}} Delete</span>
<span>Delete</span>
</button>
{{/if}}

View File

@ -226,7 +226,7 @@
data-test-icon-img
>
{{#if (eq this.membersUtils.buttonIcon this.customIcon)}}
<button type="button" class="gh-btn gh-btn-hover-red gh-portal-button-deleteicon" {{action "deleteCustomIcon"}}>
<button type="button" class="gh-btn gh-portal-button-deleteicon" {{action "deleteCustomIcon"}}>
<span> {{svg-jar "trash" class="w5 h5"}} </span>
</button>
{{/if}}

View File

@ -61,7 +61,6 @@
class="gh-btn gh-btn-red gh-btn-icon" data-test-button="delete-custom-view" type="button" {{on "click" (perform this.deleteTask)}}
{{on "mousedown" (optional this.noop)}}
>
<span>{{svg-jar "trash"}} Delete</span>
</button>
{{/if}}

View File

@ -2,7 +2,7 @@ import Component from '@glimmer/component';
import {action} from '@ember/object';
const ALL_EVENT_TYPES = [
{event: 'added', name: 'Added', icon: 'add'},
{event: 'added', name: 'Added', icon: 'plus-large'},
{event: 'edited', name: 'Edited', icon: 'pen'},
{event: 'deleted', name: 'Deleted', icon: 'trash'}
];

View File

@ -25,7 +25,7 @@
data-test-cover-img
>
<button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.update null)}} data-test-delete-image="coverImage">
{{svg-jar "trash" class="w4 h4 fill-white"}}
{{svg-jar "trash" class="w4 h4"}}
</button>
</div>
{{else}}

View File

@ -26,7 +26,7 @@
data-test-icon-img
>
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.update null)}} data-test-delete-image="icon">
{{svg-jar "trash" class="w4 h4 fill-white"}}
{{svg-jar "trash" class="w4 h4"}}
</button>
</div>
{{else}}

View File

@ -25,7 +25,7 @@
data-test-logo-img
>
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.update null)}} data-test-delete-image="logo">
{{svg-jar "trash" class="w4 h4 fill-white"}}
{{svg-jar "trash" class="w4 h4"}}
</button>
</div>
{{else}}

View File

@ -84,7 +84,7 @@
<LinkTo @route="settings.newsletters.edit-newsletter" @model={{newsletter.id}} class="gh-btn gh-btn-green" data-test-button="customize-newsletter"><span>Customize &rarr;</span></LinkTo>
{{else}}
<GhBasicDropdown @verticalPosition="below" @horizontalPosition="right" @renderInPlace={{true}} as |dd|>
<dd.Trigger class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-tier-card-actions-button icon-only">
<dd.Trigger class="gh-btn gh-btn-action-icon gh-btn-icon fill gh-btn-outline gh-tier-card-actions-button icon-only">
<span data-test-newsletter-menu-trigger>
{{svg-jar "dotdotdot"}}
<span class="hidden">Actions</span>
@ -123,5 +123,5 @@
{{/if}}
</div>
</section>
<LinkTo @route="settings.newsletters.new-newsletter" class="gh-add-newsletter" data-test-button="add-newsletter">{{svg-jar "add-stroke"}}Add newsletter</LinkTo>
<LinkTo @route="settings.newsletters.new-newsletter" class="gh-add-newsletter" data-test-button="add-newsletter">{{svg-jar "plus"}}Add newsletter</LinkTo>
</div>

View File

@ -147,7 +147,7 @@ function getLinkTarget(ev) {
function getActionIcon(ev) {
switch (ev.event) {
case 'added':
return 'add';
return 'plus-large';
case 'edited':
return 'pen';
case 'deleted':

View File

@ -55,7 +55,7 @@ const DEFAULT_VIEWS = [{
route: 'posts',
name: 'Drafts',
color: 'midgrey',
icon: 'pencil',
icon: 'pen',
filter: {
type: 'draft'
}

View File

@ -66,7 +66,6 @@
@import "layouts/preview-email.css";
@import "layouts/portal-settings.css";
@import "layouts/billing.css";
@import "layouts/fullscreen-wizard.css";
@import "layouts/post-preview.css";
@import "layouts/dashboard.css";
@import "layouts/tiers.css";
@ -1086,34 +1085,6 @@ input:focus,
background: var(--main-color-content-greybg)
}
/* Launch-site wizard */
.fullscreen-wizard-container {
background: var(--dark-main-bg-color);
}
.gh-launch-wizard-content {
background: var(--dark-main-bg-color);
border-top: 1px solid var(--hairline-color-1);
}
.gh-launch-wizard-btn {
color: var(--black);
background: var(--green-d1);
}
.gh-launch-wizard-btn:hover {
color: #fff;
background: var(--green) !important;
}
.gh-launch-wizard-btn svg {
fill: var(--black);
}
.gh-lw-banner {
border: 1px solid color-mod(var(--green) a(60%));
}
.gh-dashboard-box {
flex: 1;
border: 1px solid var(--lightgrey);

View File

@ -66,7 +66,6 @@
@import "layouts/preview-email.css";
@import "layouts/portal-settings.css";
@import "layouts/billing.css";
@import "layouts/fullscreen-wizard.css";
@import "layouts/post-preview.css";
@import "layouts/dashboard.css";
@import "layouts/tiers.css";

View File

@ -241,14 +241,7 @@
.dropdown-action .dropdown-action-icon svg {
margin: 0;
}
.dropdown-action .dropdown-action-icon svg path {
fill: var(--midgrey);
}
.dropdown-action .dropdown-action-icon:hover svg path {
fill: var(--darkgrey);
fill: none;
}
.dropdown-action .dropdown-footer {
@ -299,6 +292,11 @@
.gh-member-settings .gh-member-label-input .dropdown-action-icon {
margin-right: -8px;
padding: 4px 6px;
color: var(--midgrey);
}
.gh-member-settings .gh-member-label-input .dropdown-action-icon:hover {
color: var(--darkgrey);
}
.gh-member-label-input li:hover .dropdown-action-icon {
@ -314,13 +312,5 @@
height: 14px;
width: 14px;
line-height: 1em;
fill: #667380;
}
.gh-member-label-input .dropdown-action-icon svg path {
fill: var(--midgrey);
}
.gh-member-label-input .dropdown-action-icon:hover svg path {
fill: var(--darkgrey);
fill: none;
}

View File

@ -51,6 +51,11 @@
width: 20px;
height: 33px;
margin-left: 4px;
color: var(--middarkgrey);
}
.gh-filter-builder .gh-delete-filter:hover {
color: var(--red);
}
.gh-filter-builder .gh-delete-filter svg {
@ -58,21 +63,10 @@
height: 10px;
}
.gh-filter-builder .gh-delete-filter svg path {
stroke: var(--middarkgrey);
}
.gh-filter-builder .gh-delete-filter:hover svg path {
stroke: var(--red);
}
.gh-add-filter svg {
margin-right: 7px;
}
.gh-add-filter svg path {
stroke: none !important;
fill: var(--green-d1);
width: 10px;
height: 10px;
margin: 0 6px 0 2px;
}
.gh-filter-builder .gh-filter-block-divider {

View File

@ -927,15 +927,7 @@
.kg-cardmenu-card-hover .kg-cardmenu-action-icon svg {
margin: 0;
height: 1em;
}
.kg-cardmenu-card-hover .kg-cardmenu-action-icon svg path {
fill: var(--red);
}
.kg-cardmenu-card-hover .kg-cardmenu-action-icon:hover svg path {
fill: var(--red);
height: 1.6rem;
}
/* Padded container housing title + editor canvas, scrollable content */
@ -980,11 +972,13 @@
border-color: var(--darkgrey);
}
.koenig-plus-menu-button:hover svg path,
.koenig-plus-menu-button:hover svg g {
stroke: var(--darkgrey);
.koenig-plus-menu-button svg path {
stroke-width: 1.2;
}
.koenig-plus-menu-button:hover svg path {
stroke: var(--darkgrey);
}
@media (max-width: 500px) {
.koenig-plus-menu-button {
@ -3040,7 +3034,7 @@ button.emoji-picker__category-button.active {
}
.kg-settings-headerstyle-btn-group .kg-headerstyle-btn-image svg path {
stroke: var(--midgrey);
stroke-width: 1.5;
}
.kg-settings-headerstyle-btn-group .gh-btn-group-selected {

View File

@ -473,10 +473,12 @@
height: 44px;
background: var(--black) !important;
opacity: 0;
color: var(--whitegrey-d1);
}
.gh-header-img-deleteicon:hover {
opacity: 1;
color: var(--whitegrey-d1);
}
.gh-header-img-deleteicon span {

View File

@ -459,7 +459,6 @@
}
.gh-btn-create-snippet svg {
width: 1.4rem;
height: 1.4rem;
fill: var(--green-d1)
width: 1.2rem;
height: 1.2rem;
}

View File

@ -12,10 +12,6 @@
margin-right: 0 !important;
}
.settings-menu-toggle svg {
fill: none !important;
}
.settings-menu-toggle .settings-menu-open svg path {
stroke: var(--black);
}
@ -291,6 +287,7 @@
.settings-menu-delete-button:hover {
box-shadow: none;
background: none;
color: color-mod(var(--red) lightness(-10%));
}
.settings-menu-delete-button span {
@ -299,20 +296,9 @@
}
.settings-menu-delete-button svg {
margin-bottom: 1px;
}
.settings-menu-delete-button svg path {
stroke: var(--red);
fill: var(--red);
stroke-width: 1px;
}
.settings-menu-delete-button:hover,
.settings-menu-delete-button:hover svg path {
stroke: color-mod(var(--red) lightness(-10%));
fill: color-mod(var(--red) lightness(-10%));
color: color-mod(var(--red) lightness(-10%));
width: 1.6rem;
height: 1.6rem;
margin-right: .8rem;
}
.post-setting-custom-excerpt {

View File

@ -81,7 +81,6 @@
width: 13px;
height: 13px;
margin: 0 !important;
fill: #fff;
}
.image-delete:hover {

View File

@ -484,8 +484,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
}
.gh-editor-feature-image-add-button svg path {
stroke: var(--midgrey-l2);
stroke-width: 2;
stroke-width: 1.8;
}
.gh-editor-feature-image-add-button:hover svg path {

View File

@ -1,116 +0,0 @@
.fullscreen-wizard-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
height: 100vh;
background: var(--white);
overflow: hidden;
}
.gh-launch-wizard-step-indicator {
color: var(--midgrey);
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.1px;
text-transform: uppercase;
}
.gh-launch-wizard-content {
display: flex;
background: var(--white);
border-top: 1px solid var(--whitegrey);
}
.gh-launch-wizard-content-left {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 25%;
min-width: 348px;
max-width: 400px;
margin: 40px 48px 0;
}
.gh-launch-wizard-content-right {
position: relative;
flex-grow: 1;
flex-basis: 100%;
margin: 40px 48px 56px 0;
}
.gh-launch-wizard-preview {
box-shadow:
0 0 0 1px rgba(0,0,0,0.02),
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
;
}
.gh-launch-wizard-settings-container {
display: flex;
flex-direction: column;
height: calc(100vh - 136px);
}
.gh-launch-wizard-settings-container .gh-setting-action-largeimg-delete,
.gh-launch-wizard-settings-container .gh-setting-action-smallimg-delete {
position: absolute;
top: 5px;
right: 5px;
margin: 0;
padding: 5px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(0, 0, 0, 0.9);
border-radius: 3px;
opacity: 0;
}
.gh-launch-wizard-settings-container .gh-setting-action-largeimg-delete:hover,
.gh-launch-wizard-settings-container .gh-setting-action-smallimg-delete:hover {
border-color: transparent;
background: var(--red);
}
.gh-launch-wizard-nav-buttons {
display: flex;
justify-content: space-between;
margin-bottom: 5.6rem;
padding-top: 2.4rem;
line-height: 0;
}
.gh-launch-wizard-settings-container .gh-setting-nossl-container {
border: 1px solid var(--whitegrey);
border-radius: 3px;
}
.gh-launch-wizard-settings-container .gh-setting-nossl-container svg {
width: 48px;
height: 48px;
}
/* Connect Stripe settings */
.gh-launch-wizard-stripe-info {
width: 100%;
padding: 16px;
}
.gh-launch-wizard-stripe-connect-token {
height: 88px;
min-height: unset;
font-family: var(--font-family-mono);
font-size: 1.3rem;
resize: none;
background: var(--whitegrey-l2);
}
.gh-setting-desc.skip-step {
margin: 12px 0;
}

View File

@ -597,13 +597,13 @@
}
.gh-nav-list .gh-nav-new-post span svg {
width: 18px;
height: 18px;
width: 1.8rem;
height: 1.8rem;
}
.gh-nav-list .gh-nav-new-post span svg path {
stroke: var(--darkgrey);
stroke-width: 1.5px;
stroke-width: 1;
}
.gh-nav-list .gh-nav-member-count {

View File

@ -2220,10 +2220,7 @@ p.gh-members-import-errordetail:first-of-type {
.gh-btn-addtier svg {
width: .8em;
height: .8em;
}
.gh-btn-addtier svg path {
fill: var(--green);
color: var(--green-d1);
}
.gh-member-tier-memberdetails {

View File

@ -49,6 +49,11 @@
min-width: 140px;
}
.gh-offers-list-cta .gh-btn-icon svg {
width: 1rem;
height: 1rem;
}
.gh-offers-list {
padding: 0;
}

View File

@ -330,6 +330,7 @@
height: 44px;
width: 44px;
border: none;
color: var(--white);
box-shadow: none;
}
@ -344,10 +345,6 @@
height: 18px;
}
.gh-portal-button-deleteicon:hover span svg {
fill: var(--white);
}
.gh-portal-setting-copy {
position: absolute;
display: flex;

View File

@ -332,6 +332,7 @@
align-items: center;
color: var(--midgrey);
margin-top: 8px;
color: var(--whitegrey);
text-decoration: none;
font-size: 13px;
line-height: 10px;
@ -339,15 +340,10 @@
.gh-setting-action-smallimg-delete:hover,
.gh-setting-action-largeimg-delete:hover {
color: var(--red);
color: var(--white);
text-decoration: underline;
}
.gh-setting-action-smallimg-delete svg path,
.gh-setting-action-largeimg-delete svg path {
fill: #fff;
}
.gh-setting-action .gh-progress-container {
width: 113px;
height: 100%;
@ -819,18 +815,17 @@
padding: 8px 0 8px 10px;
display: flex;
align-items: center;
}
.gh-blognav-delete svg {
fill: color-mod(var(--midgrey) l(+15%));
height: 14px;
width: 14px;
color: var(--midgrey);
transition: fill 0.1s linear;
}
.gh-blognav-delete svg:hover,
.gh-blognav-delete svg:focus {
fill: var(--red);
.gh-blognav-delete:hover {
color: var(--red);
}
.gh-blognav-delete svg {
height: 14px;
width: 14px;
}
.gh-blognav-add {
@ -839,6 +834,7 @@
width: 16px;
height: 16px;
background: var(--green);
color: var(--white);
border-radius: 2px;
transition: background 0.1s linear;
display: flex;
@ -847,7 +843,6 @@
}
.gh-blognav-add svg {
fill: #fff;
height: 9px;
width: 9px;
}
@ -1123,6 +1118,8 @@ body:not([data-user-is-dragging]) .gh-newsletter-card-draggable:hover .grab-news
}
.gh-add-newsletter {
display: flex;
align-items: center;
width: max-content;
margin: .8rem 0 0;
color: var(--green-d1);
@ -1131,12 +1128,7 @@ body:not([data-user-is-dragging]) .gh-newsletter-card-draggable:hover .grab-news
.gh-add-newsletter svg {
width: 1rem;
height: 1rem;
margin: 1px 4px 0 0;
}
.gh-add-newsletter svg path {
stroke: var(--green-d1);
stroke-width: 3;
margin-right: 6px;
}
.gh-newsletters-setting-sectionheading {
@ -1699,8 +1691,7 @@ p.theme-validation-details {
margin: 32px 68px 68px;
}
.gh-branding-settings-previewcontainer .site-frame,
.gh-launch-wizard-preview {
.gh-branding-settings-previewcontainer .site-frame {
width: 133.33333%;
height: 133.33333%;
transform: scale(0.75);
@ -2940,10 +2931,6 @@ p.theme-validation-details {
color: var(--lightgrey);
}
.gh-audit-log-icon svg path {
fill: var(--midgrey-l1);
}
.gh-audit-log-description {
font-size: 1.4rem;
color: var(--darkgrey);
@ -2995,17 +2982,14 @@ p.theme-validation-details {
background: var(--white);
width: 22px;
height: 22px;
color: var(--midgrey);
border-radius: 999px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
}
.gh-audit-log-icon svg {
width: 13px;
height: 13px;
}
.gh-audit-log-icon svg path {
fill: var(--midgrey-l1);
width: 12px;
height: 12px;
}
@media (max-width: 620px) {

View File

@ -268,11 +268,6 @@
margin: 1px 4px 0 0;
}
.gh-btn-icon.gh-btn-add-tier svg path {
stroke: var(--green-d1);
stroke-width: 3;
}
.gh-tier-list-icon {
display: flex;
align-items: flex-end;
@ -570,6 +565,11 @@
top: 4px;
right: 8px;
opacity: 0;
color: var(--midgrey);
}
.gh-tier-benefits .gh-blognav-delete:hover {
color: var(--red);
}
.gh-tier-benefits .gh-blognav-add {

View File

@ -209,8 +209,8 @@
.gh-roles-container .gh-radio svg {
width: 16px;
height: 16px;
fill: var(--midgrey);
margin-left: 2px;
color: var(--midgrey);
}
.gh-roles-container .gh-radio-content {

View File

@ -85,11 +85,6 @@ fieldset[disabled] .gh-btn {
background: color-mod(var(--black) l(-20%)) !important;
}
.gh-btn-primary,
.gh-btn-black svg {
fill: var(--white);
}
/* Blue button
/* ---------------------------------------------------------- */
@ -164,7 +159,6 @@ fieldset[disabled] .gh-btn {
/* The background of the button creates 1px gradient border */
.gh-btn-outline {
color: var(--darkgrey);
fill: var(--darkgrey);
border: 1px solid var(--lightgrey-l1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
background: none;
@ -176,10 +170,6 @@ fieldset[disabled] .gh-btn {
border-color: var(--lightgrey);
}
.gh-btn-outline svg {
fill: var(--black);
}
/* When clicked or focused with keyboard */
.gh-btn-outline:active,
.gh-btn-outline:focus {
@ -258,10 +248,9 @@ fieldset[disabled] .gh-btn {
.gh-btn-icon svg,
.gh-btn-block svg {
width: 1em;
height: 1em;
width: 1.2rem;
height: 1.2rem;
margin-right: 0.6em;
fill: currentColor;
}
.gh-btn-white svg {
@ -289,15 +278,15 @@ svg.gh-btn-icon-right {
}
.gh-btn-icon svg path {
stroke: #fff;
stroke: currentColor;
}
.gh-btn-icon.green svg path {
stroke: var(--green);
.gh-btn-icon.fill svg {
fill: currentColor;
}
.gh-btn-icon.red svg path {
stroke: var(--red);
.gh-btn-icon.fill svg path {
stroke: none;
}
.gh-btn-icon-no-margin {

View File

@ -251,7 +251,8 @@
.stroke-purple path,
.stroke-purple g { stroke: var(--purple); }
.stroke-yellow path,
.stroke-yellow g { stroke: var(--yellow); }
.stroke-yellow g,
.stroke-yellow circle { stroke: var(--yellow); }
.stroke-red path,
.stroke-red g { stroke: var(--red); }
.stroke-pink path,

View File

@ -111,7 +111,7 @@
Boost your subscriptions by creating targeted discounts to potential members.
</p>
<LinkTo @route="offer.new" class="gh-btn gh-btn-green gh-btn-icon">
<span>{{svg-jar "add"}} Add offer</span>
<span>{{svg-jar "plus"}} Add offer</span>
</LinkTo>
</div>
{{else}}

View File

@ -204,7 +204,7 @@
</button>
</div> --}}
<GhBasicDropdown @verticalPosition="below" @horizontalPosition="right" @renderInPlace={{true}} as |dd|>
<dd.Trigger class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-tier-card-actions-button icon-only">
<dd.Trigger class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline fill gh-tier-card-actions-button icon-only">
<span data-test-newsletter-menu-trigger>
{{svg-jar "dotdotdot"}}
<span class="hidden">Actions</span>
@ -231,13 +231,13 @@
<tr class="bt b--whitegrey" data-test-webhooks-blank-slate>
<td colspan="5" class="pa5 pt15 pb15 tc midgrey f7">
<div class="flex flex-column items-center">
<p class="ma0 pa0 tc midgrey lh-title mt2">
<p class="ma0 pa0 tc midgrey lh-title mb2">
No webhooks configured
</p>
<LinkTo @route="settings.integration.webhooks.new" @model={{this.integration}} class="flex items-center" data-test-link="add-webhook">
<div class="flex items-center pa2 pt1">
{{svg-jar "add" class="w3 h3 fill-green-d1"}}
<span class="ml1 green">Add webhook</span>
<div class="gh-btn-text green-d1 gh-btn-icon">
{{svg-jar "plus"}}
<span>Add webhook</span>
</div>
</LinkTo>
</div>
@ -250,9 +250,9 @@
<tr class="gh-list-row new-webhook-cell">
<td colspan="5" class="gh-list-data">
<LinkTo @route="settings.integration.webhooks.new" @model={{this.integration}} class="flex items-center" data-test-link="add-webhook">
<div class="pt1 pb1 f7">
{{svg-jar "add" class="w3 h3 fill-green-d1"}}
<span class="ml1 green">Add webhook</span>
<div class="gh-btn-text green-d1 gh-btn-icon">
{{svg-jar "plus"}}
<span class="f7">Add webhook</span>
</div>
</LinkTo>
</td>

View File

@ -224,7 +224,7 @@
Create your own custom Ghost integrations with dedicated API keys & webhooks
</p>
<LinkTo @route="settings.integrations.new" class="gh-btn gh-btn-green gh-btn-icon" data-test-button="new-integration">
<span>{{svg-jar "add" class="w3 h3"}} Add custom integration</span>
<span>{{svg-jar "plus"}} Add custom integration</span>
</LinkTo>
</div>
{{/if}}
@ -236,7 +236,7 @@
{{!-- <div class="apps-grid-cell new-integration-cell"> --}}
<div class="mt5">
<LinkTo @route="settings.integrations.new" class="gh-btn gh-btn-green gh-btn-icon" data-test-button="new-integration">
<span>{{svg-jar "add" class="w3 h3"}} Add custom integration</span>
<span>{{svg-jar "plus"}} Add custom integration</span>
</LinkTo>
</div>
{{!-- </div> --}}

View File

@ -20,7 +20,7 @@
<div class="{{kg-style "cardmenu-desc"}}">{{item.desc}}</div>
</div>
{{#if item.deleteClicked}}
<span class="kg-cardmenu-action-icon" {{on "click" item.deleteClicked}}>{{svg-jar "trash"}}</span>
<span class="kg-cardmenu-action-icon red" {{on "click" item.deleteClicked}}>{{svg-jar "trash"}}</span>
{{/if}}
</div>
{{/if}}

View File

@ -1,5 +1,5 @@
{{#if this.showButton}}
<button aria-label="Add a card" class="koenig-plus-menu-button flex justify-center items-center relative w7 h7 w9-ns h9-ns ba b--midlightgrey-l2 bg-white br-100 anim-normal" onclick={{action "openMenu"}} type="button">{{svg-jar "plus" class="w4 h4 stroke-middarkgrey i-strokew--2"}}</button>
<button aria-label="Add a card" class="koenig-plus-menu-button flex justify-center items-center relative w7 h7 w9-ns h9-ns ba b--midlightgrey-l2 bg-white br-100 anim-normal" onclick={{action "openMenu"}} type="button">{{svg-jar "plus" class="w4 h4 stroke-middarkgrey"}}</button>
{{/if}}
{{#if this.showMenu}}

View File

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>add-stroke</title>
<path d="M12 1v22m11-11H1" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round"/>
</svg>

Before

Width:  |  Height:  |  Size: 199 B

View File

@ -1,4 +0,0 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>add</title>
<path d="M30.688 14.688h-13.313v-13.375c0-0.688-0.625-1.313-1.313-1.313 0 0 0 0 0 0-0.75 0-1.375 0.625-1.375 1.313v13.375h-13.375c-0.688 0-1.313 0.563-1.313 1.313s0.625 1.313 1.313 1.313h13.375v13.375c0 0.688 0.563 1.313 1.313 1.313v0c0.75 0 1.313-0.625 1.313-1.313l0.063-13.375h13.313c0.75 0 1.313-0.563 1.313-1.313s-0.563-1.313-1.313-1.313z"/>
</svg>

Before

Width:  |  Height:  |  Size: 477 B

View File

@ -1,6 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>info</title>
<path fill="currentColor" d="M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5h-.75z"/>
<circle fill="currentColor" cx="11.625" cy="7.125" r="1.125"/>
<path fill="currentColor" d="M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>info</title>
<defs>
<style>
.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
</style>
</defs>
<path class="a" d="M14.25 16.5h-.75A1.5 1.5 0 0 1 12 15v-3.75a.75.75 0 0 0-.75-.75h-.75"/>
<path class="a" d="M12 23.25c6.213 0 11.25-5.037 11.25-11.25S18.213.75 12 .75.75 5.787.75 12 5.787 23.25 12 23.25Z"/>
<circle class="a" r=".5" transform="matrix(1 0 0 -1 11.6 7)"/>
</svg>

Before

Width:  |  Height:  |  Size: 531 B

After

Width:  |  Height:  |  Size: 570 B

View File

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>pen-stroke</title>
<path d="M22.19 1.81a3.639 3.639 0 0 0-5.17.035l-14.5 14.5L.75 23.25l6.905-1.771 14.5-14.5a3.637 3.637 0 0 0 .035-5.169Zm-5.584.45 5.134 5.134m-19.219 8.95 5.139 5.13" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px"/>
</svg>

Before

Width:  |  Height:  |  Size: 367 B

View File

@ -1,4 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>pen</title>
<path d="M.748 24a.755.755 0 0 1-.531-.22.754.754 0 0 1-.196-.716l1.77-6.905a.84.84 0 0 1 .045-.121.73.73 0 0 1 .151-.223L16.513 1.289A4.355 4.355 0 0 1 19.611 0c1.178 0 2.277.454 3.106 1.279l.029.029a4.367 4.367 0 0 1 1.251 3.121 4.356 4.356 0 0 1-1.32 3.087L8.183 22.01a.735.735 0 0 1-.231.154.784.784 0 0 1-.111.042L.933 23.978A.773.773 0 0 1 .748 24zm1.041-1.791 4.41-1.131-3.281-3.275-1.129 4.406zm5.868-1.795 13.02-13.02-4.074-4.074L3.58 16.344l4.077 4.07zM21.736 6.332a2.893 2.893 0 0 0-.059-3.972l-.02-.02a2.872 2.872 0 0 0-2.037-.84v-.375l-.001.375a2.873 2.873 0 0 0-1.954.762l4.071 4.07z" fill-rule="evenodd"/>
<defs>
<style>
.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
</style>
</defs>
<path class="a" d="M21.982 2.01796C21.6483 1.68569 21.2521 1.42283 20.8163 1.24456C20.3804 1.06629 19.9135 0.976142 19.4426 0.97933C18.9717 0.982518 18.5061 1.07897 18.0727 1.26313C17.6393 1.44728 17.2467 1.71549 16.9175 2.05224L2.71346 16.2563L0.979584 23.0204L7.74367 21.2856L21.9477 7.08147C22.2846 6.75246 22.5529 6.35994 22.7371 5.9266C22.9213 5.49327 23.0178 5.02772 23.021 4.55686C23.0242 4.08601 22.934 3.61919 22.7557 3.18341C22.5773 2.74762 22.3144 2.3515 21.982 2.01796V2.01796Z"/>
<path class="a" d="M16.512 2.45878L21.5412 7.488"/>
</svg>

Before

Width:  |  Height:  |  Size: 734 B

After

Width:  |  Height:  |  Size: 818 B

View File

@ -1,6 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>pencil</title>
<path d="M19.601.007a4.241 4.241 0 0 0-3.102 1.318L2.039 15.78a.758.758 0 0 0-.194.34l-1.82 6.94a.75.75 0 0 0 .915.916l6.942-1.82a.733.733 0 0 0 .34-.195l14.465-14.46A4.239 4.239 0 0 0 24 4.404a4.243 4.243 0 0 0-1.277-3.12C21.926.492 20.96.063 19.858.013L19.6.007zm.01 1.5a2.745 2.745 0 0 1 2.052.839c.568.57.842 1.24.837 2.048l-.008.217c-.052.712-.333 1.309-.86 1.822L7.306 20.756l-5.504 1.443 1.442-5.502L17.565 2.379c.52-.53 1.117-.813 1.83-.864l.216-.008z"/>
<path d="M16.09 1.733a.751.751 0 0 1 .977-.073l.084.073 5.122 5.12a.749.749 0 0 1-.976 1.133l-.084-.073-5.122-5.12a.749.749 0 0 1 0-1.06zM14.002 3.82a.75.75 0 0 1 .976-.072l.084.073 5.122 5.12a.749.749 0 0 1-.976 1.133l-.084-.073-5.122-5.12a.749.749 0 0 1 0-1.06zM1.88 16.016a.752.752 0 0 1 .888-.43l.096.034 3.59 1.532c.142.06.261.163.342.293l.053.102 1.536 3.584a.75.75 0 0 1-1.332.681l-.046-.09-1.419-3.309L2.276 17a.752.752 0 0 1-.43-.888l.034-.096z"/>
<path d="M16.563 6.38a.75.75 0 0 1 1.133.977l-.073.084L6.69 18.371a.749.749 0 0 1-1.133-.976l.073-.084L16.563 6.38z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>plus-large</title>
<path d="M12 2v20m10-10H2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 253 B

View File

@ -1,4 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>plus</title>
<path d="M12 1.5v21M1.5 12h21" stroke="#343F44" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M8 1v14M1 8h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 223 B

After

Width:  |  Height:  |  Size: 215 B

View File

@ -1,4 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>trash</title>
<path d="M30.688 4H22V.687a.694.694 0 0 0-.688-.688H10.687a.694.694 0 0 0-.688.688V4H1.311c-.375 0-.625.313-.625.688s.25.625.625.625h3.375v26c0 .375.25.688.625.688h21.375c.375 0 .625-.313.625-.688v-26h3.375c.375 0 .625-.25.625-.625S31.061 4 30.686 4zM11.313 1.313h9.375v2.688h-9.375zM26 30.688H6V5.313h20zM10.688 9.313a.694.694 0 0 0-.688.688v15.313c0 .375.313.688.688.688s.625-.313.625-.688V10.001c0-.375-.25-.688-.625-.688zm5.312 0a.694.694 0 0 0-.688.688v15.313c0 .375.313.688.688.688s.688-.313.688-.688V10.001A.694.694 0 0 0 16 9.313zm4.688.687v15.313c0 .375.25.688.625.688s.688-.313.688-.688V10c0-.375-.313-.688-.688-.688s-.625.313-.625.688z"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>trash</title>
<defs>
<style>
.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
</style>
</defs>
<path class="a" d="M17.9231 22.3077H6.07692C5.6281 22.3077 5.19765 22.1294 4.88028 21.812C4.56291 21.4947 4.38462 21.0642 4.38462 20.6154V5.38463H19.6154V20.6154C19.6154 21.0642 19.4371 21.4947 19.1197 21.812C18.8024 22.1294 18.3719 22.3077 17.9231 22.3077Z"/>
<path class="a" d="M9.46154 17.2308V10.4615"/>
<path class="a" d="M14.5385 17.2308V10.4615"/>
<path class="a" d="M1 5.38463H23"/>
<path class="a" d="M14.5385 2H9.46154C9.01271 2 8.58227 2.1783 8.2649 2.49567C7.94753 2.81303 7.76923 3.24348 7.76923 3.69231V5.38462H16.2308V3.69231C16.2308 3.24348 16.0525 2.81303 15.7351 2.49567C15.4177 2.1783 14.9873 2 14.5385 2Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 765 B

After

Width:  |  Height:  |  Size: 935 B