web/satellite: vue-svg-loader implemented (#3307)

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",

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",
+      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
-      "^.+\\.tsx?$": "ts-jest"
+      "^.+\\.tsx?$": "ts-jest",
+      "^.+\\.svg$": "<rootDir>/tests/unit/mock/svgTransform.js"
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!(apollo-client|apollo-link))"

web/satellite/src/components/account/ChangePasswordPopup.vue

@@ -6,11 +6,7 @@
         <div class="change-password-popup">
             <div class="change-password-popup__form-container">
                 <div class="change-password-row-container">
-                    <svg class="change-password-popup__form-container__svg" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <ChangePasswordIcon class="change-password-popup__form-container__svg"/>
-                        <path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#2683FF"/>
-                        <path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#FEFEFF"/>
-                        <path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#FEFEFF"/>
-                    </svg>
                     <h2 class="change-password-popup__form-container__main-label-text">Change Password</h2>
                 </div>
                 <HeaderlessInput
@@ -60,9 +56,7 @@
                 </div>
             </div>
             <div class="change-password-popup__close-cross-container" @click="onCloseClick">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <CloseCrossIcon/>
-                    <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
-                </svg>
             </div>
         </div>
     </div>
@@ -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,
     },

web/satellite/src/components/account/DeleteAccountPopup.vue

@@ -6,36 +6,7 @@
         <div class='delete-account' id="deleteAccountPopup">
             <div class='delete-account__info-panel-container'>
                 <h2 class='delete-account__info-panel-container__main-label-text'>Delete account</h2>
-                <svg width="240" height="187" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <DeleteAccountIcon/>
-                    <path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.3168 98C21.4071 98 20 96.5077 20 94.6174C20.9046 68.9496 31.8599 45.769 49.0467 28.7566C66.2335 11.7442 89.6518 0.900089 115.583 0.00470057C117.492 -0.094787 119 1.39753 119 3.28779V32.4377C119 34.2284 117.593 35.6213 115.784 35.7208C99.7025 36.5167 85.2294 43.3813 74.4751 53.927C63.8213 64.5722 56.8863 78.8984 56.0822 94.8164C55.9817 96.6072 54.5746 98 52.7655 98H23.3168Z" fill="#B0B6C9"/>
-                    <path d="M117.5 30C124.404 30 130 25.0751 130 19C130 12.9249 124.404 8 117.5 8C110.596 8 105 12.9249 105 19C105 25.0751 110.596 30 117.5 30Z" fill="#8F96AD"/>
-                    <path d="M112.5 97C116.09 97 119 94.3137 119 91C119 87.6863 116.09 85 112.5 85C108.91 85 106 87.6863 106 91C106 94.3137 108.91 97 112.5 97Z" fill="#B0B6C9"/>
-                    <path d="M15.0005 282C23.226 282 30 274.575 30 265.5C30 256.425 23.226 249 15.0005 249C6.77499 249 0.00102409 256.425 0.00102409 265.5C-0.0957468 274.678 6.67822 282 15.0005 282Z" fill="#8F96AD"/>
-                    <path d="M15.5 274C19.0286 274 22 270.9 22 267C22 263.2 19.1214 260 15.5 260C11.9714 260 9 263.1 9 267C9 270.9 11.8786 274 15.5 274Z" fill="white"/>
-                    <path d="M282.587 111H307.413C309.906 111 312 108.955 312 106.5C312 104.045 309.906 102 307.413 102H282.587C280.094 102 278 104.045 278 106.5C278 108.955 280.094 111 282.587 111Z" fill="white"/>
-                    <path d="M282.585 93H289.415C291.951 93 294 91.02 294 88.5C294 85.98 291.951 84 289.415 84H282.585C280.049 84 278 85.98 278 88.5C278 91.02 279.951 93 282.585 93Z" fill="#E8EAF2"/>
-                    <path d="M252.872 92H260.128C262.823 92 265 90.4091 265 88.5C265 86.5909 262.823 85 260.128 85H252.872C250.177 85 248 86.5909 248 88.5C248 90.4091 250.177 92 252.872 92Z" fill="#363840"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M45 166C48.8182 166 52 162.818 52 159C52 155.182 48.8182 152 45 152C41.1818 152 38 155.182 38 159C38 162.818 41.1818 166 45 166Z" fill="#B0B6C9"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M217 232C220.818 232 224 228.818 224 225C224 221.182 220.818 218 217 218C213.182 218 210 221.182 210 225C210 228.818 213.182 232 217 232Z" fill="#2683FF"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M26 142C29.8182 142 33 139.045 33 135.5C33 131.955 29.8182 129 26 129C22.1818 129 19 131.955 19 135.5C19 139.045 22.1818 142 26 142Z" fill="white"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M45 142C48.8182 142 52 139.045 52 135.5C52 131.955 48.8182 129 45 129C41.1818 129 38 131.955 38 135.5C38 139.045 41.1818 142 45 142Z" fill="#E8EAF2"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M64 142C67.8182 142 71 139.045 71 135.5C71 131.955 67.8182 129 64 129C60.1818 129 57 131.955 57 135.5C57 139.045 60.1818 142 64 142Z" fill="white"/>
-                    <path d="M107.014 129.651C107.014 129.651 152.017 118.395 199.527 125.169C212.857 127.061 224.785 134.831 232.001 146.186C245.031 166.606 263.374 203.062 259.465 241.112L239.018 246.093C239.018 246.093 224.885 200.97 209.049 182.643C209.049 182.643 190.205 225.275 191.208 248.683C191.208 249.38 191.308 249.977 191.308 250.575C193.513 273.485 101 254.858 101 254.858L107.014 129.651Z" fill="#F5F6FA"/>
-                    <path d="M143 89.7894L145.01 121.569C145.211 124.568 147.12 127.066 149.833 127.865C156.063 129.664 167.821 131.863 179.276 127.266C181.387 126.466 182.492 123.968 181.789 121.669L166.514 73L143 89.7894Z" fill="#8F96AD"/>
-                    <path d="M189 61.014C189 61.014 186.474 85.2772 181.219 95.8484C175.964 106.42 174.448 114.272 161.412 109.641C148.376 105.01 141.707 93.5328 142.01 80.2434C142.01 80.2434 142.414 59.7052 147.972 54.3692C153.631 49.0333 189 61.014 189 61.014Z" fill="#B0B6C9"/>
-                    <path d="M150.596 75.686L152.115 76.4754C152.115 76.4754 153.128 60.6872 159.814 61.4766C166.5 62.266 190.609 69.8641 199.625 64.9303C208.235 60.1938 191.521 44.2082 180.074 40.4585C163.866 35.0313 150.798 35.5247 144.822 45.2936C144.416 45.8857 143.606 45.8857 143.201 45.2936C142.492 44.0108 128.209 53.9772 132.97 65.917C133.172 66.5091 138.946 83.4815 140.567 83.9748C140.972 84.0735 141.479 83.8762 141.681 83.4815L146.24 74.4032C146.442 73.9098 147.05 73.7125 147.557 74.0085L150.596 75.686Z" fill="#0F002D"/>
-                    <path d="M149.877 78.0283C149.877 78.0283 154.31 62.6808 145.56 63.0051C136.81 63.3293 139.844 79.7576 144.744 83L149.877 78.0283Z" fill="#B0B6C9"/>
-                    <path d="M106.635 221.07C104.63 206.983 119.272 186.154 125.289 178.305C126.994 176.092 127.996 173.274 127.996 170.457C128.197 150.433 119.773 137.553 106.335 129C106.335 129 57.5953 185.953 70.0308 229.724C71.3345 234.453 73.4406 238.478 76.048 242C78.0538 225.397 97.1082 221.875 106.635 221.07Z" fill="#F5F6FA"/>
-                    <path d="M107.966 215L106 214.798C107.655 200.851 120.172 183.67 125.448 177L127 178.112C121.828 184.681 109.621 201.559 107.966 215Z" fill="#0F002D"/>
-                    <path d="M107.128 221.954C106.926 221.337 106.825 220.617 106.725 220C97.054 220.823 78.0147 224.423 76 241.29C97.8599 270.808 158 260.111 158 260.111V248.592C158.101 248.695 111.862 239.953 107.128 221.954Z" fill="#B0B6C9"/>
-                    <path d="M152 257C152 257 160.863 236.189 176.575 243.593C192.187 250.997 190.978 255.799 190.978 255.799L152 257Z" fill="#B0B6C9"/>
-                    <path d="M271.213 238H136.787C134.194 238 132 235.787 132 233.172V139.828C132 137.213 134.194 135 136.787 135H271.213C273.806 135 276 137.213 276 139.828V233.172C276 235.787 273.906 238 271.213 238Z" fill="#363840"/>
-                    <path d="M217.252 258H195.744C193.109 258 191 256 191 253.5V190.5C191 188 193.109 186 195.744 186H217.252C219.888 186 221.996 188 221.996 190.5V253.5C222.102 255.9 219.888 258 217.252 258Z" fill="#363840"/>
-                    <path d="M246.189 254H150.811C149.305 254 148 255.444 148 257.111V258.889C148 260.556 149.305 262 150.811 262H246.189C247.695 262 249 260.556 249 258.889V257.111C249 255.444 247.795 254 246.189 254Z" fill="#363840"/>
-                    <path d="M350.452 224.555C349.952 224.555 349.553 224.555 349.154 224.654C348.355 224.754 347.557 224.256 347.257 223.56C337.873 206.543 319.705 195 298.742 195C279.775 195 263.004 204.454 253.121 218.883C252.622 219.579 251.724 219.878 250.925 219.778C248.429 219.281 245.834 218.982 243.239 218.982C223.772 219.082 208 234.605 208 253.91C208 253.91 208 253.91 208 254.01C208 255.104 208.898 256 210.096 256H377.904C379.002 256 380 255.104 380 254.01V253.91C379.8 237.591 366.623 224.555 350.452 224.555Z" fill="#B0B6C9"/>
-                    <path d="M206 195C210.418 195 214 191.194 214 186.5C214 181.806 210.418 178 206 178C201.582 178 198 181.806 198 186.5C198 191.194 201.582 195 206 195Z" fill="white"/>
-                </svg>
             </div>
             <div class='delete-account__form-container'>
                 <p class='delete-account__form-container__confirmation-text'>Are you sure you want to delete your account? If you do so, all your information, projects and API Keys will be deleted forever (drop from the satellite).</p>
@@ -65,9 +36,7 @@
                 </div>
             </div>
             <div class='delete-account__close-cross-container' @click='onCloseClick'>
-                <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+                <CloseCrossIcon/>
-                    <path class="close-cross-svg-path" d='M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z' fill='#384B65'/>
-                </svg>
             </div>
         </div>
     </div>
@@ -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,
     },

web/satellite/src/components/account/EditProfilePopup.vue

@@ -47,9 +47,7 @@
                 </div>
             </div>
             <div class="edit-profile-popup__close-cross-container" @click="onCloseClick">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <CloseCrossIcon/>
-                    <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
-                </svg>
             </div>
         </div>
     </div>
@@ -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,
     },

web/satellite/src/components/account/ProfileArea.vue

@@ -13,39 +13,28 @@
                     <h3 class="profile-regular-text">This information will be visible to all users</h3>
                 </div>
             </div>
-            <div title="Edit">
+            <EditIcon
-                <svg class="edit-svg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleEditProfilePopup">
+                class="edit-svg"
-                    <rect class="edit-svg__rect" width="40" height="40" rx="4" fill="#E2ECF7"/>
+                @click="toggleEditProfilePopup"
-                    <path class="edit-svg__path" d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
+            />
-                </svg>
-            </div>
         </div>
         <div class="profile-container__secondary-container">
             <div class="profile-container__secondary-container__change-password">
                 <div class="profile-container__edit-profile__row">
-                    <svg class="profile-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <ChangePasswordIcon class="profile-container__secondary-container__img"/>
-                        <path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
-                        <path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#354049"/>
-                        <path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#354049"/>
-                    </svg>
                     <div class="profile-container__secondary-container__change-password__text-container">
                         <h2 class="profile-bold-text">Change Password</h2>
                         <h3 class="profile-regular-text">6 or more characters</h3>
                     </div>
                 </div>
-                <div title="Edit">
+                <EditIcon
-                    <svg class="edit-svg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="toggleChangePasswordPopup">
+                    class="edit-svg"
-                        <rect class="edit-svg__rect" width="40" height="40" rx="4" fill="#E2ECF7"/>
+                    @click="toggleChangePasswordPopup"
-                        <path class="edit-svg__path" d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
+                />
-                    </svg>
-                </div>
             </div>
             <div class="profile-container__secondary-container__email-container">
                 <div class="profile-container__edit-profile__row">
-                    <svg class="profile-container__secondary-container__img" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <EmailIcon class="profile-container__secondary-container__img"/>
-                        <path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
-                        <path d="M29.9998 16.7598C25.7965 16.7641 21.8459 18.7646 19.3534 22.1498C16.8607 25.535 16.1236 29.9013 17.3671 33.9162C18.6096 37.9314 21.6853 41.1186 25.6546 42.5032C29.6238 43.8868 34.014 43.305 37.4846 40.9348L35.9861 38.7538C33.3633 40.552 30.0711 41.0781 27.0174 40.1856C23.9649 39.2931 21.4732 37.077 20.2319 34.1482C18.9905 31.2203 19.1294 27.8888 20.6104 25.0734C22.0924 22.2591 24.7588 20.2577 27.8761 19.6232C30.9922 18.9878 34.2296 19.7862 36.6938 21.7976C39.1581 23.809 40.5898 26.8202 40.592 30.0007V31.0365C40.592 32.8762 39.8001 33.9732 38.4723 33.9732V33.995L38.4734 33.9961C38.3892 33.9819 38.305 33.9743 38.2208 33.9743H37.9408C37.1959 33.9743 36.0868 32.8903 36.0868 32.1597V30.0007C36.0989 28.1019 35.2293 26.3038 33.7331 25.1345C32.2358 23.9653 30.2824 23.5563 28.4417 24.0277C26.602 24.498 25.085 25.7963 24.3335 27.5408C23.5832 29.2854 23.6838 31.2794 24.6069 32.9395C25.529 34.5987 27.1696 35.7373 29.0475 36.0206C30.9254 36.3039 32.8286 35.6991 34.2 34.3855C35.0597 35.6542 36.521 36.6255 37.9386 36.6255V36.6025C38.0228 36.6178 38.1092 36.6255 38.1956 36.6255H38.4756C41.326 36.6255 43.2356 34.3855 43.2356 31.042V30.0007C43.2312 26.4909 41.8356 23.1265 39.3551 20.6448C36.8734 18.1631 33.5101 16.7654 30.0003 16.7598L29.9998 16.7598ZM29.9998 33.4416C28.6075 33.4416 27.353 32.6038 26.8204 31.3176C26.2878 30.0313 26.582 28.5515 27.5664 27.567C28.5508 26.5824 30.0306 26.2884 31.317 26.821C32.6032 27.3537 33.441 28.6082 33.441 30.0004C33.441 31.9014 31.901 33.4413 30.0001 33.4413L29.9998 33.4416Z" fill="#354049"/>
-                    </svg>
                     <div class="profile-container__secondary-container__email-container__text-container">
                         <h2 class="profile-bold-text">{{user.email}}</h2>
                     </div>
@@ -76,12 +65,19 @@ import DeleteAccountPopup from '@/components/account/DeleteAccountPopup.vue';
 import EditProfilePopup from '@/components/account/EditProfilePopup.vue';
 import VButton from '@/components/common/VButton.vue';
 
