From 810dc80d45fb87e238e1e12815893f15d83cd0a4 Mon Sep 17 00:00:00 2001 From: Vitalii Shpital <46756926+VitaliiShpital@users.noreply.github.com> Date: Wed, 23 Oct 2019 15:26:39 +0300 Subject: [PATCH] web/satellite: vue-svg-loader implemented (#3307) --- web/satellite/package-lock.json | 19 + web/satellite/package.json | 6 +- .../account/ChangePasswordPopup.vue | 15 +- .../components/account/DeleteAccountPopup.vue | 40 +- .../components/account/EditProfilePopup.vue | 7 +- .../src/components/account/ProfileArea.vue | 38 +- .../account/billing/AccountBalance.vue | 2 +- .../src/components/apiKeys/ApiKeysArea.vue | 34 +- .../components/apiKeys/ApiKeysCopyPopup.vue | 23 +- .../apiKeys/ApiKeysCreationPopup.vue | 7 +- .../src/components/apiKeys/ApiKeysItem.vue | 23 +- .../src/components/buckets/BucketArea.vue | 8 +- .../src/components/buckets/NoBucketsArea.vue | 23 +- .../src/components/buckets/SortingHeader.vue | 6 +- .../src/components/common/HeaderedInput.vue | 10 +- .../src/components/common/HeaderlessInput.vue | 38 +- .../common/RegistrationSuccessPopup.vue | 5 + .../src/components/common/VPagination.vue | 13 +- .../src/components/common/VSearch.vue | 2 +- .../src/components/common/VerticalArrows.vue | 20 +- .../common/registrationSuccessPopup.html | 14 +- .../src/components/errors/Page404.vue | 12 +- .../src/components/errors/Page50X.vue | 12 +- .../src/components/errors/page40X.html | 21 +- .../src/components/errors/page50X.html | 21 +- .../src/components/header/AccountButton.vue | 18 +- .../src/components/header/AccountDropdown.vue | 20 +- .../src/components/header/HeaderArea.vue | 7 + .../src/components/header/headerArea.html | 25 +- .../projectSelection/ProjectSelectionArea.vue | 15 +- .../ProjectSelectionDropdown.vue | 17 +- .../components/navigation/NavigationArea.vue | 9 + .../components/navigation/navigationArea.html | 31 +- .../notifications/NotificationItem.vue | 12 +- .../components/project/AddStripeCardPopup.vue | 162 --------- .../src/components/project/CardChoiceItem.vue | 125 ------- .../components/project/DeleteProjectPopup.vue | 51 +-- .../components/project/NewProjectPopup.vue | 11 +- .../project/ProjectCreationSuccessPopup.vue | 33 +- .../src/components/project/ProjectDetails.vue | 13 +- .../src/components/project/UsageReport.vue | 21 +- .../src/components/team/AddUserPopup.vue | 46 ++- .../components/team/ProjectMemberListItem.vue | 4 +- .../components/team/ProjectMembersArea.vue | 34 +- web/satellite/src/types/svg.d.ts | 7 + .../src/utils/constants/emptyStatesImages.ts | 30 -- .../views/forgotPassword/ForgotPassword.vue | 5 + .../views/forgotPassword/forgotPassword.html | 10 +- .../views/forgotPassword/forgotPassword.scss | 10 + web/satellite/src/views/login/LoginArea.vue | 7 + web/satellite/src/views/login/loginArea.html | 16 +- web/satellite/src/views/login/loginArea.scss | 16 +- .../src/views/register/RegisterArea.vue | 7 + .../src/views/register/registerArea.html | 23 +- .../src/views/register/registerArea.scss | 10 + web/satellite/static/images/AuthImage.svg | 342 ++++++++---------- web/satellite/static/images/Card.svg | 66 ++-- web/satellite/static/images/Logo.svg | 26 +- web/satellite/static/images/LogoWhite.svg | 28 +- .../images/account/BlackArrowExpand.svg | 3 - .../static/images/account/BlackArrowHide.svg | 3 - .../account/{ => billing}/MessageBox.png | Bin .../changePasswordPopup/changePassword.svg | 5 + .../deleteAccountPopup/deleteAccount.svg | 30 ++ .../images/account/profile/changePassword.svg | 5 + .../static/images/account/profile/email.svg | 4 + .../static/images/apiKeys/Vector.png | Bin 0 -> 326 bytes .../static/images/apiKeys/Vector.svg | 3 - .../static/images/apiKeys/avatar.svg | 6 + .../static/images/apiKeys/copyButtonLabel.svg | 6 + web/satellite/static/images/buckets/arrow.svg | 4 +- .../images/buckets/noBucketState/arrow.svg | 4 + .../images/buckets/noBucketState/folder.svg | 8 + .../images/buckets/noBucketState/uplink.svg | 9 + .../static/images/buckets/notification.svg | 4 + .../static/images/buckets/uplink.svg | 9 - .../static/images/common/BlackArrowExpand.svg | 3 + .../static/images/common/BlackArrowHide.svg | 3 + .../static/images/common/BlueExpand.svg | 3 + .../static/images/common/BlueHide.svg | 3 + .../static/images/common/bottomArrow.svg | 3 + .../static/images/common/checkbox.svg | 3 + .../static/images/common/closeCross.svg | 3 + web/satellite/static/images/common/edit.svg | 4 + .../images/common/emptySearchResult.svg | 30 ++ .../static/images/common/paginationLeft.svg | 3 + .../static/images/common/paginationRight.svg | 3 + .../static/images/common/passwordHidden.svg | 4 + .../static/images/common/passwordShown.svg | 10 + web/satellite/static/images/common/search.png | Bin 0 -> 594 bytes .../static/images/common/topArrow.svg | 3 + web/satellite/static/images/errors/404.svg | 37 ++ web/satellite/static/images/errors/50X.svg | 28 ++ web/satellite/static/images/errors/logo.svg | 10 + web/satellite/static/images/errors/text.svg | 7 + .../static/images/header/accountSettings.svg | 3 + web/satellite/static/images/header/logo.svg | 7 + web/satellite/static/images/header/logout.svg | 3 + .../static/images/header/navigationClose.svg | 5 + .../static/images/header/navigationMenu.svg | 5 + .../static/images/header/projectSelection.svg | 3 + web/satellite/static/images/info.svg | 5 + web/satellite/static/images/login/1024.svg | 156 ++++---- web/satellite/static/images/login/1280.svg | 168 ++++----- web/satellite/static/images/login/1920.svg | 194 +++++----- web/satellite/static/images/login/320.svg | 190 +++++----- web/satellite/static/images/login/800.svg | 190 +++++----- .../static/images/login/Background.svg | 170 ++++----- .../static/images/navigation/docs.svg | 6 + .../static/images/navigation/logo.svg | 10 + .../static/images/navigation/logoText.svg | 7 + .../static/images/navigation/support.svg | 4 + .../static/images/notifications/close.svg | 3 + .../static/images/project/createProject.svg | 38 ++ .../static/images/project/datePicker.svg | 3 + .../static/images/project/deleteProject.svg | 37 ++ .../static/images/project/downloadReport.svg | 5 + web/satellite/static/images/project/edit.svg | 4 + .../images/project/projectCreationSuccess.svg | 23 ++ .../static/images/register/BlueExpand.svg | 3 - .../static/images/register/BlueHide.svg | 3 - .../images/register/registerSuccess.svg | 9 + web/satellite/static/images/team/404.svg | 37 -- web/satellite/static/images/team/50X.svg | 28 -- web/satellite/static/images/team/addField.svg | 4 + .../static/images/team/addMember.svg | 30 ++ .../images/team/addMemberNotification.svg | 4 + web/satellite/static/images/team/addUser.png | Bin 10149 -> 0 bytes .../static/images/team/checkboxChecked.png | Bin 0 -> 419 bytes .../static/images/team/checkboxChecked.svg | 4 - .../static/images/team/checkboxEmpty.png | Bin 0 -> 358 bytes .../static/images/team/checkboxEmpty.svg | 3 - web/satellite/static/images/team/close.svg | 3 - .../static/images/team/deleteField.svg | 3 + .../static/images/team/searchIcon.svg | 3 - .../__snapshots__/HeaderedInput.spec.ts.snap | 3 +- .../__snapshots__/VPagination.spec.ts.snap | 24 +- .../__snapshots__/navigationArea.spec.ts.snap | 68 +--- web/satellite/tests/unit/mock/svgTransform.js | 17 + .../NotificationItem.spec.ts.snap | 2 +- .../ProjectMembersArea.spec.ts.snap | 64 +--- web/satellite/tsconfig.json | 1 + web/satellite/tslint.json | 8 +- web/satellite/vue.config.js | 8 + 144 files changed, 1722 insertions(+), 1785 deletions(-) delete mode 100644 web/satellite/src/components/project/AddStripeCardPopup.vue delete mode 100644 web/satellite/src/components/project/CardChoiceItem.vue create mode 100644 web/satellite/src/types/svg.d.ts delete mode 100644 web/satellite/static/images/account/BlackArrowExpand.svg delete mode 100644 web/satellite/static/images/account/BlackArrowHide.svg rename web/satellite/static/images/account/{ => billing}/MessageBox.png (100%) create mode 100644 web/satellite/static/images/account/changePasswordPopup/changePassword.svg create mode 100644 web/satellite/static/images/account/deleteAccountPopup/deleteAccount.svg create mode 100644 web/satellite/static/images/account/profile/changePassword.svg create mode 100644 web/satellite/static/images/account/profile/email.svg create mode 100644 web/satellite/static/images/apiKeys/Vector.png delete mode 100644 web/satellite/static/images/apiKeys/Vector.svg create mode 100644 web/satellite/static/images/apiKeys/avatar.svg create mode 100644 web/satellite/static/images/apiKeys/copyButtonLabel.svg create mode 100644 web/satellite/static/images/buckets/noBucketState/arrow.svg create mode 100644 web/satellite/static/images/buckets/noBucketState/folder.svg create mode 100644 web/satellite/static/images/buckets/noBucketState/uplink.svg create mode 100644 web/satellite/static/images/buckets/notification.svg delete mode 100644 web/satellite/static/images/buckets/uplink.svg create mode 100644 web/satellite/static/images/common/BlackArrowExpand.svg create mode 100644 web/satellite/static/images/common/BlackArrowHide.svg create mode 100644 web/satellite/static/images/common/BlueExpand.svg create mode 100644 web/satellite/static/images/common/BlueHide.svg create mode 100644 web/satellite/static/images/common/bottomArrow.svg create mode 100644 web/satellite/static/images/common/checkbox.svg create mode 100644 web/satellite/static/images/common/closeCross.svg create mode 100644 web/satellite/static/images/common/edit.svg create mode 100644 web/satellite/static/images/common/emptySearchResult.svg create mode 100644 web/satellite/static/images/common/paginationLeft.svg create mode 100644 web/satellite/static/images/common/paginationRight.svg create mode 100644 web/satellite/static/images/common/passwordHidden.svg create mode 100644 web/satellite/static/images/common/passwordShown.svg create mode 100644 web/satellite/static/images/common/search.png create mode 100644 web/satellite/static/images/common/topArrow.svg create mode 100644 web/satellite/static/images/errors/404.svg create mode 100644 web/satellite/static/images/errors/50X.svg create mode 100644 web/satellite/static/images/errors/logo.svg create mode 100644 web/satellite/static/images/errors/text.svg create mode 100644 web/satellite/static/images/header/accountSettings.svg create mode 100644 web/satellite/static/images/header/logo.svg create mode 100644 web/satellite/static/images/header/logout.svg create mode 100644 web/satellite/static/images/header/navigationClose.svg create mode 100644 web/satellite/static/images/header/navigationMenu.svg create mode 100644 web/satellite/static/images/header/projectSelection.svg create mode 100644 web/satellite/static/images/info.svg create mode 100644 web/satellite/static/images/navigation/docs.svg create mode 100644 web/satellite/static/images/navigation/logo.svg create mode 100644 web/satellite/static/images/navigation/logoText.svg create mode 100644 web/satellite/static/images/navigation/support.svg create mode 100644 web/satellite/static/images/notifications/close.svg create mode 100644 web/satellite/static/images/project/createProject.svg create mode 100644 web/satellite/static/images/project/datePicker.svg create mode 100644 web/satellite/static/images/project/deleteProject.svg create mode 100644 web/satellite/static/images/project/downloadReport.svg create mode 100644 web/satellite/static/images/project/edit.svg create mode 100644 web/satellite/static/images/project/projectCreationSuccess.svg delete mode 100644 web/satellite/static/images/register/BlueExpand.svg delete mode 100644 web/satellite/static/images/register/BlueHide.svg create mode 100644 web/satellite/static/images/register/registerSuccess.svg delete mode 100644 web/satellite/static/images/team/404.svg delete mode 100644 web/satellite/static/images/team/50X.svg create mode 100644 web/satellite/static/images/team/addField.svg create mode 100644 web/satellite/static/images/team/addMember.svg create mode 100644 web/satellite/static/images/team/addMemberNotification.svg delete mode 100644 web/satellite/static/images/team/addUser.png create mode 100644 web/satellite/static/images/team/checkboxChecked.png delete mode 100644 web/satellite/static/images/team/checkboxChecked.svg create mode 100644 web/satellite/static/images/team/checkboxEmpty.png delete mode 100644 web/satellite/static/images/team/checkboxEmpty.svg delete mode 100644 web/satellite/static/images/team/close.svg create mode 100644 web/satellite/static/images/team/deleteField.svg delete mode 100644 web/satellite/static/images/team/searchIcon.svg create mode 100644 web/satellite/tests/unit/mock/svgTransform.js diff --git a/web/satellite/package-lock.json b/web/satellite/package-lock.json index 48be267f0..91aec31ae 100644 --- a/web/satellite/package-lock.json +++ b/web/satellite/package-lock.json @@ -13564,6 +13564,15 @@ "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=", "dev": true }, + "svg-to-vue": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/svg-to-vue/-/svg-to-vue-0.4.0.tgz", + "integrity": "sha512-g/ZHtEFf4QDsDtTk9tuYX/MJ2HESTUBMTkuLoffQGQ3xMtlmD9Ec4YyTgmMkP1P8QJtWWu2FiGdOnlKaXc/X/Q==", + "dev": true, + "requires": { + "svgo": "^1.1.1" + } + }, "svgo": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz", @@ -14697,6 +14706,16 @@ "loader-utils": "^1.0.2" } }, + "vue-svg-loader": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.12.0.tgz", + "integrity": "sha512-pg8H6iKCj+DAC7FZuxdfGJMHiFpJPv/YyoN1M7Iqlf+Hu4eU6Q/W/sEFx978syQA+aOx0NXrp+uQUAajqQvXbQ==", + "dev": true, + "requires": { + "loader-utils": "^1.2.3", + "svg-to-vue": "^0.4.0" + } + }, "vue-template-compiler": { "version": "2.6.10", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz", diff --git a/web/satellite/package.json b/web/satellite/package.json index 923a21d50..b324a55ee 100644 --- a/web/satellite/package.json +++ b/web/satellite/package.json @@ -48,6 +48,7 @@ "tslint-loader": "3.5.4", "typescript": "3.5.3", "vue-segment-analytics": "0.3.2", + "vue-svg-loader": "0.12.0", "vue-tslint": "0.3.2", "vue-tslint-loader": "3.5.6", "vue-template-compiler": "2.6.10", @@ -85,8 +86,9 @@ "transform": { "^.+\\.js$": "babel-jest", "^.+\\.vue$": "vue-jest", - ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", - "^.+\\.tsx?$": "ts-jest" + ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", + "^.+\\.tsx?$": "ts-jest", + "^.+\\.svg$": "/tests/unit/mock/svgTransform.js" }, "transformIgnorePatterns": [ "/node_modules/(?!(apollo-client|apollo-link))" diff --git a/web/satellite/src/components/account/ChangePasswordPopup.vue b/web/satellite/src/components/account/ChangePasswordPopup.vue index 2acd837b1..519923678 100644 --- a/web/satellite/src/components/account/ChangePasswordPopup.vue +++ b/web/satellite/src/components/account/ChangePasswordPopup.vue @@ -6,11 +6,7 @@
- - - - - +

Change Password

- - - +
@@ -74,12 +68,17 @@ import { Component, Vue } from 'vue-property-decorator'; import HeaderlessInput from '@/components/common/HeaderlessInput.vue'; import VButton from '@/components/common/VButton.vue'; +import ChangePasswordIcon from '@/../static/images/account/changePasswordPopup/changePassword.svg'; +import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; + import { AuthApi } from '@/api/auth'; import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames'; import { validatePassword } from '@/utils/validation'; @Component({ components: { + ChangePasswordIcon, + CloseCrossIcon, HeaderlessInput, VButton, }, diff --git a/web/satellite/src/components/account/DeleteAccountPopup.vue b/web/satellite/src/components/account/DeleteAccountPopup.vue index 7e44aefac..aa619b25f 100644 --- a/web/satellite/src/components/account/DeleteAccountPopup.vue +++ b/web/satellite/src/components/account/DeleteAccountPopup.vue @@ -6,36 +6,7 @@
- - - +
@@ -79,6 +48,9 @@ import { Component, Vue } from 'vue-property-decorator'; import HeaderedInput from '@/components/common/HeaderedInput.vue'; import VButton from '@/components/common/VButton.vue'; +import DeleteAccountIcon from '@/../static/images/account/deleteAccountPopup/deleteAccount.svg'; +import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; + import { AuthApi } from '@/api/auth'; import { RouteConfig } from '@/router'; import { AuthToken } from '@/utils/authToken'; @@ -87,6 +59,8 @@ import { validatePassword } from '@/utils/validation'; @Component({ components: { + DeleteAccountIcon, + CloseCrossIcon, HeaderedInput, VButton, }, diff --git a/web/satellite/src/components/account/EditProfilePopup.vue b/web/satellite/src/components/account/EditProfilePopup.vue index af3c7433e..2a92ca6a1 100644 --- a/web/satellite/src/components/account/EditProfilePopup.vue +++ b/web/satellite/src/components/account/EditProfilePopup.vue @@ -47,9 +47,7 @@
- - - +
@@ -61,12 +59,15 @@ import { Component, Vue } from 'vue-property-decorator'; import HeaderedInput from '@/components/common/HeaderedInput.vue'; import VButton from '@/components/common/VButton.vue'; +import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; + import { USER_ACTIONS } from '@/store/modules/users'; import { UpdatedUser } from '@/types/users'; import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames'; @Component({ components: { + CloseCrossIcon, HeaderedInput, VButton, }, diff --git a/web/satellite/src/components/account/ProfileArea.vue b/web/satellite/src/components/account/ProfileArea.vue index f4f6eb5c6..e8cc6f289 100644 --- a/web/satellite/src/components/account/ProfileArea.vue +++ b/web/satellite/src/components/account/ProfileArea.vue @@ -13,39 +13,28 @@

This information will be visible to all users

-
- - - - -
+
- - - - - +

Change Password

6 or more characters

-
- - - - -
+
- - - - - - +

Copy

- - - - - - +

Copied

- - - +
@@ -41,11 +29,16 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; import HeaderlessInput from '@/components/common/HeaderlessInput.vue'; +import CopyButtonLabelIcon from '@/../static/images/apiKeys/copyButtonLabel.svg'; +import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; + import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames'; @Component({ components: { HeaderlessInput, + CopyButtonLabelIcon, + CloseCrossIcon, }, }) export default class ApiKeysCopyPopup extends Vue { diff --git a/web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue b/web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue index d91558b03..ab57a78ec 100644 --- a/web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue +++ b/web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue @@ -19,9 +19,7 @@ :on-press="onNextClick" />
- - - +
@@ -33,6 +31,8 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; import HeaderlessInput from '@/components/common/HeaderlessInput.vue'; import VButton from '@/components/common/VButton.vue'; +import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; + import { ApiKey } from '@/types/apiKeys'; import { API_KEYS_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames'; @@ -42,6 +42,7 @@ const CREATE = API_KEYS_ACTIONS.CREATE; components: { HeaderlessInput, VButton, + CloseCrossIcon, }, }) export default class ApiKeysCreationPopup extends Vue { diff --git a/web/satellite/src/components/apiKeys/ApiKeysItem.vue b/web/satellite/src/components/apiKeys/ApiKeysItem.vue index 4ec9360b9..349cd509d 100644 --- a/web/satellite/src/components/apiKeys/ApiKeysItem.vue +++ b/web/satellite/src/components/apiKeys/ApiKeysItem.vue @@ -5,17 +5,10 @@
- - - +
- - - - - - +

{{getItemName}}

@@ -26,9 +19,17 @@ diff --git a/web/satellite/src/components/project/CardChoiceItem.vue b/web/satellite/src/components/project/CardChoiceItem.vue deleted file mode 100644 index ab42f5901..000000000 --- a/web/satellite/src/components/project/CardChoiceItem.vue +++ /dev/null @@ -1,125 +0,0 @@ -// Copyright (C) 2019 Storj Labs, Inc. -// See LICENSE for copying information. - - - - - - diff --git a/web/satellite/src/components/project/DeleteProjectPopup.vue b/web/satellite/src/components/project/DeleteProjectPopup.vue index 1d9aedc29..800cd88a4 100644 --- a/web/satellite/src/components/project/DeleteProjectPopup.vue +++ b/web/satellite/src/components/project/DeleteProjectPopup.vue @@ -6,50 +6,14 @@

Delete Project

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

Are you sure that you want to delete your project? You will lose all your buckets and files that linked to this project.

To confirm, enter the project name

- Red error icon with explanation mark +

{{nameError}}

- - - +
@@ -92,6 +54,10 @@ import { Component, Vue } from 'vue-property-decorator'; import VButton from '@/components/common/VButton.vue'; +import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; +import DeleteProjectIcon from '@/../static/images/project/deleteProject.svg'; +import ErrorIcon from '@/../static/images/register/ErrorInfo.svg'; + import { BUCKET_ACTIONS } from '@/store/modules/buckets'; import { PROJECTS_ACTIONS } from '@/store/modules/projects'; import { PROJECT_USAGE_ACTIONS } from '@/store/modules/usage'; @@ -105,6 +71,9 @@ import { @Component({ components: { VButton, + DeleteProjectIcon, + ErrorIcon, + CloseCrossIcon, }, }) export default class DeleteProjectPopup extends Vue { diff --git a/web/satellite/src/components/project/NewProjectPopup.vue b/web/satellite/src/components/project/NewProjectPopup.vue index c98c7ad70..4e768b47a 100644 --- a/web/satellite/src/components/project/NewProjectPopup.vue +++ b/web/satellite/src/components/project/NewProjectPopup.vue @@ -6,7 +6,7 @@

Create a Project

- Create project illustration +
- - - +
@@ -60,6 +58,9 @@ import { Component, Vue } from 'vue-property-decorator'; import HeaderedInput from '@/components/common/HeaderedInput.vue'; import VButton from '@/components/common/VButton.vue'; +import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; +import CreateProjectIcon from '@/../static/images/project/createProject.svg'; + import { BUCKET_ACTIONS } from '@/store/modules/buckets'; import { PROJECTS_ACTIONS } from '@/store/modules/projects'; import { PROJECT_USAGE_ACTIONS } from '@/store/modules/usage'; @@ -75,6 +76,8 @@ import { components: { HeaderedInput, VButton, + CreateProjectIcon, + CloseCrossIcon, }, }) export default class NewProjectPopup extends Vue { diff --git a/web/satellite/src/components/project/ProjectCreationSuccessPopup.vue b/web/satellite/src/components/project/ProjectCreationSuccessPopup.vue index cf1e9fbe2..3d9346b89 100644 --- a/web/satellite/src/components/project/ProjectCreationSuccessPopup.vue +++ b/web/satellite/src/components/project/ProjectCreationSuccessPopup.vue @@ -5,29 +5,7 @@
- - - - - - - - - - - - - - - - - - - - - - - +

Congrats!

@@ -51,9 +29,7 @@
- - - +
@@ -64,12 +40,17 @@ import { Component, Vue } from 'vue-property-decorator'; import VButton from '@/components/common/VButton.vue'; +import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; +import ProjectCreationSuccessIcon from '@/../static/images/project/projectCreationSuccess.svg'; + import { RouteConfig } from '@/router'; import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames'; @Component({ components: { VButton, + ProjectCreationSuccessIcon, + CloseCrossIcon, }, }) export default class ProjectCreationSuccessPopup extends Vue { diff --git a/web/satellite/src/components/project/ProjectDetails.vue b/web/satellite/src/components/project/ProjectDetails.vue index 148b24320..85be2e08b 100644 --- a/web/satellite/src/components/project/ProjectDetails.vue +++ b/web/satellite/src/components/project/ProjectDetails.vue @@ -17,12 +17,10 @@

Description

{{displayedDescription}}

-
- - - - -
+
- - - +
@@ -44,11 +45,10 @@

Roll Up Period {{toLocaleDateString(startDate)}} to {{toLocaleDateString(endDate)}}

Download Advanced Report

- - - - - +
@@ -60,6 +60,9 @@ import { Component, Vue } from 'vue-property-decorator'; import VDatepicker from '@/components/common/VDatePicker.vue'; +import DatePickerIcon from '@/../static/images/project/datePicker.svg'; +import DownloadReportIcon from '@/../static/images/project/downloadReport.svg'; + import { RouteConfig } from '@/router'; import { PROJECT_USAGE_ACTIONS } from '@/store/modules/usage'; import { DateRange } from '@/types/usage'; @@ -69,6 +72,8 @@ import { toUnixTimestamp } from '@/utils/time'; @Component({ components: { VDatepicker, + DatePickerIcon, + DownloadReportIcon, }, }) export default class UsageReport extends Vue { diff --git a/web/satellite/src/components/team/AddUserPopup.vue b/web/satellite/src/components/team/AddUserPopup.vue index 2c3138f71..5a34491d5 100644 --- a/web/satellite/src/components/team/AddUserPopup.vue +++ b/web/satellite/src/components/team/AddUserPopup.vue @@ -7,12 +7,12 @@

Add Team Member

-
+

Email Address

- Red error icon +

{{formError}}

@@ -26,18 +26,16 @@ :class="{ 'error-input': input.error }" @keyup="resetFormErrors(index)" /> - - - +
- - - - +

Add More

@@ -60,16 +58,11 @@
- - - +
- - - - +

If the team member you want to invite to join the project is still not on this Satellite, please share this link to the signup page and ask them to register here: {{registerPath}}

@@ -83,19 +76,30 @@ import { Component, Vue } from 'vue-property-decorator'; import VButton from '@/components/common/VButton.vue'; +import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; +import ErrorIcon from '@/../static/images/register/ErrorInfo.svg'; +import AddFieldIcon from '@/../static/images/team/addField.svg'; +import AddMemberIcon from '@/../static/images/team/addMember.svg'; +import AddMemberNotificationIcon from '@/../static/images/team/addMemberNotification.svg'; +import DeleteFieldIcon from '@/../static/images/team/deleteField.svg'; + import { RouteConfig } from '@/router'; import { EmailInput } from '@/types/EmailInput'; import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames'; -import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages'; import { validateEmail } from '@/utils/validation'; @Component({ components: { VButton, + AddMemberIcon, + ErrorIcon, + DeleteFieldIcon, + AddFieldIcon, + CloseCrossIcon, + AddMemberNotificationIcon, }, }) export default class AddUserPopup extends Vue { - public imageSource: string = EMPTY_STATE_IMAGES.ADD_USER; private inputs: EmailInput[] = [new EmailInput(), new EmailInput(), new EmailInput()]; private formError: string = ''; private isLoading: boolean = false; @@ -486,6 +490,11 @@ export default class AddUserPopup extends Vue { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; + &__image { + margin-right: 40px; + min-width: 40px; + } + &__text-area { display: flex; align-items: center; @@ -493,7 +502,6 @@ export default class AddUserPopup extends Vue { &__text { font-family: 'font_medium'; font-size: 16px; - margin-left: 40px; } } } diff --git a/web/satellite/src/components/team/ProjectMemberListItem.vue b/web/satellite/src/components/team/ProjectMemberListItem.vue index 146a527ab..d1c7e91cb 100644 --- a/web/satellite/src/components/team/ProjectMemberListItem.vue +++ b/web/satellite/src/components/team/ProjectMemberListItem.vue @@ -131,7 +131,7 @@ export default class ProjectMemberListItem extends Vue { } .checkbox { - background-image: url("../../../static/images/team/checkboxEmpty.svg"); + background-image: url("../../../static/images/team/checkboxEmpty.png"); min-width: 23px; height: 23px; } @@ -142,7 +142,7 @@ export default class ProjectMemberListItem extends Vue { .checkbox { min-width: 23px; height: 23px; - background-image: url("../../../static/images/team/checkboxChecked.svg"); + background-image: url("../../../static/images/team/checkboxChecked.png"); } .user-container__base-info__name-area__user-name, diff --git a/web/satellite/src/components/team/ProjectMembersArea.vue b/web/satellite/src/components/team/ProjectMembersArea.vue index 3d7bc4c0b..d8506ec69 100644 --- a/web/satellite/src/components/team/ProjectMembersArea.vue +++ b/web/satellite/src/components/team/ProjectMembersArea.vue @@ -29,36 +29,7 @@

No results found

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
@@ -72,6 +43,8 @@ import HeaderArea from '@/components/team/HeaderArea.vue'; import ProjectMemberListItem from '@/components/team/ProjectMemberListItem.vue'; import SortingListHeader from '@/components/team/SortingListHeader.vue'; +import EmptySearchResultIcon from '@/../static/images/common/emptySearchResult.svg'; + import { SortDirection } from '@/types/common'; import { ProjectMember, ProjectMemberHeaderState, ProjectMemberOrderBy } from '@/types/projectMembers'; import { NOTIFICATION_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames'; @@ -97,6 +70,7 @@ declare interface ResetPagination { VList, VPagination, SortingListHeader, + EmptySearchResultIcon, }, }) export default class ProjectMembersArea extends Vue { diff --git a/web/satellite/src/types/svg.d.ts b/web/satellite/src/types/svg.d.ts new file mode 100644 index 000000000..92e898ee9 --- /dev/null +++ b/web/satellite/src/types/svg.d.ts @@ -0,0 +1,7 @@ +// Copyright (C) 2019 Storj Labs, Inc. +// See LICENSE for copying information. + +declare module '*.svg' { + const content: any; + export default content; +} diff --git a/web/satellite/src/utils/constants/emptyStatesImages.ts b/web/satellite/src/utils/constants/emptyStatesImages.ts index 8e7d99709..043fe786b 100644 --- a/web/satellite/src/utils/constants/emptyStatesImages.ts +++ b/web/satellite/src/utils/constants/emptyStatesImages.ts @@ -41,36 +41,6 @@ export const EMPTY_STATE_IMAGES = { `, - ADD_USER: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, API_KEY: ` diff --git a/web/satellite/src/views/forgotPassword/ForgotPassword.vue b/web/satellite/src/views/forgotPassword/ForgotPassword.vue index 8d34ffdc0..1878ea5ed 100644 --- a/web/satellite/src/views/forgotPassword/ForgotPassword.vue +++ b/web/satellite/src/views/forgotPassword/ForgotPassword.vue @@ -8,6 +8,9 @@ import { Component, Vue } from 'vue-property-decorator'; import HeaderlessInput from '@/components/common/HeaderlessInput.vue'; +import AuthIcon from '@/../static/images/AuthImage.svg'; +import LogoIcon from '@/../static/images/Logo.svg'; + import { AuthApi } from '@/api/auth'; import { RouteConfig } from '@/router'; import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames'; @@ -17,6 +20,8 @@ import { validateEmail } from '@/utils/validation'; @Component({ components: { HeaderlessInput, + AuthIcon, + LogoIcon, }, }) export default class ForgotPassword extends Vue { diff --git a/web/satellite/src/views/forgotPassword/forgotPassword.html b/web/satellite/src/views/forgotPassword/forgotPassword.html index 63ab577c5..f75b6bb87 100644 --- a/web/satellite/src/views/forgotPassword/forgotPassword.html +++ b/web/satellite/src/views/forgotPassword/forgotPassword.html @@ -5,10 +5,16 @@
Loading image gif
- Authentication image +
- +