diff --git a/frontend-web/webclient/app/Assets/Colors.css b/frontend-web/webclient/app/Assets/Colors.css new file mode 100644 index 0000000000..f637ce92b7 --- /dev/null +++ b/frontend-web/webclient/app/Assets/Colors.css @@ -0,0 +1,212 @@ +html.light { + --primaryMain: var(--blue-60); + --primaryLight: var(--blue-50); + --primaryDark: var(--blue-70); + --primaryContrast: #ffffff; + --primaryContrastAlt: #a6a8a9; + --secondaryMain: var(--gray-10); + --secondaryLight: var(--gray-5); + --secondaryDark: var(--gray-20); + --secondaryContrast: #000000; + --secondaryContrastAlt: #222222; + --errorMain: var(--red-60); + --errorLight: var(--red-50); + --errorDark: var(--red-70); + --errorContrast: #ffffff; + --errorContrastAlt: #a6a8a9; + --warningMain: var(--orange-30); + --warningLight: var(--orange-20); + --warningDark: var(--orange-40); + --warningContrast: #000000; + --warningContrastAlt: #222222; + --infoMain: var(--gray-70); + --infoLight: var(--gray-60); + --infoDark: var(--gray-80); + --infoContrast: #ffffff; + --infoContrastAlt: #a6a8a9; + --successMain: var(--green-50); + --successLight: var(--green-40); + --successDark: var(--green-60); + --successContrast: #ffffff; + --successContrastAlt: #a6a8a9; + --backgroundDefault: #ffffff; + --borderColor: var(--gray-20); + --borderColorHover: var(--gray-30); + --backgroundCard: #ffffff; + --backgroundCardHover: var(--gray-5); + --backgroundDisabled: var(--gray-5); + --textPrimary: #212529; + --textSecondary: #646669; + --textDisabled: #909294; + --rowHover: var(--gray-5); + --rowActive: var(--blue-10); + --gradientStart: var(--blue-30); + --gradientEnd: var(--blue-20); + --linkColorHover: var(--primaryDark); + --linkColor: var(--primaryMain); + --dialogToolbar: var(--gray-5); + + --purple-fg: var(--purple-60); + --red-fg: var(--red-60); + --orange-fg: var(--orange-60); + --yellow-fg: var(--yellow-60); + --green-fg: var(--green-60); + --gray-fg: var(--gray-60); + --blue-fg: var(--blue-60); + --pink-fg: var(--pink-60); +} + +html.dark { + --modalShadow: rgba(0, 0, 0, 0.75); + --primaryMain: var(--blue-80); + --primaryLight: var(--blue-70); + --primaryDark: var(--blue-90); + --primaryContrast: #ffffff; + --primaryContrastAlt: #a6a8a9; + --secondaryMain: var(--gray-30); + --secondaryLight: var(--gray-20); + --secondaryDark: var(--gray-40); + --secondaryContrast: #000000; + --secondaryContrastAlt: #222222; + --errorMain: var(--red-60); + --errorLight: var(--red-50); + --errorDark: var(--red-70); + --errorContrast: #ffffff; + --errorContrastAlt: #a6a8a9; + --warningMain: var(--orange-30); + --warningLight: var(--orange-20); + --warningDark: var(--orange-40); + --warningContrast: #000000; + --warningContrastAlt: #222222; + --infoMain: var(--gray-30); + --infoLight: var(--gray-20); + --infoDark: var(--gray-40); + --infoContrast: #000000; + --infoContrastAlt: #222222; + --successMain: var(--green-50); + --successLight: var(--green-40); + --successDark: var(--green-60); + --successContrast: #ffffff; + --successContrastAlt: #a6a8a9; + --backgroundDefault: var(--gray-100); + --borderColor: var(--gray-80); + --borderColorHover: var(--gray-70); + --backgroundCard: var(--gray-90); + --backgroundCardHover: var(--gray-90); + --backgroundDisabled: var(--gray-90); + --textPrimary: #ffffff; + --textSecondary: #bcbebf; + --textDisabled: #909294; + --rowHover: var(--gray-90); + --rowActive: var(--blue-90); + --gradientStart: var(--blue-90); + --gradientEnd: var(--blue-80); + --linkColor: var(--blue-50); + --linkColorHover: var(--blue-70); + --dialogToolbar: var(--gray-90); + + --purple-fg: var(--purple-40); + --red-fg: var(--red-40); + --orange-fg: var(--orange-40); + --yellow-fg: var(--yellow-40); + --green-fg: var(--green-40); + --gray-fg: var(--gray-40); + --blue-fg: var(--blue-40); + --pink-fg: var(--pink-40); +} + +html.light { + color-scheme: light; +} + +html.dark { + color-scheme: dark; +} + +html { + --modalShadow: rgba(255, 255, 255, 0.75); + + /* Color palette from where the colors used on UCloud are derived from */ + --purple-5: #FBF7FB; + --purple-10: #F5EBF5; + --purple-20: #E6CDE6; + --purple-30: #D8B0D8; + --purple-40: #C993C9; + --purple-50: #B972B9; + --purple-60: #A74EA7; + --purple-70: #993399; + --purple-80: #870F87; + --purple-90: #680068; + --red-5: #FFF6F6; + --red-10: #FFE9E1; + --red-20: #FFC9B6; + --red-30: #FFA78C; + --red-40: #FF805F; + --red-50: #FF4628; + --red-60: #E11005; + --red-70: #BD1809; + --red-80: #961B0B; + --red-90: #6C1A0C; + --orange-5: #FFF6EF; + --orange-10: #FFEAD7; + --orange-20: #FFCA9A; + --orange-30: #FFA95B; + --orange-40: #FF8018; + --orange-50: #E0680D; + --orange-60: #B7540A; + --orange-70: #9B4708; + --orange-80: #7D3806; + --orange-90: #5D2A05; + --yellow-5: #FFF8D6; + --yellow-10: #FFEE98; + --yellow-20: #FFCF04; + --yellow-30: #E6B704; + --yellow-40: #CA9F04; + --yellow-50: #AC8604; + --yellow-60: #8E6C03; + --yellow-70: #795B02; + --yellow-80: #624802; + --yellow-90: #493501; + --green-5: #EDFCE9; + --green-10: #D3F8C9; + --green-20: #89EC6D; + --green-30: #4BD823; + --green-40: #42BD1F; + --green-50: #389F1A; + --green-60: #2D8215; + --green-70: #266D12; + --green-80: #1F580E; + --green-90: #17410B; + --gray-5: #F7F8F9; + --gray-10: #ECEEF0; + --gray-20: #D0D5DC; + --gray-30: #B6BEC8; + --gray-40: #9BA6B4; + --gray-50: #7F8C9E; + --gray-60: #627288; + --gray-70: #4F6178; + --gray-80: #404D60; + --gray-90: #2A313B; + --gray-100: #21262D; + --blue-5: #F4F8FE; + --blue-10: #E4EFFC; + --blue-20: #BCD7F7; + --blue-30: #95C0F3; + --blue-40: #6DA8EE; + --blue-50: #3E8CE9; + --blue-60: #096DE3; + --blue-70: #035BC3; + --blue-80: #03499D; + --blue-90: #023774; + --pink-5: #FCE4EC; + --pink-10: #F8BBD0; + --pink-20: #F48FB1; + --pink-30: #F06292; + --pink-40: #EC407A; + --pink-50: #E91E63; + --pink-60: #D81B60; + --pink-70: #C2185B; + --pink-80: #AD1457; + --pink-90: #880E4F; + /* New color palette END */ +} \ No newline at end of file diff --git a/frontend-web/webclient/app/Assets/GlobalStyle.css b/frontend-web/webclient/app/Assets/GlobalStyle.css new file mode 100644 index 0000000000..dd108b3293 --- /dev/null +++ b/frontend-web/webclient/app/Assets/GlobalStyle.css @@ -0,0 +1,776 @@ +html { + --defaultShadow: + rgba(0, 0, 0, 0.3) 0px 1px 3px 0px, + rgba(0, 0, 0, 0.3) 0px 1px 2px -1px; + + --defaultCardBorder: 0.5px solid var(--borderColor); + + --sidebarWidth: 64px; + --secondarySidebarWidth: 220px; + --popInWidth: 368px; + --sidebarColor: var(--blue-60); + --sidebarSecondaryColor: var(--blue-70); + --appLogoBackground: transparent; + + --secondaryText: 10px; + --buttonText: 14px; + --breadText: 14px; + --interactiveElementsSize: 20px; + font-size: 14px; + + --monospace: 'Jetbrains Mono', 'Ubuntu Mono', courier-new, courier, monospace; + --sansSerif: 'Inter', sans-serif; + + --iconColor: var(--textPrimary); + --iconColor2: var(--textPrimary); + --FtIconColor: #f5f7f9; + --FtIconColor2: #c9d3df; + --FtFolderColor: #8393A7; + --FtFolderColor2: #c9d3df; + + --fixedWhite: #ffffff; + --fixedBlack: #000000; + + --favoriteColor: var(--yellow-20); + --favoriteColorEmpty: var(--secondaryDark); + --wayfGreen: #c8dd51; + + font-feature-settings: "cv05" on, "cv09" on, "cv02" on, "calt" on, "ss03" on; +} + +html.dark { + --sidebarColor: var(--blue-90); + --sidebarSecondaryColor: var(--blue-80); + --appLogoBackground: #ffffff; + + --defaultCardBorder: 1px solid var(--borderColor); + --defaultShadow: + rgba(0, 0, 0, 0.7) 0px 1px 3px 0px, + rgba(255, 255, 255, 0.3) 0px 1px 2px -1px; +} + + +h1, +h2, +h3, +h4, +h5 { + font-weight: normal; +} + +.apexcharts-tooltip, +.apexcharts-legend-text, +.apexcharts-yaxis-title text, +.apexcharts-yaxis-texts-g text, +.apexcharts-xaxis-texts-g text { + fill: var(--textPrimary); + color: var(--textPrimary); +} + +.apexcharts-legend-text { + color: var(--textPrimary) !important; +} + + +/*! sanitize.css v7.0.3 | CC0 License | github.com/csstools/sanitize.css */ + +/* Document + * ========================================================================== */ + +/** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + +*, +::before, +::after { + background-repeat: no-repeat; + /* 1 */ + box-sizing: border-box; + /* 2 */ +} + +/** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + +::before, +::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ +} + +/** + * 1. Use the default cursor in all browsers (opinionated). + * 2. Use the default user interface font in all browsers (opinionated). + * 3. Correct the line height in all browsers. + * 4. Use a 4-space tab width in all browsers (opinionated). + * 5. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + * 6. Breaks words to prevent overflow in all browsers (opinionated) NB: This causes problems in Buttons. Removed + */ + +html { + cursor: default; + /* 1 */ + font-family: + 'Inter', + system-ui, + /* macOS 10.11-10.12 */ + -apple-system, + /* Windows 6+ */ + Segoe UI, + /* Android 4+ */ + Roboto, + /* Ubuntu 10.10+ */ + Ubuntu, + /* Gnome 3+ */ + Cantarell, + /* KDE Plasma 4+ */ + Oxygen, + /* fallback */ + sans-serif, + /* macOS emoji */ + "Apple Color Emoji", + /* Windows emoji */ + "Segoe UI Emoji", + /* Windows emoji */ + "Segoe UI Symbol", + /* Linux emoji */ + "Noto Color Emoji"; + /* 2 */ + + line-height: 1.5; + /* 3 */ + font-weight: 400; + color: var(--textPrimary, #f00); + -moz-tab-size: 4; + /* 4 */ + tab-size: 4; + /* 4 */ + -ms-text-size-adjust: 100%; + /* 5 */ + -webkit-text-size-adjust: 100%; + /* 5 */ + /* word-break: break-word; */ + /* 6 */ +} + +div.ReactModal__Content.ReactModal__Content--after-open { + background-color: var(--backgroundDefault, #f00); +} + +/* Sections + * ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; + background-color: var(--backgroundDefault, #f00); +} + +/** + * Correct the font size and margin on h1 elements within section and + * article contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; +} + +/* Grouping content + * ========================================================================== */ + +/** + * 1. Add the correct sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ +} + +/** + * Add the correct display in IE. + */ + +/** + * Remove the list style on navigation lists in all browsers (opinionated). + */ + +nav ol, +nav ul { + list-style: none; +} + +/** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd em font sizing in all browsers. + */ + +pre { + font-family: + /* macOS 10.10+ */ + Menlo, + /* Windows 6+ */ + Consolas, + /* Android 4+ */ + Roboto Mono, + /* Ubuntu 10.10+ */ + Ubuntu Monospace, + /* KDE Plasma 4+ */ + Oxygen Mono, + /* Linux/OpenOffice fallback */ + Liberation Mono, + /* fallback */ + monospace; + /* 1 */ + + font-size: 1em; + /* 2 */ +} + +/* Text-level semantics + * ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; + text-decoration: none; +} + +/** + * Add the correct text decoration in Edge, IE, Opera, and Safari. + */ + +abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +th, +b, +strong { + font-weight: 500; +} + +/** + * 1. Use the default monospace user interface font + * in all browsers (opinionated). + * 2. Correct the odd em font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: var(--monospace); + + font-size: 1em; + /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* + * Remove the text shadow on text selections in Firefox 61- (opinionated). + * 1. Restore the coloring undone by defining the text shadow + * in all browsers (opinionated). + */ + +::-moz-selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; +} + +::selection { + background-color: #b3d4fc; + /* 1 */ + color: #000; + /* 1 */ + text-shadow: none; +} + +/* Embedded content + * ========================================================================== */ + +/* + * Change the alignment on media elements in all browsers (opinionated). + */ + +audio, +canvas, +iframe, +img, +video { + vertical-align: middle; +} + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Change the fill color to match the text color in all browsers (opinionated). + */ + +svg { + fill: currentColor; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Tabular data + * ========================================================================== */ + +/** + * Collapse border spacing in all browsers (opinionated). + */ + +table { + border-collapse: collapse; +} + +/* Forms + * ========================================================================== */ + +/** + * Inherit styling in all browsers (opinionated). + */ + +button, +input, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +/** + * Remove the margin in Safari. + */ + +button, +input, +select { + margin: 0; +} + +/** + * 1. Show the overflow in IE. + * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + */ + +button { + overflow: visible; + /* 1 */ + text-transform: none; + /* 2 */ +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + appearance: button; + -webkit-appearance: button; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * Show the overflow in Edge and IE. + */ + +input { + overflow: visible; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from fieldset elements in IE. + */ + +legend { + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + white-space: normal; + /* 1 */ +} + +/** + * 1. Add the correct display in Edge and IE. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ +} + +/** + * Remove the inheritance of text transform in Firefox. + */ + +select { + text-transform: none; +} + +/** + * 1. Remove the margin in Firefox and Safari. + * 2. Remove the default vertical scrollbar in IE. + * 3. Change the resize direction on textareas in all browsers (opinionated). + */ + +textarea { + margin: 0; + /* 1 */ + overflow: auto; + /* 2 */ + resize: vertical; + /* 3 */ +} + +/** + * Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + padding: 0; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + appearance: textfield; + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to inherit in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/** + * Remove the inner border and padding of focus outlines in Firefox. + */ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus outline styles unset by the previous rule in Firefox. + */ + +:-moz-focusring { + outline: 1px dotted var(--button-text); +} + +/* Interactive + * ========================================================================== */ + +/* + * Add the correct display in Edge and IE. + */ + +details { + display: block; +} + +/* + * Add the correct styles in Edge, IE, and Safari. + */ + +dialog { + background-color: white; + border: solid; + color: black; + display: block; + height: -moz-fit-content; + height: -webkit-fit-content; + height: fit-content; + left: 0; + margin: auto; + padding: 1em; + position: absolute; + right: 0; + width: -moz-fit-content; + width: -webkit-fit-content; + width: fit-content; +} + +dialog:not([open]) { + display: none; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + * ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* User interaction + * ========================================================================== */ + +/* + * 1. Remove the tapping delay on clickable elements + in all browsers (opinionated). + * 2. Remove the tapping delay in IE 10. + */ + +a, +area, +button, +input, +label, +select, +summary, +textarea, +[tabindex] { + -ms-touch-action: manipulation; + /* 1 */ + touch-action: manipulation; + /* 2 */ +} + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} + +/* Accessibility + * ========================================================================== */ + +/** + * Change the cursor on busy elements in all browsers (opinionated). + */ + +[aria-busy="true"] { + cursor: progress; +} + +/* + * Change the cursor on control elements in all browsers (opinionated). + */ + +[aria-controls] { + cursor: pointer; +} + +/* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + +[aria-disabled=true], +[disabled] { + cursor: not-allowed; +} + +/* + * Change the display on visually hidden accessible elements + * in all browsers (opinionated). + */ + +[aria-hidden="false"][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; +} + +.ReactModal__Overlay { + z-index: 100; + height: auto; +} + +div.tooltip-content { + box-shadow: var(--defaultShadow); + position: absolute; + margin-left: 50px; + padding: 5px 5px 5px 5px; + width: 350px; + height: auto; + display: none; + color: var(--textPrimary); + background-color: var(--backgroundDefault); + z-index: 1; +} + +div.tooltip-content.centered { + justify-content: center; +} + +div.tooltip-content.centered.user-box { + width: 350px; + height: 190px; +} + +div.tooltip-content.centered.user-box.centered { + display: flex; + justify-content: center; +} + +div.tooltip:hover>div.tooltip-content { + display: flex; +} + +a { + color: var(--textHighlight); +} + +input.search-field { + width: 250px; + height: 35px; + margin-left: 8px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} + +h3.title { + font-size: calc(16px * 1.1); +} \ No newline at end of file diff --git a/frontend-web/webclient/app/Assets/Images/webdav/macos_dav_1.png b/frontend-web/webclient/app/Assets/Images/webdav/macos_dav_1.png deleted file mode 100644 index 19b5712ff5..0000000000 Binary files a/frontend-web/webclient/app/Assets/Images/webdav/macos_dav_1.png and /dev/null differ diff --git a/frontend-web/webclient/app/Assets/Images/webdav/macos_dav_2.png b/frontend-web/webclient/app/Assets/Images/webdav/macos_dav_2.png deleted file mode 100644 index a4afe89f21..0000000000 Binary files a/frontend-web/webclient/app/Assets/Images/webdav/macos_dav_2.png and /dev/null differ diff --git a/frontend-web/webclient/app/Assets/Images/webdav/nautilus_dav_1.png b/frontend-web/webclient/app/Assets/Images/webdav/nautilus_dav_1.png deleted file mode 100644 index 9a6b3fcf2f..0000000000 Binary files a/frontend-web/webclient/app/Assets/Images/webdav/nautilus_dav_1.png and /dev/null differ diff --git a/frontend-web/webclient/app/Assets/Images/webdav/win_dav_1.png b/frontend-web/webclient/app/Assets/Images/webdav/win_dav_1.png deleted file mode 100644 index ac348da987..0000000000 Binary files a/frontend-web/webclient/app/Assets/Images/webdav/win_dav_1.png and /dev/null differ diff --git a/frontend-web/webclient/app/Assets/Images/webdav/win_dav_2.png b/frontend-web/webclient/app/Assets/Images/webdav/win_dav_2.png deleted file mode 100644 index 2ade0aca83..0000000000 Binary files a/frontend-web/webclient/app/Assets/Images/webdav/win_dav_2.png and /dev/null differ diff --git a/frontend-web/webclient/app/Assets/Images/webdav/win_dav_3.png b/frontend-web/webclient/app/Assets/Images/webdav/win_dav_3.png deleted file mode 100644 index 6029d2cf0d..0000000000 Binary files a/frontend-web/webclient/app/Assets/Images/webdav/win_dav_3.png and /dev/null differ diff --git a/frontend-web/webclient/app/Authentication/lib.ts b/frontend-web/webclient/app/Authentication/lib.ts index 93636b83a8..38a67d8262 100644 --- a/frontend-web/webclient/app/Authentication/lib.ts +++ b/frontend-web/webclient/app/Authentication/lib.ts @@ -1,5 +1,5 @@ import {Store} from "redux"; -import {b64DecodeUnicode, displayErrorMessageOrDefault, inRange, inSuccessRange, is5xxStatusCode} from "@/UtilityFunctions"; +import {b64DecodeUnicode, inRange, inSuccessRange, is5xxStatusCode} from "@/UtilityFunctions"; import {setStoredProject} from "@/Project/ReduxState"; import {CallParameters} from "./CallParameters"; import {signIntentToCall, clearSigningKey} from "@/Authentication/MessageSigning"; diff --git a/frontend-web/webclient/app/Core.tsx b/frontend-web/webclient/app/Core.tsx index 8e2fdbba6b..179bb1fe56 100755 --- a/frontend-web/webclient/app/Core.tsx +++ b/frontend-web/webclient/app/Core.tsx @@ -4,6 +4,9 @@ import {Dispatch} from "redux"; import {Provider, useDispatch} from "react-redux"; import {BrowserRouter} from "react-router-dom"; +import "@/Assets/Colors.css"; +import "@/Assets/GlobalStyle.css"; + import App from "@/Applications/Studio/Applications"; import ApplicationsOverview from "./Applications/Category"; import ApplicationsLanding from "./Applications/Landing"; @@ -64,7 +67,7 @@ import {inDevEnvironment} from "@/UtilityFunctions"; import {ErrorBoundary} from "@/ErrorBoundary/ErrorBoundary"; import {MainContainer} from "@/ui-components/MainContainer"; import {Client} from "@/Authentication/HttpClientInstance"; -import {Flex, UIGlobalStyle} from "@/ui-components"; +import {Flex} from "@/ui-components"; import {findAvatar} from "@/UserSettings/Redux"; import {USER_LOGIN, UserActionType, store} from "@/Utilities/ReduxUtilities"; import {removeExpiredFileUploads} from "@/UtilityFunctions"; @@ -320,12 +323,6 @@ async function onLogin(dispatch: Dispatch): Promise { if (action !== null) dispatch(action); } -(() => { - const globalStyle = document.createElement("style"); - globalStyle.innerHTML = UIGlobalStyle; - document.head.append(globalStyle); -})(); - Client.initializeStore(store); removeExpiredFileUploads(); findCustomThemeColorOnLaunch(); diff --git a/frontend-web/webclient/app/DefaultObjects.ts b/frontend-web/webclient/app/DefaultObjects.ts index ce8ecff92e..a7376c3ea0 100644 --- a/frontend-web/webclient/app/DefaultObjects.ts +++ b/frontend-web/webclient/app/DefaultObjects.ts @@ -42,9 +42,11 @@ export function initStatus(): StatusReduxObject { }); } -export const initDashboard = (): DashboardStateProps => ({ - loading: false, -}); +export function initDashboard(): DashboardStateProps { + return { + loading: false, + } +} export function initObject(): ReduxObject { return { diff --git a/frontend-web/webclient/app/Files/FileBrowse.tsx b/frontend-web/webclient/app/Files/FileBrowse.tsx index 2e91e86adf..3c09b8f4f6 100644 --- a/frontend-web/webclient/app/Files/FileBrowse.tsx +++ b/frontend-web/webclient/app/Files/FileBrowse.tsx @@ -73,7 +73,6 @@ import {FilesMoveRequestItem, UFile, UFileIncludeFlags} from "@/UCloud/UFile"; import {sidebarFavoriteCache} from "./FavoriteCache"; import {SidebarTabId} from "@/ui-components/SidebarComponents"; import {HTMLTooltip} from "@/ui-components/Tooltip"; -import {Feature, hasFeature} from "@/Features"; import SharesApi, {OutgoingShareGroup} from "@/UCloud/SharesApi"; import {sendFailureNotification, sendSuccessNotification} from "@/Notifications"; diff --git a/frontend-web/webclient/app/UCloud/FilesApi.tsx b/frontend-web/webclient/app/UCloud/FilesApi.tsx index a03d4541d0..0a5a5f8887 100644 --- a/frontend-web/webclient/app/UCloud/FilesApi.tsx +++ b/frontend-web/webclient/app/UCloud/FilesApi.tsx @@ -32,7 +32,7 @@ import * as Heading from "@/ui-components/Heading"; import {Operation, ShortcutKey} from "@/ui-components/Operation"; import {dialogStore} from "@/Dialog/DialogStore"; import {ItemRenderer} from "@/ui-components/Browse"; -import {PrettyFilePath, prettyFilePath, usePrettyFilePath} from "@/Files/FilePath"; +import {prettyFilePath, usePrettyFilePath} from "@/Files/FilePath"; import {OpenWithBrowser} from "@/Applications/OpenWith"; import {addStandardDialog, addStandardInputDialog} from "@/UtilityComponents"; import {ProductStorage} from "@/Accounting"; diff --git a/frontend-web/webclient/app/ui-components/GlobalStyle.tsx b/frontend-web/webclient/app/ui-components/GlobalStyle.tsx index 20e1b6c9ae..607e3ae11b 100644 --- a/frontend-web/webclient/app/ui-components/GlobalStyle.tsx +++ b/frontend-web/webclient/app/ui-components/GlobalStyle.tsx @@ -100,7 +100,7 @@ export function compRgbToHsl(r: number, g: number, b: number): [number, number, } export function hslToRgb(h: number, s: number, l: number): string { - function hueToRgb(p, q, t) { + function hueToRgb(p: number, q: number, t: number) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; @@ -109,7 +109,7 @@ export function hslToRgb(h: number, s: number, l: number): string { return p; } - let r, g, b; + let r: number, g: number, b: number; if (s === 0) { r = g = b = l; // achromatic @@ -241,929 +241,3 @@ function generatePalette(): string { return builder; } -const UIGlobalStyle = ` - html.light { - --primaryMain: var(--blue-60); - --primaryLight: var(--blue-50); - --primaryDark: var(--blue-70); - --primaryContrast: #ffffff; - --primaryContrastAlt: #a6a8a9; - --secondaryMain: var(--gray-10); - --secondaryLight: var(--gray-5); - --secondaryDark: var(--gray-20); - --secondaryContrast: #000000; - --secondaryContrastAlt: #222222; - --errorMain: var(--red-60); - --errorLight: var(--red-50); - --errorDark: var(--red-70); - --errorContrast: #ffffff; - --errorContrastAlt: #a6a8a9; - --warningMain: var(--orange-30); - --warningLight: var(--orange-20); - --warningDark: var(--orange-40); - --warningContrast: #000000; - --warningContrastAlt: #222222; - --infoMain: var(--gray-70); - --infoLight: var(--gray-60); - --infoDark: var(--gray-80); - --infoContrast: #ffffff; - --infoContrastAlt: #a6a8a9; - --successMain: var(--green-50); - --successLight: var(--green-40); - --successDark: var(--green-60); - --successContrast: #ffffff; - --successContrastAlt: #a6a8a9; - --backgroundDefault: #ffffff; - --borderColor: var(--gray-20); - --borderColorHover: var(--gray-30); - --backgroundCard: #ffffff; - --backgroundCardHover: var(--gray-5); - --backgroundDisabled: var(--gray-5); - --textPrimary: #212529; - --textSecondary: #646669; - --textDisabled: #909294; - --rowHover: var(--gray-5); - --rowActive: var(--blue-10); - --gradientStart: var(--blue-30); - --gradientEnd: var(--blue-20); - --linkColorHover: var(--primaryDark); - --linkColor: var(--primaryMain); - --dialogToolbar: var(--gray-5); - - --purple-fg: var(--purple-60); - --red-fg: var(--red-60); - --orange-fg: var(--orange-60); - --yellow-fg: var(--yellow-60); - --green-fg: var(--green-60); - --gray-fg: var(--gray-60); - --blue-fg: var(--blue-60); - --pink-fg: var(--pink-60); - } - html.dark { - --modalShadow: rgba(0, 0, 0, 0.75); - --primaryMain: var(--blue-80); - --primaryLight: var(--blue-70); - --primaryDark: var(--blue-90); - --primaryContrast: #ffffff; - --primaryContrastAlt: #a6a8a9; - --secondaryMain: var(--gray-30); - --secondaryLight: var(--gray-20); - --secondaryDark: var(--gray-40); - --secondaryContrast: #000000; - --secondaryContrastAlt: #222222; - --errorMain: var(--red-60); - --errorLight: var(--red-50); - --errorDark: var(--red-70); - --errorContrast: #ffffff; - --errorContrastAlt: #a6a8a9; - --warningMain: var(--orange-30); - --warningLight: var(--orange-20); - --warningDark: var(--orange-40); - --warningContrast: #000000; - --warningContrastAlt: #222222; - --infoMain: var(--gray-30); - --infoLight: var(--gray-20); - --infoDark: var(--gray-40); - --infoContrast: #000000; - --infoContrastAlt: #222222; - --successMain: var(--green-50); - --successLight: var(--green-40); - --successDark: var(--green-60); - --successContrast: #ffffff; - --successContrastAlt: #a6a8a9; - --backgroundDefault: var(--gray-100); - --borderColor: var(--gray-80); - --borderColorHover: var(--gray-70); - --backgroundCard: var(--gray-90); - --backgroundCardHover: var(--gray-90); - --backgroundDisabled: var(--gray-90); - --textPrimary: #ffffff; - --textSecondary: #bcbebf; - --textDisabled: #909294; - --rowHover: var(--gray-90); - --rowActive: var(--blue-90); - --gradientStart: var(--blue-90); - --gradientEnd: var(--blue-80); - --linkColor: var(--blue-50); - --linkColorHover: var(--blue-70); - --dialogToolbar: var(--gray-90); - - --purple-fg: var(--purple-40); - --red-fg: var(--red-40); - --orange-fg: var(--orange-40); - --yellow-fg: var(--yellow-40); - --green-fg: var(--green-40); - --gray-fg: var(--gray-40); - --blue-fg: var(--blue-40); - --pink-fg: var(--pink-40); - } - -html.light { - color-scheme: light; -} - -html.dark { - color-scheme: dark; -} - -html { - --modalShadow: rgba(255, 255, 255, 0.75); - - /* New color palette */ - --purple-5: #FBF7FB; - --purple-10: #F5EBF5; - --purple-20: #E6CDE6; - --purple-30: #D8B0D8; - --purple-40: #C993C9; - --purple-50: #B972B9; - --purple-60: #A74EA7; - --purple-70: #993399; - --purple-80: #870F87; - --purple-90: #680068; - --red-5: #FFF6F6; - --red-10: #FFE9E1; - --red-20: #FFC9B6; - --red-30: #FFA78C; - --red-40: #FF805F; - --red-50: #FF4628; - --red-60: #E11005; - --red-70: #BD1809; - --red-80: #961B0B; - --red-90: #6C1A0C; - --orange-5: #FFF6EF; - --orange-10: #FFEAD7; - --orange-20: #FFCA9A; - --orange-30: #FFA95B; - --orange-40: #FF8018; - --orange-50: #E0680D; - --orange-60: #B7540A; - --orange-70: #9B4708; - --orange-80: #7D3806; - --orange-90: #5D2A05; - --yellow-5: #FFF8D6; - --yellow-10: #FFEE98; - --yellow-20: #FFCF04; - --yellow-30: #E6B704; - --yellow-40: #CA9F04; - --yellow-50: #AC8604; - --yellow-60: #8E6C03; - --yellow-70: #795B02; - --yellow-80: #624802; - --yellow-90: #493501; - --green-5: #EDFCE9; - --green-10: #D3F8C9; - --green-20: #89EC6D; - --green-30: #4BD823; - --green-40: #42BD1F; - --green-50: #389F1A; - --green-60: #2D8215; - --green-70: #266D12; - --green-80: #1F580E; - --green-90: #17410B; - --gray-5: #F7F8F9; - --gray-10: #ECEEF0; - --gray-20: #D0D5DC; - --gray-30: #B6BEC8; - --gray-40: #9BA6B4; - --gray-50: #7F8C9E; - --gray-60: #627288; - --gray-70: #4F6178; - --gray-80: #404D60; - --gray-90: #2A313B; - --gray-100: #21262D; - --blue-5: #F4F8FE; - --blue-10: #E4EFFC; - --blue-20: #BCD7F7; - --blue-30: #95C0F3; - --blue-40: #6DA8EE; - --blue-50: #3E8CE9; - --blue-60: #096DE3; - --blue-70: #035BC3; - --blue-80: #03499D; - --blue-90: #023774; - --pink-5: #FCE4EC; - --pink-10: #F8BBD0; - --pink-20: #F48FB1; - --pink-30: #F06292; - --pink-40: #EC407A; - --pink-50: #E91E63; - --pink-60: #D81B60; - --pink-70: #C2185B; - --pink-80: #AD1457; - --pink-90: #880E4F; - - - /* New color palette END */ - - --defaultShadow: - rgba(0, 0, 0, 0.3) 0px 1px 3px 0px, - rgba(0, 0, 0, 0.3) 0px 1px 2px -1px; - - --defaultCardBorder: 0.5px solid var(--borderColor); - - --sidebarWidth: 64px; - --secondarySidebarWidth: 220px; - --popInWidth: 368px; - --sidebarColor: var(--blue-60); - --sidebarSecondaryColor: var(--blue-70); - --appLogoBackground: transparent; - - --secondaryText: 10px; - --buttonText: 14px; - --breadText: 14px; - --interactiveElementsSize: 20px; - font-size: 14px; - - --monospace: 'Jetbrains Mono', 'Ubuntu Mono', courier-new, courier, monospace; - --sansSerif: 'Inter', sans-serif; - - --iconColor: var(--textPrimary); - --iconColor2: var(--textPrimary); - --FtIconColor: #f5f7f9; - --FtIconColor2: #c9d3df; - --FtFolderColor: #8393A7; - --FtFolderColor2: #c9d3df; - - --fixedWhite: #ffffff; - --fixedBlack: #000000; - - --favoriteColor: var(--yellow-20); - --favoriteColorEmpty: var(--secondaryDark); - --wayfGreen: #c8dd51; - - font-feature-settings: "cv05" on, "cv09" on, "cv02" on, "calt" on, "ss03" on; -} - -html.dark { - --sidebarColor: var(--blue-90); - --sidebarSecondaryColor: var(--blue-80); - --appLogoBackground: #ffffff; - - --defaultCardBorder: 1px solid var(--borderColor); - --defaultShadow: - rgba(0, 0, 0, 0.7) 0px 1px 3px 0px, - rgba(255, 255, 255, 0.3) 0px 1px 2px -1px; -} - - -h1, h2, h3, h4, h5 { - font-weight: normal; -} - -.apexcharts-tooltip, -.apexcharts-legend-text, -.apexcharts-yaxis-title text, -.apexcharts-yaxis-texts-g text, -.apexcharts-xaxis-texts-g text { - fill: var(--textPrimary); - color: var(--textPrimary); -} - -.apexcharts-legend-text { - color: var(--textPrimary) !important; -} - - -/*! sanitize.css v7.0.3 | CC0 License | github.com/csstools/sanitize.css */ - -/* Document - * ========================================================================== */ - -/** - * 1. Remove repeating backgrounds in all browsers (opinionated). - * 2. Add border box sizing in all browsers (opinionated). - */ - -*, -::before, -::after { - background-repeat: no-repeat; /* 1 */ - box-sizing: border-box; /* 2 */ -} - -/** - * 1. Add text decoration inheritance in all browsers (opinionated). - * 2. Add vertical alignment inheritance in all browsers (opinionated). - */ - -::before, -::after { - text-decoration: inherit; /* 1 */ - vertical-align: inherit; /* 2 */ -} - -/** - * 1. Use the default cursor in all browsers (opinionated). - * 2. Use the default user interface font in all browsers (opinionated). - * 3. Correct the line height in all browsers. - * 4. Use a 4-space tab width in all browsers (opinionated). - * 5. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - * 6. Breaks words to prevent overflow in all browsers (opinionated) NB: This causes problems in Buttons. Removed - */ - -html { - cursor: default; /* 1 */ - font-family: - 'Inter', - system-ui, - /* macOS 10.11-10.12 */ -apple-system, - /* Windows 6+ */ Segoe UI, - /* Android 4+ */ Roboto, - /* Ubuntu 10.10+ */ Ubuntu, - /* Gnome 3+ */ Cantarell, - /* KDE Plasma 4+ */ Oxygen, - /* fallback */ sans-serif, - /* macOS emoji */ "Apple Color Emoji", - /* Windows emoji */ "Segoe UI Emoji", - /* Windows emoji */ "Segoe UI Symbol", - /* Linux emoji */ "Noto Color Emoji"; /* 2 */ - - line-height: 1.5; /* 3 */ - font-weight: 400; - color: var(--textPrimary, #f00); - -moz-tab-size: 4; /* 4 */ - tab-size: 4; /* 4 */ - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ - /* word-break: break-word; */ /* 6 */ -} - -div.ReactModal__Content.ReactModal__Content--after-open { - background-color: var(--backgroundDefault, #f00); -} - -/* Sections - * ========================================================================== */ - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; - background-color: var(--backgroundDefault, #f00); -} - -/** - * Correct the font size and margin on h1 elements within section and - * article contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; -} - -/* Grouping content - * ========================================================================== */ - -/** - * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * Add the correct display in IE. - */ - -/** - * Remove the list style on navigation lists in all browsers (opinionated). - */ - -nav ol, -nav ul { - list-style: none; -} - -/** - * 1. Use the default monospace user interface font - * in all browsers (opinionated). - * 2. Correct the odd em font sizing in all browsers. - */ - -pre { - font-family: - /* macOS 10.10+ */ Menlo, - /* Windows 6+ */ Consolas, - /* Android 4+ */ Roboto Mono, - /* Ubuntu 10.10+ */ Ubuntu Monospace, - /* KDE Plasma 4+ */ Oxygen Mono, - /* Linux/OpenOffice fallback */ Liberation Mono, - /* fallback */ monospace; /* 1 */ - - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - * ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; - text-decoration: none; -} - -/** - * Add the correct text decoration in Edge, IE, Opera, and Safari. - */ - -abbr[title] { - text-decoration: underline; - text-decoration: underline dotted; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -th, -b, -strong { - font-weight: 500; -} - -/** - * 1. Use the default monospace user interface font - * in all browsers (opinionated). - * 2. Correct the odd em font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: var(--monospace); - - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/* - * Remove the text shadow on text selections in Firefox 61- (opinionated). - * 1. Restore the coloring undone by defining the text shadow - * in all browsers (opinionated). - */ - -::-moz-selection { - background-color: #b3d4fc; /* 1 */ - color: #000; /* 1 */ - text-shadow: none; -} - -::selection { - background-color: #b3d4fc; /* 1 */ - color: #000; /* 1 */ - text-shadow: none; -} - -/* Embedded content - * ========================================================================== */ - -/* - * Change the alignment on media elements in all browsers (opinionated). - */ - -audio, -canvas, -iframe, -img, -video { - vertical-align: middle; -} - -/** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Change the fill color to match the text color in all browsers (opinionated). - */ - -svg { - fill: currentColor; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Tabular data - * ========================================================================== */ - -/** - * Collapse border spacing in all browsers (opinionated). - */ - -table { - border-collapse: collapse; -} - -/* Forms - * ========================================================================== */ - -/** - * Inherit styling in all browsers (opinionated). - */ - -button, -input, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -/** - * Remove the margin in Safari. - */ - -button, -input, -select { - margin: 0; -} - -/** - * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. - */ - -button { - overflow: visible; /* 1 */ - text-transform: none; /* 2 */ -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * Show the overflow in Edge and IE. - */ - -input { - overflow: visible; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from fieldset elements in IE. - */ - -legend { - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in Edge and IE. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Remove the inheritance of text transform in Firefox. - */ - -select { - text-transform: none; -} - -/** - * 1. Remove the margin in Firefox and Safari. - * 2. Remove the default vertical scrollbar in IE. - * 3. Change the resize direction on textareas in all browsers (opinionated). - */ - -textarea { - margin: 0; /* 1 */ - overflow: auto; /* 2 */ - resize: vertical; /* 3 */ -} - -/** - * Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - padding: 0; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Safari. - */ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; - -webkit-appearance: none; -} - -/** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to inherit in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/** - * Remove the inner border and padding of focus outlines in Firefox. - */ - -::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus outline styles unset by the previous rule in Firefox. - */ - -:-moz-focusring { - outline: 1px dotted var(--button-text); -} - -/* Interactive - * ========================================================================== */ - -/* - * Add the correct display in Edge and IE. - */ - -details { - display: block; -} - -/* - * Add the correct styles in Edge, IE, and Safari. - */ - -dialog { - background-color: white; - border: solid; - color: black; - display: block; - height: -moz-fit-content; - height: -webkit-fit-content; - height: fit-content; - left: 0; - margin: auto; - padding: 1em; - position: absolute; - right: 0; - width: -moz-fit-content; - width: -webkit-fit-content; - width: fit-content; -} - -dialog:not([open]) { - display: none; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Scripting - * ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* User interaction - * ========================================================================== */ - -/* - * 1. Remove the tapping delay on clickable elements - in all browsers (opinionated). - * 2. Remove the tapping delay in IE 10. - */ - -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; /* 1 */ - touch-action: manipulation; /* 2 */ -} - -/** - * Add the correct display in IE 10-. - */ - -[hidden] { - display: none; -} - -/* Accessibility - * ========================================================================== */ - -/** - * Change the cursor on busy elements in all browsers (opinionated). - */ - -[aria-busy="true"] { - cursor: progress; -} - -/* - * Change the cursor on control elements in all browsers (opinionated). - */ - -[aria-controls] { - cursor: pointer; -} - -/* - * Change the cursor on disabled, not-editable, or otherwise - * inoperable elements in all browsers (opinionated). - */ - -[aria-disabled=true], -[disabled] { - cursor: not-allowed; -} - -/* - * Change the display on visually hidden accessible elements - * in all browsers (opinionated). - */ - -[aria-hidden="false"][hidden]:not(:focus) { - clip: rect(0, 0, 0, 0); - display: inherit; - position: absolute; -} - -.ReactModal__Overlay { - z-index: 100; - height: auto; -} - -div.tooltip-content { - box-shadow: var(--defaultShadow); - position: absolute; - margin-left: 50px; - padding: 5px 5px 5px 5px; - width: 350px; - height: auto; - display: none; - color: var(--textPrimary); - background-color: var(--backgroundDefault); - z-index: 1; -} - -div.tooltip-content.centered { - justify-content: center; -} - -div.tooltip-content.centered.user-box { - width: 350px; - height: 190px; -} - -div.tooltip-content.centered.user-box.centered { - display: flex; - justify-content: center; -} - -div.tooltip:hover > div.tooltip-content { - display: flex; -} - -a { - color: var(--textHighlight); -} - -input.search-field { - width: 250px; - height: 35px; - margin-left: 8px; -} - -h1, h2, h3, h4, h5, h6 { - margin: 0; -} - -h3.title { - font-size: calc(16px * 1.1); -} - -`; - -export default UIGlobalStyle; diff --git a/frontend-web/webclient/app/ui-components/icons/appFav.svg b/frontend-web/webclient/app/ui-components/icons/appFav.svg deleted file mode 100644 index 56d834569d..0000000000 --- a/frontend-web/webclient/app/ui-components/icons/appFav.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/frontend-web/webclient/app/ui-components/icons/index.tsx b/frontend-web/webclient/app/ui-components/icons/index.tsx index 54ce524bf2..4bc5405f44 100644 --- a/frontend-web/webclient/app/ui-components/icons/index.tsx +++ b/frontend-web/webclient/app/ui-components/icons/index.tsx @@ -84,29 +84,6 @@ export const anglesUpSolid = (props: any) => ( ); -export const appFav = (props: any) => ( - - - -); export const appStore = (props: any) => ( ( /> ); -export const starRibbon = (props: any) => ( - - - -); export const suggestion = (props: any) => ( - - - - - - - - diff --git a/frontend-web/webclient/app/ui-components/index.ts b/frontend-web/webclient/app/ui-components/index.ts index 6b9b64f2f4..3100b8ece2 100644 --- a/frontend-web/webclient/app/ui-components/index.ts +++ b/frontend-web/webclient/app/ui-components/index.ts @@ -29,7 +29,6 @@ export {default as List} from "./List"; export {default as ButtonGroup} from "./ButtonGroup"; export {default as DataList} from "./DataList"; export {default as TextArea} from "./TextArea"; -export {default as UIGlobalStyle} from "./GlobalStyle"; export {default as ExternalLink} from "./ExternalLink"; export {default as Markdown} from "./Markdown"; export {SelectableTextWrapper, SelectableText} from "./SelectableText"; diff --git a/frontend-web/webclient/package.json b/frontend-web/webclient/package.json index 73cab1e27c..99420429fc 100644 --- a/frontend-web/webclient/package.json +++ b/frontend-web/webclient/package.json @@ -8,7 +8,6 @@ "start": "vite", "start:local": "vite --mode local-dev", "start:compose": "vite --mode compose", - "start:sandbox": "vite --mode sandbox", "start:prod": "vite --mode prod", "watch": "tsc --watch --noEmit", "build": "node scripts/update-version-file.js && vite build", diff --git a/provider-integration/im2/docs/src/SUMMARY.md b/provider-integration/im2/docs/src/SUMMARY.md index 56d23610da..7820ee9943 100644 --- a/provider-integration/im2/docs/src/SUMMARY.md +++ b/provider-integration/im2/docs/src/SUMMARY.md @@ -55,6 +55,16 @@ - [Configuration](./k8s/config-reference.md) - [CLI](./k8s/cli-reference.md) + + +# Frontend development + +- [Frontend description and development guidelines](./dev/frontend-development.md) + +# Branding for UCloud + +- [Branding and identity for UCloud](./branding/branding.md) + # H: Procedures - [H: Procedures](./procedures.md) diff --git a/provider-integration/im2/docs/src/branding/branding.md b/provider-integration/im2/docs/src/branding/branding.md new file mode 100644 index 0000000000..ddfe2d6147 --- /dev/null +++ b/provider-integration/im2/docs/src/branding/branding.md @@ -0,0 +1,64 @@ +# UCloud branding + +A short overview for the branding and visual identity for the UCloud platform. + +## Stylizing + +The platform name is stylized "UCloud", with uppercase U and C, and lowercase for the remainder. + +Correct: UCloud + +Incorrect: Ucloud, uCloud + +## Logo + +The UCloud logo is a hexagon shape with a node graph surrounding it. +The nodes are white, unless a contrast is needed, in which case the outer nodes and edges are rendered in blue. + +| Image name | | Uses | +|------------------------------------------------------------------------------------|-----------------------------------------|----------------------------------------------------------------------| +| [favicon](./favicon.ico) | | Used for the UCloud-site and associated documentation | +| [Icon logo, white nodes](./logo_esc.svg) | | Usually used when the UCloud logo is presented on a blue background | +| Icon logo, blue nodes, with text ([svg](./ucloud-blue.svg), [png](./ucloud.png)) | | Used on the login page | +| [Icon logo, blue nodes, no text](./ucloud-blue-no-text.svg) | | Default logo to use | + + + + + +## Colors + +The main accent color for the UCloud platform is a blue color, with a different level of darkness for light and dark themes. + +The color variable names and their associated hex-values can be seen in [Colors.css](https://github.com/SDU-eScience/UCloud/tree/master/frontend-web/webclient/app/Assets/Colors.css). + + + +| Notable color variable name (without prefix) | Uses | +|---------------------------------------------------------------------|---------------------------------------------------------------------------| +| primaryMain | The accent color used for default buttons, checkboxes | +| successMain | Used for creation, approving, accepting, etc. | +| errorMain | Used for cancelling, dismissing, deleting, removing, etc. | + + + +## Typography + +The UCloud platform uses multiple fonts for different purposes: + +| Font | Uses | +|---------------------------------------------------------------------|---------------------------------------------------------------------------| +| [Inter](https://fonts.google.com/specimen/Inter) | The default font for UCloud, used for non-monospaced text. | +| [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) | The font used for monospaced text, e.g. code samples, editor, etc. | + + +## Merchandise + +Two teddy bear plushies are available to lend for employees at the eScience Center for work-related events. + + + + +T-shirts have been made with expos and conferences in mind, and can be purchased for anyone needing one for an upcoming expo/conference. (See introduction on how to insert image) + + \ No newline at end of file diff --git a/provider-integration/im2/docs/src/branding/christmas_teddy.webp b/provider-integration/im2/docs/src/branding/christmas_teddy.webp new file mode 100644 index 0000000000..b707d5ee9e Binary files /dev/null and b/provider-integration/im2/docs/src/branding/christmas_teddy.webp differ diff --git a/provider-integration/im2/docs/src/branding/favicon.ico b/provider-integration/im2/docs/src/branding/favicon.ico new file mode 100644 index 0000000000..6b902a8fe8 Binary files /dev/null and b/provider-integration/im2/docs/src/branding/favicon.ico differ diff --git a/provider-integration/im2/docs/src/branding/favicon_blk.png b/provider-integration/im2/docs/src/branding/favicon_blk.png new file mode 100644 index 0000000000..e2518932b7 Binary files /dev/null and b/provider-integration/im2/docs/src/branding/favicon_blk.png differ diff --git a/provider-integration/im2/docs/src/branding/favicon_color.png b/provider-integration/im2/docs/src/branding/favicon_color.png new file mode 100644 index 0000000000..b3955ef5cd Binary files /dev/null and b/provider-integration/im2/docs/src/branding/favicon_color.png differ diff --git a/provider-integration/im2/docs/src/branding/logo_esc.svg b/provider-integration/im2/docs/src/branding/logo_esc.svg new file mode 100644 index 0000000000..dc82d5e515 --- /dev/null +++ b/provider-integration/im2/docs/src/branding/logo_esc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/provider-integration/im2/docs/src/branding/simple_teddy.webp b/provider-integration/im2/docs/src/branding/simple_teddy.webp new file mode 100644 index 0000000000..a2bb6112cb Binary files /dev/null and b/provider-integration/im2/docs/src/branding/simple_teddy.webp differ diff --git a/provider-integration/im2/docs/src/branding/t-shirt.jpg b/provider-integration/im2/docs/src/branding/t-shirt.jpg new file mode 100644 index 0000000000..37bbac6e5d Binary files /dev/null and b/provider-integration/im2/docs/src/branding/t-shirt.jpg differ diff --git a/provider-integration/im2/docs/src/branding/ucloud-blue-no-text.svg b/provider-integration/im2/docs/src/branding/ucloud-blue-no-text.svg new file mode 100644 index 0000000000..fe81f39215 --- /dev/null +++ b/provider-integration/im2/docs/src/branding/ucloud-blue-no-text.svg @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/provider-integration/im2/docs/src/branding/ucloud-blue.svg b/provider-integration/im2/docs/src/branding/ucloud-blue.svg new file mode 100644 index 0000000000..2ad71ede3b --- /dev/null +++ b/provider-integration/im2/docs/src/branding/ucloud-blue.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + UCloud + + + + + + + + + + + + + + + + + diff --git a/provider-integration/im2/docs/src/branding/ucloud.png b/provider-integration/im2/docs/src/branding/ucloud.png new file mode 100644 index 0000000000..4e44ce9931 Binary files /dev/null and b/provider-integration/im2/docs/src/branding/ucloud.png differ diff --git a/provider-integration/im2/docs/src/dev/frontend-development.md b/provider-integration/im2/docs/src/dev/frontend-development.md new file mode 100644 index 0000000000..738a06fc5d --- /dev/null +++ b/provider-integration/im2/docs/src/dev/frontend-development.md @@ -0,0 +1,235 @@ +# UCloud frontend development + +## Introduction + + +The UCloud frontend is the default way of communicating with the UCloud platform for the end user. + +The UI acts as a centralised point, that can communicate with different connected providers to make use of the features available, taking in to account what features are not. + +Managing of drives, files, runs, and other resources are available to the user through the interface, with the resource's relevant actions. + +The implementation is in the folder [`/frontend-web/webclient/`](https://github.com/SDU-eScience/UCloud/tree/master/frontend-web/webclient/). + +## Technologies + +The UCloud UI is written in Typescript, with the front-end library React. Some use of the library Redux exists in the codebase, but it is rarely used when developing new features. + +Where the performance of React has not been adequate, Vanilla TypeScript/ECMAScript has been used instead. An example of this is the ResourceBrowser component, where very little use of React is present. + +## Installation + +### Running the UI + +For a local dev environment, the `launcher`-tool, available in the root folder of the repository, can be run, which will automatically initialize and start the environment. +The UI will be available at `ucloud.localhost.direct` and will use the local environment as the backend. An admin user will be generated with the following login info: + +- Username: user +- Password: mypassword + +If using another backend is required, the frontend can be run using two commands, while in the `webclient` folder: + +First: +- `npm i` + +And depending on what backend is needed: +- For `dev` run `npm run start` (requires VPN access) +- For `production` run `npm run start:prod` + +Logins for these can be provided upon request. + +Some editors will only run type checking on open files and not the entire project. To have the compiler type check the frontend, run `npm run watch`. + +## On adding NPM packages + +Preferably keep new NPM packages to a minimum as they are something that might need to be updated, increasingly through issues with security. +Whether or not to add a package will be up to the programmer, depending on saving time through offloading the complexity to the package or similar. +If a package is added to `package.json` file, the version must only consist of the version number, fixing it to that version. + +This means no `~`, `^`, `>=`, `>`, `<=`, `<`, `x`, `*` or `latest`, as this provides less control over which version of the package will be installed. + +## Styling + +Styling for the frontend is mostly done with the function `injectStyle`. This function dynamically injects CSS rules to a stylesheet at run-time. + +The injected CSS is mostly injected as is, with the exception of the interpolation of the classnames. + +### Creating a class with rules: + +```typescript +const NameOfClass = injectStyle("class-name", cl => ` + ${cl} { + background-color: var(--errorMain); + } + + ${cl}:hover { + background-color: var(--primaryMain); + } +`); +``` + + + +### Using the class: + + +```typescript +function Component(): React.ReactNode { + return
+} +``` + +The function `injectStyleSimple` can also be used if the code doesn't require pseudo-classes, for instance: + +```typescript +const NameOfClass = injectStyleSimple("class-name", ` + background-color: red; +`); +``` + +Using the class is the same as previously described above. + +The function appends a number, to ensure uniqueness. The above could for instance return the string `class-name90`. + +If just a classname is needed without any rules, see `makeClassName` function. + +Relevant code can be found in [/Unstyled/index.ts](https://github.com/sdu-eScience/UCloud/tree/master/frontend-web/webclient/app/Unstyled/index.ts) + +## Network calls + +The `callAPI`-function is used for contacting the backend, fetching data and posting updates. + +The first parameter `APICallParameter`, is an object that contains HTTP method, optional body, and other relevant arguments for the network call. + +Helper functions to create an `APICallParameter`-object exist, that map to different network actions. See `apiCreate`, `apiBrowse`, `apiRetrieve`, `apiSearch`, `apiUpdate`, and `apiDelete`. + +Example usage: + +```typescript +export function usageReportRetrieve(request: {start: number; end: number;}): APICallParameters<{start: number; end: number;}> { + return apiRetrieve(request, "/api/usageReport"); +} + +function Component(): React.ReactNode { + /* Code */ + + React.useEffect(() => { + const result = await callAPI(usageReportRetrieve({start: 0, end: new Date().getTime()})); + /* Do stuff with result */ + }); + + /* Code */ +} +``` + +`callAPI` takes authentication into account. If authentication is not needed for the request, [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) can be used instead. + +Relevant code can be found in [Authentication/DataHook.ts](https://github.com/sdu-eScience/UCloud/tree/master/frontend-web/webclient/app/Authentication/DataHook.ts) + +## HttpClient - lib.ts + +A singleton named `Client` is the instantiation of the `HttpClient` that is used to make authenticated calls to the backend. It exposes some additional functionality, like `activeUsername()`, `isLoggedIn()` and `projectId()`, with the latter only to be used when the `useProjectId`-hook can't be used. + +Making backend calls should go through `callAPI` or similar, and not be done by using the `call` function directly. + +Relevant code can be found in [`/app/Authentication/lib.ts`](https://github.com/sdu-eScience/UCloud/tree/master/frontend-web/webclient/app/Authentication/lib.ts) + +## Adding a route to a component + +When creating a new component that needs its own route-path, the approach to follow is in the file `Core.tsx`. + +If frontend authentication is required for accessing the component, the component should be wrapped in the function `requireAuth`, like so: + +```jsx + +``` + +If authentication is not needed, this can be omitted, like so: + +```jsx +} /> +``` + +The route-path must be added to the `AppRoutes`. + +Relevant code can be found in: + +- `Core.tsx` found in [`/app/Core.tsx`](https://github.com/sdu-eScience/UCloud/tree/master/frontend-web/webclient/app/Core.tsx) +- `AppRoutes` found in [`/app/Routes.ts`](https://github.com/sdu-eScience/UCloud/tree/master/frontend-web/webclient/app/Routes.ts) + +## Color references and icons + +The `Playground` component can be accessed at `/app/playground` and has a list of colors used on the site. +Additionally, every icon currently available can be viewed here, showing the name of it by hovering with the mouse. + +The component is intended for experimenting and the component is not available in any non-local environment. + +Icons can be added to the site, by adding the file as an SVG in the folder `/app/ui-components/icons`, then running the command `npm run refresh-icons`. +The icon is now available to use in the `name` parameter for the Icon-component. + +## Baseline for CSS features + +Most of the CSS used for UCloud is written and injected with the `injectStyle`-function, which means the CSS rules will not be transformed in any way to adhere to the quirks of different browsers, or delayed deployments of features in one browser over another. + +Because of this, no bleeding edge CSS features are to be used for development, with at least a 95 % target. See [caniuse.com](http://caniuse.com). + + +## Testing + +UCloud has an E2E-testing suite that will run automatically after an update to the `master`-branch. This can be triggered by the admin of the UCloud Github repository. + +To run the tests for your local environment, the following commands are available: + +| Command | Uses | +|-----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `npx playwright test` | Run the tests in the terminal. | +| `npx playwright test --ui` | **Recommended** Opens a user-friendly interface in a browser window that shows images of the running tests and allows for viewing relevant network-calls. | +| `npx playwright test --headed` | Runs every test, opening a new browser instance for each. | +| `npx playwright show-report` | Opens the report generated by a previously run test suite. | + +To add tests to the suite, the files are located in [UCloud/tree/master/frontend-web/webclient/tests](https://github.com/SDU-eScience/UCloud/tree/master/frontend-web/webclient/tests). + +The suite consists of files mapping to different parts of UCloud functionality. These are: + +| Test-file | Area | +|----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------| +| `accounting.spec.ts` | Applying for resources and accounting validation | +| `compute.spec.ts` | Running jobs, checking restrictions are correctly applied for optional parameters, and mounting folders, multinode, connecting to other jobs, etc. | +| `drive.spec.ts` | Drives and drive-operations | +| `file.spec.ts` | Files and file-operations | +| `resources.spec.ts` | Creating resources (SSH-keys, public links, etc.) and using them with compute resources. | +| `user.spec.ts` | Logging in, validating that links in user-menu works, and links on login page. | + +The other notable files in the test folder are `user.setup.ts` and `shared.ts`. + +The first of the two, `user.setup.ts`. This is the script that sets up the different contexts of users to be used in the tests. The contexts refers to four users in total: a personal workspace user, a project PI, a project admin, and a project user. The created users are required for the majority of the tests, so it rarely makes sense to not have the script run prior to running the tests. + +`shared.ts` is a library that aims to match function-calls with actions on UCloud, e.g. `Files.upload()` that will upload a file, `Applications.toggleFavorite()` used for favoriting an application. +When writing a test for a feature, most of it should consist of calls to this library. If the functionality for an action isn't there, it's likely it should be added. + +Tests can be added to the existing test suite, but tests must not be removed, as most are part of a compliance requirement. + +Relevant code can be found in `/testing`, with the output of a test-suite run in `/test-results`. + +### Coding-style preferences + +`let` is to be used over `var`, due to the reduced lifetime of `let`. + +For function definitions, TypeScript/ECMAScript allows using both `function` and `const`. `function` is preferred, due to the different lifetimes and positioning requirements in files between the two options. +If the function is exported, `function` is usually the one to use. If the function is local to the file, the `const` approach is fine to use. + +If a magic string/number is present more than once, it's to be extracted into a constant. This is not the case for styling (pixels, colors, etc.) in components. + + \ No newline at end of file diff --git a/provider-integration/im2/docs/src/overview/projects.md b/provider-integration/im2/docs/src/overview/projects.md index 42f7143c57..aba30823a9 100644 --- a/provider-integration/im2/docs/src/overview/projects.md +++ b/provider-integration/im2/docs/src/overview/projects.md @@ -53,4 +53,4 @@ The relevant code can be found in the Core and in the shared project. We recomme | Project member | A member of a project. Each member has a role (PI, admin or user). Each project has exactly 1 PI. | | Project group | A sub-division of members in a project. Members of a group must be a member of the associated project. | | Invite | An invitation sent directly to a user to participate in a project collaboration. | -| Invite link | A link usede to join a project. Preferred over direct project invites due to ease of use. | +| Invite link | A link used to join a project. Preferred over direct project invites due to ease of use. |