+import ChangePasswordIcon from '@/../static/images/account/profile/changePassword.svg';
+import EmailIcon from '@/../static/images/account/profile/email.svg';
+import EditIcon from '@/../static/images/common/edit.svg';
+
 import { USER_ACTIONS } from '@/store/modules/users';
 import { User } from '@/types/users';
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 
 @Component({
     components: {
+        EditIcon,
+        ChangePasswordIcon,
+        EmailIcon,
         VButton,
         DeleteAccountPopup,
         ChangePasswordPopup,

web/satellite/src/components/account/billing/AccountBalance.vue

@@ -117,7 +117,7 @@ export default class AccountBalance extends Vue {
     }
 
     /deep/ .info__message-box {
-        background-image: url('../../../../static/images/account/MessageBox.png');
+        background-image: url('../../../../static/images/account/billing/MessageBox.png');
         background-repeat: no-repeat;
         min-height: 80px;
         min-width: 195px;

web/satellite/src/components/apiKeys/ApiKeysArea.vue

@@ -91,36 +91,7 @@
             </div>
             <div class="empty-search-result-area" v-if="isEmptySearchResultShown">
                 <h1 class="empty-search-result-area__title">No results found</h1>
-                <svg class="empty-search-result-area__image" width="380" height="295" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <EmptySearchResultIcon class="empty-search-result-area__image"/>
-                    <path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.3168 98C21.4071 98 20 96.5077 20 94.6174C20.9046 68.9496 31.8599 45.769 49.0467 28.7566C66.2335 11.7442 89.6518 0.900089 115.583 0.00470057C117.492 -0.094787 119 1.39753 119 3.28779V32.4377C119 34.2284 117.593 35.6213 115.784 35.7208C99.7025 36.5167 85.2294 43.3813 74.4751 53.927C63.8213 64.5722 56.8863 78.8984 56.0822 94.8164C55.9817 96.6072 54.5746 98 52.7655 98H23.3168Z" fill="#B0B6C9"/>
-                    <path d="M117.5 30C124.404 30 130 25.0751 130 19C130 12.9249 124.404 8 117.5 8C110.596 8 105 12.9249 105 19C105 25.0751 110.596 30 117.5 30Z" fill="#8F96AD"/>
-                    <path d="M112.5 97C116.09 97 119 94.3137 119 91C119 87.6863 116.09 85 112.5 85C108.91 85 106 87.6863 106 91C106 94.3137 108.91 97 112.5 97Z" fill="#B0B6C9"/>
-                    <path d="M15.0005 282C23.226 282 30 274.575 30 265.5C30 256.425 23.226 249 15.0005 249C6.77499 249 0.00102409 256.425 0.00102409 265.5C-0.0957468 274.678 6.67822 282 15.0005 282Z" fill="#8F96AD"/>
-                    <path d="M15.5 274C19.0286 274 22 270.9 22 267C22 263.2 19.1214 260 15.5 260C11.9714 260 9 263.1 9 267C9 270.9 11.8786 274 15.5 274Z" fill="white"/>
-                    <path d="M282.587 111H307.413C309.906 111 312 108.955 312 106.5C312 104.045 309.906 102 307.413 102H282.587C280.094 102 278 104.045 278 106.5C278 108.955 280.094 111 282.587 111Z" fill="white"/>
-                    <path d="M282.585 93H289.415C291.951 93 294 91.02 294 88.5C294 85.98 291.951 84 289.415 84H282.585C280.049 84 278 85.98 278 88.5C278 91.02 279.951 93 282.585 93Z" fill="#E8EAF2"/>
-                    <path d="M252.872 92H260.128C262.823 92 265 90.4091 265 88.5C265 86.5909 262.823 85 260.128 85H252.872C250.177 85 248 86.5909 248 88.5C248 90.4091 250.177 92 252.872 92Z" fill="#363840"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M45 166C48.8182 166 52 162.818 52 159C52 155.182 48.8182 152 45 152C41.1818 152 38 155.182 38 159C38 162.818 41.1818 166 45 166Z" fill="#B0B6C9"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M217 232C220.818 232 224 228.818 224 225C224 221.182 220.818 218 217 218C213.182 218 210 221.182 210 225C210 228.818 213.182 232 217 232Z" fill="#2683FF"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M26 142C29.8182 142 33 139.045 33 135.5C33 131.955 29.8182 129 26 129C22.1818 129 19 131.955 19 135.5C19 139.045 22.1818 142 26 142Z" fill="white"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M45 142C48.8182 142 52 139.045 52 135.5C52 131.955 48.8182 129 45 129C41.1818 129 38 131.955 38 135.5C38 139.045 41.1818 142 45 142Z" fill="#E8EAF2"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M64 142C67.8182 142 71 139.045 71 135.5C71 131.955 67.8182 129 64 129C60.1818 129 57 131.955 57 135.5C57 139.045 60.1818 142 64 142Z" fill="white"/>
-                    <path d="M107.014 129.651C107.014 129.651 152.017 118.395 199.527 125.169C212.857 127.061 224.785 134.831 232.001 146.186C245.031 166.606 263.374 203.062 259.465 241.112L239.018 246.093C239.018 246.093 224.885 200.97 209.049 182.643C209.049 182.643 190.205 225.275 191.208 248.683C191.208 249.38 191.308 249.977 191.308 250.575C193.513 273.485 101 254.858 101 254.858L107.014 129.651Z" fill="#F5F6FA"/>
-                    <path d="M143 89.7894L145.01 121.569C145.211 124.568 147.12 127.066 149.833 127.865C156.063 129.664 167.821 131.863 179.276 127.266C181.387 126.466 182.492 123.968 181.789 121.669L166.514 73L143 89.7894Z" fill="#8F96AD"/>
-                    <path d="M189 61.014C189 61.014 186.474 85.2772 181.219 95.8484C175.964 106.42 174.448 114.272 161.412 109.641C148.376 105.01 141.707 93.5328 142.01 80.2434C142.01 80.2434 142.414 59.7052 147.972 54.3692C153.631 49.0333 189 61.014 189 61.014Z" fill="#B0B6C9"/>
-                    <path d="M150.596 75.686L152.115 76.4754C152.115 76.4754 153.128 60.6872 159.814 61.4766C166.5 62.266 190.609 69.8641 199.625 64.9303C208.235 60.1938 191.521 44.2082 180.074 40.4585C163.866 35.0313 150.798 35.5247 144.822 45.2936C144.416 45.8857 143.606 45.8857 143.201 45.2936C142.492 44.0108 128.209 53.9772 132.97 65.917C133.172 66.5091 138.946 83.4815 140.567 83.9748C140.972 84.0735 141.479 83.8762 141.681 83.4815L146.24 74.4032C146.442 73.9098 147.05 73.7125 147.557 74.0085L150.596 75.686Z" fill="#0F002D"/>
-                    <path d="M149.877 78.0283C149.877 78.0283 154.31 62.6808 145.56 63.0051C136.81 63.3293 139.844 79.7576 144.744 83L149.877 78.0283Z" fill="#B0B6C9"/>
-                    <path d="M106.635 221.07C104.63 206.983 119.272 186.154 125.289 178.305C126.994 176.092 127.996 173.274 127.996 170.457C128.197 150.433 119.773 137.553 106.335 129C106.335 129 57.5953 185.953 70.0308 229.724C71.3345 234.453 73.4406 238.478 76.048 242C78.0538 225.397 97.1082 221.875 106.635 221.07Z" fill="#F5F6FA"/>
-                    <path d="M107.966 215L106 214.798C107.655 200.851 120.172 183.67 125.448 177L127 178.112C121.828 184.681 109.621 201.559 107.966 215Z" fill="#0F002D"/>
-                    <path d="M107.128 221.954C106.926 221.337 106.825 220.617 106.725 220C97.054 220.823 78.0147 224.423 76 241.29C97.8599 270.808 158 260.111 158 260.111V248.592C158.101 248.695 111.862 239.953 107.128 221.954Z" fill="#B0B6C9"/>
-                    <path d="M152 257C152 257 160.863 236.189 176.575 243.593C192.187 250.997 190.978 255.799 190.978 255.799L152 257Z" fill="#B0B6C9"/>
-                    <path d="M271.213 238H136.787C134.194 238 132 235.787 132 233.172V139.828C132 137.213 134.194 135 136.787 135H271.213C273.806 135 276 137.213 276 139.828V233.172C276 235.787 273.906 238 271.213 238Z" fill="#363840"/>
-                    <path d="M217.252 258H195.744C193.109 258 191 256 191 253.5V190.5C191 188 193.109 186 195.744 186H217.252C219.888 186 221.996 188 221.996 190.5V253.5C222.102 255.9 219.888 258 217.252 258Z" fill="#363840"/>
-                    <path d="M246.189 254H150.811C149.305 254 148 255.444 148 257.111V258.889C148 260.556 149.305 262 150.811 262H246.189C247.695 262 249 260.556 249 258.889V257.111C249 255.444 247.795 254 246.189 254Z" fill="#363840"/>
-                    <path d="M350.452 224.555C349.952 224.555 349.553 224.555 349.154 224.654C348.355 224.754 347.557 224.256 347.257 223.56C337.873 206.543 319.705 195 298.742 195C279.775 195 263.004 204.454 253.121 218.883C252.622 219.579 251.724 219.878 250.925 219.778C248.429 219.281 245.834 218.982 243.239 218.982C223.772 219.082 208 234.605 208 253.91C208 253.91 208 253.91 208 254.01C208 255.104 208.898 256 210.096 256H377.904C379.002 256 380 255.104 380 254.01V253.91C379.8 237.591 366.623 224.555 350.452 224.555Z" fill="#B0B6C9"/>
-                    <path d="M206 195C210.418 195 214 191.194 214 186.5C214 181.806 210.418 178 206 178C201.582 178 198 181.806 198 186.5C198 191.194 201.582 195 206 195Z" fill="white"/>
-                </svg>
             </div>
             <EmptyState
                 :on-button-click="onCreateApiKeyClick"
@@ -147,6 +118,8 @@ import VHeader from '@/components/common/VHeader.vue';
 import VList from '@/components/common/VList.vue';
 import VPagination from '@/components/common/VPagination.vue';
 
+import EmptySearchResultIcon from '@/../static/images/common/emptySearchResult.svg';
+
 import { ApiKey, ApiKeyOrderBy } from '@/types/apiKeys';
 import { SortDirection } from '@/types/common';
 import { API_KEYS_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
@@ -189,6 +162,7 @@ declare interface ResetPagination {
         ApiKeysCopyPopup,
         VPagination,
         SortingHeader,
+        EmptySearchResultIcon,
     },
 })
 export default class ApiKeysArea extends Vue {

web/satellite/src/components/apiKeys/ApiKeysCopyPopup.vue

@@ -9,28 +9,16 @@
                 <p class="save-api-popup__copy-area__key-area__key">{{apiKeySecret}}</p>
             </div>
             <div class="copy-button" v-clipboard="apiKeySecret" @click="onCopyClick" v-if="!isCopiedButtonShown">
-                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <CopyButtonLabelIcon/>
-                    <path d="M13.3763 7.7002H3.34383C2.46383 7.7002 1.76001 8.40402 1.76001 9.28402V19.3378C1.76001 20.1954 2.46383 20.9216 3.34383 20.9216H13.3976C14.2553 20.9216 14.9814 20.2178 14.9814 19.3378L14.9823 9.28402C14.96 8.40402 14.2561 7.7002 13.3761 7.7002H13.3763ZM13.6401 19.3164C13.6401 19.4488 13.5301 19.5588 13.3977 19.5588L3.34397 19.5579C3.21162 19.5579 3.10161 19.4479 3.10161 19.3156L3.10247 9.284C3.10247 9.15165 3.21247 9.04164 3.34483 9.04164H13.3986C13.5309 9.04164 13.641 9.15164 13.641 9.284L13.6401 19.3164Z" fill="white"/>
-                    <path d="M18.6563 1.09974H8.62386C7.74386 1.09974 7.04004 1.80356 7.04004 2.68356V6.37978H8.36004V2.68356C8.36004 2.55122 8.47004 2.44121 8.60239 2.44121H18.6562C18.7885 2.44121 18.8985 2.55121 18.8985 2.68356V12.7373C18.8985 12.8697 18.7885 12.9797 18.6562 12.9797H16.2799V14.2997H18.6562C19.5138 14.2997 20.24 13.5959 20.24 12.7159V2.68343C20.24 1.80343 19.5362 1.09961 18.6562 1.09961L18.6563 1.09974Z" fill="#354049"/>
-                    <rect x="2.93335" y="8.7998" width="11.7333" height="11" fill="white"/>
-                    <rect x="7.1001" y="1.2334" width="12.9333" height="12.9333" rx="1.5" fill="white" stroke="#2683FF"/>
-                </svg>
                 <p class="copy-button__label">Copy</p>
             </div>
             <div class="copied-button" v-if="isCopiedButtonShown">
-                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <CopyButtonLabelIcon/>
-                    <path d="M13.3763 7.7002H3.34383C2.46383 7.7002 1.76001 8.40402 1.76001 9.28402V19.3378C1.76001 20.1954 2.46383 20.9216 3.34383 20.9216H13.3976C14.2553 20.9216 14.9814 20.2178 14.9814 19.3378L14.9823 9.28402C14.96 8.40402 14.2561 7.7002 13.3761 7.7002H13.3763ZM13.6401 19.3164C13.6401 19.4488 13.5301 19.5588 13.3977 19.5588L3.34397 19.5579C3.21162 19.5579 3.10161 19.4479 3.10161 19.3156L3.10247 9.284C3.10247 9.15165 3.21247 9.04164 3.34483 9.04164H13.3986C13.5309 9.04164 13.641 9.15164 13.641 9.284L13.6401 19.3164Z" fill="white"/>
-                    <path d="M18.6563 1.09974H8.62386C7.74386 1.09974 7.04004 1.80356 7.04004 2.68356V6.37978H8.36004V2.68356C8.36004 2.55122 8.47004 2.44121 8.60239 2.44121H18.6562C18.7885 2.44121 18.8985 2.55121 18.8985 2.68356V12.7373C18.8985 12.8697 18.7885 12.9797 18.6562 12.9797H16.2799V14.2997H18.6562C19.5138 14.2997 20.24 13.5959 20.24 12.7159V2.68343C20.24 1.80343 19.5362 1.09961 18.6562 1.09961L18.6563 1.09974Z" fill="#354049"/>
-                    <rect x="2.93335" y="8.7998" width="11.7333" height="11" fill="white"/>
-                    <rect x="7.1001" y="1.2334" width="12.9333" height="12.9333" rx="1.5" fill="white" stroke="#2683FF"/>
-                </svg>
                 <p class="copied-button__label">Copied</p>
             </div>
         </div>
         <div class="save-api-popup__close-cross-container" @click="onCloseClick">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <CloseCrossIcon/>
-                <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
-            </svg>
         </div>
         <div class="blur-content"></div>
     </div>
@@ -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 {

web/satellite/src/components/apiKeys/ApiKeysCreationPopup.vue

@@ -19,9 +19,7 @@
             :on-press="onNextClick"
         />
         <div class="new-api-key__close-cross-container" @click="onCloseClick">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <CloseCrossIcon/>
-                <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
-            </svg>
         </div>
         <div class="blur-content"></div>
     </div>
@@ -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 {

web/satellite/src/components/apiKeys/ApiKeysItem.vue

@@ -5,17 +5,10 @@
     <div class="apikey-item-container">
         <div class="apikey-item-container__common-info">
             <div class="checkbox-container">
-                <svg class="checkbox-container__image" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <CheckboxIcon class="checkbox-container__image"/>
-                    <rect class="checkbox-container__image__rect" x="0.75" y="0.75" width="21.5" height="21.5" rx="3.25" stroke="#384B65" stroke-opacity="0.4" stroke-width="1.5"/>
-                </svg>
             </div>
             <div class="avatar">
-                <svg class="avatar__image" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <AvatarIcon class="avatar__image"/>
-                    <path d="M0 6C0 2.68629 2.68629 0 6 0H24C27.3137 0 30 2.68629 30 6V24C30 27.3137 27.3137 30 24 30H6C2.68629 30 0 27.3137 0 24V6Z" fill="#2683FF"/>
-                    <path d="M11.9184 11C13.4286 11 14.7239 11.8848 15.3777 13.1667H22.0408C22.1155 13.1667 22.1875 13.1921 22.2449 13.2396L23.8776 14.5886C23.9573 14.6537 24.0026 14.7533 23.9994 14.8581C23.9968 14.9623 23.9458 15.0593 23.8623 15.1198L21.5766 16.7708C21.456 16.8581 21.2928 16.8516 21.1786 16.7552L20.4082 16.099L19.6378 16.7552C19.5172 16.8581 19.3406 16.8581 19.2194 16.7552L18.449 16.099L17.6786 16.7552C17.6205 16.8053 17.5465 16.8327 17.4694 16.8333H15.3724C14.7174 18.112 13.426 19 11.9184 19C9.75837 19 8 17.205 8 15C8 12.795 9.75837 11 11.9184 11H11.9184Z" fill="white"/>
-                    <path d="M10.7754 13.666C11.4928 13.666 12.0815 14.2669 12.0815 14.9993C12.0815 15.7318 11.4928 16.3327 10.7754 16.3327C10.0579 16.3327 9.46924 15.7318 9.46924 14.9993C9.46924 14.2669 10.0579 13.666 10.7754 13.666Z" fill="#2683FF"/>
-                    <path d="M10.7756 14.334C10.4108 14.334 10.1226 14.6283 10.1226 15.0007C10.1226 15.3731 10.4108 15.6673 10.7756 15.6673C11.1404 15.6673 11.4287 15.3731 11.4287 15.0007C11.4287 14.6283 11.1404 14.334 10.7756 14.334Z" fill="#2683FF"/>
-                </svg>
             </div>
             <p class="name">{{getItemName}}</p>
         </div>
@@ -26,9 +19,17 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+import AvatarIcon from '@/../static/images/apiKeys/avatar.svg';
+import CheckboxIcon from '@/../static/images/common/checkbox.svg';
+
 import { ApiKey } from '@/types/apiKeys';
 
-@Component
+@Component({
+    components: {
+        CheckboxIcon,
+        AvatarIcon,
+    },
+})
 export default class ApiKeysItem extends Vue {
     @Prop({default: () => new ApiKey('', '', '', '')})
     private readonly itemData: ApiKey;
@@ -103,7 +104,7 @@ export default class ApiKeysItem extends Vue {
         .apikey-item-container__common-info {
 
             .checkbox-container {
-                background-image: url(../../../static/images/apiKeys/Vector.svg);
+                background-image: url(../../../static/images/apiKeys/Vector.png);
                 background-repeat: no-repeat;
                 background-size: 18px 12px;
                 background-position: center;

web/satellite/src/components/buckets/BucketArea.vue

@@ -15,10 +15,7 @@
             </div>
             <div class="buckets-notification-container">
                 <div class="buckets-notification">
-                    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <NotificationIcon/>
-                        <rect width="40" height="40" rx="10" fill="#2683FF"/>
-                        <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/>
-                    </svg>
                     <p class="buckets-notification__text">Usage will appear within an hour of activity.</p>
                 </div>
             </div>
@@ -82,6 +79,8 @@ import VHeader from '@/components/common/VHeader.vue';
 import VList from '@/components/common/VList.vue';
 import VPagination from '@/components/common/VPagination.vue';
 
+import NotificationIcon from '@/../static/images/buckets/notification.svg';
+
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { Bucket } from '@/types/buckets';
 import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
@@ -101,6 +100,7 @@ const {
         VHeader,
         VPagination,
         VList,
+        NotificationIcon,
     },
 })
 export default class BucketArea extends Vue {

web/satellite/src/components/buckets/NoBucketsArea.vue

@@ -4,14 +4,7 @@
 <template>
     <div class="no-buckets-area">
         <div class="no-buckets-area__header">
-            <svg class="no-buckets-area__header__image" width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <FolderIcon class="no-buckets-area__header__image"/>
-                <path d="M39 74C58.335 74 74 58.3243 74 38.9877C74 19.6511 58.335 4 39 4C19.665 4 4 19.6757 4 39.0123C4 58.3489 19.665 74 39 74Z" fill="#E8EAF2"/>
-                <path d="M38.842 25.8065V25.2764C38.842 24.4101 38.1258 23.7119 37.2438 23.7119H20.5455C19.6635 23.7119 18.9473 24.4101 18.9473 25.2699V53.4107H58.7367V27.358C58.7367 26.4982 58.0205 25.8 57.1385 25.8H38.842V25.8065Z" fill="#B0B6C9"/>
-                <path d="M57.3376 28.0498H20.7114V53.6952H57.3376V28.0498Z" fill="white"/>
-                <path d="M38.2717 31.2568L37.6815 32.8536H20.5455C19.6635 32.8536 18.9473 33.5518 18.9473 34.4181V54.2906C18.9473 55.1504 19.6635 55.8486 20.5455 55.8486H57.1319C58.0139 55.8486 58.7301 55.1504 58.7301 54.2906V31.7934C58.7301 30.9336 58.0139 30.2354 57.1319 30.2354H39.7837C39.1073 30.229 38.5038 30.6427 38.2717 31.2568Z" fill="#B0B6C9"/>
-                <path d="M58.7367 54.2834V41.3281C47.6819 51.8139 28.5167 54.6131 19.3916 55.363C19.6834 55.6604 20.0945 55.8478 20.5455 55.8478H57.1319C58.0205 55.8478 58.7367 55.1496 58.7367 54.2834Z" fill="#8F96AD"/>
-                <path d="M35.1082 34.1133H21.5798C20.8636 34.1133 20.2866 34.6757 20.2866 35.3739V38.1666C22.5613 36.641 27.6941 34.7274 35.1082 34.1133Z" fill="#B0B6C9"/>
-            </svg>
             <h1 class="no-buckets-area__header__title">Buckets</h1>
         </div>
         <p class="no-buckets-area__info">To create a bucket, please use the following CLI documentation. We will soon enable client-side encryption through the browser, at which time you will be able to create buckets and upload objects directly from this dashboard.</p>
@@ -27,15 +20,12 @@
                     </div>
                 </a>
             </div>
-            <img src="@/../static/images/buckets/uplink.svg" alt="uplink">
+            <UplinkIcon/>
         </div>
         <p class="no-buckets-area__s3-link">Familiar with AWS S3? <a class="s3-gateway-link" href="https://github.com/storj/storj/wiki/S3-Gateway" target="_blank">Try our S3 Gateway</a></p>
         <div class="no-buckets-area__next-step-area">
             <div class="no-buckets-area__next-step-area__arrow-image">
-                <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <ArrowIcon/>
-                    <path d="M0.916504 6.51758H17.4412V8.64949H0.916504V6.51758Z" fill="#FAFAFD"/>
-                    <path d="M12.8575 14.7272L11.3643 13.234L17.0154 7.58383L11.3643 1.93367L12.8575 0.44043L19.9999 7.58385L12.8575 14.7272Z" fill="#FAFAFD"/>
-                </svg>
             </div>
             <div class="no-buckets-area__next-step-area__text-area">
                 <h2 class="no-buckets-area__next-step-area__text-area__title">Next Step</h2>
@@ -50,9 +40,16 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import VButton from '@/components/common/VButton.vue';
 
+import ArrowIcon from '@/../static/images/buckets/noBucketState/arrow.svg';
+import FolderIcon from '@/../static/images/buckets/noBucketState/folder.svg';
+import UplinkIcon from '@/../static/images/buckets/noBucketState/uplink.svg';
+
 @Component({
     components: {
         VButton,
+        FolderIcon,
+        UplinkIcon,
+        ArrowIcon,
     },
 })
 export default class NoBucketArea extends Vue {}

web/satellite/src/components/common/HeaderedInput.vue

@@ -4,7 +4,7 @@
 <template>
     <div class="input-container">
         <div v-if="!isOptional" class="label-container">
-            <img v-if="error" src="../../../static/images/register/ErrorInfo.svg" alt="Red error icon with explanation mark"/>
+            <ErrorIcon v-if="error"/>
             <h3 v-if="!error" class="label-container__label">{{label}}</h3>
             <h3 v-if="!error" class="label-container__label add-label">{{additionalLabel}}</h3>
             <h3 class="label-container__error" v-if="error">{{error}}</h3>
@@ -43,10 +43,16 @@
 <script lang="ts">
 import { Component, Prop } from 'vue-property-decorator';
 
+import ErrorIcon from '@/../static/images/register/ErrorInfo.svg';
+
 import HeaderlessInput from './HeaderlessInput.vue';
 
 // Custom input component with labeled header
-@Component
+@Component({
+    components: {
+        ErrorIcon,
+    },
+})
 export default class HeaderedInput extends HeaderlessInput {
     @Prop({default: ''})
     private readonly initValue: string;

web/satellite/src/components/common/HeaderlessInput.vue

@@ -4,7 +4,7 @@
 <template>
     <div class="input-wrap">
         <div class="label-container">
-            <img v-if="error" src="@/../static/images/register/ErrorInfo.svg" alt="Red error icon with explanation mark"/>
+            <ErrorIcon v-if="error"/>
             <h3 class="label-container__label" v-if="isLabelShown" :style="style.labelStyle">{{label}}</h3>
             <h3 class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</h3>
         </div>
@@ -19,20 +19,16 @@
             :style="style.inputStyle"
         />
         <!--2 conditions of eye image (crossed or not) -->
-        <svg class="input-wrap__image" v-if="isPasswordHiddenState" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <PasswordHiddenIcon
-            <path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
+            class="input-wrap__image"
-            <path d="M11.6116 9.96328C11.6116 10.8473 10.8956 11.5633 10.0116 11.5633C9.12763 11.5633 8.41162 10.8473 8.41162 9.96328C8.41162 9.07929 9.12763 8.36328 10.0116 8.36328C10.8956 8.36328 11.6116 9.07929 11.6116 9.96328Z" fill="#AFB7C1"/>
+            v-if="isPasswordHiddenState"
-        </svg>
+            @click="changeVision"
-        <svg class="input-wrap__image" v-if="isPasswordShownState" @click="changeVision" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        />
-            <path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
+        <PasswordShownIcon
-            <path d="M11.6121 9.96328C11.6121 10.8473 10.8961 11.5633 10.0121 11.5633C9.12812 11.5633 8.41211 10.8473 8.41211 9.96328C8.41211 9.07929 9.12812 8.36328 10.0121 8.36328C10.8961 8.36328 11.6121 9.07929 11.6121 9.96328Z" fill="#AFB7C1"/>
+            class="input-wrap__image"
-            <mask id="path-3-inside-1" fill="white">
+            v-if="isPasswordShownState"
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z"/>
+            @click="changeVision"
-            </mask>
+        />
-            <path class="input-wrap__image__path" fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z" fill="white"/>
-            <path class="input-wrap__image__path" d="M16 1L16.5787 0.184493L15.7632 -0.394254L15.1845 0.421253L16 1ZM5 16.5L4.18449 15.9213L3.60575 16.7368L4.42125 17.3155L5 16.5ZM16.8155 1.57875L17.631 2.15749L18.2098 1.34199L17.3943 0.76324L16.8155 1.57875ZM5.81551 17.0787L5.23676 17.8943L6.05227 18.473L6.63101 17.6575L5.81551 17.0787ZM15.1845 0.421253L4.18449 15.9213L5.81551 17.0787L16.8155 1.57875L15.1845 0.421253ZM17.3943 0.76324L16.5787 0.184493L15.4213 1.81551L16.2368 2.39425L17.3943 0.76324ZM6.63101 17.6575L17.631 2.15749L16 1L5 16.5L6.63101 17.6575ZM4.42125 17.3155L5.23676 17.8943L6.39425 16.2632L5.57875 15.6845L4.42125 17.3155Z" fill="white" mask="url(#path-3-inside-1)"/>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.5L16 2L16.8155 2.57875L5.81551 18.0787L5 17.5Z" fill="#AFB7C1"/>
-        </svg>
         <!-- end of image-->
     </div>
 </template>
@@ -40,8 +36,18 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+import PasswordHiddenIcon from '@/../static/images/common/passwordHidden.svg';
+import PasswordShownIcon from '@/../static/images/common/passwordShown.svg';
+import ErrorIcon from '@/../static/images/register/ErrorInfo.svg';
+
 // Custom input component for login page
-@Component
+@Component({
+    components: {
+        ErrorIcon,
+        PasswordHiddenIcon,
+        PasswordShownIcon,
+    },
+})
 export default class HeaderlessInput extends Vue {
     private readonly textType: string = 'text';
     private readonly passwordType: string = 'password';

web/satellite/src/components/common/RegistrationSuccessPopup.vue

@@ -8,6 +8,9 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import VButton from '@/components/common/VButton.vue';
 
+import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
+import RegistrationSuccessIcon from '@/../static/images/register/registerSuccess.svg';
+
 import { AuthApi } from '@/api/auth';
 import { RouteConfig } from '@/router';
 import { getUserId } from '@/utils/consoleLocalStorage';
@@ -16,6 +19,8 @@ import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actio
 @Component({
     components: {
         VButton,
+        RegistrationSuccessIcon,
+        CloseCrossIcon,
     },
 })
 export default class RegistrationSuccessPopup extends Vue {

web/satellite/src/components/common/VPagination.vue

@@ -5,9 +5,7 @@
     <div class="pagination-container">
         <div class="pagination-container__pages">
             <div class="pagination-container__button" @click="prevPage">
-                <svg class="pagination-container__button__image" width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <PaginationLeftIcon class="pagination-container__button__image"/>
-                    <path class="pagination-svg-path" d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"/>
-                </svg>
             </div>
             <div class="pagination-container__items">
                 <PagesBlock
@@ -26,9 +24,7 @@
                 />
             </div>
             <div class="pagination-container__button" @click="nextPage">
-                <svg class="pagination-container__button__image" width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <PaginationRightIcon class="pagination-container__button__image"/>
-                    <path class="pagination-svg-path" d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"/>
-                </svg>
             </div>
         </div>
     </div>
@@ -39,11 +35,16 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
 import PagesBlock from '@/components/common/PagesBlock.vue';
 
+import PaginationLeftIcon from '@/../static/images/common/paginationLeft.svg';
+import PaginationRightIcon from '@/../static/images/common/paginationRight.svg';
+
 import { Page } from '@/types/pagination';
 
 @Component({
     components: {
         PagesBlock,
+        PaginationLeftIcon,
+        PaginationRightIcon,
     },
 })
 export default class VPagination extends Vue {

web/satellite/src/components/common/VSearch.vue

@@ -87,7 +87,7 @@ export default class VSearch extends Vue {
         font-family: 'font_regular';
         font-size: 16px;
         transition: all 0.4s ease-in-out;
-        background-image: url('../../../static/images/team/searchIcon.svg');
+        background-image: url('../../../static/images/common/search.png');
         background-repeat: no-repeat;
         background-size: 22px 22px;
         background-position: top 16px right 16px;

web/satellite/src/components/common/VerticalArrows.vue

@@ -3,23 +3,25 @@
 
 <template>
     <div class="container">
-        <svg :class="{ active: isActive && isTop }"
+        <TopArrowIcon :class="{ active: isActive && isTop }"/>
-            width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <BottomArrowIcon :class="{ active: isActive && isBottom }"/>
-            <path class="arrow-svg-path" d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"/>
-        </svg>
-        <svg :class="{ active: isActive && isBottom }"
-            width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path class="arrow-svg-path" d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"/>
-        </svg>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+import BottomArrowIcon from '@/../static/images/common/bottomArrow.svg';
+import TopArrowIcon from '@/../static/images/common/topArrow.svg';
+
 import { SortingDirectionEnum } from '@/types/sortingArrows';
 
-@Component
+@Component({
+    components: {
+        TopArrowIcon,
+        BottomArrowIcon,
+    },
+})
 export default class VerticalArrows extends Vue {
     @Prop({default: false})
     private isActive: boolean;

web/satellite/src/components/errors/Page404.vue

@@ -6,7 +6,17 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-@Component
+import MainIcon from '@/../static/images/errors/404.svg';
+import LogoIcon from '@/../static/images/errors/logo.svg';
+import TextIcon from '@/../static/images/errors/text.svg';
+
+@Component({
+    components: {
+        LogoIcon,
+        TextIcon,
+        MainIcon,
+    },
+})
 // 404 component on page not found error
 export default class Page404 extends Vue {}
 </script>

web/satellite/src/components/errors/Page50X.vue

@@ -6,7 +6,17 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-@Component
+import MainIcon from '@/../static/images/errors/50X.svg';
+import LogoIcon from '@/../static/images/errors/logo.svg';
+import TextIcon from '@/../static/images/errors/text.svg';
+
+@Component({
+    components: {
+        LogoIcon,
+        TextIcon,
+        MainIcon,
+    },
+})
 // Page for server errors
 export default class Page50X extends Vue {}
 </script>

web/satellite/src/components/header/AccountButton.vue

@@ -4,15 +4,18 @@
 <template>
     <div class="account-button-container" id="accountDropdownButton">
         <div class="account-button-toggle-container" @click="toggleSelection">
-            <!-- background of this div generated and stores in store -->
             <div class="account-button-toggle-container__avatar">
-                <!-- First digit of firstName after Registration -->
-                <!-- img if avatar was set -->
                 <h1 class="account-button-toggle-container__avatar__letter">{{avatarLetter}}</h1>
             </div>
             <div class="account-button-toggle-container__expander-area">
-                <img v-if="!isDropdownShown" src="@/../static/images/account/BlackArrowExpand.svg" alt="Arrow down (expand)"/>
+                <ExpandIcon
-                <img v-if="isDropdownShown" src="@/../static/images/account/BlackArrowHide.svg" alt="Arrow up (hide)"/>
+                    v-if="!isDropdownShown"
+                    alt="Arrow down (expand)"
+                />
+                <HideIcon
+                    v-if="isDropdownShown"
+                    alt="Arrow up (hide)"
+                />
             </div>
         </div>
         <AccountDropdown v-if="isDropdownShown"/>
@@ -22,6 +25,9 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
+import HideIcon from '@/../static/images/common/BlackArrowHide.svg';
+
 import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 
 import AccountDropdown from './AccountDropdown.vue';
@@ -29,6 +35,8 @@ import AccountDropdown from './AccountDropdown.vue';
 @Component({
     components: {
         AccountDropdown,
+        ExpandIcon,
+        HideIcon,
     },
 })
 export default class AccountButton extends Vue {

web/satellite/src/components/header/AccountDropdown.vue

@@ -2,23 +2,17 @@
 // See LICENSE for copying information.
 
 <template>
-    <!-- To close popup we need to use method onCloseClick -->
     <div class="account-dropdown-choice-container" id="accountDropdown">
         <div class="account-dropdown-overflow-container">
-            <!-- TODO: add selection logic onclick -->
             <div class="account-dropdown-item-container settings" @click="onAccountSettingsClick">
                 <div class="account-dropdown-item-container__image-container">
-                    <svg class="account-dropdown-item-container__image-container__image" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <AccountSettingsIcon class="account-dropdown-item-container__image-container__image"/>
-                        <path class="account-dropdown-svg-path" d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"/>
-                    </svg>
                 </div>
                 <h2 class="account-dropdown-item-container__title">Account Settings</h2>
             </div>
             <div class="account-dropdown-item-container logout" @click="onLogoutClick">
                 <div class="account-dropdown-item-container__image-container">
-                    <svg class="account-dropdown-item-container__image-container__image" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <LogoutIcon class="account-dropdown-item-container__image-container__image"/>
-                        <path class="account-dropdown-svg-path" fill-rule="evenodd" clip-rule="evenodd" d="M9.53516 1C4.28906 1 0 5.25293 0 10.5C0 15.7471 4.28906 20 9.53516 20C14.3887 20 18.4229 16.3604 19 11.6611H10.2783L11.8682 13.2441C12.1562 13.5322 12.248 14.0156 12.1436 14.4277C12.0947 14.6211 12.0029 14.7988 11.8682 14.9336C11.4443 15.3555 10.5967 15.3555 10.1729 14.9336L5.72266 10.5L10.1729 6.06641C10.5967 5.64453 11.4443 5.64453 11.8682 6.06641C12.291 6.48926 12.291 7.33301 11.8682 7.75586L10.2783 9.33887H19C18.4229 4.63965 14.3887 1 9.53516 1Z" fill="#354049"/>
-                    </svg>
                 </div>
                 <h2 class="account-dropdown-item-container__title">Log Out</h2>
             </div>
@@ -29,6 +23,9 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import AccountSettingsIcon from '@/../static/images/header/accountSettings.svg';
+import LogoutIcon from '@/../static/images/header/logout.svg';
+
 import { RouteConfig } from '@/router';
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
@@ -41,7 +38,12 @@ import {
     PM_ACTIONS,
 } from '@/utils/constants/actionNames';
 
-@Component
+@Component({
+    components: {
+        AccountSettingsIcon,
+        LogoutIcon,
+    },
+})
 export default class AccountDropdown extends Vue {
     public onCloseClick(): void {
         this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACCOUNT);

web/satellite/src/components/header/HeaderArea.vue

@@ -11,6 +11,10 @@ import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSe
 import NavigationArea from '@/components/navigation/NavigationArea.vue';
 import ProjectCreationSuccessPopup from '@/components/project/ProjectCreationSuccessPopup.vue';
 
+import LogoIcon from '@/../static/images/header/logo.svg';
+import NavigationCloseIcon from '@/../static/images/header/navigationClose.svg';
+import NavigationMenuIcon from '@/../static/images/header/navigationMenu.svg';
+
 import AccountButton from './AccountButton.vue';
 
 @Component({
@@ -20,6 +24,9 @@ import AccountButton from './AccountButton.vue';
         NewProjectArea,
         AccountButton,
         NavigationArea,
+        NavigationMenuIcon,
+        NavigationCloseIcon,
+        LogoIcon,
     },
 })
 export default class DashboardHeader extends Vue {

web/satellite/src/components/header/headerArea.html

@@ -3,32 +3,21 @@
 
 <div class="dashboard-header-container">
     <div class="dashboard-header-container__left-area">
-        <svg
+        <NavigationMenuIcon
             class="dashboard-header-container__left-area__menu-button"
             v-if="!isNavigationVisible"
             @click.stop="toggleNavigationVisibility"
-            width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+        />
-            <rect width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
-            <rect y="6.31055" width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
-            <rect y="12.6206" width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
-        </svg>
         <div class="dashboard-header-container__left-area__close-button" v-if="isNavigationVisible" @click.stop="toggleNavigationVisibility">
-            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <NavigationCloseIcon/>
-                <rect width="40" height="40" rx="20" fill="#F5F6FA"/>
-                <path d="M14.4015 13.2402C14.8097 13.6484 15.2211 14.0598 15.6292 14.468L18.5784 17.4171C19.7631 18.6018 20.9477 19.7864 22.1363 20.975L25.2198 24.0585C25.7199 24.5586 26.2302 25.0458 26.7175 25.5562C26.7239 25.5626 26.7303 25.5691 26.7374 25.5761C27.0434 25.8821 27.0633 26.4381 26.7374 26.7409C26.4083 27.0436 25.8979 27.0668 25.5727 26.7409C25.1645 26.3327 24.7531 25.9213 24.3449 25.5131L21.3957 22.564C20.2111 21.3793 19.0265 20.1947 17.8379 19.0061L14.7544 15.9226C14.2543 15.4225 13.7439 14.9353 13.2567 14.4249C13.2503 14.4185 13.2438 14.412 13.2368 14.405C12.9308 14.099 12.9108 13.543 13.2368 13.2402C13.5659 12.9375 14.0756 12.9143 14.4015 13.2402Z" fill="#2B3543"/>
-                <path d="M26.7362 14.4018C26.328 14.8099 25.9166 15.2213 25.5085 15.6295L22.5593 18.5787C21.3746 19.7634 20.19 20.948 19.0014 22.1366L15.918 25.22C15.4179 25.7201 14.9306 26.2305 14.4202 26.7177C14.4138 26.7242 14.4074 26.7306 14.4003 26.7377C14.0943 27.0437 13.5383 27.0636 13.2356 26.7377C12.9328 26.4086 12.9097 25.8982 13.2356 25.5729C13.6437 25.1647 14.0551 24.7534 14.4633 24.3452L17.4125 21.396C18.5972 20.2113 19.7818 19.0267 20.9704 17.8381L24.0538 14.7547C24.5539 14.2546 25.0412 13.7442 25.5515 13.2569C25.558 13.2505 25.5644 13.2441 25.5715 13.237C25.8774 12.931 26.4335 12.9111 26.7362 13.237C27.039 13.5661 27.0621 14.0759 26.7362 14.4018Z" fill="#2B3543"/>
-            </svg>
             <p class="dashboard-header-container__left-area__close-button__title">Close</p>
         </div>
         <ProjectSelectionArea class="dashboard-header-container__left-area__project-selection"/>
     </div>
-    <svg class="storj-title" @click.stop="onLogoClick" width="82" height="18" viewBox="0 0 82 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <LogoIcon
-        <path d="M5.22457 3.77689C4.86259 4.07571 4.6816 4.4582 4.6816 4.94826C4.6816 5.43832 4.89879 5.82081 5.34523 6.10768C5.79167 6.39455 6.80521 6.72922 8.40998 7.12367C10.0148 7.51811 11.2455 8.1038 12.1384 8.88073C13.0192 9.65766 13.4656 10.8051 13.4656 12.2992C13.4656 13.7933 12.8985 15.0125 11.7643 15.9448C10.6301 16.8771 9.14601 17.3433 7.28785 17.3433C4.62127 17.3433 2.22015 16.3632 0.0844727 14.4029L1.19454 13.0283C1.79784 12.2992 2.87171 12.1677 3.656 12.6937C4.97118 13.5782 6.20191 14.0204 7.36024 14.0204C8.048 14.0204 8.59097 13.877 8.98915 13.5782C9.38733 13.2794 9.58038 12.8849 9.58038 12.3829C9.58038 11.8809 9.37526 11.4864 8.95295 11.1876C8.53064 10.8888 7.71016 10.59 6.46736 10.2912C4.51268 9.8489 3.07683 9.23931 2.17188 8.49824C1.25487 7.75716 0.80843 6.59774 0.80843 5.01998C0.80843 3.43026 1.3876 2.21107 2.53386 1.35047C3.68013 0.489871 5.11598 0.0595703 6.82934 0.0595703C7.95148 0.0595703 9.07361 0.250815 10.2078 0.633304C11.3299 1.01579 12.3073 1.55367 13.1519 2.25888L12.3194 3.45416C11.7523 4.255 10.6904 4.51796 9.80963 4.08766C8.79609 3.58564 7.77049 3.33463 6.72075 3.33463C6.08125 3.33463 5.58655 3.47807 5.22457 3.77689Z" fill="#2683FF"/>
+        class="storj-title"
-        <path d="M25.0851 3.66915V17.1399H21.3205V3.66915H16.5424V2.12724C16.5424 1.19492 17.3026 0.441895 18.2437 0.441895H29.8512V1.74475C29.8512 2.80855 28.9824 3.65719 27.9206 3.65719H25.0851V3.66915Z" fill="#2683FF"/>
+        @click.stop="onLogoClick"
-        <path d="M47.1779 14.8335C45.4766 16.483 43.3771 17.3077 40.8794 17.3077C38.3939 17.3077 36.2944 16.483 34.581 14.8335C32.8797 13.184 32.023 11.1401 32.023 8.68974C32.023 6.23942 32.8797 4.18354 34.581 2.546C36.2823 0.89652 38.3818 0.0717773 40.8794 0.0717773C43.365 0.0717773 45.4645 0.89652 47.1779 2.546C48.8792 4.19549 49.7358 6.23942 49.7358 8.68974C49.7358 11.1401 48.8792 13.184 47.1779 14.8335ZM45.8989 8.68974C45.8989 7.19564 45.4162 5.92864 44.451 4.8768C43.4857 3.82495 42.3032 3.29903 40.8915 3.29903C39.4798 3.29903 38.2973 3.82495 37.3321 4.8768C36.3668 5.92864 35.8841 7.19564 35.8841 8.68974C35.8841 10.1838 36.3668 11.4389 37.3321 12.4907C38.2973 13.5306 39.4798 14.0565 40.8915 14.0565C42.3032 14.0565 43.4857 13.5306 44.451 12.4907C45.4162 11.4508 45.8989 10.1838 45.8989 8.68974Z" fill="#2683FF"/>
+    />
-        <path d="M66.8695 5.98799C66.8695 8.66541 65.7956 10.3866 63.66 11.1755L67.9313 17.1399H65.3251C64.0581 17.1399 62.8757 16.5303 62.1517 15.5024L59.5696 11.821H56.9513V15.4905C56.9513 16.4108 56.2032 17.1519 55.2741 17.1519H53.1867V0.441895H59.5696C62.1879 0.441895 64.0581 0.884148 65.1803 1.7567C66.3024 2.62926 66.8695 4.03968 66.8695 5.98799ZM62.3327 7.9602C62.8033 7.54185 63.0325 6.88445 63.0325 5.98799C63.0325 5.09153 62.7912 4.46998 62.3086 4.13531C61.8259 3.80063 60.9813 3.63329 59.7747 3.63329H56.9513V8.58174H59.7023C60.9934 8.58174 61.8621 8.37855 62.3327 7.9602Z" fill="#2683FF"/>
-        <path d="M72.5888 3.64524V1.82842C72.5888 1.06344 73.2162 0.441895 73.9884 0.441895H81.3607V11.3309C81.3607 13.327 80.8419 14.8091 79.8042 15.8012C78.7665 16.7933 77.4393 17.2834 75.8104 17.2834C74.5193 17.2834 73.3248 16.9726 72.2389 16.3391C71.2012 15.7415 70.9357 14.3788 71.6356 13.4107L72.456 12.2871C73.4696 13.3748 74.5314 13.9127 75.6415 13.9127C76.1724 13.9127 76.6309 13.7095 77.0049 13.3031C77.379 12.8967 77.572 12.2871 77.572 11.4743V3.64524H72.5888Z" fill="#2683FF"/>
-    </svg>
     <div class="dashboard-header-container__right-area">
         <NewProjectArea class="dashboard-header-container__right-area__new-project"/>
         <AccountButton class="dashboard-header-container__right-area__account-button"/>

web/satellite/src/components/header/projectSelection/ProjectSelectionArea.vue

@@ -7,8 +7,14 @@
         <div class="project-selection-toggle-container" @click="toggleSelection" v-if="hasProjects">
             <h1 class="project-selection-toggle-container__name">{{name}}</h1>
             <div class="project-selection-toggle-container__expander-area">
-                <img v-if="!isDropdownShown" src="@/../static/images/register/BlueExpand.svg" alt="Arrow down (expand)"/>
+                <ExpandIcon
-                <img v-if="isDropdownShown" src="@/../static/images/register/BlueHide.svg" alt="Arrow up (hide)"/>
+                    v-if="!isDropdownShown"
+                    alt="Arrow down (expand)"
+                />
+                <HideIcon
+                    v-if="isDropdownShown"
+                    alt="Arrow up (hide)"
+                />
             </div>
         </div>
         <ProjectSelectionDropdown v-if="isDropdownShown"/>
@@ -18,6 +24,9 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import ExpandIcon from '@/../static/images/common/BlueExpand.svg';
+import HideIcon from '@/../static/images/common/BlueHide.svg';
+
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { Project } from '@/types/projects';
 import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
@@ -27,6 +36,8 @@ import ProjectSelectionDropdown from './ProjectSelectionDropdown.vue';
 @Component({
     components: {
         ProjectSelectionDropdown,
+        ExpandIcon,
+        HideIcon,
     },
 })
 export default class ProjectSelectionArea extends Vue {

web/satellite/src/components/header/projectSelection/ProjectSelectionDropdown.vue

@@ -4,13 +4,12 @@
 <template>
     <div class="project-selection-choice-container" id="projectDropdown">
         <div class="project-selection-overflow-container">
-            <!-- loop for rendering projects -->
-            <!-- TODO: add selection logic onclick -->
             <div class="project-selection-overflow-container__project-choice" @click="onProjectSelected(project.id)" v-for="project in projects" :key="project.id" >
                 <div class="project-selection-overflow-container__project-choice__mark-container">
-                    <svg class="project-selection-overflow-container__project-choice__mark-container__image" v-if="project.isSelected" width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <ProjectSelectionIcon
-                        <path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/>
+                        class="project-selection-overflow-container__project-choice__mark-container__image"
-                    </svg>
+                        v-if="project.isSelected"
+                    />
                 </div>
                 <h2 class="project-selection-overflow-container__project-choice__unselected" :class="{'selected': project.isSelected}">{{project.name}}</h2>
             </div>
@@ -21,6 +20,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import ProjectSelectionIcon from '@/../static/images/header/projectSelection.svg';
+
 import { BUCKET_ACTIONS } from '@/store/modules/buckets';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { PROJECT_USAGE_ACTIONS } from '@/store/modules/usage';
@@ -32,7 +33,11 @@ import {
     PM_ACTIONS,
 } from '@/utils/constants/actionNames';
 
-@Component
+@Component({
+    components: {
+        ProjectSelectionIcon,
+    },
+})
 export default class ProjectSelectionDropdown extends Vue {
     private FIRST_PAGE = 1;
 

web/satellite/src/components/navigation/NavigationArea.vue

@@ -8,12 +8,21 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import ProjectSelectionArea from '@/components/header/projectSelection/ProjectSelectionArea.vue';
 
+import DocsIcon from '@/../static/images/navigation/docs.svg';
+import LogoIcon from '@/../static/images/navigation/logo.svg';
+import LogoTextIcon from '@/../static/images/navigation/logoText.svg';
+import SupportIcon from '@/../static/images/navigation/support.svg';
+
 import { RouteConfig } from '@/router';
 import { NavigationLink } from '@/types/navigation';
 
 @Component({
     components: {
         ProjectSelectionArea,
+        LogoIcon,
+        LogoTextIcon,
+        DocsIcon,
+        SupportIcon,
     },
 })
 export default class NavigationArea extends Vue {

web/satellite/src/components/notifications/NotificationItem.vue

@@ -9,9 +9,7 @@
         </div>
         <div class="notification-wrap__buttons-group" @click="onCloseClick">
             <span class="notification-wrap__buttons-group__close">
-                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <CloseIcon/>
-                    <path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"/>
-                </svg>
             </span>
         </div>
     </div>
@@ -20,10 +18,16 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+import CloseIcon from '@/../static/images/notifications/close.svg';
+
 import { DelayedNotification } from '@/types/DelayedNotification';
 import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
 
-@Component
+@Component({
+    components: {
+        CloseIcon,
+    },
+})
 export default class NotificationItem extends Vue {
     @Prop({default: () => new DelayedNotification(() => { return; }, '', '')})
     private notification: DelayedNotification;

web/satellite/src/components/project/AddStripeCardPopup.vue

@@ -1,162 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="add-stripe-card-popup-container-overflow">
-        <div class="add-stripe-card-popup-container">
-            <div class="add-stripe-card-popup-container__title-container">
-                <svg class="add-stripe-card-popup-container__title-container__image" width="113" height="90" viewBox="0 0 113 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <g filter="url(#filter0_d)">
-                        <path d="M86.0972 64.0932L26.9457 64.329C23.7672 64.329 21.2089 61.7346 21.2089 58.5898L21.1313 23.0537C21.1313 19.8303 23.6897 17.2359 26.7907 17.2359L85.9422 17C89.1207 17 91.679 19.5944 91.679 22.7392L91.8341 58.3539C91.7565 61.4987 89.2757 64.0932 86.0972 64.0932Z" fill="#2683FF"/>
-                    </g>
-                    <path d="M83.9628 62.1047L26.6351 62.3301C23.5546 62.3301 21.0751 59.8507 21.0751 56.8453L21 22.8845C21 19.804 23.4794 17.3245 26.4848 17.3245L83.8125 17.0991C86.893 17.0991 89.3724 19.5786 89.3724 22.5839L89.5227 56.6199C89.4476 59.6253 87.0433 62.1047 83.9628 62.1047Z" fill="#2683FF"/>
-                    <path d="M71.9968 51.5825L71.02 51.5862L71.0303 54.291L72.007 54.2873L71.9968 51.5825Z" fill="#2683FF"/>
-                    <path d="M73.6496 51.5825L72.6729 51.5862L72.6831 54.291L73.6599 54.2873L73.6496 51.5825Z" fill="white"/>
-                    <path d="M75.2282 51.5076L74.2515 51.5114L74.2617 54.2162L75.2385 54.2125L75.2282 51.5076Z" fill="white"/>
-                    <path d="M76.8801 51.5078L75.9033 51.5115L75.9135 54.2163L76.8902 54.2126L76.8801 51.5078Z" fill="white"/>
-                    <path d="M78.4582 51.5073L77.4814 51.511L77.4916 54.2158L78.4684 54.2122L78.4582 51.5073Z" fill="white"/>
-                    <path d="M80.111 51.5073L79.1343 51.511L79.1445 54.2158L80.1212 54.2122L80.111 51.5073Z" fill="white"/>
-                    <path d="M83.3412 40.5921L29.4697 40.7955L29.4814 43.876L83.3528 43.6726L83.3412 40.5921Z" fill="white"/>
-                    <path d="M37.6648 34.8313H30.2264C29.8508 34.8313 29.4751 34.4557 29.4751 34.0048V28.7454C29.4751 28.2946 29.7756 27.9189 30.1513 27.9189H37.5896C37.9653 27.9189 38.341 28.2946 38.341 28.7454V34.0048C38.4161 34.4557 38.1156 34.8313 37.6648 34.8313Z" fill="white"/>
-                    <path d="M36.371 27.8972L36.2207 27.8978L36.2476 34.8317L36.3979 34.8311L36.371 27.8972Z" fill="#2683FF"/>
-                    <path d="M31.5668 27.9201L31.4165 27.9207L31.4419 34.833L31.5921 34.8325L31.5668 27.9201Z" fill="#2683FF"/>
-                    <path d="M38.4163 30.1705L36.3125 30.1785L36.3131 30.3287L38.4168 30.3208L38.4163 30.1705Z" fill="#2683FF"/>
-                    <path d="M38.4163 31.7491L36.3125 31.7571L36.3131 31.9073L38.4168 31.8994L38.4163 31.7491Z" fill="#2683FF"/>
-                    <path d="M38.491 33.1009L36.3872 33.1089L36.3878 33.2592L38.4915 33.2512L38.491 33.1009Z" fill="#2683FF"/>
-                    <path d="M31.5037 29.9435L29.2832 29.9519L29.2838 30.1022L31.5043 30.0938L31.5037 29.9435Z" fill="#2683FF"/>
-                    <path d="M31.5037 31.9798L29.2832 31.9882L29.2838 32.1384L31.5043 32.1301L31.5037 31.9798Z" fill="#2683FF"/>
-                    <path d="M31.5037 33.4566L29.2832 33.465L29.2838 33.6152L31.5043 33.6069L31.5037 33.4566Z" fill="#2683FF"/>
-                    <path d="M35.0358 29.1919L32.7817 29.2004L32.7823 29.3507L35.0363 29.3422L35.0358 29.1919Z" fill="#2683FF"/>
-                    <path d="M35.0353 33.5508L32.7812 33.5593L32.7818 33.7096L35.0359 33.7011L35.0353 33.5508Z" fill="#2683FF"/>
-                    <defs>
-                        <filter id="filter0_d" x="0.181719" y="0.240297" width="112.602" height="89.2283" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-                            <feOffset dy="4.18993"/>
-                            <feGaussianBlur stdDeviation="10.4748"/>
-                            <feColorMatrix type="matrix" values="0 0 0 0 0.14902 0 0 0 0 0.513726 0 0 0 0 1 0 0 0 0.4 0"/>
-                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-                        </filter>
-                    </defs>
-                </svg>
-                <h1 class="add-stripe-card-popup-container__title-container__title">Add New Card</h1>
-            </div>
-            <div class="add-stripe-card-popup-container__input-container">
-                <!--Stripe card input here-->
-            </div>
-            <div class="add-stripe-card-popup-container__checkbox-container">
-                <VCheckbox/>
-                <h2 class="add-stripe-card-popup-container__checkbox-container__title">Make this card default payment method</h2>
-            </div>
-            <VButton
-                label="Save Card"
-                height="48px"
-                width="100%"
-            />
-            <div class="add-stripe-card-popup-container__close-cross-container">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" >
-                    <path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
-                </svg>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-import VButton from '@/components/common/VButton.vue';
-import VCheckbox from '@/components/common/VCheckbox.vue';
-
-@Component({
-    components: {
-        VCheckbox,
-        VButton,
-    },
-})
-
-export default class AddStripeCardPopup extends Vue {}
-</script>
-
-<style scoped lang="scss">
-    .add-stripe-card-popup-container-overflow {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(134, 134, 148, 0.4);
-        z-index: 1000;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: 'font_regular';
-    }
-	
-	.add-stripe-card-popup-container {
-        width: 100%;
-        max-width: 600px;
-        max-height: 440px;
-        background-color: #FFFFFF;
-        border-radius: 6px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        position: relative;
-        justify-content: center;
-        padding: 68px 45px;
-	}
-    
-    .add-stripe-card-popup-container__title-container {
-        display: flex;
-        align-items: flex-start;
-        justify-content: flex-start;
-        width: 100%;
-        
-        &__image {
-            margin-left: -21px;
-        }
-
-        &__title {
-            font-family: 'font_bold';
-            font-size: 32px;
-            line-height: 39px;
-            color: #384B65;
-        }
-    }
-    
-    .add-stripe-card-popup-container__input-container {
-        width: 100%;
-        height: 48px;
-        margin-top: 30px;
-        margin-bottom: 13px;
-    }
-
-    .add-stripe-card-popup-container__checkbox-container {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        width: 100%;
-        margin-bottom: 40px;
-
-        &__title {
-            font-size: 14px;
-            line-height: 20px;
-            color: #384B65;
-            margin-top: 17px;
-        }
-    }
-    
-    .add-stripe-card-popup-container__close-cross-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: absolute;
-        right: 40px;
-        top: 40px;
-        height: 24px;
-        width: 24px;
-        cursor: pointer;
-    }
-</style>

web/satellite/src/components/project/DeleteProjectPopup.vue

@@ -6,50 +6,14 @@
         <div class="delete-project-popup" id="deleteProjectPopup">
             <div class="delete-project-popup__info-panel-container">
                 <h2 class="delete-project-popup__info-panel-container__main-label-text">Delete Project</h2>
-                <svg width="245" height="245" viewBox="0 0 245 245" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <DeleteProjectIcon/>
-                    <path d="M117.664 202.065C173.34 202.065 218.448 156.815 218.448 100.997C218.448 45.1791 173.34 0 117.664 0C61.9881 0 16.8799 45.25 16.8799 101.068C16.8799 156.886 61.9881 202.065 117.664 202.065Z" fill="#E8EAF2"/>
-                    <path d="M78.4429 45.676C78.1592 45.676 77.9464 45.676 77.7336 45.676C77.3081 45.676 76.8825 45.4632 76.6697 45.1086C71.5632 35.7465 61.4918 29.3633 49.9311 29.3633C39.5051 29.3633 30.2849 34.6117 24.8237 42.5553C24.54 42.9808 24.0435 43.1227 23.618 43.0518C22.2704 42.7681 20.8519 42.6262 19.3625 42.6262C8.65283 42.5553 0 51.1372 0 61.7759C0 62.4142 0.496474 62.9107 1.1348 62.9107H93.4789C94.1172 62.9107 94.6137 62.4142 94.6137 61.7759C94.6137 52.9103 87.3794 45.676 78.4429 45.676Z" fill="#B0B6C9"/>
-                    <path d="M24.7535 199.866C30.6403 198.447 34.2575 192.348 32.839 186.248C31.4205 180.149 25.3919 176.39 19.5051 177.737C13.6183 179.085 9.93026 185.326 11.4197 191.355C12.7673 197.525 18.7959 201.284 24.7535 199.866Z" fill="#8F96AD"/>
-                    <path d="M23.2649 193.625C25.8892 192.987 27.5914 190.362 26.953 187.667C26.3147 185.043 23.6905 183.341 20.9953 183.979C18.3711 184.617 16.6689 187.242 17.3073 189.937C17.8747 192.703 20.5698 194.263 23.2649 193.625Z" fill="#F5F6FA"/>
-                    <path d="M160.005 182.063C155.679 176.743 143.834 165.963 143.834 165.963L139.934 167.24C139.934 167.24 147.948 187.098 151.636 188.446C155.324 189.794 159.083 187.169 160.36 184.545C160.715 183.765 160.573 182.772 160.005 182.063Z" fill="#363840"/>
-                    <path d="M84.8965 149.721L95.6061 150.359C95.6061 150.359 130.714 116.174 152.488 113.833C152.488 113.833 166.247 133.905 148.232 168.658C146.743 171.495 143.126 172.559 140.572 170.644C139.792 170.076 139.296 169.367 139.012 168.516C140.218 157.026 127.026 149.792 117.947 156.884C113.196 160.643 109.082 163.835 107.522 165.254C102.273 169.722 77.7331 165.324 84.8965 149.721Z" fill="#8F96AD"/>
-                    <path d="M179.014 237.455C174.688 232.136 162.843 221.355 162.843 221.355L158.942 222.632C158.942 222.632 166.957 242.491 170.645 243.839C174.333 245.186 178.092 242.562 179.369 239.938C179.794 239.158 179.652 238.165 179.014 237.455Z" fill="#363840"/>
-                    <path d="M84.7549 157.523L134.828 161.212C134.828 161.212 161.921 186.674 164.829 223.058C164.829 223.058 165.538 225.753 160.29 225.895C139.58 190.149 112.486 182.347 95.7482 181.425C83.2655 180.716 71.5629 175.113 63.4065 165.68C62.981 165.112 62.6973 164.829 62.6973 164.829L84.7549 157.523Z" fill="#B0B6C9"/>
-                    <path d="M88.5139 117.237C88.5139 117.237 92.2019 144.614 117.948 156.955L127.381 156.459L129.367 160.147L107.309 159.438C107.309 159.438 88.9394 150.785 80.2156 129.862C79.9319 129.153 75.18 117.45 88.5139 117.237Z" fill="#8F96AD"/>
-                    <path d="M88.8686 157.31C88.8686 157.31 83.762 140.288 83.4783 123.975C83.4783 123.975 88.2303 120.429 91.1382 118.94C92.0602 118.443 92.4858 117.308 92.0602 116.386C90.2871 111.989 78.8682 94.4704 77.9462 94.1158C72.9815 92.5555 52.7679 81.3494 36.8098 100.428C30.001 108.655 35.8168 135.607 62.6974 164.828L65.1797 167.807L88.8686 157.31Z" fill="#F5F6FA"/>
-                    <path d="M67.0949 126.6C67.0949 126.6 82.8402 147.806 104.472 152.133C104.472 152.133 110.43 147.381 114.473 149.437C118.515 151.565 123.764 160.005 123.764 160.005L95.8194 158.232C95.8194 158.232 69.4354 155.608 57.2363 138.799C58.6548 133.267 62.0592 130.146 67.0949 126.6Z" fill="#B0B6C9"/>
-                    <path d="M60.1432 78.7959L55.604 90.995C55.3912 91.5624 55.604 92.2007 56.0295 92.5553C57.7317 93.9029 62.2709 96.669 68.8669 94.6831C69.6471 94.4703 70.1436 93.832 70.2854 93.0518L71.8458 82.2712L60.1432 78.7959Z" fill="#8F96AD"/>
-                    <path d="M82.5562 70.0719C82.5562 70.0719 79.932 82.8384 74.6836 86.5265C69.5061 90.1436 60.0021 86.5974 57.3779 76.6679L64.896 60.4971L82.5562 70.0719Z" fill="#B0B6C9"/>
-                    <path d="M63.5478 71.1363C63.9025 71.2782 64.328 71.0654 64.3989 70.7108C64.6826 69.505 65.8884 63.9729 70.4985 66.8099C75.1086 69.6469 81.9883 73.4768 86.5275 69.2213C101.067 55.4619 78.0165 56.8095 71.8461 53.476C70.1439 52.554 61.7747 48.5822 58.1576 55.4619C57.9448 55.8875 52.4836 69.0086 57.2355 77.5905C57.4483 78.016 58.0866 77.8742 58.2994 77.4486L61.491 70.9945C61.6329 70.7108 61.9875 70.5689 62.2712 70.7108L63.5478 71.1363Z" fill="#363840"/>
-                    <path d="M63.5477 72.4828C63.5477 72.4828 62.2711 65.4613 59.5759 67.589C56.8808 69.6459 59.7887 74.8234 62.6966 75.8872L63.5477 72.4828Z" fill="#B0B6C9"/>
-                    <path d="M122.274 161.495L137.452 120.429C138.091 118.727 139.651 117.663 141.424 117.592L158.446 117.521C160.148 117.521 161.354 119.295 160.645 120.855L144.119 159.935C143.552 161.211 142.346 162.062 140.999 162.062L124.189 162.842L122.274 161.495Z" fill="#363840"/>
-                    <path d="M145.324 140.748C146.38 138.915 146.41 136.954 145.392 136.367C144.374 135.781 142.692 136.791 141.637 138.624C140.581 140.457 140.55 142.418 141.568 143.005C142.587 143.591 144.268 142.581 145.324 140.748Z" fill="#F7F7FF"/>
-                    <path d="M124.261 162.984H124.19L88.7276 158.941C87.8765 158.87 87.2382 158.019 87.3091 157.168C87.38 156.317 88.2311 155.679 89.0822 155.75L124.545 159.792C125.396 159.863 126.034 160.714 125.963 161.565C125.821 162.416 125.112 162.984 124.261 162.984Z" fill="#363840"/>
-                    <path d="M83.4782 124.401C83.2655 124.401 83.1236 124.188 83.1236 123.975C83.6201 116.528 81.3505 106.528 81.3505 106.457C81.2796 106.244 81.4214 106.031 81.6342 106.031C81.847 105.96 82.0597 106.102 82.0597 106.315C82.0597 106.386 84.3293 116.528 83.8328 124.046C83.8328 124.259 83.691 124.401 83.4782 124.401Z" fill="#0F002D"/>
-                    <path d="M67.0946 127.025C66.9527 127.025 66.8818 126.954 66.8109 126.883C66.7399 126.812 59.5765 116.386 57.307 109.435C57.236 109.222 57.3779 109.01 57.5197 108.939C57.7325 108.868 57.9453 109.01 58.0162 109.152C60.2149 116.031 67.3074 126.315 67.3783 126.386C67.5201 126.528 67.4492 126.812 67.3074 126.883C67.2364 127.025 67.1655 127.025 67.0946 127.025Z" fill="#0F002D"/>
-                    <path d="M55.1802 141.493L54.8965 141.351C43.9031 135.819 37.8036 121.918 37.7327 121.776C37.6617 121.563 37.7327 121.35 37.9454 121.28C38.1582 121.209 38.371 121.28 38.4419 121.492C38.5128 121.634 44.3996 135.039 54.9674 140.571L56.1731 139.082C56.315 138.94 56.5277 138.869 56.6696 139.011C56.8114 139.153 56.8824 139.365 56.7405 139.507L55.1802 141.493Z" fill="#0F002D"/>
-                    <path d="M181.001 77.4491C196.746 71.1368 215.967 68.8672 215.967 68.8672C231.215 94.6838 239.514 128.018 239.514 128.018C228.449 135.962 212.633 136.033 212.633 136.033C206.179 125.252 184.263 96.4569 184.263 96.4569C176.107 98.4428 168.872 98.6556 162.489 97.7336C164.759 91.5631 164.333 84.8962 163.837 81.0663C170.078 80.6407 176.107 79.3641 181.001 77.4491Z" fill="white"/>
-                    <path d="M125.183 71.9885C126.034 69.5061 128.303 69.648 128.303 69.648C134.403 78.6554 149.723 81.918 163.766 81.0669C164.262 84.8968 164.617 91.4928 162.418 97.7342C137.098 93.9043 125.183 71.9885 125.183 71.9885Z" fill="#B0B6C9"/>
-                    <path d="M125.75 72.3437C125.75 72.9111 127.949 72.982 128.303 70.4287C127.949 69.3648 126.885 64.8256 125.963 64.1873C121.069 60.9957 112.629 57.875 112.629 57.875C111.991 59.2935 113.267 60.0027 113.267 60.0027L117.523 61.9886C117.31 63.4071 116.955 64.6838 117.097 66.1732C117.239 67.308 117.806 68.3719 118.728 69.152C119.65 69.9322 120.856 70.8542 121.92 71.5635C123.906 72.982 125.75 72.3437 125.75 72.3437Z" fill="#8F96AD"/><path d="M119.65 63.6191L123.338 64.8958L125.111 66.8817L123.692 70.5698C123.692 70.5698 121.068 66.2434 120.075 65.4632C119.011 64.683 119.153 64.1156 119.65 63.6191Z" fill="#8F96AD"/>
-                    <path d="M192.136 58.4424L202.774 71.1379C202.916 71.3507 202.987 71.6344 202.774 71.8472C201.711 73.1238 197.597 77.2375 190.15 75.748C189.37 75.6062 188.731 75.1097 188.306 74.4005L181.852 62.4142L192.136 58.4424Z" fill="#8F96AD"/>
-                    <path d="M175.965 49.0805C175.965 49.0805 174.404 61.6342 176.745 65.606C179.085 69.5778 185.823 66.5989 190.504 60.9249L190.362 48.0166L175.965 49.0805Z" fill="#B0B6C9"/>
-                    <path d="M188.164 55.4632C187.88 55.4632 187.667 55.1795 187.738 54.8958C187.951 54.0447 188.235 52.3425 188.022 51.0659C188.022 51.0659 188.802 50.0729 184.901 50.5694C181.071 51.0659 176.887 51.6333 174.617 49.08C172.418 46.5267 172.844 40.569 175.61 38.9377C180.929 35.817 197.809 43.406 197.88 46.243C197.951 49.1509 196.32 53.761 196.249 53.9029C195.824 55.0377 193.767 59.7896 190.362 61.6337C190.079 61.7755 189.724 61.5628 189.653 61.2081L189.511 56.0306C189.511 55.8178 189.299 55.6051 189.086 55.6051L188.164 55.4632Z" fill="#363840"/>
-                    <path d="M187.739 56.3856C187.739 56.3856 190.647 52.2011 191.781 54.3288C192.916 56.5275 189.512 59.0099 187.242 58.868L187.739 56.3856Z" fill="#B0B6C9"/>
-                    <path d="M215.753 86.5284L208.235 78.7976L215.966 68.8682C215.966 68.8682 234.619 73.2655 241.925 85.1099C239.229 86.3866 234.407 89.0817 230.364 93.4791C226.959 87.876 215.753 86.5284 215.753 86.5284Z" fill="white"/>
-                    <path d="M208.306 105.961C208.306 105.961 228.52 109.011 231.073 98.7979C231.57 96.6701 231.215 94.897 230.364 93.4785C234.407 89.0812 239.23 86.386 241.925 85.1094C244.123 88.6556 245.329 92.9111 244.62 97.9468C241.641 119.721 207.668 110.926 207.668 110.926L208.306 105.961Z" fill="#8F96AD"/>
-                    <path d="M209.725 110.288C209.725 110.288 209.016 104.614 207.81 102.983C206.604 101.352 204.689 99.3659 201.568 101.139C198.448 102.912 195.114 105.82 195.114 105.82C195.114 105.82 196.249 108.161 198.448 106.387L197.384 108.161C197.384 108.161 198.377 110.005 200.079 108.161L199.228 110.288C199.228 110.288 200.717 111.494 201.923 109.934C203.058 108.302 205.54 112.558 209.725 110.288Z" fill="#B0B6C9"/>
-                    <path d="M111.991 28.2267H108.515C106.742 28.2267 105.253 26.8082 105.253 25.106C105.253 23.4038 106.742 21.9854 108.515 21.9854H111.991C113.764 21.9854 115.253 23.4038 115.253 25.106C115.253 26.8082 113.764 28.2267 111.991 28.2267Z" fill="white"/>
-                    <path d="M97.2377 15.674H65.3924C63.6193 15.674 62.1299 14.2555 62.1299 12.5533C62.1299 10.8511 63.6193 9.43262 65.3924 9.43262H97.2377C99.0108 9.43262 100.5 10.8511 100.5 12.5533C100.5 14.2555 99.0108 15.674 97.2377 15.674Z" fill="#F5F6FA"/>
-                    <path d="M130.785 15.673H125.82C123.976 15.673 122.486 14.2545 122.486 12.5523C122.486 10.8501 123.976 9.43164 125.82 9.43164H130.785C132.629 9.43164 134.118 10.8501 134.118 12.5523C134.118 14.2545 132.629 15.673 130.785 15.673Z" fill="#363840"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M184.334 148.02C186.887 148.02 189.015 145.893 189.015 143.339C189.015 140.786 186.887 138.658 184.334 138.658C181.781 138.658 179.653 140.786 179.653 143.339C179.582 145.893 181.71 148.02 184.334 148.02Z" fill="#A5A9B5"/>
-                </svg>
             </div>
             <div class="delete-project-popup__form-container">
                 <p class="delete-project-popup__form-container__confirmation-text">Are you sure that you want to delete your project? You will lose all your buckets and files that linked to this project.</p>
                 <div>
                     <p class="text" v-if="!nameError">To confirm, enter the project name</p>
                     <div v-if="nameError" class="delete-project-popup__form-container__label">
-                        <img src="../../../static/images/register/ErrorInfo.svg" alt="Red error icon with explanation mark"/>
+                        <ErrorIcon alt="Red error icon with explanation mark"/>
                         <p class="text">{{nameError}}</p>
                     </div>
                     <input
@@ -79,9 +43,7 @@
                 </div>
             </div>
             <div class="delete-project-popup__close-cross-container" @click="onCloseClick">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <CloseCrossIcon/>
-                    <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
-                </svg>
             </div>
         </div>
     </div>
@@ -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 {

web/satellite/src/components/project/NewProjectPopup.vue

@@ -6,7 +6,7 @@
         <div class="new-project-popup" id="newProjectPopup" >
             <div class="new-project-popup__info-panel-container">
                 <h2 class="new-project-popup__info-panel-container__main-label-text">Create a Project</h2>
-                <img src="@/../static/images/dashboard/CreateNewProject.png" alt="Create project illustration">
+                <CreateProjectIcon alt="Create project illustration"/>
             </div>
             <div class="new-project-popup__form-container">
                 <HeaderedInput
@@ -46,9 +46,7 @@
                 </div>
             </div>
             <div class="new-project-popup__close-cross-container" @click="onCloseClick">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <CloseCrossIcon/>
-                    <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
-                </svg>
             </div>
         </div>
     </div>
@@ -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 {

web/satellite/src/components/project/ProjectCreationSuccessPopup.vue

@@ -5,29 +5,7 @@
     <div v-if="isPopupShown" class="project-creation-success-popup-container">
         <div class="project-creation-success-popup" id='successfulProjectCreationPopup'>
             <div class="project-creation-success-popup__info-panel-container">
-                <svg width="300" height="233" viewBox="0 0 300 233" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <ProjectCreationSuccessIcon/>
-                    <path d="M175.712 232.904C239.885 232.904 291.878 180.748 291.878 116.411C291.878 52.0744 239.885 0 175.712 0C111.539 0 59.5459 52.1561 59.5459 116.493C59.5459 180.83 111.539 232.904 175.712 232.904Z" fill="#2683FF"/>
-                    <path d="M239.721 179.603H113.173C107.614 179.603 103.036 175.025 103.036 169.466V68.9143C103.036 63.3553 107.614 58.7773 113.173 58.7773H239.639C245.198 58.7773 249.776 63.3553 249.776 68.9143V169.466C249.776 175.025 245.28 179.603 239.721 179.603Z" fill="#499FFC"/>
-                    <path d="M233.428 168.897H121.186C118.161 168.897 115.627 166.363 115.627 163.338V77.8285C115.627 74.8038 118.161 72.2695 121.186 72.2695H233.428C236.453 72.2695 238.987 74.8038 238.987 77.8285V163.338C238.987 166.363 236.453 168.897 233.428 168.897Z" fill="white"/>
-                    <path d="M162.06 161.538C161.406 161.538 160.834 160.966 160.834 160.312V80.361C160.834 79.707 161.406 79.1348 162.06 79.1348C162.714 79.1348 163.286 79.707 163.286 80.361V160.312C163.286 160.966 162.714 161.538 162.06 161.538Z" fill="black"/>
-                    <path d="M191.326 133.416L171.788 119.11L191.326 103.251C191.898 102.76 191.98 101.943 191.49 101.37C190.999 100.798 190.182 100.716 189.609 101.207L168.845 118.129C168.518 118.374 168.354 118.783 168.354 119.192C168.354 119.6 168.6 120.009 168.927 120.254L189.855 135.542C190.1 135.705 190.345 135.787 190.672 135.787C191.081 135.787 191.49 135.623 191.735 135.215C192.062 134.642 191.898 133.825 191.326 133.416Z" fill="#2683FF"/>
-                    <path d="M232.772 118.127L211.844 101.123C211.272 100.632 210.454 100.714 209.964 101.286C209.473 101.859 209.555 102.676 210.127 103.167L229.666 119.026L210.127 133.332C209.555 133.741 209.392 134.558 209.882 135.212C210.127 135.539 210.536 135.785 210.945 135.785C211.19 135.785 211.517 135.703 211.762 135.539L232.69 120.252C233.017 120.007 233.181 119.598 233.263 119.189C233.263 118.781 233.099 118.372 232.772 118.127Z" fill="#2683FF"/>
-                    <path d="M204.487 97.3635C203.751 97.2 203.097 97.6905 202.934 98.4263L195.249 139.464C195.086 140.2 195.576 140.854 196.312 141.018C196.476 141.018 196.639 141.018 196.803 141.018C197.293 140.936 197.784 140.527 197.865 139.955L205.55 98.9168C205.713 98.2628 205.223 97.527 204.487 97.3635Z" fill="#2683FF"/>
-                    <path d="M159.852 69.403H118.242C116.607 69.403 115.217 68.0132 115.217 66.3782C115.217 64.7433 116.607 63.3535 118.242 63.3535H159.852C161.487 63.3535 162.877 64.7433 162.877 66.3782C162.877 68.0132 161.569 69.403 159.852 69.403Z" fill="white"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M298.253 150.664C299.806 150.664 300.951 151.89 300.951 153.444C300.215 174.535 291.304 193.583 277.325 207.562C263.346 221.541 244.299 230.451 223.207 231.187C221.654 231.269 220.428 230.043 220.428 228.49V204.537C220.428 203.065 221.572 201.921 223.044 201.839C236.124 201.185 247.896 195.544 256.643 186.879C265.39 178.132 270.949 166.36 271.603 153.28C271.685 151.809 272.829 150.664 274.301 150.664H298.253Z" fill="#DEDEFC"/>
-                    <path d="M221.655 225.058C226.892 225.058 231.138 220.812 231.138 215.575C231.138 210.337 226.892 206.092 221.655 206.092C216.418 206.092 212.172 210.337 212.172 215.575C212.172 220.812 216.418 225.058 221.655 225.058Z" fill="#499FFC"/>
-                    <path d="M67.3937 30.902C74.3424 30.902 80.0649 25.016 80.0649 17.8221C80.0649 10.6281 74.3424 4.74219 67.3937 4.74219C60.445 4.74219 54.7225 10.6281 54.7225 17.8221C54.6408 25.0978 60.3633 30.902 67.3937 30.902Z" fill="#499FFC"/>
-                    <path d="M67.3943 23.5445C70.5008 23.5445 73.1168 21.0103 73.1168 17.8221C73.1168 14.7156 70.5826 12.0996 67.3943 12.0996C64.2879 12.0996 61.6719 14.6338 61.6719 17.8221C61.6719 21.0103 64.2061 23.5445 67.3943 23.5445Z" fill="white"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M138.843 36.3769C141.786 36.3769 144.238 33.9244 144.238 30.9814C144.238 28.0384 141.786 25.5859 138.843 25.5859C135.9 25.5859 133.447 28.0384 133.447 30.9814C133.366 33.9244 135.818 36.3769 138.843 36.3769Z" fill="#6CB9FF"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M102.383 207.398C105.326 207.398 107.778 204.946 107.778 202.003C107.778 199.06 105.326 196.607 102.383 196.607C99.4398 196.607 96.9873 199.06 96.9873 202.003C96.9873 205.028 99.358 207.398 102.383 207.398Z" fill="white"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M117.916 207.398C120.859 207.398 123.311 204.946 123.311 202.003C123.311 199.06 120.859 196.607 117.916 196.607C114.973 196.607 112.521 199.06 112.521 202.003C112.439 205.028 114.891 207.398 117.916 207.398Z" fill="white"/>
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M133.366 207.398C136.309 207.398 138.762 204.946 138.762 202.003C138.762 199.06 136.309 196.607 133.366 196.607C130.423 196.607 127.971 199.06 127.971 202.003C127.971 205.028 130.423 207.398 133.366 207.398Z" fill="#6CB9FF"/>
-                    <path d="M124.781 110.036H140.068C141.622 110.036 142.93 108.81 142.93 107.338C142.93 105.867 141.622 104.641 140.068 104.641H124.781C123.228 104.641 121.92 105.867 121.92 107.338C121.92 108.81 123.228 110.036 124.781 110.036Z" fill="#0F002D"/>
-                    <path d="M124.699 99.2448H151.513C153.066 99.2448 154.374 97.855 154.374 96.22C154.374 94.5851 153.066 93.1953 151.513 93.1953H124.781C123.228 93.1953 121.92 94.5851 121.92 96.22C121.92 97.855 123.146 99.2448 124.699 99.2448Z" fill="#0F002D"/>
-                    <path d="M126.09 125.405H127.888C129.441 125.405 130.749 124.015 130.749 122.38C130.749 120.663 129.523 119.355 127.888 119.355H126.09C124.537 119.355 123.229 120.745 123.229 122.38C123.31 124.097 124.537 125.405 126.09 125.405Z" fill="#2683FF"/>
-                    <path d="M136.881 125.405H138.679C140.232 125.405 141.54 124.015 141.54 122.38C141.54 120.663 140.314 119.355 138.679 119.355H136.881C135.328 119.355 134.02 120.745 134.02 122.38C134.101 124.097 135.328 125.405 136.881 125.405Z" fill="#2683FF"/>
-                    <path d="M116.361 136.03C115.952 136.03 115.625 136.03 115.298 136.111C114.644 136.193 113.99 135.784 113.745 135.212C106.061 121.233 91.1824 111.75 74.015 111.75C58.4826 111.75 44.7487 119.516 36.6555 131.37C36.2468 131.942 35.511 132.187 34.857 132.106C32.8133 131.697 30.6878 131.452 28.5623 131.452C12.5395 131.37 -0.376953 144.123 -0.376953 159.982C-0.376953 159.982 -0.376953 159.982 -0.376953 160.064C-0.376953 160.963 0.358791 161.699 1.33978 161.699H138.761C139.66 161.699 140.477 160.963 140.477 160.064V159.982C140.477 146.739 129.686 136.03 116.361 136.03Z" fill="#DEDEFC"/>
-                </svg>
             </div>
             <div class="project-creation-success-popup__form-container">
                 <h2 class="project-creation-success-popup__form-container__main-label-text">Congrats!</h2>
@@ -51,9 +29,7 @@
                 </div>
             </div>
             <div class="project-creation-success-popup__close-cross-container" @click="onCloseClick">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" >
+                <CloseCrossIcon/>
-                    <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
-                </svg>
             </div>
         </div>
     </div>
@@ -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 {

web/satellite/src/components/project/ProjectDetails.vue

@@ -17,12 +17,10 @@
                         <h2 class="project-details-info-container__description-container__text__title">Description</h2>
                         <h3 class="project-details-info-container__description-container__text__project-description">{{displayedDescription}}</h3>
                     </div>
-                    <div title="Edit">
+                    <EditIcon
-                        <svg class="project-details-svg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" @click="toggleEditing">
+                        class="project-details-svg"
-                            <rect class="project-details-svg__rect" width="40" height="40" rx="4" fill="#E2ECF7"/>
+                        @click="toggleEditing"
-                            <path class="project-details-svg__path" d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
+                    />
-                        </svg>
-                    </div>
                 </div>
                 <div class="project-details-info-container__description-container--editing" v-if="isEditing">
                     <HeaderedInput
@@ -74,6 +72,8 @@ import HeaderedInput from '@/components/common/HeaderedInput.vue';
 import VButton from '@/components/common/VButton.vue';
 import DeleteProjectPopup from '@/components/project/DeleteProjectPopup.vue';
 
+import EditIcon from '@/../static/images/project/edit.svg';
+
 import { RouteConfig } from '@/router';
 import { PROJECTS_ACTIONS } from '@/store/modules/projects';
 import { UpdateProjectModel } from '@/types/projects';
@@ -85,6 +85,7 @@ import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actio
         HeaderedInput,
         EmptyState,
         DeleteProjectPopup,
+        EditIcon,
     },
 })
 export default class ProjectDetailsArea extends Vue {

web/satellite/src/components/project/UsageReport.vue

@@ -20,9 +20,10 @@
                     :date="startTime"
                     @change="getDates"
                 />
-                <svg class="usage-report-container__options-area__option__image" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent.self="onCustomDateClick">
+                <DatePickerIcon
-                    <path class="usage-report-svg-path" d="M16.3213 2.28026H14.8009V1.50058C14.8009 1.10058 14.4806 0.760742 14.0611 0.760742C13.6611 0.760742 13.3213 1.08106 13.3213 1.50058V2.28026H6.66106V1.50058C6.66106 1.10058 6.34074 0.760742 5.92122 0.760742C5.5009 0.760742 5.2009 1.10058 5.2009 1.50058V2.28026H3.68058C1.92042 2.28026 0.500977 3.70058 0.500977 5.45986V16.0599C0.500977 17.82 1.9213 19.2395 3.68058 19.2395H16.3204C18.0805 19.2395 19.5 17.8191 19.5 16.0599V5.45986C19.5008 3.70048 18.0804 2.28026 16.321 2.28026H16.3213ZM3.68066 3.74042H5.20098V4.5201C5.20098 4.9201 5.5213 5.25994 5.94082 5.25994C6.36114 5.25994 6.68066 4.93962 6.68066 4.5201V3.74042H13.3603V4.5201C13.3603 4.9201 13.6806 5.25994 14.1001 5.25994C14.5001 5.25994 14.8399 4.93962 14.8399 4.5201V3.74042H16.3603C17.3001 3.74042 18.0806 4.50058 18.0806 5.46074V7.06074H1.96098V5.46074C1.96098 4.5209 2.74066 3.74042 3.68052 3.74042H3.68066ZM9.62126 14.2006H10.4009C11.0213 14.2006 11.5213 14.7006 11.5213 15.3209C11.5213 15.9413 11.0213 16.4413 10.4009 16.4413H9.62126C9.00094 16.4413 8.50094 15.9413 8.50094 15.3209C8.50094 14.7006 9.00094 14.2006 9.62126 14.2006ZM8.50094 10.8404C8.50094 10.2201 9.00094 9.7201 9.62126 9.7201L10.4009 9.72088C11.0213 9.72088 11.5213 10.2209 11.5213 10.8412C11.5213 11.4615 11.0213 11.9615 10.4009 11.9615H9.62126C9.00094 11.9607 8.50094 11.4607 8.50094 10.8404V10.8404ZM14.8407 14.2006H15.6204C16.2407 14.2006 16.7407 14.7006 16.7407 15.3209C16.7407 15.9413 16.2407 16.4413 15.6204 16.4413H14.8407C14.2204 16.4413 13.7204 15.9413 13.7204 15.3209C13.7212 14.7006 14.2212 14.2006 14.8407 14.2006ZM13.7212 10.8404C13.7212 10.2201 14.2212 9.7201 14.8415 9.7201H15.6212C16.2415 9.7201 16.7415 10.2201 16.7415 10.8404C16.7415 11.4607 16.2415 11.9607 15.6212 11.9607H14.8415C14.2212 11.9607 13.7212 11.4607 13.7212 10.8404ZM6.2806 10.8404C6.2806 11.4607 5.7806 11.9607 5.16028 11.9607H4.3806C3.76028 11.9607 3.26028 11.4607 3.26028 10.8404C3.26028 10.2201 3.76028 9.7201 4.3806 9.7201H5.16028C5.7806 9.72088 6.2806 10.2209 6.2806 10.8404ZM4.3806 14.2006H5.16028C5.7806 14.2006 6.2806 14.7006 6.2806 15.3209C6.2806 15.9413 5.7806 16.4413 5.16028 16.4413H4.3806C3.76028 16.4413 3.26028 15.9413 3.26028 15.3209C3.26106 14.7006 3.76106 14.2006 4.3806 14.2006Z" fill="#2683FF"/>
+                    class="usage-report-container__options-area__option__image"
-                </svg>
+                    @click.prevent.self="onCustomDateClick"
+                />
             </div>
         </div>
         <div class="usage-report-container__main-area">
@@ -44,11 +45,10 @@
                 <p class="usage-report-container__main-area__footer__rollup-info">Roll Up Period <b class="usage-report-container__main-area__footer__rollup-info__bold-text">{{toLocaleDateString(startDate)}}</b> to <b class="usage-report-container__main-area__footer__rollup-info__bold-text">{{toLocaleDateString(endDate)}}</b></p>
                 <div class="usage-report-container__main-area__footer__report-area">
                     <p class="usage-report-container__main-area__footer__report-area__download-text">Download Advanced Report</p>
-                    <svg class="usage-report-container__main-area__footer__report-area__image" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" @click.prevent="onReportClick">
+                    <DownloadReportIcon
-                        <rect class="background" width="40" height="40" rx="4"/>
+                        class="usage-report-container__main-area__footer__report-area__image"
-                        <path class="blue" d="M25.6491 19.2809L21.2192 23.5281C20.891 23.8427 20.3988 24 20.0707 24C19.7425 24 19.2503 23.8427 19.0862 23.5281L14.4922 19.2809C13.8359 18.6517 13.8359 17.8652 14.4922 17.236C14.8204 16.9213 15.1485 16.9213 15.6407 16.9213C15.9689 16.9213 16.4611 17.0787 16.6252 17.3933L18.594 19.1236L18.594 11.4157C18.594 10.6292 19.2503 10 20.0707 10C20.891 10 21.5473 10.6292 21.5473 11.4157L21.5473 19.1236L23.5162 17.236C23.6803 16.9213 24.1725 16.9213 24.5006 16.9213C24.8288 16.9213 25.321 17.0787 25.4851 17.3933C26.1414 17.8652 26.1414 18.809 25.6491 19.2809Z"/>
+                        @click.prevent="onReportClick"
-                        <rect class="blue" x="11" y="28" width="18" height="2" rx="1"/>
+                    />
-                    </svg>
                 </div>
             </div>
         </div>
@@ -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 {

web/satellite/src/components/team/AddUserPopup.vue

@@ -7,12 +7,12 @@
             <div class="add-user__main">
                 <div class='add-user__info-panel-container'>
                     <h2 class='add-user__info-panel-container__main-label-text'>Add Team Member</h2>
-                    <div v-html='imageSource'></div>
+                    <AddMemberIcon/>
                 </div>
                 <div class='add-user__form-container'>
                     <p class='add-user__form-container__common-label' v-if="!formError">Email Address</p>
                     <div v-if="formError" class="add-user__form-container__label">
-                        <img src="../../../static/images/register/ErrorInfo.svg" alt="Red error icon"/>
+                        <ErrorIcon alt="Red error icon"/>
                         <p class="add-user__form-container__label__error">{{formError}}</p>
                     </div>
                     <div class="add-user__form-container__inputs-group" :class="{ 'scrollable': isInputsGroupScrollable }">
@@ -26,18 +26,16 @@
                                 :class="{ 'error-input': input.error }"
                                 @keyup="resetFormErrors(index)"
                             />
-                            <svg class="add-user__form-container__inputs-group__item__image" @click="deleteInput(index)" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <DeleteFieldIcon
-                                <path class="delete-input-svg-path" d="M11.7803 1.28033C12.0732 0.987437 12.0732 0.512563 11.7803 0.21967C11.4874 -0.0732233 11.0126 -0.0732233 10.7197 0.21967L11.7803 1.28033ZM0.21967 10.7197C-0.0732233 11.0126 -0.0732233 11.4874 0.21967 11.7803C0.512563 12.0732 0.987437 12.0732 1.28033 11.7803L0.21967 10.7197ZM1.28033 0.21967C0.987437 -0.0732233 0.512563 -0.0732233 0.21967 0.21967C-0.0732233 0.512563 -0.0732233 0.987437 0.21967 1.28033L1.28033 0.21967ZM10.7197 11.7803C11.0126 12.0732 11.4874 12.0732 11.7803 11.7803C12.0732 11.4874 12.0732 11.0126 11.7803 10.7197L10.7197 11.7803ZM10.7197 0.21967L0.21967 10.7197L1.28033 11.7803L11.7803 1.28033L10.7197 0.21967ZM0.21967 1.28033L10.7197 11.7803L11.7803 10.7197L1.28033 0.21967L0.21967 1.28033Z" fill="#AFB7C1"/>
+                                class="add-user__form-container__inputs-group__item__image"
-                            </svg>
+                                @click="deleteInput(index)"
+                            />
                         </div>
                     </div>
                     <div class="add-user-row">
                         <div @click='addInput' class="add-user-row__item" id="addUserButton">
                             <div :class="{ 'inactive-image': isMaxInputsCount }">
-                                <svg class="add-user-row__item__image" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <AddFieldIcon class="add-user-row__item__image"/>
-                                    <rect class="add-user-row__item__image__rect" width="40" height="40" rx="20" fill="#2683FF" />
-                                    <path class="add-user-row__item__image__path" d="M25 18.977V21.046H20.9722V25H19.0046V21.046H15V18.977H19.0046V15H20.9722V18.977H25Z" fill="white" />
-                                </svg>
                             </div>
                             <p class="add-user-row__item__label" :class="{ 'inactive-label': isMaxInputsCount }">Add More</p>
                         </div>
@@ -60,16 +58,11 @@
                     </div>
                 </div>
                 <div class='add-user__close-cross-container' @click='onClose'>
-                    <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+                    <CloseCrossIcon/>
-                        <path class="close-cross-svg-path" d='M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z' fill='#384B65'/>
-                    </svg>
                 </div>
             </div>
             <div class="notification-wrap">
-                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <AddMemberNotificationIcon class="notification-wrap__image"/>
-                    <rect width="40" height="40" rx="10" fill="#2683FF"/>
-                    <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/>
-                </svg>
                 <div class="notification-wrap__text-area">
                     <p class="notification-wrap__text-area__text">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: <router-link target="_blank" exact to="/register" >{{registerPath}}</router-link></p>
                 </div>
@@ -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;
             }
         }
     }

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,

web/satellite/src/components/team/ProjectMembersArea.vue

@@ -29,36 +29,7 @@
         </div>
         <div class="team-area__empty-search-result-area" v-if="isEmptySearchResultShown">
             <h1 class="team-area__empty-search-result-area__title">No results found</h1>
-            <svg class="team-area__empty-search-result-area__image" width="380" height="295" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <EmptySearchResultIcon class="team-area__empty-search-result-area__image"/>
-                <path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M23.3168 98C21.4071 98 20 96.5077 20 94.6174C20.9046 68.9496 31.8599 45.769 49.0467 28.7566C66.2335 11.7442 89.6518 0.900089 115.583 0.00470057C117.492 -0.094787 119 1.39753 119 3.28779V32.4377C119 34.2284 117.593 35.6213 115.784 35.7208C99.7025 36.5167 85.2294 43.3813 74.4751 53.927C63.8213 64.5722 56.8863 78.8984 56.0822 94.8164C55.9817 96.6072 54.5746 98 52.7655 98H23.3168Z" fill="#B0B6C9"/>
-                <path d="M117.5 30C124.404 30 130 25.0751 130 19C130 12.9249 124.404 8 117.5 8C110.596 8 105 12.9249 105 19C105 25.0751 110.596 30 117.5 30Z" fill="#8F96AD"/>
-                <path d="M112.5 97C116.09 97 119 94.3137 119 91C119 87.6863 116.09 85 112.5 85C108.91 85 106 87.6863 106 91C106 94.3137 108.91 97 112.5 97Z" fill="#B0B6C9"/>
-                <path d="M15.0005 282C23.226 282 30 274.575 30 265.5C30 256.425 23.226 249 15.0005 249C6.77499 249 0.00102409 256.425 0.00102409 265.5C-0.0957468 274.678 6.67822 282 15.0005 282Z" fill="#8F96AD"/>
-                <path d="M15.5 274C19.0286 274 22 270.9 22 267C22 263.2 19.1214 260 15.5 260C11.9714 260 9 263.1 9 267C9 270.9 11.8786 274 15.5 274Z" fill="white"/>
-                <path d="M282.587 111H307.413C309.906 111 312 108.955 312 106.5C312 104.045 309.906 102 307.413 102H282.587C280.094 102 278 104.045 278 106.5C278 108.955 280.094 111 282.587 111Z" fill="white"/>
-                <path d="M282.585 93H289.415C291.951 93 294 91.02 294 88.5C294 85.98 291.951 84 289.415 84H282.585C280.049 84 278 85.98 278 88.5C278 91.02 279.951 93 282.585 93Z" fill="#E8EAF2"/>
-                <path d="M252.872 92H260.128C262.823 92 265 90.4091 265 88.5C265 86.5909 262.823 85 260.128 85H252.872C250.177 85 248 86.5909 248 88.5C248 90.4091 250.177 92 252.872 92Z" fill="#363840"/>
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M45 166C48.8182 166 52 162.818 52 159C52 155.182 48.8182 152 45 152C41.1818 152 38 155.182 38 159C38 162.818 41.1818 166 45 166Z" fill="#B0B6C9"/>
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M217 232C220.818 232 224 228.818 224 225C224 221.182 220.818 218 217 218C213.182 218 210 221.182 210 225C210 228.818 213.182 232 217 232Z" fill="#2683FF"/>
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M26 142C29.8182 142 33 139.045 33 135.5C33 131.955 29.8182 129 26 129C22.1818 129 19 131.955 19 135.5C19 139.045 22.1818 142 26 142Z" fill="white"/>
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M45 142C48.8182 142 52 139.045 52 135.5C52 131.955 48.8182 129 45 129C41.1818 129 38 131.955 38 135.5C38 139.045 41.1818 142 45 142Z" fill="#E8EAF2"/>
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M64 142C67.8182 142 71 139.045 71 135.5C71 131.955 67.8182 129 64 129C60.1818 129 57 131.955 57 135.5C57 139.045 60.1818 142 64 142Z" fill="white"/>
-                <path d="M107.014 129.651C107.014 129.651 152.017 118.395 199.527 125.169C212.857 127.061 224.785 134.831 232.001 146.186C245.031 166.606 263.374 203.062 259.465 241.112L239.018 246.093C239.018 246.093 224.885 200.97 209.049 182.643C209.049 182.643 190.205 225.275 191.208 248.683C191.208 249.38 191.308 249.977 191.308 250.575C193.513 273.485 101 254.858 101 254.858L107.014 129.651Z" fill="#F5F6FA"/>
-                <path d="M143 89.7894L145.01 121.569C145.211 124.568 147.12 127.066 149.833 127.865C156.063 129.664 167.821 131.863 179.276 127.266C181.387 126.466 182.492 123.968 181.789 121.669L166.514 73L143 89.7894Z" fill="#8F96AD"/>
-                <path d="M189 61.014C189 61.014 186.474 85.2772 181.219 95.8484C175.964 106.42 174.448 114.272 161.412 109.641C148.376 105.01 141.707 93.5328 142.01 80.2434C142.01 80.2434 142.414 59.7052 147.972 54.3692C153.631 49.0333 189 61.014 189 61.014Z" fill="#B0B6C9"/>
-                <path d="M150.596 75.686L152.115 76.4754C152.115 76.4754 153.128 60.6872 159.814 61.4766C166.5 62.266 190.609 69.8641 199.625 64.9303C208.235 60.1938 191.521 44.2082 180.074 40.4585C163.866 35.0313 150.798 35.5247 144.822 45.2936C144.416 45.8857 143.606 45.8857 143.201 45.2936C142.492 44.0108 128.209 53.9772 132.97 65.917C133.172 66.5091 138.946 83.4815 140.567 83.9748C140.972 84.0735 141.479 83.8762 141.681 83.4815L146.24 74.4032C146.442 73.9098 147.05 73.7125 147.557 74.0085L150.596 75.686Z" fill="#0F002D"/>
-                <path d="M149.877 78.0283C149.877 78.0283 154.31 62.6808 145.56 63.0051C136.81 63.3293 139.844 79.7576 144.744 83L149.877 78.0283Z" fill="#B0B6C9"/>
-                <path d="M106.635 221.07C104.63 206.983 119.272 186.154 125.289 178.305C126.994 176.092 127.996 173.274 127.996 170.457C128.197 150.433 119.773 137.553 106.335 129C106.335 129 57.5953 185.953 70.0308 229.724C71.3345 234.453 73.4406 238.478 76.048 242C78.0538 225.397 97.1082 221.875 106.635 221.07Z" fill="#F5F6FA"/>
-                <path d="M107.966 215L106 214.798C107.655 200.851 120.172 183.67 125.448 177L127 178.112C121.828 184.681 109.621 201.559 107.966 215Z" fill="#0F002D"/>
-                <path d="M107.128 221.954C106.926 221.337 106.825 220.617 106.725 220C97.054 220.823 78.0147 224.423 76 241.29C97.8599 270.808 158 260.111 158 260.111V248.592C158.101 248.695 111.862 239.953 107.128 221.954Z" fill="#B0B6C9"/>
-                <path d="M152 257C152 257 160.863 236.189 176.575 243.593C192.187 250.997 190.978 255.799 190.978 255.799L152 257Z" fill="#B0B6C9"/>
-                <path d="M271.213 238H136.787C134.194 238 132 235.787 132 233.172V139.828C132 137.213 134.194 135 136.787 135H271.213C273.806 135 276 137.213 276 139.828V233.172C276 235.787 273.906 238 271.213 238Z" fill="#363840"/>
-                <path d="M217.252 258H195.744C193.109 258 191 256 191 253.5V190.5C191 188 193.109 186 195.744 186H217.252C219.888 186 221.996 188 221.996 190.5V253.5C222.102 255.9 219.888 258 217.252 258Z" fill="#363840"/>
-                <path d="M246.189 254H150.811C149.305 254 148 255.444 148 257.111V258.889C148 260.556 149.305 262 150.811 262H246.189C247.695 262 249 260.556 249 258.889V257.111C249 255.444 247.795 254 246.189 254Z" fill="#363840"/>
-                <path d="M350.452 224.555C349.952 224.555 349.553 224.555 349.154 224.654C348.355 224.754 347.557 224.256 347.257 223.56C337.873 206.543 319.705 195 298.742 195C279.775 195 263.004 204.454 253.121 218.883C252.622 219.579 251.724 219.878 250.925 219.778C248.429 219.281 245.834 218.982 243.239 218.982C223.772 219.082 208 234.605 208 253.91C208 253.91 208 253.91 208 254.01C208 255.104 208.898 256 210.096 256H377.904C379.002 256 380 255.104 380 254.01V253.91C379.8 237.591 366.623 224.555 350.452 224.555Z" fill="#B0B6C9"/>
-                <path d="M206 195C210.418 195 214 191.194 214 186.5C214 181.806 210.418 178 206 178C201.582 178 198 181.806 198 186.5C198 191.194 201.582 195 206 195Z" fill="white"/>
-            </svg>
         </div>
     </div>
 </template>
@@ -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 {

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;
+}

web/satellite/src/utils/constants/emptyStatesImages.ts

@@ -41,36 +41,6 @@ export const EMPTY_STATE_IMAGES = {
     <path d="M184.4 22.0998H177.4C174.8 22.0998 172.7 20.0998 172.7 17.6998C172.7 15.2998 174.8 13.2998 177.4 13.2998H184.4C187 13.2998 189.1 15.2998 189.1 17.6998C189.1 20.0998 187 22.0998 184.4 22.0998Z" fill="#363840"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M259.9 208.7C263.5 208.7 266.5 205.7 266.5 202.1C266.5 198.5 263.5 195.5 259.9 195.5C256.3 195.5 253.3 198.5 253.3 202.1C253.2 205.7 256.2 208.7 259.9 208.7Z" fill="#A5A9B5"/>
     </svg>`,
-    ADD_USER: `<svg width="300" height="233" viewBox="0 0 300 233" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M132.5 233C194.648 233 245 182.632 245 120.5C245 58.3684 194.648 8 132.5 8C70.3519 8 20 58.3684 20 120.5C20 182.632 70.3519 233 132.5 233Z" fill="#2683FF"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.6132 78C17.1086 78 16 76.8122 16 75.3077C16.7127 54.8783 25.3442 36.4284 38.8853 22.8879C52.4264 9.34746 70.8772 0.716397 91.3076 0.00374127C92.8122 -0.0754427 94 1.11232 94 2.61681V25.8177C94 27.243 92.8914 28.3516 91.466 28.4308C78.7959 29.0643 67.3929 34.528 58.9198 42.9215C50.5259 51.3942 45.0619 62.7967 44.4284 75.4661C44.3492 76.8914 43.2406 78 41.8152 78H18.6132Z" fill="#DEDEFC"/>
-    <path d="M92.5 24C97.7467 24 102 19.9706 102 15C102 10.0294 97.7467 6 92.5 6C87.2533 6 83 10.0294 83 15C83 19.9706 87.2533 24 92.5 24Z" fill="#499FFC"/>
-    <path d="M89 77C91.7614 77 94 74.7614 94 72C94 69.2386 91.7614 67 89 67C86.2386 67 84 69.2386 84 72C84 74.7614 86.2386 77 89 77Z" fill="#6CB9FF"/>
-    <path d="M12.0004 223C18.5808 223 24 217.15 24 210C24 202.85 18.5808 197 12.0004 197C5.41999 197 0.000819275 202.85 0.000819275 210C-0.0765974 217.231 5.34257 223 12.0004 223Z" fill="#499FFC"/>
-    <path d="M12.5 216C15.4857 216 18 213.564 18 210.5C18 207.514 15.5643 205 12.5 205C9.51429 205 7 207.436 7 210.5C7 213.564 9.43571 216 12.5 216Z" fill="white"/>
-    <path d="M222.642 88H242.358C244.337 88 246 86.4091 246 84.5C246 82.5909 244.337 81 242.358 81H222.642C220.663 81 219 82.5909 219 84.5C219 86.4091 220.663 88 222.642 88Z" fill="white"/>
-    <path d="M222.726 74H228.274C230.335 74 232 72.24 232 70C232 67.76 230.335 66 228.274 66H222.726C220.665 66 219 67.76 219 70C219 72.24 220.585 74 222.726 74Z" fill="white"/>
-    <path d="M199.726 73H205.274C207.335 73 209 71.6364 209 70C209 68.3636 207.335 67 205.274 67H199.726C197.665 67 196 68.3636 196 70C196 71.6364 197.665 73 199.726 73Z" fill="#0F002D"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M35.5 131C38.5 131 41 128.5 41 125.5C41 122.5 38.5 120 35.5 120C32.5 120 30 122.5 30 125.5C30 128.5 32.5 131 35.5 131Z" fill="#6CB9FF"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M171.5 183C174.5 183 177 180.5 177 177.5C177 174.5 174.5 172 171.5 172C168.5 172 166 174.5 166 177.5C166 180.5 168.5 183 171.5 183Z" fill="#2683FF"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 112C23.5 112 26 109.727 26 107C26 104.273 23.5 102 20.5 102C17.5 102 15 104.273 15 107C15 109.727 17.5 112 20.5 112Z" fill="white"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M35.5 112C38.5 112 41 109.727 41 107C41 104.273 38.5 102 35.5 102C32.5 102 30 104.273 30 107C30 109.727 32.5 112 35.5 112Z" fill="white"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M50.5 112C53.5 112 56 109.727 56 107C56 104.273 53.5 102 50.5 102C47.5 102 45 104.273 45 107C45 109.727 47.5 112 50.5 112Z" fill="white"/>
-    <path d="M84.7279 102.263C84.7279 102.263 120.108 93.3561 157.458 98.7163C167.938 100.214 177.315 106.362 182.989 115.349C193.232 131.508 207.652 160.359 204.579 190.47L188.504 194.412C188.504 194.412 177.394 158.703 164.944 144.199C164.944 144.199 150.13 177.937 150.918 196.461C150.918 197.013 150.997 197.486 150.997 197.959C152.73 216.089 80 201.348 80 201.348L84.7279 102.263Z" fill="white"/>
-    <path d="M113 71.2548L114.598 96.3443C114.757 98.7112 116.275 100.684 118.432 101.315C123.384 102.735 132.729 104.471 141.835 100.841C143.512 100.21 144.391 98.2378 143.832 96.4232L131.691 58L113 71.2548Z" fill="#CECEEF"/>
-    <path d="M149 48.3559C149 48.3559 147.011 67.5992 142.874 75.9832C138.738 84.3672 137.544 90.5953 127.282 86.9223C117.02 83.2493 111.769 74.1467 112.008 63.6068C112.008 63.6068 112.326 47.3179 116.701 43.086C121.156 38.854 149 48.3559 149 48.3559Z" fill="#DEDEFC"/>
-    <path d="M118.611 59.455L119.805 60.0764C119.805 60.0764 120.601 47.6474 125.854 48.2688C131.107 48.8903 150.05 54.8717 157.134 50.9877C163.899 47.2589 150.766 34.6745 141.772 31.7226C129.037 27.4502 118.77 27.8386 114.074 35.529C113.756 35.9951 113.119 35.9951 112.801 35.529C112.243 34.5192 101.021 42.365 104.762 51.7645C104.921 52.2306 109.458 65.5918 110.731 65.9802C111.05 66.0579 111.448 65.9025 111.607 65.5918L115.188 58.4451C115.348 58.0567 115.825 57.9013 116.223 58.1344L118.611 59.455Z" fill="#0F002D"/>
-    <path d="M118.183 61.2712C118.183 61.2712 121.407 49.7606 115.044 50.0038C108.68 50.247 110.886 62.5682 114.45 65L118.183 61.2712Z" fill="#DEDEFC"/>
-    <path d="M84.2644 174.516C82.6933 163.42 94.1627 147.015 98.8762 140.833C100.212 139.09 100.997 136.871 100.997 134.652C101.154 118.881 94.5555 108.736 84.0288 102C84.0288 102 45.8496 146.857 55.5908 181.331C56.6121 185.056 58.2618 188.226 60.3043 191C61.8754 177.923 76.8014 175.15 84.2644 174.516Z" fill="white"/>
-    <path d="M85.4975 170L84 169.84C85.2611 158.83 94.798 145.266 98.8177 140L100 140.878C96.0591 146.064 86.7586 159.388 85.4975 170Z" fill="#0F002D"/>
-    <path d="M84.6744 175.535C84.5147 175.051 84.4348 174.485 84.355 174C76.6892 174.646 61.597 177.475 60 190.728C77.328 213.92 125 205.516 125 205.516V196.465C125.08 196.546 88.4275 189.677 84.6744 175.535Z" fill="#DEDEFC"/>
-    <path d="M120 203C120 203 127.045 186.351 139.534 192.274C151.943 198.197 150.983 202.039 150.983 202.039L120 203Z" fill="#DEDEFC"/>
-    <path d="M214.211 188H107.789C105.737 188 104 186.26 104 184.203V110.797C104 108.74 105.737 107 107.789 107H214.211C216.263 107 218 108.74 218 110.797V184.203C218 186.26 216.342 188 214.211 188Z" fill="#0F002D"/>
-    <path d="M171.324 204H154.673C152.632 204 151 202.417 151 200.437V150.562C151 148.583 152.632 147 154.673 147H171.324C173.365 147 174.997 148.583 174.997 150.562V200.437C175.079 202.337 173.365 204 171.324 204Z" fill="#0F002D"/>
-    <path d="M194.773 201H119.227C118.034 201 117 202.083 117 203.333V204.667C117 205.917 118.034 207 119.227 207H194.773C195.966 207 197 205.917 197 204.667V203.333C197 202.083 196.046 201 194.773 201Z" fill="#0F002D"/>
-    <path d="M276.636 177.256C276.241 177.256 275.926 177.256 275.61 177.334C274.979 177.413 274.347 177.021 274.11 176.473C266.691 163.083 252.325 154 235.749 154C220.752 154 207.492 161.439 199.677 172.793C199.283 173.341 198.572 173.576 197.941 173.498C195.967 173.106 193.915 172.871 191.863 172.871C176.471 172.949 164 185.165 164 200.356C164 200.356 164 200.356 164 200.434C164 201.295 164.71 202 165.658 202H298.342C299.211 202 300 201.295 300 200.434V200.356C299.842 187.514 289.423 177.256 276.636 177.256Z" fill="#DEDEFC"/>
-    <path d="M162.5 154C166.09 154 169 151.09 169 147.5C169 143.91 166.09 141 162.5 141C158.91 141 156 143.91 156 147.5C156 151.09 158.91 154 162.5 154Z" fill="white"/>
-    </svg>`,
     API_KEY: `<svg width="346" height="273" viewBox="0 0 346 273" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M199.593 272.163C274.583 272.163 335.34 211.215 335.34 136.034C335.34 60.8521 274.583 0 199.593 0C124.602 0 63.8457 60.9476 63.8457 136.129C63.8457 211.311 124.602 272.163 199.593 272.163Z" fill="#E8EAF2"/>
     <path d="M274.391 209.88H126.512C120.016 209.88 114.666 204.53 114.666 198.034V80.5331C114.666 74.0371 120.016 68.6875 126.512 68.6875H274.295C280.791 68.6875 286.141 74.0371 286.141 80.5331V198.034C286.141 204.53 280.887 209.88 274.391 209.88Z" fill="#8F96AD"/>

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 {

web/satellite/src/views/forgotPassword/forgotPassword.html

@@ -5,10 +5,16 @@
     <div :class="loadingClassName">
         <img class="loading-image" src="@/../static/images/register/Loading.gif" alt="Loading image gif">
     </div>
-    <img class="image" src="@/../static/images/AuthImage.svg" alt="Authentication image">
+    <AuthIcon
+        class="image"
+        alt="Authentication image"
+    />
     <div class="forgot-password-container__wrapper">
         <div class="forgot-password-container__header">
-            <img @click="onLogoClick" class="forgot-password-container__logo" src="@/../static/images/Logo.svg" alt="Company logo">
+            <LogoIcon
+                @click="onLogoClick" class="forgot-password-container__logo"
+                alt="Company logo"
+            />
             <div class="forgot-password-container__login-button" @click="onBackToLoginClick">
                 <p class="forgot-password-container__login-button__label">Back to Login</p>
             </div>

web/satellite/src/views/forgotPassword/forgotPassword.scss

@@ -165,6 +165,16 @@ body {
     top: 0;
     bottom: 0;
     height: 100vh;
+
+    .st1{fill:#2683FF;}
+    .st2{fill:#007AFF;}
+    .st3{fill:#0062FF;}
+    .st4{fill:#FFFFFF;}
+    .st5{fill:#6CB9FF;}
+    .st6{fill:#499FFC;}
+    .st7{fill:#F7F9F9;}
+    .st8{fill:#0F002D;}
+    .st9{fill:#DEDEFC;}
 }
 
 .loading-overlay {

web/satellite/src/views/login/LoginArea.vue

@@ -8,6 +8,10 @@ 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 LoadingLogoIcon from '@/../static/images/LogoWhite.svg';
+
 import { AuthApi } from '@/api/auth';
 import { RouteConfig } from '@/router';
 import { AuthToken } from '@/utils/authToken';
@@ -19,6 +23,9 @@ import { validateEmail, validatePassword } from '@/utils/validation';
 @Component({
     components: {
         HeaderlessInput,
+        AuthIcon,
+        LogoIcon,
+        LoadingLogoIcon,
     },
 })
 export default class Login extends Vue {

web/satellite/src/views/login/loginArea.html

@@ -3,11 +3,21 @@
 
 <div class="login-container" @keyup.enter="onLogin">
     <div :class="loadingClassName"></div>
-    <img :class="loadingLogoClassName" src="@/../static/images/LogoWhite.svg" alt="White company logo">
+    <LoadingLogoIcon
-    <img class="image" src="@/../static/images/AuthImage.svg" alt="Authentication illustration">
+        :class="loadingLogoClassName"
+        alt="White company logo"
+    />
+    <AuthIcon
+        class="image"
+        alt="Authentication illustration"
+    />
     <div class="login-container__wrapper">
         <div class="login-container__header">
-            <img class="login-container__logo" src="@/../static/images/Logo.svg" alt="Company logo" @click="onLogoClick">
+            <LogoIcon
+                class="login-container__logo"
+                alt="Company logo"
+                @click="onLogoClick"
+            />
             <div class="login-container__register-button" @click.prevent="onSignUpClick">
                 <p class="login-container__register-button__label">Create Account</p>
             </div>

web/satellite/src/views/login/loginArea.scss

@@ -226,6 +226,16 @@
     top: 0;
     bottom: 0;
     height: 100vh;
+
+    .st1{fill:#2683FF;}
+    .st2{fill:#007AFF;}
+    .st3{fill:#0062FF;}
+    .st4{fill:#FFFFFF;}
+    .st5{fill:#6CB9FF;}
+    .st6{fill:#499FFC;}
+    .st7{fill:#F7F9F9;}
+    .st8{fill:#0F002D;}
+    .st9{fill:#DEDEFC;}
 }
 
 .loading-overlay {
@@ -245,13 +255,11 @@
     transition: all 0.5s linear;
 
     &__logo {
-        position: absolute;
+        position: fixed;
-        left: calc(50% - 104px);
+        left: 50%;
         top: calc(50% - 60px);
         transform: translate(-50%);
         display: block;
-        width: 240px;
-        height: 110px;
         z-index: 200;
         visibility: hidden;
         opacity: 0;

web/satellite/src/views/register/RegisterArea.vue

@@ -10,6 +10,10 @@ import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
 import RegistrationSuccessPopup from '@/components/common/RegistrationSuccessPopup.vue';
 import VInfo from '@/components/common/VInfo.vue';
 
+import AuthIcon from '@/../static/images/AuthImage.svg';
+import InfoIcon from '@/../static/images/info.svg';
+import LogoIcon from '@/../static/images/Logo.svg';
+
 import { AuthApi } from '@/api/auth';
 import { RouteConfig } from '@/router';
 import { User } from '@/types/users';
@@ -23,6 +27,9 @@ import { validateEmail, validatePassword } from '@/utils/validation';
         HeaderlessInput,
         RegistrationSuccessPopup,
         VInfo,
+        AuthIcon,
+        LogoIcon,
+        InfoIcon,
     },
 })
 export default class RegisterArea extends Vue {

web/satellite/src/views/register/registerArea.html

@@ -5,10 +5,17 @@
     <div :class="loadingClassName">
         <img class="loading-image" src="@/../static/images/register/Loading.gif" alt="Company logo loading gif">
     </div>
-    <img class="image" src="@/../static/images/AuthImage.svg" alt="Authentication illustration">
+    <AuthIcon
+        class="image"
+        alt="Authentication illustration"
+    />
     <div class="register-container__wrapper">
         <div class="register-container__header">
-            <img class="register-container__logo" src="@/../static/images/Logo.svg" alt="Company logo" @click="onLogoClick">
+            <LogoIcon
+                class="register-container__logo"
+                alt="Company logo"
+                @click="onLogoClick"
+            />
             <div class="register-container__register-button" @click.prevent="onLoginClick">
                 <p class="register-container__register-button__label">Login</p>
             </div>
@@ -58,11 +65,7 @@
                     <VInfo
                         class="register-input__info-button"
                         bold-text="Use 6 or more characters with a mix of letters, numbers & symbols" >
-                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <InfoIcon/>
-                            <rect width="18" height="18" rx="9" fill="#007AFF"/>
-                            <path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
-                            <path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
-                        </svg>
                     </VInfo>
                 </div>
                 <div class="register-input">
@@ -79,11 +82,7 @@
                     <VInfo
                         class="register-input__info-button"
                         bold-text="Use 6 or more characters with a mix of letters, numbers & symbols">
-                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <InfoIcon/>
-                            <rect width="18" height="18" rx="9" fill="#007AFF"/>
-                            <path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
-                            <path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
-                        </svg>
                     </VInfo>
                 </div>
                 <div class="register-area__submit-container">

web/satellite/src/views/register/registerArea.scss

@@ -288,6 +288,16 @@ body {
     top: 0;
     bottom: 0;
     height: 100vh;
+
+    .st1{fill:#2683FF;}
+    .st2{fill:#007AFF;}
+    .st3{fill:#0062FF;}
+    .st4{fill:#FFFFFF;}
+    .st5{fill:#6CB9FF;}
+    .st6{fill:#499FFC;}
+    .st7{fill:#F7F9F9;}
+    .st8{fill:#0F002D;}
+    .st9{fill:#DEDEFC;}
 }
 
 @media screen and (max-width: 1500px) {

web/satellite/static/images/AuthImage.svg

@@ -1,27 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 602 939.6" style="enable-background:new 0 0 602 939.6;" xml:space="preserve">
-<style type="text/css">
-	.st0{clip-path:url(#SVGID_2_);}
-	.st1{fill:#2683FF;}
-	.st2{fill:#007AFF;}
-	.st3{fill:#0062FF;}
-	.st4{fill:#FFFFFF;}
-	.st5{fill:#6CB9FF;}
-	.st6{fill:#499FFC;}
-	.st7{fill:#F7F9F9;}
-	.st8{fill:#0F002D;}
-	.st9{fill:#DEDEFC;}
-</style>
-<g>
-	<defs>
-		<rect id="SVGID_1_" x="65.2" width="538.3" height="1080"/>
-	</defs>
-	<clipPath id="SVGID_2_">
-		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
-	</clipPath>
-	<g class="st0">
 	<rect x="67" y="1" class="st1" width="534.6" height="938.5"/>
 	<path class="st2" d="M67,939L520.5,71.5L584,87l101.8,368.9V939H163.5H67z"/>
 	<path class="st2" d="M429.3,470l-1.9-379.3c0-4.6-1.9-8.7-5-11.8c-3.1-3-7.2-5-11.8-5c-4.6,0-8.8,1.9-11.8,5c-3.1,3-5,7.2-5,11.8
@@ -178,8 +156,6 @@
 	<path class="st2" d="M310.1,742.1c2.9,0,5.4-2.4,5.4-5.4c0-2.9-2.4-5.4-5.4-5.4c-2.9,0-5.4,2.4-5.4,5.4
 		C304.7,739.7,307.1,742.1,310.1,742.1z"/>
 	<rect x="191" y="595" class="st4" width="17" height="8.9"/>
-	</g>
-</g>
 	<path class="st9" d="M186,215c-0.6,0-1.2,0-1.7,0.1c-1.1,0-2-0.5-2.6-1.5c-12.2-22.3-36-37.4-63.3-37.4c-24.8,0-46.6,12.4-59.6,31.3
 		c-0.6,0.9-1.8,1.4-2.9,1.2c-3.2-0.7-6.6-1.1-10.1-1.1c-25.4,0-46,20.5-46,45.7c0,0,0,0,0,0.1c0,1.5,1.2,2.7,2.7,2.7h218.8
 		c1.5,0,2.7-1.2,2.7-2.7v-0.1C224.3,232.1,207.2,215,186,215z"/>

web/satellite/static/images/LogoWhite.svg

@@ -1,4 +1,4 @@
-<svg width="140" height="63" viewBox="0 0 140 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="240" height="110" viewBox="0 0 140 63" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M72.5283 26.3239C72.1886 26.5786 72.0188 27.0031 72.0188 27.5126C72.0188 28.022 72.2736 28.3617 72.6981 28.6164C73.1226 28.8711 74.1415 29.2108 75.6699 29.6353C77.1983 30.0598 78.4719 30.5693 79.321 31.3335C80.1701 32.0977 80.5946 33.2015 80.5946 34.7298C80.5946 36.1733 80.0002 37.362 78.8964 38.296C77.7926 39.23 76.3492 39.6545 74.5661 39.6545C71.9339 39.6545 69.6414 38.7205 67.5187 36.7676L69.7263 34.0506C71.5094 35.5789 73.1226 36.3431 74.651 36.3431C75.3303 36.3431 75.8397 36.1733 76.2643 35.9185C76.6888 35.6638 76.8586 35.2393 76.8586 34.7298C76.8586 34.2204 76.6888 33.8807 76.2643 33.5411C75.8397 33.2864 75.0755 32.9467 73.8019 32.692C71.849 32.2675 70.4905 31.6731 69.6414 30.9089C68.7923 30.1448 68.2828 29.0409 68.2828 27.5126C68.2828 25.9842 68.8772 24.7106 69.981 23.8615C71.0848 23.0124 72.5283 22.5879 74.1415 22.5879C75.2454 22.5879 76.3492 22.7577 77.453 23.1823C78.5568 23.5219 79.4908 24.1162 80.3399 24.7955L78.4719 27.5126C77.0284 26.4088 75.585 25.8993 74.0566 25.8993C73.3774 25.8993 72.8679 26.0691 72.5283 26.3239Z" fill="white"/>
     <path d="M89.6799 26.2382V39.484H86.0289V26.2382H81.3589V23.0117H94.3499V26.2382H89.6799Z" fill="white"/>
     <path d="M109.548 37.1913C107.85 38.8045 105.812 39.6536 103.435 39.6536C101.057 39.6536 98.9347 38.8045 97.3215 37.1913C95.6233 35.578 94.8591 33.5402 94.8591 31.1627C94.8591 28.7853 95.7082 26.7475 97.3215 25.1342C99.0196 23.521 101.057 22.6719 103.435 22.6719C105.897 22.6719 107.935 23.521 109.548 25.1342C111.246 26.7475 112.011 28.7853 112.011 31.1627C112.011 33.5402 111.246 35.578 109.548 37.1913ZM108.275 31.1627C108.275 29.7193 107.765 28.4457 106.831 27.4268C105.897 26.4079 104.709 25.8984 103.35 25.8984C101.991 25.8984 100.803 26.4079 99.8687 27.4268C98.9347 28.4457 98.4253 29.7193 98.4253 31.1627C98.4253 32.6062 98.9347 33.8798 99.8687 34.8987C100.803 35.9176 101.991 36.4271 103.35 36.4271C104.709 36.4271 105.897 35.9176 106.831 34.8987C107.85 33.8798 108.275 32.6062 108.275 31.1627Z" fill="white"/>

web/satellite/static/images/account/BlackArrowExpand.svg

@@ -1,3 +0,0 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.266267 0.254166C0.621289 -0.0847221 1.19689 -0.0847221 1.55192 0.254166L5 3.54555L8.44808 0.254166C8.80311 -0.0847221 9.37871 -0.0847221 9.73373 0.254166C10.0888 0.593054 10.0888 1.1425 9.73373 1.48139L5 6L0.266267 1.48139C-0.0887555 1.1425 -0.0887555 0.593054 0.266267 0.254166Z" fill="#354049"/>
-</svg>

web/satellite/static/images/account/BlackArrowHide.svg

@@ -1,3 +0,0 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.73373 5.74583C9.37871 6.08472 8.80311 6.08472 8.44808 5.74583L5 2.45445L1.55192 5.74583C1.19689 6.08472 0.621288 6.08472 0.266267 5.74583C-0.0887565 5.40694 -0.0887565 4.8575 0.266267 4.51861L5 -4.37114e-07L9.73373 4.51861C10.0888 4.8575 10.0888 5.40695 9.73373 5.74583Z" fill="#354049"/>
-</svg>

web/satellite/static/images/account/changePasswordPopup/changePassword.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#2683FF"/>
+    <path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#FEFEFF"/>
+    <path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#FEFEFF"/>
+</svg>

web/satellite/static/images/account/deleteAccountPopup/deleteAccount.svg

@@ -0,0 +1,30 @@
+<svg width="240" height="187" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.3168 98C21.4071 98 20 96.5077 20 94.6174C20.9046 68.9496 31.8599 45.769 49.0467 28.7566C66.2335 11.7442 89.6518 0.900089 115.583 0.00470057C117.492 -0.094787 119 1.39753 119 3.28779V32.4377C119 34.2284 117.593 35.6213 115.784 35.7208C99.7025 36.5167 85.2294 43.3813 74.4751 53.927C63.8213 64.5722 56.8863 78.8984 56.0822 94.8164C55.9817 96.6072 54.5746 98 52.7655 98H23.3168Z" fill="#B0B6C9"/>
+    <path d="M117.5 30C124.404 30 130 25.0751 130 19C130 12.9249 124.404 8 117.5 8C110.596 8 105 12.9249 105 19C105 25.0751 110.596 30 117.5 30Z" fill="#8F96AD"/>
+    <path d="M112.5 97C116.09 97 119 94.3137 119 91C119 87.6863 116.09 85 112.5 85C108.91 85 106 87.6863 106 91C106 94.3137 108.91 97 112.5 97Z" fill="#B0B6C9"/>
+    <path d="M15.0005 282C23.226 282 30 274.575 30 265.5C30 256.425 23.226 249 15.0005 249C6.77499 249 0.00102409 256.425 0.00102409 265.5C-0.0957468 274.678 6.67822 282 15.0005 282Z" fill="#8F96AD"/>
+    <path d="M15.5 274C19.0286 274 22 270.9 22 267C22 263.2 19.1214 260 15.5 260C11.9714 260 9 263.1 9 267C9 270.9 11.8786 274 15.5 274Z" fill="white"/>
+    <path d="M282.587 111H307.413C309.906 111 312 108.955 312 106.5C312 104.045 309.906 102 307.413 102H282.587C280.094 102 278 104.045 278 106.5C278 108.955 280.094 111 282.587 111Z" fill="white"/>
+    <path d="M282.585 93H289.415C291.951 93 294 91.02 294 88.5C294 85.98 291.951 84 289.415 84H282.585C280.049 84 278 85.98 278 88.5C278 91.02 279.951 93 282.585 93Z" fill="#E8EAF2"/>
+    <path d="M252.872 92H260.128C262.823 92 265 90.4091 265 88.5C265 86.5909 262.823 85 260.128 85H252.872C250.177 85 248 86.5909 248 88.5C248 90.4091 250.177 92 252.872 92Z" fill="#363840"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M45 166C48.8182 166 52 162.818 52 159C52 155.182 48.8182 152 45 152C41.1818 152 38 155.182 38 159C38 162.818 41.1818 166 45 166Z" fill="#B0B6C9"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M217 232C220.818 232 224 228.818 224 225C224 221.182 220.818 218 217 218C213.182 218 210 221.182 210 225C210 228.818 213.182 232 217 232Z" fill="#2683FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26 142C29.8182 142 33 139.045 33 135.5C33 131.955 29.8182 129 26 129C22.1818 129 19 131.955 19 135.5C19 139.045 22.1818 142 26 142Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M45 142C48.8182 142 52 139.045 52 135.5C52 131.955 48.8182 129 45 129C41.1818 129 38 131.955 38 135.5C38 139.045 41.1818 142 45 142Z" fill="#E8EAF2"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M64 142C67.8182 142 71 139.045 71 135.5C71 131.955 67.8182 129 64 129C60.1818 129 57 131.955 57 135.5C57 139.045 60.1818 142 64 142Z" fill="white"/>
+    <path d="M107.014 129.651C107.014 129.651 152.017 118.395 199.527 125.169C212.857 127.061 224.785 134.831 232.001 146.186C245.031 166.606 263.374 203.062 259.465 241.112L239.018 246.093C239.018 246.093 224.885 200.97 209.049 182.643C209.049 182.643 190.205 225.275 191.208 248.683C191.208 249.38 191.308 249.977 191.308 250.575C193.513 273.485 101 254.858 101 254.858L107.014 129.651Z" fill="#F5F6FA"/>
+    <path d="M143 89.7894L145.01 121.569C145.211 124.568 147.12 127.066 149.833 127.865C156.063 129.664 167.821 131.863 179.276 127.266C181.387 126.466 182.492 123.968 181.789 121.669L166.514 73L143 89.7894Z" fill="#8F96AD"/>
+    <path d="M189 61.014C189 61.014 186.474 85.2772 181.219 95.8484C175.964 106.42 174.448 114.272 161.412 109.641C148.376 105.01 141.707 93.5328 142.01 80.2434C142.01 80.2434 142.414 59.7052 147.972 54.3692C153.631 49.0333 189 61.014 189 61.014Z" fill="#B0B6C9"/>
+    <path d="M150.596 75.686L152.115 76.4754C152.115 76.4754 153.128 60.6872 159.814 61.4766C166.5 62.266 190.609 69.8641 199.625 64.9303C208.235 60.1938 191.521 44.2082 180.074 40.4585C163.866 35.0313 150.798 35.5247 144.822 45.2936C144.416 45.8857 143.606 45.8857 143.201 45.2936C142.492 44.0108 128.209 53.9772 132.97 65.917C133.172 66.5091 138.946 83.4815 140.567 83.9748C140.972 84.0735 141.479 83.8762 141.681 83.4815L146.24 74.4032C146.442 73.9098 147.05 73.7125 147.557 74.0085L150.596 75.686Z" fill="#0F002D"/>
+    <path d="M149.877 78.0283C149.877 78.0283 154.31 62.6808 145.56 63.0051C136.81 63.3293 139.844 79.7576 144.744 83L149.877 78.0283Z" fill="#B0B6C9"/>
+    <path d="M106.635 221.07C104.63 206.983 119.272 186.154 125.289 178.305C126.994 176.092 127.996 173.274 127.996 170.457C128.197 150.433 119.773 137.553 106.335 129C106.335 129 57.5953 185.953 70.0308 229.724C71.3345 234.453 73.4406 238.478 76.048 242C78.0538 225.397 97.1082 221.875 106.635 221.07Z" fill="#F5F6FA"/>
+    <path d="M107.966 215L106 214.798C107.655 200.851 120.172 183.67 125.448 177L127 178.112C121.828 184.681 109.621 201.559 107.966 215Z" fill="#0F002D"/>
+    <path d="M107.128 221.954C106.926 221.337 106.825 220.617 106.725 220C97.054 220.823 78.0147 224.423 76 241.29C97.8599 270.808 158 260.111 158 260.111V248.592C158.101 248.695 111.862 239.953 107.128 221.954Z" fill="#B0B6C9"/>
+    <path d="M152 257C152 257 160.863 236.189 176.575 243.593C192.187 250.997 190.978 255.799 190.978 255.799L152 257Z" fill="#B0B6C9"/>
+    <path d="M271.213 238H136.787C134.194 238 132 235.787 132 233.172V139.828C132 137.213 134.194 135 136.787 135H271.213C273.806 135 276 137.213 276 139.828V233.172C276 235.787 273.906 238 271.213 238Z" fill="#363840"/>
+    <path d="M217.252 258H195.744C193.109 258 191 256 191 253.5V190.5C191 188 193.109 186 195.744 186H217.252C219.888 186 221.996 188 221.996 190.5V253.5C222.102 255.9 219.888 258 217.252 258Z" fill="#363840"/>
+    <path d="M246.189 254H150.811C149.305 254 148 255.444 148 257.111V258.889C148 260.556 149.305 262 150.811 262H246.189C247.695 262 249 260.556 249 258.889V257.111C249 255.444 247.795 254 246.189 254Z" fill="#363840"/>
+    <path d="M350.452 224.555C349.952 224.555 349.553 224.555 349.154 224.654C348.355 224.754 347.557 224.256 347.257 223.56C337.873 206.543 319.705 195 298.742 195C279.775 195 263.004 204.454 253.121 218.883C252.622 219.579 251.724 219.878 250.925 219.778C248.429 219.281 245.834 218.982 243.239 218.982C223.772 219.082 208 234.605 208 253.91C208 253.91 208 253.91 208 254.01C208 255.104 208.898 256 210.096 256H377.904C379.002 256 380 255.104 380 254.01V253.91C379.8 237.591 366.623 224.555 350.452 224.555Z" fill="#B0B6C9"/>
+    <path d="M206 195C210.418 195 214 191.194 214 186.5C214 181.806 210.418 178 206 178C201.582 178 198 181.806 198 186.5C198 191.194 201.582 195 206 195Z" fill="white"/>
+</svg>

web/satellite/static/images/account/profile/changePassword.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
+    <path d="M29.5001 34.5196C30.1001 34.5196 30.5865 34.0452 30.5865 33.46C30.5865 32.8748 30.1001 32.4004 29.5001 32.4004C28.9 32.4004 28.4136 32.8748 28.4136 33.46C28.4136 34.0452 28.9 34.5196 29.5001 34.5196Z" fill="#354049"/>
+    <path d="M39.9405 40.2152C40.1781 40 40.3139 39.6854 40.3139 39.3709V25.5464C40.3139 24.9007 39.7707 24.3709 39.1086 24.3709H35.7473V21.0927C35.7473 17.7318 32.9462 15 29.5 15C26.0538 15 23.2527 17.7318 23.2527 21.0927V24.3709H19.8914C19.2293 24.3709 18.686 24.9007 18.686 25.5464V39.3709C18.686 39.6854 18.8218 40 19.0595 40.2152L23.7959 44.6689C24.0166 44.8841 24.3222 45 24.6278 45H34.3552C34.6608 45 34.9664 44.8841 35.1871 44.6689L39.9405 40.2152ZM30.7053 36.6391V38.1291C30.7053 38.7748 30.1621 39.3046 29.5 39.3046C28.8379 39.3046 28.2947 38.7748 28.2947 38.1291V36.6391C26.9705 36.1589 26.0198 34.9172 26.0198 33.4437C26.0198 31.5728 27.5817 30.0497 29.5 30.0497C31.4183 30.0497 32.9801 31.5728 32.9801 33.4437C32.9801 34.9172 32.0295 36.1589 30.7053 36.6391ZM33.3367 24.3709H25.6464V21.0927C25.6464 19.0232 27.3779 17.351 29.483 17.351C31.5881 17.351 33.3197 19.0397 33.3197 21.0927V24.3709H33.3367Z" fill="#354049"/>
+</svg>

web/satellite/static/images/account/profile/email.svg

@@ -0,0 +1,4 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M30 60C46.5685 60 60 46.5685 60 30C60 13.4315 46.5685 0 30 0C13.4315 0 0 13.4315 0 30C0 46.5685 13.4315 60 30 60Z" fill="#E8EAF2"/>
+    <path d="M29.9998 16.7598C25.7965 16.7641 21.8459 18.7646 19.3534 22.1498C16.8607 25.535 16.1236 29.9013 17.3671 33.9162C18.6096 37.9314 21.6853 41.1186 25.6546 42.5032C29.6238 43.8868 34.014 43.305 37.4846 40.9348L35.9861 38.7538C33.3633 40.552 30.0711 41.0781 27.0174 40.1856C23.9649 39.2931 21.4732 37.077 20.2319 34.1482C18.9905 31.2203 19.1294 27.8888 20.6104 25.0734C22.0924 22.2591 24.7588 20.2577 27.8761 19.6232C30.9922 18.9878 34.2296 19.7862 36.6938 21.7976C39.1581 23.809 40.5898 26.8202 40.592 30.0007V31.0365C40.592 32.8762 39.8001 33.9732 38.4723 33.9732V33.995L38.4734 33.9961C38.3892 33.9819 38.305 33.9743 38.2208 33.9743H37.9408C37.1959 33.9743 36.0868 32.8903 36.0868 32.1597V30.0007C36.0989 28.1019 35.2293 26.3038 33.7331 25.1345C32.2358 23.9653 30.2824 23.5563 28.4417 24.0277C26.602 24.498 25.085 25.7963 24.3335 27.5408C23.5832 29.2854 23.6838 31.2794 24.6069 32.9395C25.529 34.5987 27.1696 35.7373 29.0475 36.0206C30.9254 36.3039 32.8286 35.6991 34.2 34.3855C35.0597 35.6542 36.521 36.6255 37.9386 36.6255V36.6025C38.0228 36.6178 38.1092 36.6255 38.1956 36.6255H38.4756C41.326 36.6255 43.2356 34.3855 43.2356 31.042V30.0007C43.2312 26.4909 41.8356 23.1265 39.3551 20.6448C36.8734 18.1631 33.5101 16.7654 30.0003 16.7598L29.9998 16.7598ZM29.9998 33.4416C28.6075 33.4416 27.353 32.6038 26.8204 31.3176C26.2878 30.0313 26.582 28.5515 27.5664 27.567C28.5508 26.5824 30.0306 26.2884 31.317 26.821C32.6032 27.3537 33.441 28.6082 33.441 30.0004C33.441 31.9014 31.901 33.4413 30.0001 33.4413L29.9998 33.4416Z" fill="#354049"/>
+</svg>

web/satellite/static/images/apiKeys/Vector.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 8.3L5.52941 11L14 2" stroke="#2683FF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

web/satellite/static/images/apiKeys/avatar.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 6C0 2.68629 2.68629 0 6 0H24C27.3137 0 30 2.68629 30 6V24C30 27.3137 27.3137 30 24 30H6C2.68629 30 0 27.3137 0 24V6Z" fill="#2683FF"/>
+    <path d="M11.9184 11C13.4286 11 14.7239 11.8848 15.3777 13.1667H22.0408C22.1155 13.1667 22.1875 13.1921 22.2449 13.2396L23.8776 14.5886C23.9573 14.6537 24.0026 14.7533 23.9994 14.8581C23.9968 14.9623 23.9458 15.0593 23.8623 15.1198L21.5766 16.7708C21.456 16.8581 21.2928 16.8516 21.1786 16.7552L20.4082 16.099L19.6378 16.7552C19.5172 16.8581 19.3406 16.8581 19.2194 16.7552L18.449 16.099L17.6786 16.7552C17.6205 16.8053 17.5465 16.8327 17.4694 16.8333H15.3724C14.7174 18.112 13.426 19 11.9184 19C9.75837 19 8 17.205 8 15C8 12.795 9.75837 11 11.9184 11H11.9184Z" fill="white"/>
+    <path d="M10.7754 13.666C11.4928 13.666 12.0815 14.2669 12.0815 14.9993C12.0815 15.7318 11.4928 16.3327 10.7754 16.3327C10.0579 16.3327 9.46924 15.7318 9.46924 14.9993C9.46924 14.2669 10.0579 13.666 10.7754 13.666Z" fill="#2683FF"/>
+    <path d="M10.7756 14.334C10.4108 14.334 10.1226 14.6283 10.1226 15.0007C10.1226 15.3731 10.4108 15.6673 10.7756 15.6673C11.1404 15.6673 11.4287 15.3731 11.4287 15.0007C11.4287 14.6283 11.1404 14.334 10.7756 14.334Z" fill="#2683FF"/>
+</svg>

web/satellite/static/images/apiKeys/copyButtonLabel.svg

@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.3763 7.7002H3.34383C2.46383 7.7002 1.76001 8.40402 1.76001 9.28402V19.3378C1.76001 20.1954 2.46383 20.9216 3.34383 20.9216H13.3976C14.2553 20.9216 14.9814 20.2178 14.9814 19.3378L14.9823 9.28402C14.96 8.40402 14.2561 7.7002 13.3761 7.7002H13.3763ZM13.6401 19.3164C13.6401 19.4488 13.5301 19.5588 13.3977 19.5588L3.34397 19.5579C3.21162 19.5579 3.10161 19.4479 3.10161 19.3156L3.10247 9.284C3.10247 9.15165 3.21247 9.04164 3.34483 9.04164H13.3986C13.5309 9.04164 13.641 9.15164 13.641 9.284L13.6401 19.3164Z" fill="white"/>
+    <path d="M18.6563 1.09974H8.62386C7.74386 1.09974 7.04004 1.80356 7.04004 2.68356V6.37978H8.36004V2.68356C8.36004 2.55122 8.47004 2.44121 8.60239 2.44121H18.6562C18.7885 2.44121 18.8985 2.55121 18.8985 2.68356V12.7373C18.8985 12.8697 18.7885 12.9797 18.6562 12.9797H16.2799V14.2997H18.6562C19.5138 14.2997 20.24 13.5959 20.24 12.7159V2.68343C20.24 1.80343 19.5362 1.09961 18.6562 1.09961L18.6563 1.09974Z" fill="#354049"/>
+    <rect x="2.93335" y="8.7998" width="11.7333" height="11" fill="white"/>
+    <rect x="7.1001" y="1.2334" width="12.9333" height="12.9333" rx="1.5" fill="white" stroke="#2683FF"/>
+</svg>

web/satellite/static/images/buckets/noBucketState/arrow.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.916504 6.51758H17.4412V8.64949H0.916504V6.51758Z" fill="#FAFAFD"/>
+    <path d="M12.8575 14.7272L11.3643 13.234L17.0154 7.58383L11.3643 1.93367L12.8575 0.44043L19.9999 7.58385L12.8575 14.7272Z" fill="#FAFAFD"/>
+</svg>

web/satellite/static/images/buckets/noBucketState/folder.svg

@@ -0,0 +1,8 @@
+<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M39 74C58.335 74 74 58.3243 74 38.9877C74 19.6511 58.335 4 39 4C19.665 4 4 19.6757 4 39.0123C4 58.3489 19.665 74 39 74Z" fill="#E8EAF2"/>
+    <path d="M38.842 25.8065V25.2764C38.842 24.4101 38.1258 23.7119 37.2438 23.7119H20.5455C19.6635 23.7119 18.9473 24.4101 18.9473 25.2699V53.4107H58.7367V27.358C58.7367 26.4982 58.0205 25.8 57.1385 25.8H38.842V25.8065Z" fill="#B0B6C9"/>
+    <path d="M57.3376 28.0498H20.7114V53.6952H57.3376V28.0498Z" fill="white"/>
+    <path d="M38.2717 31.2568L37.6815 32.8536H20.5455C19.6635 32.8536 18.9473 33.5518 18.9473 34.4181V54.2906C18.9473 55.1504 19.6635 55.8486 20.5455 55.8486H57.1319C58.0139 55.8486 58.7301 55.1504 58.7301 54.2906V31.7934C58.7301 30.9336 58.0139 30.2354 57.1319 30.2354H39.7837C39.1073 30.229 38.5038 30.6427 38.2717 31.2568Z" fill="#B0B6C9"/>
+    <path d="M58.7367 54.2834V41.3281C47.6819 51.8139 28.5167 54.6131 19.3916 55.363C19.6834 55.6604 20.0945 55.8478 20.5455 55.8478H57.1319C58.0205 55.8478 58.7367 55.1496 58.7367 54.2834Z" fill="#8F96AD"/>
+    <path d="M35.1082 34.1133H21.5798C20.8636 34.1133 20.2866 34.6757 20.2866 35.3739V38.1666C22.5613 36.641 27.6941 34.7274 35.1082 34.1133Z" fill="#B0B6C9"/>
+</svg>

web/satellite/static/images/buckets/notification.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="40" height="40" rx="10" fill="#2683FF"/>
+    <path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/>
+</svg>

web/satellite/static/images/common/BlackArrowExpand.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.266267 0.254166C0.621289 -0.0847221 1.19689 -0.0847221 1.55192 0.254166L5 3.54555L8.44808 0.254166C8.80311 -0.0847221 9.37871 -0.0847221 9.73373 0.254166C10.0888 0.593054 10.0888 1.1425 9.73373 1.48139L5 6L0.266267 1.48139C-0.0887555 1.1425 -0.0887555 0.593054 0.266267 0.254166Z" fill="#354049"/>
+</svg>

web/satellite/static/images/common/BlackArrowHide.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.73373 5.74583C9.37871 6.08472 8.80311 6.08472 8.44808 5.74583L5 2.45445L1.55192 5.74583C1.19689 6.08472 0.621288 6.08472 0.266267 5.74583C-0.0887565 5.40694 -0.0887565 4.8575 0.266267 4.51861L5 -4.37114e-07L9.73373 4.51861C10.0888 4.8575 10.0888 5.40695 9.73373 5.74583Z" fill="#354049"/>
+</svg>

web/satellite/static/images/common/BlueExpand.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.372773 0.338888C0.869804 -0.112963 1.67565 -0.112963 2.17268 0.338888L7 4.72741L11.8273 0.338888C12.3243 -0.112963 13.1302 -0.112963 13.6272 0.338888C14.1243 0.790739 14.1243 1.52333 13.6272 1.97519L7 8L0.372773 1.97519C-0.124258 1.52333 -0.124258 0.790739 0.372773 0.338888Z" fill="#2683FF"/>
+</svg>

web/satellite/static/images/common/BlueHide.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6272 7.66111C13.1302 8.11296 12.3243 8.11296 11.8273 7.66111L7 3.27259L2.17268 7.66111C1.67565 8.11296 0.869804 8.11296 0.372774 7.66111C-0.124258 7.20926 -0.124258 6.47666 0.372774 6.02481L7 -6.11959e-07L13.6272 6.02481C14.1243 6.47667 14.1243 7.20926 13.6272 7.66111Z" fill="#2683FF"/>
+</svg>

web/satellite/static/images/common/bottomArrow.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="arrow-svg-path" d="M4.26316 6L1.90735e-06 0L9 1.59559e-06L4.26316 6Z" fill="#354049"/>
+</svg>

web/satellite/static/images/common/checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect class="checkbox-container__image__rect" x="0.75" y="0.75" width="21.5" height="21.5" rx="3.25" stroke="#384B65" stroke-opacity="0.4" stroke-width="1.5"/>
+</svg>

web/satellite/static/images/common/closeCross.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
+</svg>

web/satellite/static/images/common/edit.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect class="edit-svg__rect" width="40" height="40" rx="4" fill="#E2ECF7"/>
+    <path class="edit-svg__path" d="M19.0901 21.4605C19.3416 21.7259 19.6695 21.8576 19.9995 21.8576C20.3295 21.8576 20.6574 21.7259 20.9089 21.4605L28.6228 13.3181C29.1257 12.7871 29.1257 11.9291 28.6228 11.3982C28.1198 10.8673 27.3069 10.8673 26.8039 11.3982L19.0901 19.5406C18.5891 20.0715 18.5891 20.9295 19.0901 21.4605ZM27.7134 19.1435C27.0031 19.1435 26.4277 19.7509 26.4277 20.5005V27.2859H13.5713V13.7152H19.9995C20.7097 13.7152 21.2851 13.1078 21.2851 12.3581C21.2851 11.6085 20.7097 11.0011 19.9995 11.0011H13.5713C12.1508 11.0011 11 12.2158 11 13.7152V27.2859C11 28.7852 12.1508 30 13.5713 30H26.4277C27.8482 30 28.999 28.7852 28.999 27.2859V20.5005C28.999 19.7509 28.4236 19.1435 27.7134 19.1435Z" fill="#2683FF"/>
+</svg>

web/satellite/static/images/common/emptySearchResult.svg

@@ -0,0 +1,30 @@
+<svg width="254" height="195" viewBox="0 0 380 295" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M168 295C246.997 295 311 231.2 311 152.5C311 73.8 246.997 10 168 10C89.0028 10 25 73.8 25 152.5C25 231.2 89.0028 295 168 295Z" fill="#E8EAF2"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.3168 98C21.4071 98 20 96.5077 20 94.6174C20.9046 68.9496 31.8599 45.769 49.0467 28.7566C66.2335 11.7442 89.6518 0.900089 115.583 0.00470057C117.492 -0.094787 119 1.39753 119 3.28779V32.4377C119 34.2284 117.593 35.6213 115.784 35.7208C99.7025 36.5167 85.2294 43.3813 74.4751 53.927C63.8213 64.5722 56.8863 78.8984 56.0822 94.8164C55.9817 96.6072 54.5746 98 52.7655 98H23.3168Z" fill="#B0B6C9"/>
+    <path d="M117.5 30C124.404 30 130 25.0751 130 19C130 12.9249 124.404 8 117.5 8C110.596 8 105 12.9249 105 19C105 25.0751 110.596 30 117.5 30Z" fill="#8F96AD"/>
+    <path d="M112.5 97C116.09 97 119 94.3137 119 91C119 87.6863 116.09 85 112.5 85C108.91 85 106 87.6863 106 91C106 94.3137 108.91 97 112.5 97Z" fill="#B0B6C9"/>
+    <path d="M15.0005 282C23.226 282 30 274.575 30 265.5C30 256.425 23.226 249 15.0005 249C6.77499 249 0.00102409 256.425 0.00102409 265.5C-0.0957468 274.678 6.67822 282 15.0005 282Z" fill="#8F96AD"/>
+    <path d="M15.5 274C19.0286 274 22 270.9 22 267C22 263.2 19.1214 260 15.5 260C11.9714 260 9 263.1 9 267C9 270.9 11.8786 274 15.5 274Z" fill="white"/>
+    <path d="M282.587 111H307.413C309.906 111 312 108.955 312 106.5C312 104.045 309.906 102 307.413 102H282.587C280.094 102 278 104.045 278 106.5C278 108.955 280.094 111 282.587 111Z" fill="white"/>
+    <path d="M282.585 93H289.415C291.951 93 294 91.02 294 88.5C294 85.98 291.951 84 289.415 84H282.585C280.049 84 278 85.98 278 88.5C278 91.02 279.951 93 282.585 93Z" fill="#E8EAF2"/>
+    <path d="M252.872 92H260.128C262.823 92 265 90.4091 265 88.5C265 86.5909 262.823 85 260.128 85H252.872C250.177 85 248 86.5909 248 88.5C248 90.4091 250.177 92 252.872 92Z" fill="#363840"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M45 166C48.8182 166 52 162.818 52 159C52 155.182 48.8182 152 45 152C41.1818 152 38 155.182 38 159C38 162.818 41.1818 166 45 166Z" fill="#B0B6C9"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M217 232C220.818 232 224 228.818 224 225C224 221.182 220.818 218 217 218C213.182 218 210 221.182 210 225C210 228.818 213.182 232 217 232Z" fill="#2683FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26 142C29.8182 142 33 139.045 33 135.5C33 131.955 29.8182 129 26 129C22.1818 129 19 131.955 19 135.5C19 139.045 22.1818 142 26 142Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M45 142C48.8182 142 52 139.045 52 135.5C52 131.955 48.8182 129 45 129C41.1818 129 38 131.955 38 135.5C38 139.045 41.1818 142 45 142Z" fill="#E8EAF2"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M64 142C67.8182 142 71 139.045 71 135.5C71 131.955 67.8182 129 64 129C60.1818 129 57 131.955 57 135.5C57 139.045 60.1818 142 64 142Z" fill="white"/>
+    <path d="M107.014 129.651C107.014 129.651 152.017 118.395 199.527 125.169C212.857 127.061 224.785 134.831 232.001 146.186C245.031 166.606 263.374 203.062 259.465 241.112L239.018 246.093C239.018 246.093 224.885 200.97 209.049 182.643C209.049 182.643 190.205 225.275 191.208 248.683C191.208 249.38 191.308 249.977 191.308 250.575C193.513 273.485 101 254.858 101 254.858L107.014 129.651Z" fill="#F5F6FA"/>
+    <path d="M143 89.7894L145.01 121.569C145.211 124.568 147.12 127.066 149.833 127.865C156.063 129.664 167.821 131.863 179.276 127.266C181.387 126.466 182.492 123.968 181.789 121.669L166.514 73L143 89.7894Z" fill="#8F96AD"/>
+    <path d="M189 61.014C189 61.014 186.474 85.2772 181.219 95.8484C175.964 106.42 174.448 114.272 161.412 109.641C148.376 105.01 141.707 93.5328 142.01 80.2434C142.01 80.2434 142.414 59.7052 147.972 54.3692C153.631 49.0333 189 61.014 189 61.014Z" fill="#B0B6C9"/>
+    <path d="M150.596 75.686L152.115 76.4754C152.115 76.4754 153.128 60.6872 159.814 61.4766C166.5 62.266 190.609 69.8641 199.625 64.9303C208.235 60.1938 191.521 44.2082 180.074 40.4585C163.866 35.0313 150.798 35.5247 144.822 45.2936C144.416 45.8857 143.606 45.8857 143.201 45.2936C142.492 44.0108 128.209 53.9772 132.97 65.917C133.172 66.5091 138.946 83.4815 140.567 83.9748C140.972 84.0735 141.479 83.8762 141.681 83.4815L146.24 74.4032C146.442 73.9098 147.05 73.7125 147.557 74.0085L150.596 75.686Z" fill="#0F002D"/>
+    <path d="M149.877 78.0283C149.877 78.0283 154.31 62.6808 145.56 63.0051C136.81 63.3293 139.844 79.7576 144.744 83L149.877 78.0283Z" fill="#B0B6C9"/>
+    <path d="M106.635 221.07C104.63 206.983 119.272 186.154 125.289 178.305C126.994 176.092 127.996 173.274 127.996 170.457C128.197 150.433 119.773 137.553 106.335 129C106.335 129 57.5953 185.953 70.0308 229.724C71.3345 234.453 73.4406 238.478 76.048 242C78.0538 225.397 97.1082 221.875 106.635 221.07Z" fill="#F5F6FA"/>
+    <path d="M107.966 215L106 214.798C107.655 200.851 120.172 183.67 125.448 177L127 178.112C121.828 184.681 109.621 201.559 107.966 215Z" fill="#0F002D"/>
+    <path d="M107.128 221.954C106.926 221.337 106.825 220.617 106.725 220C97.054 220.823 78.0147 224.423 76 241.29C97.8599 270.808 158 260.111 158 260.111V248.592C158.101 248.695 111.862 239.953 107.128 221.954Z" fill="#B0B6C9"/>
+    <path d="M152 257C152 257 160.863 236.189 176.575 243.593C192.187 250.997 190.978 255.799 190.978 255.799L152 257Z" fill="#B0B6C9"/>
+    <path d="M271.213 238H136.787C134.194 238 132 235.787 132 233.172V139.828C132 137.213 134.194 135 136.787 135H271.213C273.806 135 276 137.213 276 139.828V233.172C276 235.787 273.906 238 271.213 238Z" fill="#363840"/>
+    <path d="M217.252 258H195.744C193.109 258 191 256 191 253.5V190.5C191 188 193.109 186 195.744 186H217.252C219.888 186 221.996 188 221.996 190.5V253.5C222.102 255.9 219.888 258 217.252 258Z" fill="#363840"/>
+    <path d="M246.189 254H150.811C149.305 254 148 255.444 148 257.111V258.889C148 260.556 149.305 262 150.811 262H246.189C247.695 262 249 260.556 249 258.889V257.111C249 255.444 247.795 254 246.189 254Z" fill="#363840"/>
+    <path d="M350.452 224.555C349.952 224.555 349.553 224.555 349.154 224.654C348.355 224.754 347.557 224.256 347.257 223.56C337.873 206.543 319.705 195 298.742 195C279.775 195 263.004 204.454 253.121 218.883C252.622 219.579 251.724 219.878 250.925 219.778C248.429 219.281 245.834 218.982 243.239 218.982C223.772 219.082 208 234.605 208 253.91C208 253.91 208 253.91 208 254.01C208 255.104 208.898 256 210.096 256H377.904C379.002 256 380 255.104 380 254.01V253.91C379.8 237.591 366.623 224.555 350.452 224.555Z" fill="#B0B6C9"/>
+    <path d="M206 195C210.418 195 214 191.194 214 186.5C214 181.806 210.418 178 206 178C201.582 178 198 181.806 198 186.5C198 191.194 201.582 195 206 195Z" fill="white"/>
+</svg>

web/satellite/static/images/common/paginationLeft.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="pagination-svg-path" d="M2.80077e-07 4.26316L6 0L6 9L2.80077e-07 4.26316Z" fill="#354049"/>
+</svg>

web/satellite/static/images/common/paginationRight.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="pagination-svg-path" d="M6 4.73684L0 9L1.20219e-06 -9.53674e-07L6 4.73684Z" fill="#354049"/>
+</svg>

web/satellite/static/images/common/passwordHidden.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
+    <path d="M11.6116 9.96328C11.6116 10.8473 10.8956 11.5633 10.0116 11.5633C9.12763 11.5633 8.41162 10.8473 8.41162 9.96328C8.41162 9.07929 9.12763 8.36328 10.0116 8.36328C10.8956 8.36328 11.6116 9.07929 11.6116 9.96328Z" fill="#AFB7C1"/>
+</svg>

web/satellite/static/images/common/passwordShown.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="input-wrap__image__path" d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
+    <path d="M11.6121 9.96328C11.6121 10.8473 10.8961 11.5633 10.0121 11.5633C9.12812 11.5633 8.41211 10.8473 8.41211 9.96328C8.41211 9.07929 9.12812 8.36328 10.0121 8.36328C10.8961 8.36328 11.6121 9.07929 11.6121 9.96328Z" fill="#AFB7C1"/>
+    <mask id="path-3-inside-1" fill="white">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z"/>
+    </mask>
+    <path class="input-wrap__image__path" fill-rule="evenodd" clip-rule="evenodd" d="M5 16.5L16 1L16.8155 1.57875L5.81551 17.0787L5 16.5Z" fill="white"/>
+    <path class="input-wrap__image__path" d="M16 1L16.5787 0.184493L15.7632 -0.394254L15.1845 0.421253L16 1ZM5 16.5L4.18449 15.9213L3.60575 16.7368L4.42125 17.3155L5 16.5ZM16.8155 1.57875L17.631 2.15749L18.2098 1.34199L17.3943 0.76324L16.8155 1.57875ZM5.81551 17.0787L5.23676 17.8943L6.05227 18.473L6.63101 17.6575L5.81551 17.0787ZM15.1845 0.421253L4.18449 15.9213L5.81551 17.0787L16.8155 1.57875L15.1845 0.421253ZM17.3943 0.76324L16.5787 0.184493L15.4213 1.81551L16.2368 2.39425L17.3943 0.76324ZM6.63101 17.6575L17.631 2.15749L16 1L5 16.5L6.63101 17.6575ZM4.42125 17.3155L5.23676 17.8943L6.39425 16.2632L5.57875 15.6845L4.42125 17.3155Z" fill="white" mask="url(#path-3-inside-1)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.5L16 2L16.8155 2.57875L5.81551 18.0787L5 17.5Z" fill="#AFB7C1"/>
+</svg>

web/satellite/static/images/common/topArrow.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="arrow-svg-path" d="M4.73684 5.70565e-07L9 6L-9.53674e-07 6L4.73684 5.70565e-07Z" fill="#354049"/>
+</svg>

web/satellite/static/images/errors/404.svg

@@ -0,0 +1,37 @@
+<svg width="321" height="312" viewBox="0 0 321 312" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M167.6 295.102C246.1 295.102 309.7 231.302 309.7 152.602C309.7 73.9016 246.1 10.1016 167.6 10.1016C89.1 10.1016 25.5 73.9016 25.5 152.602C25.5 231.302 89.1 295.102 167.6 295.102Z" fill="#2683FF"/>
+    <path d="M209.3 200.2H119.7C117.3 200.2 115.4 198.3 115.4 195.9C115.4 193.5 117.3 191.6 119.7 191.6H209.3C211.7 191.6 213.6 193.5 213.6 195.9C213.6 198.3 211.7 200.2 209.3 200.2Z" fill="#6CB9FF"/>
+    <path d="M201.9 161.201L128.8 162.401L130.9 180.201H199.8L201.9 161.201Z" fill="white"/>
+    <path d="M171.1 204.1H160.6V307.5H171.1V204.1Z" fill="#6CB9FF"/>
+    <path d="M170.5 268.6H161.3C159.4 268.6 157.8 267.1 157.8 265.1V254.6C157.8 252.7 159.3 251.1 161.3 251.1H170.5C172.4 251.1 174 252.6 174 254.6V265.1C173.9 267.1 172.4 268.6 170.5 268.6Z" fill="#6CB9FF"/>
+    <path d="M49.2 311.4H39.5L65.8 167.1H75.5L49.2 311.4Z" fill="#6CB9FF"/>
+    <path d="M287.9 311.4H297.6L271.3 167.1H261.6L287.9 311.4Z" fill="#6CB9FF"/>
+    <path d="M293.5 167.7H44.5002C41.6002 167.7 39.2002 165.3 39.2002 162.4C39.2002 159.5 41.6002 157.1 44.5002 157.1H293.5C296.4 157.1 298.8 159.5 298.8 162.4C298.8 165.3 296.4 167.7 293.5 167.7Z" fill="#6CB9FF"/>
+    <path d="M153.2 121.701C132.7 123.001 97.1 132.801 95.7 147.501C94.5 159.801 104.1 156.801 114.2 157.301C124.3 157.801 181.7 157.201 181.7 157.201L153.2 121.701Z" fill="white"/>
+    <path d="M182.5 121.201C203 122.501 246.2 133.001 246.7 147.901C247.1 158.301 237.1 157.901 224.5 157.401C214.4 157.001 172.2 157.101 172.2 157.101L182.5 121.201Z" fill="white"/>
+    <path d="M100.5 154.701C96.5 151.701 96.6 146.301 100.1 142.701C103.2 139.501 109 137.801 115 138.301C127.8 139.501 162.7 150.101 162.7 150.101L181.8 157.201C181.8 157.201 141.5 156.701 124.5 156.901C114.7 157.001 105.1 158.201 100.5 154.701Z" fill="#DEDEFC"/>
+    <path d="M242.4 154.701C246.4 151.701 246.3 146.301 242.8 142.701C239.7 139.501 233.9 137.801 227.9 138.301C215.1 139.501 176.3 150.601 176.3 150.601L165.5 157.001C165.5 157.001 201.5 156.701 218.4 156.901C228.2 157.001 237.7 158.201 242.4 154.701Z" fill="#DEDEFC"/>
+    <path d="M171.759 113.613C170.965 113.105 170.033 112.935 169.1 112.801C159.4 110.901 149 117.001 147.5 126.701C146.6 132.501 146.3 140.601 149 144.501C152.1 149.101 157.5 151.201 162.8 153.201C169.4 155.701 178.7 156.301 183.6 154.401C188.7 152.401 185.7 142.501 190 136.701C193.4 132.201 191 124.901 186.6 122.801C184.3 121.701 184.8 118.201 182.9 115.901C180.8 113.401 175.7 112.301 171.9 113.701C171.851 113.672 171.805 113.643 171.759 113.613Z" fill="#0F002D"/>
+    <path d="M279.1 152.6H214.9L221 115.4C221.4 113.1 223.3 111.4 225.7 111.4H282.1C284.1 111.4 285.6 113.2 285.3 115.1L279.1 152.6Z" fill="#0F002D"/>
+    <path d="M280.201 152.6H216L222.1 115.4C222.5 113.1 224.4 111.4 226.8 111.4H283.201C285.201 111.4 286.7 113.2 286.4 115.1L280.201 152.6Z" fill="#0F002D"/>
+    <path d="M199.3 157.4H280.2V152.6H203.9C201.4 152.6 199.3 154.7 199.3 157.2V157.4Z" fill="#0F002D"/>
+    <path d="M253.7 138.3C256.793 138.3 259.3 135.792 259.3 132.7C259.3 129.607 256.793 127.1 253.7 127.1C250.607 127.1 248.1 129.607 248.1 132.7C248.1 135.792 250.607 138.3 253.7 138.3Z" fill="white"/>
+    <path d="M192.5 204.101H138.3C131.1 204.101 136.1 201.901 136.1 195.601L134.8 180.201H195.5L194.3 195.101C194.3 201.401 199.7 204.101 192.5 204.101Z" fill="#0F002D"/>
+    <path d="M141.2 297.501H154L164.2 180.201H130.9L141.2 297.501Z" fill="#0F002D"/>
+    <path d="M176.7 297.501H189.5L199.8 180.201H166.4L176.7 297.501Z" fill="#0F002D"/>
+    <path d="M193.5 300.801H137.6C135.1 300.801 133.1 302.801 133.1 305.301C133.1 307.801 135.1 309.801 137.6 309.801H193.5C196 309.801 198 307.801 198 305.301C198 302.801 196 300.801 193.5 300.801Z" fill="#6CB9FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.4001 98.5008C21.5001 98.5008 20.1001 97.0008 20.1001 95.1008C21.0001 69.3008 31.9001 46.0008 49.0001 28.9008C66.1001 11.8008 89.4001 0.900819 115.2 0.000818531C117.1 -0.0991815 118.6 1.40082 118.6 3.30082V32.6008C118.6 34.4008 117.2 35.8008 115.4 35.9008C99.4001 36.7008 85.0001 43.6008 74.3001 54.2008C63.7001 64.9008 56.8001 79.3008 56.0001 95.3008C55.9001 97.1008 54.5001 98.5008 52.7001 98.5008H23.4001Z" fill="#DEDEFC"/>
+    <path d="M117.1 30.7C123.507 30.7 128.7 25.5065 128.7 19.1C128.7 12.6935 123.507 7.5 117.1 7.5C110.693 7.5 105.5 12.6935 105.5 19.1C105.5 25.5065 110.693 30.7 117.1 30.7Z" fill="#499FFC"/>
+    <path d="M169.4 93.9016C172.382 93.9016 174.8 91.4839 174.8 88.5016C174.8 85.5192 172.382 83.1016 169.4 83.1016C166.418 83.1016 164 85.5192 164 88.5016C164 91.4839 166.418 93.9016 169.4 93.9016Z" fill="#6CB9FF"/>
+    <path d="M15.5001 282C24.0001 282 31.0001 274.8 31.0001 266C31.0001 257.2 24.0001 250 15.5001 250C7.00008 250 8.17043e-05 257.2 8.17043e-05 266C-0.0999183 274.9 6.90008 282 15.5001 282Z" fill="#499FFC"/>
+    <path d="M15.5 273C19.3 273 22.5 269.9 22.5 266C22.5 262.2 19.4 259 15.5 259C11.7 259 8.5 262.1 8.5 266C8.5 269.9 11.6 273 15.5 273Z" fill="white"/>
+    <path d="M278.4 93.9016H303.3C305.8 93.9016 307.9 91.9016 307.9 89.5016C307.9 87.1016 305.8 85.1016 303.3 85.1016H278.4C275.9 85.1016 273.8 87.1016 273.8 89.5016C273.8 91.9016 275.8 93.9016 278.4 93.9016Z" fill="white"/>
+    <path d="M278.5 76.3008H285.5C288.1 76.3008 290.2 74.1008 290.2 71.3008C290.2 68.5008 288.1 66.3008 285.5 66.3008H278.5C275.9 66.3008 273.8 68.5008 273.8 71.3008C273.8 74.1008 275.8 76.3008 278.5 76.3008Z" fill="white"/>
+    <path d="M250.2 75.7004H257.2C259.8 75.7004 261.9 73.7004 261.9 71.3004C261.9 68.9004 259.8 66.9004 257.2 66.9004H250.2C247.6 66.9004 245.5 68.9004 245.5 71.3004C245.4 73.7004 247.5 75.7004 250.2 75.7004Z" fill="#0F002D"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M217 231.501C220.6 231.501 223.6 228.501 223.6 224.901C223.6 221.301 220.6 218.301 217 218.301C213.4 218.301 210.4 221.301 210.4 224.901C210.4 228.501 213.4 231.501 217 231.501Z" fill="#2683FF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26.1 142.1C29.7 142.1 32.7 139.1 32.7 135.5C32.7 131.9 29.7 128.9 26.1 128.9C22.5 128.9 19.5 131.9 19.5 135.5C19.5 139.1 22.5 142.1 26.1 142.1Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M45.1 142.1C48.7 142.1 51.7 139.1 51.7 135.5C51.7 131.9 48.7 128.9 45.1 128.9C41.5 128.9 38.5 131.9 38.5 135.5C38.5 139.1 41.5 142.1 45.1 142.1Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M64.1 142.1C67.7 142.1 70.7 139.1 70.7 135.5C70.7 131.9 67.7 128.9 64.1 128.9C60.5 128.9 57.5 131.9 57.5 135.5C57.5 139.1 60.5 142.1 64.1 142.1Z" fill="white"/>
+    <path d="M290.9 211.7C290.4 211.7 290 211.7 289.6 211.8C288.8 211.9 288 211.4 287.7 210.7C278.3 193.6 260.1 182 239.1 182C220.1 182 203.3 191.5 193.4 206C192.9 206.7 192 207 191.2 206.9C188.7 206.4 186.1 206.1 183.5 206.1C164 206.2 148.2 221.8 148.2 241.2C148.2 241.2 148.2 241.2 148.2 241.3C148.2 242.4 149.1 243.3 150.3 243.3H318.4C319.5 243.3 320.5 242.4 320.5 241.3V241.2C320.3 224.9 307.1 211.7 290.9 211.7Z" fill="#DEDEFC"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M169.4 77.0016C167 77.0016 165 75.1016 164.8 72.7016L162.9 47.0016C162.7 44.3016 164.8 42.1016 167.5 42.1016H171.3C174 42.1016 176.1 44.4016 175.9 47.0016L174 72.7016C173.8 75.1016 171.8 77.0016 169.4 77.0016Z" fill="#6CB9FF"/>
+</svg>

web/satellite/static/images/errors/50X.svg

@@ -0,0 +1,28 @@
+<svg width="402" height="323" viewBox="0 0 402 323" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0)">
+        <path d="M167.6 295.1C246.1 295.1 309.7 231.3 309.7 152.6C309.7 73.8996 246.1 10.0996 167.6 10.0996C89.1 10.0996 25.5 73.8996 25.5 152.6C25.5 231.3 89.1 295.1 167.6 295.1Z" fill="#2683FF"/>
+        <path d="M107 144C107 107.819 129.556 83 169 83C208.444 83 231 107.819 231 144C231 180.181 208.444 205 169 205C129.556 205 107 180.181 107 144ZM196.09 144C196.09 121.365 187.135 109.13 168.887 109.13C150.638 109.13 141.684 121.365 141.684 144C141.684 166.635 150.638 178.87 168.887 178.87C187.135 178.87 196.09 166.635 196.09 144Z" fill="#499FFC"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M23.4001 98.5008C21.5001 98.5008 20.1001 97.0008 20.1001 95.1008C21.0001 69.3008 31.9001 46.0008 49.0001 28.9008C66.1001 11.8008 89.4001 0.900819 115.2 0.000818531C117.1 -0.0991815 118.6 1.40082 118.6 3.30082V32.6008C118.6 34.4008 117.2 35.8008 115.4 35.9008C99.4001 36.7008 85.0001 43.6008 74.3001 54.2008C63.7001 64.9008 56.8001 79.3008 56.0001 95.3008C55.9001 97.1008 54.5001 98.5008 52.7001 98.5008H23.4001Z" fill="#DEDEFC"/>
+        <path d="M117.1 30.7C123.507 30.7 128.7 25.5065 128.7 19.1C128.7 12.6935 123.507 7.5 117.1 7.5C110.693 7.5 105.5 12.6935 105.5 19.1C105.5 25.5065 110.693 30.7 117.1 30.7Z" fill="#499FFC"/>
+        <path d="M278.4 93.9016H303.3C305.8 93.9016 307.9 91.9016 307.9 89.5016C307.9 87.1016 305.8 85.1016 303.3 85.1016H278.4C275.9 85.1016 273.8 87.1016 273.8 89.5016C273.8 91.9016 275.8 93.9016 278.4 93.9016Z" fill="white"/>
+        <path d="M278.5 76.3008H285.5C288.1 76.3008 290.2 74.1008 290.2 71.3008C290.2 68.5008 288.1 66.3008 285.5 66.3008H278.5C275.9 66.3008 273.8 68.5008 273.8 71.3008C273.8 74.1008 275.8 76.3008 278.5 76.3008Z" fill="white"/>
+        <path d="M250.2 75.7004H257.2C259.8 75.7004 261.9 73.7004 261.9 71.3004C261.9 68.9004 259.8 66.9004 257.2 66.9004H250.2C247.6 66.9004 245.5 68.9004 245.5 71.3004C245.4 73.7004 247.5 75.7004 250.2 75.7004Z" fill="#0F002D"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M217 231.501C220.6 231.501 223.6 228.501 223.6 224.901C223.6 221.301 220.6 218.301 217 218.301C213.4 218.301 210.4 221.301 210.4 224.901C210.4 228.501 213.4 231.501 217 231.501Z" fill="#2683FF"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M123.7 256.001C127.3 256.001 130.3 253.001 130.3 249.401C130.3 245.801 127.3 242.801 123.7 242.801C120.1 242.801 117.1 245.801 117.1 249.401C117.1 253.101 120 256.001 123.7 256.001Z" fill="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M142.7 256.001C146.3 256.001 149.3 253.001 149.3 249.401C149.3 245.801 146.3 242.801 142.7 242.801C139.1 242.801 136.1 245.801 136.1 249.401C136 253.101 139 256.001 142.7 256.001Z" fill="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M161.6 256.001C165.2 256.001 168.2 253.001 168.2 249.401C168.2 245.801 165.2 242.801 161.6 242.801C158 242.801 155 245.801 155 249.401C155 253.101 158 256.001 161.6 256.001Z" fill="white"/>
+        <path d="M192 115.199C191.8 114.999 191.7 114.799 191.5 114.599C167.2 85.2991 121 114.599 137.2 149.099C138.6 151.999 139.8 154.499 140.9 156.399C157.5 185.699 188.7 238.099 188.7 238.099L241.8 208.099C241.7 208.099 207.7 134.399 192 115.199Z" fill="#F5F6FA"/>
+        <path d="M300.421 274.813C316.74 236.202 300.772 192.561 264.755 177.339C228.739 162.117 186.313 181.077 169.994 219.688C153.675 258.299 169.643 301.94 205.66 317.162C241.676 332.384 284.103 313.424 300.421 274.813Z" fill="#F5F6FA"/>
+        <path d="M186.569 151.937C193.205 148.191 195.548 139.773 191.802 133.136C188.055 126.5 179.637 124.157 173 127.903C166.364 131.65 164.021 140.068 167.767 146.705C171.514 153.341 179.932 155.684 186.569 151.937Z" fill="#0F002D"/>
+        <path d="M149.1 143.299L136.6 174.299C135.4 177.299 139.3 179.799 141.5 177.299L162.9 153.699C162.9 153.699 160.6 143.299 149.1 143.299Z" fill="#FCCB67"/>
+        <path d="M365.6 211.499C365 211.499 364.5 211.499 364 211.599C363.1 211.699 362.1 211.199 361.7 210.299C350.4 189.699 328.4 175.699 303.1 175.699C280.2 175.699 260 187.199 248 204.599C247.4 205.499 246.4 205.899 245.3 205.699C242.3 205.099 239.2 204.699 236 204.699C212.5 204.799 193.5 223.599 193.5 246.999C193.5 246.999 193.5 246.999 193.5 247.099C193.5 248.499 194.6 249.599 196 249.599H398.5C399.9 249.599 401 248.499 401 247.099V246.999C401.1 227.399 385.2 211.499 365.6 211.499Z" fill="#DEDEFC"/>
+        <path d="M178.9 144.299C180.723 144.299 182.2 142.822 182.2 140.999C182.2 139.177 180.723 137.699 178.9 137.699C177.078 137.699 175.6 139.177 175.6 140.999C175.6 142.822 177.078 144.299 178.9 144.299Z" fill="white"/>
+        <path d="M15.5001 282C24.0001 282 31.0001 274.8 31.0001 266C31.0001 257.2 24.0001 250 15.5001 250C7.00008 250 8.17043e-05 257.2 8.17043e-05 266C-0.0999183 274.9 6.90008 282 15.5001 282Z" fill="#499FFC"/>
+        <path d="M15.5 273C19.3 273 22.5 269.9 22.5 266C22.5 262.2 19.4 259 15.5 259C11.7 259 8.5 262.1 8.5 266C8.5 269.9 11.6 273 15.5 273Z" fill="white"/>
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <rect width="401.1" height="322.4" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

web/satellite/static/images/errors/text.svg

@@ -0,0 +1,7 @@
+<svg width="69" height="16" viewBox="0 0 69 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.5974 3.50249C4.28571 3.7413 4.12986 4.1393 4.12986 4.61692C4.12986 5.09453 4.36363 5.41293 4.75324 5.65174C5.14285 5.89055 6.07792 6.20896 7.48052 6.60697C8.88311 7.00498 10.0519 7.48259 10.8312 8.19901C11.6104 8.91542 12 9.95025 12 11.3831C12 12.7363 11.4545 13.8507 10.4416 14.7264C9.42857 15.602 8.10389 16 6.46753 16C4.05194 16 1.94805 15.1244 0 13.2935L2.02597 10.7463C3.66233 12.1791 5.14285 12.8955 6.54545 12.8955C7.16883 12.8955 7.63636 12.7363 8.02597 12.4975C8.41558 12.2587 8.57143 11.8607 8.57143 11.3831C8.57143 10.9055 8.41558 10.5871 8.02597 10.2687C7.63636 10.0299 6.93506 9.71144 5.76623 9.47264C3.97402 9.07463 2.72727 8.51741 1.94805 7.801C1.16883 7.08458 0.701294 6.04975 0.701294 4.61692C0.701294 3.18408 1.24675 1.99005 2.25974 1.19403C3.27272 0.39801 4.59739 0 6.07792 0C7.0909 0 8.1039 0.159205 9.11688 0.557215C10.1299 0.875623 10.987 1.43283 11.7662 2.06965L10.0519 4.61692C8.72727 3.58209 7.4026 3.10448 6 3.10448C5.37662 3.10448 4.90909 3.26368 4.5974 3.50249Z" fill="#2683FF"/>
+    <path d="M21.3268 3.13402V16H17.6732V3.13402H13V0H26V3.13402H21.3268Z" fill="#2683FF"/>
+    <path d="M40.5594 13.68C38.8762 15.2 36.8564 16 34.5 16C32.1436 16 30.0396 15.2 28.4406 13.68C26.7574 12.16 26 10.24 26 8C26 5.76 26.8416 3.84 28.4406 2.32C30.1238 0.800001 32.1436 0 34.5 0C36.9406 0 38.9604 0.800001 40.5594 2.32C42.2426 3.84 43 5.76 43 8C43 10.24 42.2426 12.16 40.5594 13.68ZM39.297 8C39.297 6.64 38.7921 5.44 37.8663 4.48C36.9406 3.52 35.7624 3.04 34.4158 3.04C33.0693 3.04 31.8911 3.52 30.9653 4.48C30.0396 5.44 29.5347 6.64 29.5347 8C29.5347 9.36 30.0396 10.56 30.9653 11.52C31.8911 12.48 33.0693 12.96 34.4158 12.96C35.7624 12.96 36.9406 12.48 37.8663 11.52C38.8762 10.56 39.297 9.36 39.297 8Z" fill="#2683FF"/>
+    <path d="M58.0059 5.36082C58.0059 7.91752 57.0118 9.56701 54.9408 10.3093L59 16H54.6095L51.0473 10.8866H48.5621V16H45V0H51.0473C53.5325 0 55.355 0.412371 56.3491 1.23711C57.5089 2.14433 58.0059 3.46392 58.0059 5.36082ZM53.6982 7.25773C54.1124 6.84536 54.3609 6.26804 54.3609 5.36082C54.3609 4.45361 54.1124 3.87629 53.6982 3.62887C53.2012 3.29897 52.4556 3.13402 51.2959 3.13402H48.645V7.83505H51.2959C52.4556 7.83505 53.284 7.58763 53.6982 7.25773Z" fill="#2683FF"/>
+    <path d="M60.92 3.11795V0H69V10.3385C69 12.2256 68.52 13.6205 67.56 14.6051C66.6 15.5077 65.4 16 63.88 16C62.04 16 60.36 15.2615 59 13.7846L60.76 11.241C61.72 12.3077 62.68 12.8 63.72 12.8C64.2 12.8 64.6 12.6359 65 12.2256C65.32 11.8154 65.56 11.241 65.56 10.5026V3.0359L60.92 3.11795Z" fill="#2683FF"/>
+</svg>

web/satellite/static/images/header/accountSettings.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="account-dropdown-svg-path" d="M20 8.72549C20 9.60784 20 10.4902 20 11.2745C19.9024 11.5686 19.7073 11.6667 19.4146 11.7647C18.7317 11.9608 18.1463 12.0588 17.4634 12.2549C17.3659 12.2549 17.2683 12.3529 17.2683 12.451C17.1707 12.7451 16.9756 13.0392 16.878 13.4314C16.878 13.5294 16.878 13.6275 16.878 13.7255C17.1707 14.2157 17.4634 14.7059 17.7561 15.2941C17.9512 15.6863 17.9512 15.8824 17.6585 16.1765C17.1707 16.6667 16.6829 17.1569 16.1951 17.6471C15.9024 17.9412 15.6098 17.9412 15.3171 17.7451C14.8293 17.451 14.3415 17.1569 13.8537 16.8627C13.7561 16.7647 13.6585 16.7647 13.561 16.8627C13.2683 17.0588 12.878 17.1569 12.5854 17.2549C12.4878 17.2549 12.3902 17.3529 12.3902 17.451C12.1951 18.1373 12.0976 18.7255 11.9024 19.4118C11.8049 19.7059 11.7073 19.902 11.4146 20C10.5366 20 9.65854 20 8.87805 20C8.58537 19.902 8.48781 19.7059 8.39024 19.4118C8.19512 18.7255 8.09756 18.1373 7.90244 17.451C7.90244 17.3529 7.80488 17.2549 7.70732 17.2549C7.41463 17.1569 7.02439 16.9608 6.73171 16.8627C6.63415 16.7647 6.53659 16.8627 6.43902 16.8627C5.95122 17.1569 5.46341 17.451 4.97561 17.7451C4.58537 17.9412 4.39024 17.9412 4.09756 17.6471C3.60976 17.1569 3.12195 16.6667 2.63415 16.1765C2.34146 15.8824 2.34146 15.5882 2.53659 15.2941C2.82927 14.8039 3.12195 14.3137 3.41463 13.8235C3.5122 13.7255 3.5122 13.6275 3.41463 13.5294C3.21951 13.2353 3.12195 12.8431 3.02439 12.549C3.02439 12.451 2.92683 12.3529 2.82927 12.3529C2.14634 12.1569 1.46341 12.0588 0.780488 11.8627C0.195122 11.7647 0 11.5686 0 11.1765C0 10.4902 0 9.70588 0 9.01961C0 8.62745 0.195122 8.43137 0.585366 8.33333C1.26829 8.13725 1.95122 7.94118 2.53659 7.7451C2.63415 7.7451 2.73171 7.64706 2.73171 7.54902C2.92683 7.35294 3.02439 7.05882 3.12195 6.76471C3.12195 6.66667 3.12195 6.56863 3.12195 6.47059C2.82927 5.88235 2.43902 5.39216 2.14634 4.80392C1.95122 4.41176 1.95122 4.21569 2.2439 3.92157C2.73171 3.43137 3.21951 2.94118 3.70732 2.45098C4 2.15686 4.29268 2.15686 4.58537 2.35294C5.17073 2.64706 5.65854 3.03922 6.2439 3.33333C6.34146 3.33333 6.43902 3.33333 6.53659 3.33333C6.82927 3.13725 7.21951 2.94118 7.5122 2.84314C7.60976 2.84314 7.70732 2.7451 7.70732 2.64706C7.90244 1.96078 8 1.27451 8.19512 0.588235C8.39024 0.196078 8.58537 0 8.97561 0C9.65854 0 10.439 0 11.122 0C11.5122 0 11.7073 0.196078 11.8049 0.588235C12 1.27451 12.0976 1.96078 12.2927 2.64706C12.2927 2.7451 12.3902 2.84314 12.4878 2.84314C12.7805 2.94118 13.1707 3.13725 13.4634 3.23529C13.561 3.33333 13.6585 3.23529 13.7561 3.23529C14.2439 2.94118 14.7317 2.64706 15.2195 2.35294C15.6098 2.15686 15.8049 2.15686 16.1951 2.45098C16.6829 2.94118 17.1707 3.43137 17.6585 3.92157C17.9512 4.21569 18.0488 4.5098 17.7561 4.90196C17.4634 5.39216 17.1707 5.88235 16.878 6.47059C16.878 6.56863 16.878 6.66667 16.878 6.76471C16.9756 7.05882 17.1707 7.45098 17.2683 7.7451C17.2683 7.84314 17.3659 7.94118 17.4634 7.94118C18.1463 8.13726 18.7317 8.23529 19.4146 8.43137C19.7073 8.33333 19.9024 8.52941 20 8.72549ZM10.0488 5.98039C7.80488 5.98039 5.95122 7.84314 5.95122 10.098C5.95122 12.3529 7.80488 14.2157 10.0488 14.2157C12.2927 14.2157 14.1463 12.3529 14.1463 10.098C14.1463 7.7451 12.2927 5.98039 10.0488 5.98039Z" fill="#354049"/>
+</svg>

web/satellite/static/images/header/logo.svg

@@ -0,0 +1,7 @@
+<svg width="82" height="18" viewBox="0 0 82 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.22457 3.77689C4.86259 4.07571 4.6816 4.4582 4.6816 4.94826C4.6816 5.43832 4.89879 5.82081 5.34523 6.10768C5.79167 6.39455 6.80521 6.72922 8.40998 7.12367C10.0148 7.51811 11.2455 8.1038 12.1384 8.88073C13.0192 9.65766 13.4656 10.8051 13.4656 12.2992C13.4656 13.7933 12.8985 15.0125 11.7643 15.9448C10.6301 16.8771 9.14601 17.3433 7.28785 17.3433C4.62127 17.3433 2.22015 16.3632 0.0844727 14.4029L1.19454 13.0283C1.79784 12.2992 2.87171 12.1677 3.656 12.6937C4.97118 13.5782 6.20191 14.0204 7.36024 14.0204C8.048 14.0204 8.59097 13.877 8.98915 13.5782C9.38733 13.2794 9.58038 12.8849 9.58038 12.3829C9.58038 11.8809 9.37526 11.4864 8.95295 11.1876C8.53064 10.8888 7.71016 10.59 6.46736 10.2912C4.51268 9.8489 3.07683 9.23931 2.17188 8.49824C1.25487 7.75716 0.80843 6.59774 0.80843 5.01998C0.80843 3.43026 1.3876 2.21107 2.53386 1.35047C3.68013 0.489871 5.11598 0.0595703 6.82934 0.0595703C7.95148 0.0595703 9.07361 0.250815 10.2078 0.633304C11.3299 1.01579 12.3073 1.55367 13.1519 2.25888L12.3194 3.45416C11.7523 4.255 10.6904 4.51796 9.80963 4.08766C8.79609 3.58564 7.77049 3.33463 6.72075 3.33463C6.08125 3.33463 5.58655 3.47807 5.22457 3.77689Z" fill="#2683FF"/>
+    <path d="M25.0851 3.66915V17.1399H21.3205V3.66915H16.5424V2.12724C16.5424 1.19492 17.3026 0.441895 18.2437 0.441895H29.8512V1.74475C29.8512 2.80855 28.9824 3.65719 27.9206 3.65719H25.0851V3.66915Z" fill="#2683FF"/>
+    <path d="M47.1779 14.8335C45.4766 16.483 43.3771 17.3077 40.8794 17.3077C38.3939 17.3077 36.2944 16.483 34.581 14.8335C32.8797 13.184 32.023 11.1401 32.023 8.68974C32.023 6.23942 32.8797 4.18354 34.581 2.546C36.2823 0.89652 38.3818 0.0717773 40.8794 0.0717773C43.365 0.0717773 45.4645 0.89652 47.1779 2.546C48.8792 4.19549 49.7358 6.23942 49.7358 8.68974C49.7358 11.1401 48.8792 13.184 47.1779 14.8335ZM45.8989 8.68974C45.8989 7.19564 45.4162 5.92864 44.451 4.8768C43.4857 3.82495 42.3032 3.29903 40.8915 3.29903C39.4798 3.29903 38.2973 3.82495 37.3321 4.8768C36.3668 5.92864 35.8841 7.19564 35.8841 8.68974C35.8841 10.1838 36.3668 11.4389 37.3321 12.4907C38.2973 13.5306 39.4798 14.0565 40.8915 14.0565C42.3032 14.0565 43.4857 13.5306 44.451 12.4907C45.4162 11.4508 45.8989 10.1838 45.8989 8.68974Z" fill="#2683FF"/>
+    <path d="M66.8695 5.98799C66.8695 8.66541 65.7956 10.3866 63.66 11.1755L67.9313 17.1399H65.3251C64.0581 17.1399 62.8757 16.5303 62.1517 15.5024L59.5696 11.821H56.9513V15.4905C56.9513 16.4108 56.2032 17.1519 55.2741 17.1519H53.1867V0.441895H59.5696C62.1879 0.441895 64.0581 0.884148 65.1803 1.7567C66.3024 2.62926 66.8695 4.03968 66.8695 5.98799ZM62.3327 7.9602C62.8033 7.54185 63.0325 6.88445 63.0325 5.98799C63.0325 5.09153 62.7912 4.46998 62.3086 4.13531C61.8259 3.80063 60.9813 3.63329 59.7747 3.63329H56.9513V8.58174H59.7023C60.9934 8.58174 61.8621 8.37855 62.3327 7.9602Z" fill="#2683FF"/>
+    <path d="M72.5888 3.64524V1.82842C72.5888 1.06344 73.2162 0.441895 73.9884 0.441895H81.3607V11.3309C81.3607 13.327 80.8419 14.8091 79.8042 15.8012C78.7665 16.7933 77.4393 17.2834 75.8104 17.2834C74.5193 17.2834 73.3248 16.9726 72.2389 16.3391C71.2012 15.7415 70.9357 14.3788 71.6356 13.4107L72.456 12.2871C73.4696 13.3748 74.5314 13.9127 75.6415 13.9127C76.1724 13.9127 76.6309 13.7095 77.0049 13.3031C77.379 12.8967 77.572 12.2871 77.572 11.4743V3.64524H72.5888Z" fill="#2683FF"/>
+</svg>

web/satellite/static/images/header/logout.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="account-dropdown-svg-path" fill-rule="evenodd" clip-rule="evenodd" d="M9.53516 1C4.28906 1 0 5.25293 0 10.5C0 15.7471 4.28906 20 9.53516 20C14.3887 20 18.4229 16.3604 19 11.6611H10.2783L11.8682 13.2441C12.1562 13.5322 12.248 14.0156 12.1436 14.4277C12.0947 14.6211 12.0029 14.7988 11.8682 14.9336C11.4443 15.3555 10.5967 15.3555 10.1729 14.9336L5.72266 10.5L10.1729 6.06641C10.5967 5.64453 11.4443 5.64453 11.8682 6.06641C12.291 6.48926 12.291 7.33301 11.8682 7.75586L10.2783 9.33887H19C18.4229 4.63965 14.3887 1 9.53516 1Z" fill="#354049"/>
+</svg>

web/satellite/static/images/header/navigationClose.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="40" height="40" rx="20" fill="#F5F6FA"/>
+    <path d="M14.4015 13.2402C14.8097 13.6484 15.2211 14.0598 15.6292 14.468L18.5784 17.4171C19.7631 18.6018 20.9477 19.7864 22.1363 20.975L25.2198 24.0585C25.7199 24.5586 26.2302 25.0458 26.7175 25.5562C26.7239 25.5626 26.7303 25.5691 26.7374 25.5761C27.0434 25.8821 27.0633 26.4381 26.7374 26.7409C26.4083 27.0436 25.8979 27.0668 25.5727 26.7409C25.1645 26.3327 24.7531 25.9213 24.3449 25.5131L21.3957 22.564C20.2111 21.3793 19.0265 20.1947 17.8379 19.0061L14.7544 15.9226C14.2543 15.4225 13.7439 14.9353 13.2567 14.4249C13.2503 14.4185 13.2438 14.412 13.2368 14.405C12.9308 14.099 12.9108 13.543 13.2368 13.2402C13.5659 12.9375 14.0756 12.9143 14.4015 13.2402Z" fill="#2B3543"/>
+    <path d="M26.7362 14.4018C26.328 14.8099 25.9166 15.2213 25.5085 15.6295L22.5593 18.5787C21.3746 19.7634 20.19 20.948 19.0014 22.1366L15.918 25.22C15.4179 25.7201 14.9306 26.2305 14.4202 26.7177C14.4138 26.7242 14.4074 26.7306 14.4003 26.7377C14.0943 27.0437 13.5383 27.0636 13.2356 26.7377C12.9328 26.4086 12.9097 25.8982 13.2356 25.5729C13.6437 25.1647 14.0551 24.7534 14.4633 24.3452L17.4125 21.396C18.5972 20.2113 19.7818 19.0267 20.9704 17.8381L24.0538 14.7547C24.5539 14.2546 25.0412 13.7442 25.5515 13.2569C25.558 13.2505 25.5644 13.2441 25.5715 13.237C25.8774 12.931 26.4335 12.9111 26.7362 13.237C27.039 13.5661 27.0621 14.0759 26.7362 14.4018Z" fill="#2B3543"/>
+</svg>

web/satellite/static/images/header/navigationMenu.svg

@@ -0,0 +1,5 @@
+<svg width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
+    <rect y="6.31055" width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
+    <rect y="12.6206" width="21" height="2.37931" rx="1.18966" fill="#2683FF"/>
+</svg>

web/satellite/static/images/header/projectSelection.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.0928 3.02746C14.6603 2.4239 14.631 1.4746 14.0275 0.907152C13.4239 0.339699 12.4746 0.368972 11.9072 0.972536L14.0928 3.02746ZM4.53846 11L3.44613 12.028C3.72968 12.3293 4.12509 12.5001 4.53884 12.5C4.95258 12.4999 5.34791 12.3289 5.63131 12.0275L4.53846 11ZM3.09234 7.27469C2.52458 6.67141 1.57527 6.64261 0.971991 7.21036C0.36871 7.77812 0.339911 8.72743 0.907664 9.33071L3.09234 7.27469ZM11.9072 0.972536L3.44561 9.97254L5.63131 12.0275L14.0928 3.02746L11.9072 0.972536ZM5.6308 9.97199L3.09234 7.27469L0.907664 9.33071L3.44613 12.028L5.6308 9.97199Z" fill="#2683FF"/>
+</svg>

web/satellite/static/images/info.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="18" height="18" rx="9" fill="#007AFF"/>
+    <path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
+    <path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
+</svg>

web/satellite/static/images/navigation/docs.svg

@@ -0,0 +1,6 @@
+<svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="navigation-svg-path" d="M17.975 5.74811C17.9448 5.71786 17.9448 5.68878 17.9157 5.65853L17.8854 5.62828L17.8261 5.56895C17.7959 5.53871 17.7668 5.50962 17.7365 5.47937L13.0017 0.744565C12.9715 0.714318 12.9424 0.685233 12.9121 0.654985C12.9121 0.656149 12.8819 0.625901 12.8528 0.625901L12.8226 0.595654C12.7923 0.565407 12.7632 0.565407 12.733 0.536321C12.2862 0.179171 11.7209 0 11.1543 0H3.35157C1.92178 0 0.760742 1.16104 0.760742 2.59083V20.7277C0.760742 22.1575 1.92178 23.3186 3.35157 23.3186H15.9195C17.3493 23.3186 18.5103 22.1575 18.5103 20.7277L18.5115 7.32683C18.5115 6.76144 18.3032 6.19486 17.9751 5.74812L17.975 5.74811ZM16.2183 20.6986C16.2183 20.8475 16.0997 20.9964 15.9205 20.9964H3.35143C3.20252 20.9964 3.05361 20.8777 3.05361 20.6986V2.59177C3.05361 2.44286 3.17227 2.29395 3.35143 2.29395H10.1117V5.77819C10.1117 7.20799 11.2728 8.36902 12.7026 8.36902H16.1868L16.188 20.6983L16.2183 20.6986Z" fill="#354049"/>
+    <path class="navigation-svg-path" d="M7.46108 12.5629C7.46108 13.3151 7.25209 13.88 6.85591 14.2795C6.46064 14.679 5.8791 14.8912 5.15762 14.8912H3.73828V10.4238H5.27393C5.97178 10.4238 6.52969 10.6121 6.90224 10.9648C7.27571 11.3405 7.46106 11.8814 7.46106 12.5629L7.46108 12.5629ZM6.22893 12.6107C6.22893 12.2111 6.15897 11.9053 5.99632 11.694C5.83367 11.4828 5.60105 11.3882 5.27483 11.3882L4.92591 11.3873V13.8801H5.18216C5.55472 13.8801 5.81004 13.7625 5.97268 13.5513C6.13533 13.3391 6.22893 13.0571 6.22893 12.6108V12.6107Z" fill="#354049"/>
+    <path class="navigation-svg-path" d="M11.9283 12.6459C11.9283 13.3788 11.7339 13.9292 11.3696 14.3185C11.0054 14.7077 10.4231 14.8912 9.69462 14.8912C8.96618 14.8912 8.40752 14.7077 8.0433 14.3185C7.65441 13.9292 7.46094 13.3788 7.46094 12.6459C7.46094 11.9129 7.65538 11.3626 8.0433 10.9966C8.43219 10.6073 8.98988 10.4238 9.71832 10.4238C10.4468 10.4238 11.0054 10.6073 11.3933 10.9966C11.7338 11.3626 11.9283 11.9129 11.9283 12.6459H11.9283ZM8.74794 12.6459C8.74794 13.4933 9.06379 13.9059 9.67082 13.9059C9.98667 13.9059 10.2295 13.8146 10.3746 13.6079C10.5207 13.4021 10.5927 13.0808 10.5927 12.6459C10.5927 12.211 10.5197 11.8897 10.3499 11.6839C10.1802 11.478 9.96104 11.3635 9.66986 11.3635C9.06283 11.3859 8.74793 11.7984 8.74793 12.6459L8.74794 12.6459Z" fill="#354049"/>
+    <path class="navigation-svg-path" d="M14.173 11.3808C13.8773 11.3808 13.6307 11.4948 13.4583 11.7227C13.2859 11.9506 13.2117 12.2693 13.2117 12.6575C13.2117 13.4783 13.5565 13.911 14.2472 13.911C14.4446 13.911 14.6662 13.8878 14.8386 13.8424C15.036 13.797 15.2335 13.7285 15.43 13.6599V14.6401C15.0351 14.7995 14.592 14.8912 14.0988 14.8912C13.3841 14.8912 12.8409 14.7087 12.471 14.3214C12.1011 13.9333 11.9287 13.3635 11.9287 12.6566C11.9287 12.2008 12.027 11.8135 12.2003 11.4717C12.3728 11.1298 12.6444 10.8787 12.9892 10.6971C13.334 10.5146 13.729 10.4238 14.1971 10.4238C14.6902 10.4238 15.1834 10.5146 15.6515 10.7203L15.2566 11.6319C15.0842 11.5634 14.9118 11.4948 14.7384 11.4494C14.5669 11.4031 14.3695 11.3809 14.173 11.3809L14.173 11.3808Z" fill="#354049"/>
+</svg>