@platformatic/ui-components 0.7.27 → 0.7.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/assets/index-B0ZIeDQx.js +40 -0
  2. package/dist/assets/index-i07-ljlS.css +1 -0
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Button.module.css +6 -1
  6. package/src/components/ButtonOnlyIcon.module.css +6 -0
  7. package/src/components/Common.module.css +36 -0
  8. package/src/components/TabbedWindow.jsx +2 -3
  9. package/src/components/TabbedWindow.module.css +6 -1
  10. package/src/components/constants.js +2 -1
  11. package/src/components/icons/PodDetailsIcon.jsx +108 -0
  12. package/src/components/icons/PodLogsIcon.jsx +114 -0
  13. package/src/components/icons/PodServicesIcon.jsx +109 -0
  14. package/src/components/icons/index.js +6 -0
  15. package/tailwind.config.cjs +2 -0
  16. package/dist/assets/index-BZ5YvRH5.js +0 -40
  17. package/dist/assets/index-CtkV5_8h.css +0 -1
package/dist/assets/index-i07-ljlS.css ADDED
@@ -0,0 +1 @@
1
+ ._input_9kufh_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.25rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_9kufh_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_9kufh_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_9kufh_10{fill:#21fa90}._fillWhite_9kufh_13{fill:#fff}._input_9kufh_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_9kufh_19{padding-bottom:1rem;font-size:1.875rem;line-height:2.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._bordered_7fd9a_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_7fd9a_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_7fd9a_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_7fd9a_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_7fd9a_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_7fd9a_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_7fd9a_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_7fd9a_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--rich-black_7fd9a_25{--tw-border-opacity: 1;border-color:rgb(0 5 11 / var(--tw-border-opacity))}._bordered--black-russian_7fd9a_28{--tw-border-opacity: 1;border-color:rgb(9 14 23 / var(--tw-border-opacity))}._bordered--transparent_7fd9a_31{border-style:none}._bordered--main-green-100_7fd9a_34{border-color:#21fa90}._bordered--main-dark-blue-100_7fd9a_37{border-color:#00283d}._bordered--tertiary-blue-100_7fd9a_40{border-color:#2588e4}._bordered--error-red-100_7fd9a_43{border-color:#fa2121}._bordered--warning-yellow-100_7fd9a_46{border-color:#feb928}._bordered--dark-blue-100_7fd9a_49{border-color:#00344f}._bordered--white-100_7fd9a_52{border-color:#fff}._bordered--rich-black-100_7fd9a_55{border-color:#00050b}._bordered--black-russian-100_7fd9a_58{border-color:#090e17}._bordered--main-green-70_7fd9a_61{border-color:#21fa90b3}._bordered--main-dark-blue-70_7fd9a_64{border-color:#00283db3}._bordered--tertiary-blue-70_7fd9a_67{border-color:#2588e4b3}._bordered--error-red-70_7fd9a_70{border-color:#fa2121b3}._bordered--warning-yellow-70_7fd9a_73{border-color:#feb928b3}._bordered--dark-blue-70_7fd9a_76{border-color:#00344fb3}._bordered--white-70_7fd9a_79{border-color:#ffffffb3}._bordered--rich-black-70_7fd9a_82{border-color:#00050bb3}._bordered--black-russian-70_7fd9a_85{border-color:#090e17b3}._bordered--main-green-30_7fd9a_88{border-color:#21fa904d}._bordered--main-dark-blue-30_7fd9a_91{border-color:#00283d4d}._bordered--error-red-30_7fd9a_94{border-color:#fa21214d}._bordered--warning-yellow-30_7fd9a_97{border-color:#feb9284d}._bordered--dark-blue-30_7fd9a_100{border-color:#00344f4d}._bordered--white-30_7fd9a_103{border-color:#ffffff4d}._bordered--rich-black-30_7fd9a_106{border-color:#00050b4d}._bordered--black-russian-30_7fd9a_109{border-color:#090e174d}._bordered--tertiary-blue-30_7fd9a_112{border-color:#2588e44d}._bordered--main-green-20_7fd9a_115{border-color:#21fa9033}._bordered--main-dark-blue-20_7fd9a_118{border-color:#00283d33}._bordered--error-red-20_7fd9a_121{border-color:#fa212133}._bordered--warning-yellow-20_7fd9a_124{border-color:#feb92833}._bordered--dark-blue-20_7fd9a_127{border-color:#00344f33}._bordered--white-20_7fd9a_130{border-color:#fff3}._bordered--rich-black-20_7fd9a_133{border-color:#00050b33}._bordered--black-russian-20_7fd9a_136{border-color:#090e1733}._bordered--tertiary-blue-20_7fd9a_139{border-color:#2588e433}._bordered--main-dark-blue-15_7fd9a_142{border-color:#00283d26}._bordered--white-15_7fd9a_145{border-color:#ffffff26}._bordered--rich-black-15_7fd9a_148{border-color:#00050b26}._bordered--black-russian-15_7fd9a_151{border-color:#090e1726}._bordered--tertiary-blue-15_7fd9a_154{border-color:#2588e426}._bordered--main-dark-blue-10_7fd9a_37{border-color:#00283d1a}._bordered--white-10_7fd9a_52{border-color:#ffffff1a}._bordered--rich-black-10_7fd9a_55{border-color:#00050b1a}._bordered--black-russian-10_7fd9a_58{border-color:#090e171a}._bordered--tertiary-blue-10_7fd9a_40{border-color:#2588e41a}._error-message_7fd9a_172{position:absolute;bottom:-1.25rem;width:-moz-max-content;width:max-content;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._padded_7fd9a_176{padding:.625rem .5rem}._text--error-red_7fd9a_179{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--error-red-70_7fd9a_182{color:#fa2121b3}._text--white_7fd9a_185{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--white-70_7fd9a_188{color:#ffffffb3}._text--dark-green_7fd9a_191{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--dark-green-70_7fd9a_194{color:#02783fb3}._text--main-green_7fd9a_197{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-green-70_7fd9a_200{color:#21fa90b3}._text--light-green_7fd9a_203{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--light-green-70_7fd9a_206{color:#21f190b3}._text--main-dark-blue_7fd9a_209{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--main-dark-blue-70_7fd9a_212{color:#00283db3}._text--light-blue_7fd9a_215{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--light-blue-70_7fd9a_218{color:#e9f7ffb3}._text--rich-black_7fd9a_221{--tw-text-opacity: 1;color:rgb(0 5 11 / var(--tw-text-opacity))}._text--black-russian_7fd9a_224{--tw-text-opacity: 1;color:rgb(9 14 23 / var(--tw-text-opacity))}._text--rich-black-70_7fd9a_227{color:#00050bb3}._text--black-russian-70_7fd9a_230{color:#090e17b3}._text--base_7fd9a_234{font-size:1rem;line-height:1.5rem}._text--xs_7fd9a_237{font-size:.75rem;line-height:1rem}._background-color-main-green_7fd9a_241{--tw-bg-opacity: 1;background-color:rgb(33 250 144 / var(--tw-bg-opacity))}._background-color-light-green_7fd9a_244{--tw-bg-opacity: 1;background-color:rgb(33 241 144 / var(--tw-bg-opacity))}._background-color-dark-green_7fd9a_247{--tw-bg-opacity: 1;background-color:rgb(2 120 63 / var(--tw-bg-opacity))}._background-color-main-dark-blue_7fd9a_250{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._background-color-dark-blue_7fd9a_253{--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity))}._background-color-light-blue_7fd9a_256{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}._background-color-white_7fd9a_259{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}._background-color-error-red_7fd9a_262{--tw-bg-opacity: 1;background-color:rgb(250 33 33 / var(--tw-bg-opacity))}._background-color-tertiary-blue_7fd9a_265{--tw-bg-opacity: 1;background-color:rgb(37 136 228 / var(--tw-bg-opacity))}._background-color-warning-yellow_7fd9a_268{--tw-bg-opacity: 1;background-color:rgb(254 185 40 / var(--tw-bg-opacity))}._background-color-rich-black_7fd9a_271{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}._background-color-black-russian_7fd9a_274{--tw-bg-opacity: 1;background-color:rgb(9 14 23 / var(--tw-bg-opacity))}._background-color-night_7fd9a_277{--tw-bg-opacity: 1;background-color:rgb(15 17 20 / var(--tw-bg-opacity))}._background-color-anti-flash-white_7fd9a_280{--tw-bg-opacity: 1;background-color:rgb(237 237 237 / var(--tw-bg-opacity))}._background-color-fire-engine-red_7fd9a_283{--tw-bg-opacity: 1;background-color:rgb(215 25 25 / var(--tw-bg-opacity))}._background-color-alternate-rich-black_7fd9a_286{--tw-bg-opacity: 1;background-color:rgb(18 23 29 / var(--tw-bg-opacity))}._background-color-transparent_7fd9a_289{background-color:transparent}._background-color-opaque-100_7fd9a_292{--tw-bg-opacity: 1 !important}._background-color-opaque-70_7fd9a_295{--tw-bg-opacity: .7 !important}._background-color-opaque-60_7fd9a_298{--tw-bg-opacity: .6 !important}._background-color-opaque-30_7fd9a_301{--tw-bg-opacity: .3 !important}._background-color-opaque-20_7fd9a_304{--tw-bg-opacity: .2 !important}._background-color-opaque-10_7fd9a_292{--tw-bg-opacity: .1 !important}._apply-opacity-30_7fd9a_310{opacity:.3}._padding--none_7fd9a_313{padding:0}._padding--small_7fd9a_316{padding:.25rem}._padding--medium_7fd9a_319{padding:.5rem}._padding--large_7fd9a_322{padding:1rem}._padding--extra-large_7fd9a_325{padding:1.5rem}._hover-background-color-opaque-main-green_7fd9a_328:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_7fd9a_331:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_7fd9a_334:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_7fd9a_337:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_7fd9a_340:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_7fd9a_343:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_7fd9a_346:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_7fd9a_349:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_7fd9a_352:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-rich-black_7fd9a_355:hover{background-color:rgb(0 5 11 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-black-russian_7fd9a_358:hover{background-color:rgb(9 14 23 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-night_7fd9a_361:hover{background-color:rgb(15 17 20 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_7fd9a_364{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_7fd9a_367{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_7fd9a_370{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_7fd9a_373{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_7fd9a_376{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_7fd9a_379{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-rich-black_7fd9a_382{background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-black-russian_7fd9a_385{background-color:rgb(9 14 23 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-night_7fd9a_388{background-color:rgb(15 17 20 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_7fd9a_391{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_7fd9a_394{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_7fd9a_397{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_7fd9a_401{font-weight:600}._fontLight_7fd9a_404{font-weight:300}._fullWidth_7fd9a_407{width:100%}._rich-black_thi2h_1>circle,._rich-black_thi2h_1>ellipse,._rich-black_thi2h_1>rect,._rich-black_thi2h_1>line,._rich-black_thi2h_1>path{stroke:#00050b}._important-rich-black_thi2h_9>circle,._important-rich-black_thi2h_9>ellipse,._important-rich-black_thi2h_9>rect,._important-rich-black_thi2h_9>line,._important-rich-black_thi2h_9>path{stroke:#00050b!important}._error-red_thi2h_17>circle,._error-red_thi2h_17>ellipse,._error-red_thi2h_17>rect,._error-red_thi2h_17>line,._error-red_thi2h_17>path{stroke:#fa2121}._important-error-red_thi2h_25>circle,._important-error-red_thi2h_25>ellipse,._important-error-red_thi2h_25>rect,._important-error-red_thi2h_25>line,._important-error-red_thi2h_25>path{stroke:#fa2121!important}._main-dark-blue_thi2h_33>circle,._main-dark-blue_thi2h_33>ellipse,._main-dark-blue_thi2h_33>rect,._main-dark-blue_thi2h_33>line,._main-dark-blue_thi2h_33>path{stroke:#00283d}._important-main-dark-blue_thi2h_41>circle,._important-main-dark-blue_thi2h_41>ellipse,._important-main-dark-blue_thi2h_41>rect,._important-main-dark-blue_thi2h_41>line,._important-main-dark-blue_thi2h_41>path{stroke:#00283d!important}._main-green_thi2h_49>circle,._main-green_thi2h_49>ellipse,._main-green_thi2h_49>rect,._main-green_thi2h_49>line,._main-green_thi2h_49>path{stroke:#21fa90}._important-main-green_thi2h_57>circle,._important-main-green_thi2h_57>ellipse,._important-main-green_thi2h_57>rect,._important-main-green_thi2h_57>line,._important-main-green_thi2h_57>path{stroke:#21fa90!important}._tertiary-blue_thi2h_65>circle,._tertiary-blue_thi2h_65>ellipse,._tertiary-blue_thi2h_65>rect,._tertiary-blue_thi2h_65>line,._tertiary-blue_thi2h_65>path{stroke:#2588e4}._important-tertiary-blue_thi2h_73>circle,._important-tertiary-blue_thi2h_73>ellipse,._important-tertiary-blue_thi2h_73>rect,._important-tertiary-blue_thi2h_73>line,._important-tertiary-blue_thi2h_73>path{stroke:#2588e4!important}._warning-yellow_thi2h_81>circle,._warning-yellow_thi2h_81>ellipse,._warning-yellow_thi2h_81>rect,._warning-yellow_thi2h_81>line,._warning-yellow_thi2h_81>path{stroke:#feb928}._important-warning-yellow_thi2h_89>circle,._important-warning-yellow_thi2h_89>ellipse,._important-warning-yellow_thi2h_89>rect,._important-warning-yellow_thi2h_89>line,._important-warning-yellow_thi2h_89>path{stroke:#feb928!important}._white_thi2h_97>circle,._white_thi2h_97>ellipse,._white_thi2h_97>rect,._white_thi2h_97>line,._white_thi2h_97>path{stroke:#fff}._important-white_thi2h_105>circle,._important-white_thi2h_105>ellipse,._important-white_thi2h_105>rect,._important-white_thi2h_105>line,._important-white_thi2h_105>path{stroke:#fff!important}._filled-rich-black_thi2h_113{fill:#00050b}._filled-white_thi2h_116{fill:#fff}._filled-error-red_thi2h_119{fill:#fa2121}._filled-main-dark-blue_thi2h_122{fill:#00283d}._filled-main-green_thi2h_125{fill:#21fa90}._filled-warning-yellow_thi2h_128{fill:#feb928}._filled-tertiary-blue_thi2h_131{fill:#2588e4}._fill-circle-green_thi2h_135>circle{fill:#fff}._fill-circle-main-dark-blue_thi2h_138>circle{fill:#00283d}._svgClassName_thi2h_141{display:block;flex-shrink:0;overflow-clip-margin:unset}._iconDisabled_thi2h_146{opacity:.3}._iconInactive_thi2h_150{opacity:.7}._strokeTransparent_thi2h_154{stroke:transparent!important}._cursorPointer_xwn7e_1{cursor:pointer}._pltTooltip_xwn7e_4{position:relative}._tabContainerClassName_5g46h_1{display:flex;width:100%;flex-direction:column;row-gap:.5rem;--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_5g46h_4{position:relative;display:flex;height:1.5rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25em;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_5g46h_4:hover{cursor:pointer}._tab_5g46h_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:300;opacity:.7}._tab_5g46h_1:first-child{margin-left:0}._tab_5g46h_1:last-child{margin-right:0}._tab_5g46h_1:hover{opacity:1}._selected-tab_5g46h_10{text-decoration-line:underline;text-underline-offset:8px;opacity:1}._tabContentClassName_5g46h_13{max-height:calc(100vH - 10rem);overflow-y:auto}._tab_5g46h_1:before{display:block;content:attr(title);font-weight:700;height:0;overflow:hidden;visibility:hidden}._divider_5g46h_24{position:absolute;bottom:0;height:1px;width:100%;border-radius:.375rem;border-width:1px;border-style:none;background-color:#ffffff26;margin-block-start:0;margin-block-end:0}._borderedBox_ljsv8_1{flex:1 1 0%;row-gap:1rem;border-radius:.375rem;padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._clickable_ljsv8_4{cursor:pointer}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 350px){.container{max-width:350px}}@media (min-width: 390px){.container{max-width:390px}}@media (min-width: 744px){.container{max-width:744px}}@media (min-width: 1240px){.container{max-width:1240px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1920px){.container{max-width:1920px}}.visible{visibility:visible}.relative{position:relative}.col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-screen{height:100vh}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.border{border-width:1px}.border-0{border-width:0px}.bg-rich-black{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-2{padding:.5rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{background-color:transparent;font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.body--light-blue{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}.body--main-dark-blue{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}
package/dist/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Platformatic UI Components</title>
7
- <script type="module" crossorigin src="/assets/index-BZ5YvRH5.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-CtkV5_8h.css">
7
+ <script type="module" crossorigin src="/assets/index-B0ZIeDQx.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-i07-ljlS.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.7.27",
4
+ "version": "0.7.29",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Button.module.css CHANGED
@@ -66,7 +66,9 @@
66
66
  .color-rich-black{
67
67
  @apply text-rich-black border-rich-black;
68
68
  }
69
-
69
+ .color-black-russian {
70
+ @apply text-black-russian border-black-russian;
71
+ }
70
72
  .no-border {
71
73
  @apply border-0;
72
74
  }
@@ -103,6 +105,9 @@
103
105
  .hover-box-shadow-rich-black {
104
106
  @apply hover:shadow-rich-black;
105
107
  }
108
+ .hover-box-shadow-black-russian {
109
+ @apply hover:shadow-black-russian;
110
+ }
106
111
 
107
112
  .underline-effect {
108
113
  @apply hover:underline;
package/src/components/ButtonOnlyIcon.module.css CHANGED
@@ -66,6 +66,9 @@
66
66
  .color-rich-black{
67
67
  @apply text-rich-black border-rich-black;
68
68
  }
69
+ .color-black-russian{
70
+ @apply text-black-russian border-black-russian;
71
+ }
69
72
 
70
73
  .no-border {
71
74
  @apply border-0;
@@ -103,6 +106,9 @@
103
106
  .hover-box-shadow-rich-black {
104
107
  @apply hover:shadow-rich-black;
105
108
  }
109
+ .hover-box-shadow-black-russian {
110
+ @apply hover:shadow-black-russian;
111
+ }
106
112
 
107
113
  .underline-effect {
108
114
  @apply hover:underline;
package/src/components/Common.module.css CHANGED
@@ -25,6 +25,9 @@
25
25
  .bordered--rich-black {
26
26
  @apply border-rich-black;
27
27
  }
28
+ .bordered--black-russian {
29
+ @apply border-black-russian;
30
+ }
28
31
  .bordered--transparent {
29
32
  @apply border-none;
30
33
  }
@@ -52,6 +55,9 @@
52
55
  .bordered--rich-black-100 {
53
56
  @apply border-rich-black/100;
54
57
  }
58
+ .bordered--black-russian-100 {
59
+ @apply border-black-russian/100;
60
+ }
55
61
  .bordered--main-green-70 {
56
62
  @apply border-main-green/70;
57
63
  }
@@ -76,6 +82,9 @@
76
82
  .bordered--rich-black-70 {
77
83
  @apply border-rich-black/70;
78
84
  }
85
+ .bordered--black-russian-70 {
86
+ @apply border-black-russian/70;
87
+ }
79
88
  .bordered--main-green-30 {
80
89
  @apply border-main-green/30;
81
90
  }
@@ -97,6 +106,9 @@
97
106
  .bordered--rich-black-30 {
98
107
  @apply border-rich-black/30;
99
108
  }
109
+ .bordered--black-russian-30 {
110
+ @apply border-black-russian/30;
111
+ }
100
112
  .bordered--tertiary-blue-30 {
101
113
  @apply border-tertiary-blue/30;
102
114
  }
@@ -121,6 +133,9 @@
121
133
  .bordered--rich-black-20 {
122
134
  @apply border-rich-black/20;
123
135
  }
136
+ .bordered--black-russian-20 {
137
+ @apply border-black-russian/20;
138
+ }
124
139
  .bordered--tertiary-blue-20 {
125
140
  @apply border-tertiary-blue/20;
126
141
  }
@@ -133,6 +148,9 @@
133
148
  .bordered--rich-black-15 {
134
149
  @apply border-rich-black/15;
135
150
  }
151
+ .bordered--black-russian-15 {
152
+ @apply border-black-russian/15;
153
+ }
136
154
  .bordered--tertiary-blue-15 {
137
155
  @apply border-tertiary-blue/15;
138
156
  }
@@ -145,6 +163,9 @@
145
163
  .bordered--rich-black-10 {
146
164
  @apply border-rich-black/10;
147
165
  }
166
+ .bordered--black-russian-10 {
167
+ @apply border-black-russian/10;
168
+ }
148
169
  .bordered--tertiary-blue-10 {
149
170
  @apply border-tertiary-blue/10;
150
171
  }
@@ -200,9 +221,15 @@
200
221
  .text--rich-black {
201
222
  @apply text-rich-black;
202
223
  }
224
+ .text--black-russian {
225
+ @apply text-black-russian;
226
+ }
203
227
  .text--rich-black-70 {
204
228
  @apply text-rich-black/70;
205
229
  }
230
+ .text--black-russian-70 {
231
+ @apply text-black-russian/70;
232
+ }
206
233
 
207
234
  .text--base {
208
235
  @apply text-base
@@ -244,6 +271,9 @@
244
271
  .background-color-rich-black {
245
272
  @apply bg-rich-black ;
246
273
  }
274
+ .background-color-black-russian {
275
+ @apply bg-black-russian ;
276
+ }
247
277
  .background-color-night {
248
278
  @apply bg-night ;
249
279
  }
@@ -325,6 +355,9 @@
325
355
  .hover-background-color-opaque-rich-black{
326
356
  @apply hover:bg-rich-black hover:bg-opacity-15;
327
357
  }
358
+ .hover-background-color-opaque-black-russian{
359
+ @apply hover:bg-black-russian hover:bg-opacity-15;
360
+ }
328
361
  .hover-background-color-opaque-night{
329
362
  @apply hover:bg-night hover:bg-opacity-15;
330
363
  }
@@ -349,6 +382,9 @@
349
382
  .selected-background-color-rich-black {
350
383
  @apply !bg-rich-black bg-opacity-15;
351
384
  }
385
+ .selected-background-color-black-russian {
386
+ @apply !bg-black-russian bg-opacity-15;
387
+ }
352
388
  .selected-background-color-night {
353
389
  @apply !bg-night bg-opacity-15;
354
390
  }
package/src/components/TabbedWindow.jsx CHANGED
@@ -2,8 +2,7 @@
2
2
  import React, { useEffect, useState } from 'react'
3
3
  import PropTypes from 'prop-types'
4
4
  import styles from './TabbedWindow.module.css'
5
- import { COLORS_BUTTON, MARGIN_0, OPACITY_30, WHITE } from './constants'
6
- import HorizontalSeparator from './HorizontalSeparator'
5
+ import { COLORS_BUTTON, WHITE } from './constants'
7
6
 
8
7
  function TabbedWindow ({
9
8
  tabs = [],
@@ -48,8 +47,8 @@ function TabbedWindow ({
48
47
  </React.Fragment>
49
48
  )
50
49
  })}
50
+ <hr className={styles.divider} />
51
51
  </div>
52
- <HorizontalSeparator marginTop={MARGIN_0} marginBottom={MARGIN_0} color={horizontalSeparatorColor} opacity={OPACITY_30} />
53
52
  <div className={contentClassName}>{currentComponent}</div>
54
53
  </div>
55
54
  )
package/src/components/TabbedWindow.module.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @apply bg-main-dark-blue flex flex-col gap-y-2 w-full;
3
3
  }
4
4
  .tabs-header {
5
- @apply flex justify-start text-white uppercase hover:cursor-pointer tracking-super-widest h-[2rem];
5
+ @apply flex justify-start text-white uppercase hover:cursor-pointer tracking-super-widest h-[1.5rem] relative;
6
6
  }
7
7
  .tab {
8
8
  @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0 font-light opacity-70 hover:opacity-100;
@@ -21,3 +21,8 @@
21
21
  overflow: hidden;
22
22
  visibility: hidden;
23
23
  }
24
+ .divider {
25
+ @apply w-full border border-none rounded-md h-[1px] bg-white/15 absolute bottom-0;
26
+ margin-block-start: 0;
27
+ margin-block-end: 0;
28
+ }
package/src/components/constants.js CHANGED
@@ -10,6 +10,7 @@ export const TERTIARY_BLUE = 'tertiary-blue'
10
10
  export const ERROR_RED = 'error-red'
11
11
  export const WARNING_YELLOW = 'warning-yellow'
12
12
  export const RICH_BLACK = 'rich-black'
13
+ export const BLACK_RUSSIAN = 'black-russian'
13
14
  export const NIGHT = 'night'
14
15
  export const ANTI_FLASH_WHITE = 'anti-flash-white'
15
16
  export const FIRE_ENGINE_RED = 'fire-engine-red'
@@ -38,7 +39,7 @@ export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED
38
39
 
39
40
  export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK]
40
41
  export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK]
41
- export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK]
42
+ export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN]
42
43
 
43
44
  export const MODAL_POPUP = 'popup'
44
45
  export const MODAL_POPUP_V2 = 'popup-v2'
package/src/components/icons/PodDetailsIcon.jsx ADDED
@@ -0,0 +1,108 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
+
6
+ const PodDetailsIcon = ({
7
+ color = MAIN_DARK_BLUE,
8
+ size = MEDIUM,
9
+ disabled = false,
10
+ inactive = false
11
+ }) => {
12
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
13
+ if (disabled) {
14
+ className += ` ${styles.iconDisabled}`
15
+ }
16
+ if (inactive) {
17
+ className += ` ${styles.iconInactive}`
18
+ }
19
+ let icon = <></>
20
+
21
+ switch (size) {
22
+ case SMALL:
23
+ icon = (
24
+ <svg
25
+ width={16}
26
+ height={16}
27
+ viewBox='0 0 16 16'
28
+ fill='none'
29
+ xmlns='http://www.w3.org/2000/svg'
30
+ className={className}
31
+ >
32
+ <path d='M8.81982 5.6875L7.84555 5.125L5.89699 4L1.99987 6.25V10.75L5.89699 13L6.87127 12.4375' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
33
+ <path d='M6 7H12' stroke='none' strokeLinecap='round' />
34
+ <path d='M7 9H13' stroke='none' strokeLinecap='round' />
35
+ <path d='M8 11H14' stroke='none' strokeLinecap='round' />
36
+ <circle cx='4.39697' cy='7' r='0.5' fill='none' />
37
+ <circle cx='5.39697' cy='9' r='0.5' fill='none' />
38
+ <circle cx='6.39697' cy='11' r='0.5' fill='none' />
39
+ </svg>
40
+ )
41
+ break
42
+ case MEDIUM:
43
+ icon = (
44
+ <svg
45
+ width={24}
46
+ height={24}
47
+ viewBox='0 0 24 24'
48
+ fill='none'
49
+ xmlns='http://www.w3.org/2000/svg'
50
+ className={className}
51
+ >
52
+ <path d='M13.23 8.53125L11.7686 7.6875L8.84573 6L3.00006 9.375V16.125L8.84573 19.5L10.3071 18.6562' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
53
+ <path d='M9 10.5H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
54
+ <path d='M10.5 13.5H19.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
55
+ <path d='M12 16.5H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
56
+ <circle cx='6.5957' cy='10.5' r='0.75' fill='none' />
57
+ <circle cx='8.0957' cy='13.5' r='0.75' fill='none' />
58
+ <circle cx='9.5957' cy='16.5' r='0.75' fill='none' />
59
+ </svg>
60
+ )
61
+ break
62
+ case LARGE:
63
+ icon = (
64
+ <svg
65
+ width={40}
66
+ height={40}
67
+ viewBox='0 0 40 40'
68
+ fill='none'
69
+ xmlns='http://www.w3.org/2000/svg'
70
+ className={className}
71
+ >
72
+ <path d='M22.0498 14.2188L19.6141 12.8125L14.7427 10L4.99993 15.625V26.875L14.7427 32.5L17.1784 31.0938' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
73
+ <path d='M15 17.5H30' stroke='none' strokeWidth={2} strokeLinecap='round' />
74
+ <path d='M17.5 22.5H32.5' stroke='none' strokeWidth={2} strokeLinecap='round' />
75
+ <path d='M20 27.5H35' stroke='none' strokeWidth={2} strokeLinecap='round' />
76
+ <circle cx='10.9927' cy='17.5' r='1.25' fill='none' />
77
+ <circle cx='13.4927' cy='22.5' r='1.25' fill='none' />
78
+ <circle cx='15.9927' cy='27.5' r='1.25' fill='none' />
79
+ </svg>
80
+ )
81
+ break
82
+
83
+ default:
84
+ break
85
+ }
86
+ return icon
87
+ }
88
+
89
+ PodDetailsIcon.propTypes = {
90
+ /**
91
+ * color of text, icon and borders
92
+ */
93
+ color: PropTypes.oneOf(COLORS_ICON),
94
+ /**
95
+ * Size
96
+ */
97
+ size: PropTypes.oneOf(SIZES),
98
+ /**
99
+ * disabled
100
+ */
101
+ disabled: PropTypes.bool,
102
+ /**
103
+ * inactive
104
+ */
105
+ inactive: PropTypes.bool
106
+ }
107
+
108
+ export default PodDetailsIcon
package/src/components/icons/PodLogsIcon.jsx ADDED
@@ -0,0 +1,114 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
+
6
+ const PodLogsIcon = ({
7
+ color = MAIN_DARK_BLUE,
8
+ size = MEDIUM,
9
+ disabled = false,
10
+ inactive = false
11
+ }) => {
12
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
13
+ if (disabled) {
14
+ className += ` ${styles.iconDisabled}`
15
+ }
16
+ if (inactive) {
17
+ className += ` ${styles.iconInactive}`
18
+ }
19
+ let icon = <></>
20
+
21
+ switch (size) {
22
+ case SMALL:
23
+ icon = (
24
+ <svg
25
+ width={16}
26
+ height={16}
27
+ viewBox='0 0 16 16'
28
+ fill='none'
29
+ xmlns='http://www.w3.org/2000/svg'
30
+ className={className}
31
+ >
32
+ <rect x='7' y='2' width='7' height='7' rx='1' stroke='none' />
33
+ <path d='M7 3.75H14' stroke='none' />
34
+ <circle cx='7.87516' cy='2.87492' r='0.291667' fill='none' />
35
+ <circle cx='8.75016' cy='2.87492' r='0.291667' fill='none' />
36
+ <circle cx='9.62516' cy='2.87492' r='0.291667' fill='none' />
37
+ <path d='M8.1665 4.91675H11.0832' stroke='none' strokeLinecap='round' />
38
+ <path d='M8.75 6.08325H12.8333' stroke='none' strokeLinecap='round' />
39
+ <path d='M8.75 7.25H12.8333' stroke='none' strokeLinecap='round' />
40
+ <path d='M9.46387 10.4998V11.9998L5.99977 13.9998L2.53566 11.9998V7.99984L5.39225 6.35059' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
41
+ </svg>
42
+ )
43
+ break
44
+ case MEDIUM:
45
+ icon = (
46
+ <svg
47
+ width={24}
48
+ height={24}
49
+ viewBox='0 0 24 24'
50
+ fill='none'
51
+ xmlns='http://www.w3.org/2000/svg'
52
+ className={className}
53
+ >
54
+ <rect x='10.5' y='3' width='10.5' height='10.5' rx='1' stroke='none' strokeWidth={1.5} />
55
+ <path d='M10.5 5.625H21' stroke='none' strokeWidth={1.5} />
56
+ <circle cx='11.8125' cy='4.3125' r='0.4375' fill='none' />
57
+ <circle cx='13.125' cy='4.3125' r='0.4375' fill='none' />
58
+ <circle cx='14.4375' cy='4.3125' r='0.4375' fill='none' />
59
+ <path d='M12.25 7.375H16.625' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
60
+ <path d='M13.125 9.125H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
61
+ <path d='M13.125 10.875H19.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
62
+ <path d='M14.1958 15.7498V17.9998L8.99965 20.9998L3.8035 17.9998V11.9998L8.08837 9.52588' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
63
+ </svg>
64
+ )
65
+ break
66
+ case LARGE:
67
+ icon = (
68
+ <svg
69
+ width={40}
70
+ height={40}
71
+ viewBox='0 0 40 40'
72
+ fill='none'
73
+ xmlns='http://www.w3.org/2000/svg'
74
+ className={className}
75
+ >
76
+ <rect x='17.5' y='5' width='17.5' height='17.5' rx='1' stroke='none' strokeWidth={2} />
77
+ <path d='M17.5 9.375H35' stroke='none' strokeWidth={2} />
78
+ <circle cx='19.6877' cy='7.18742' r='0.729167' fill='none' />
79
+ <circle cx='21.8752' cy='7.18742' r='0.729167' fill='none' />
80
+ <circle cx='24.0627' cy='7.18742' r='0.729167' fill='none' />
81
+ <path d='M20.4165 12.2917H27.7082' stroke='none' strokeWidth={2} strokeLinecap='round' />
82
+ <path d='M21.875 15.2083H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
83
+ <path d='M21.875 18.125H32.0833' stroke='none' strokeWidth={2} strokeLinecap='round' />
84
+ <path d='M23.6597 26.2496V29.9996L14.9994 34.9996L6.33916 29.9996V19.9996L13.4806 15.8765' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
85
+ </svg>
86
+ )
87
+ break
88
+
89
+ default:
90
+ break
91
+ }
92
+ return icon
93
+ }
94
+
95
+ PodLogsIcon.propTypes = {
96
+ /**
97
+ * color of text, icon and borders
98
+ */
99
+ color: PropTypes.oneOf(COLORS_ICON),
100
+ /**
101
+ * Size
102
+ */
103
+ size: PropTypes.oneOf(SIZES),
104
+ /**
105
+ * disabled
106
+ */
107
+ disabled: PropTypes.bool,
108
+ /**
109
+ * inactive
110
+ */
111
+ inactive: PropTypes.bool
112
+ }
113
+
114
+ export default PodLogsIcon
package/src/components/icons/PodServicesIcon.jsx ADDED
@@ -0,0 +1,109 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
+
6
+ const PodServicesIcon = ({
7
+ color = MAIN_DARK_BLUE,
8
+ size = MEDIUM,
9
+ disabled = false,
10
+ inactive = false
11
+ }) => {
12
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
13
+ if (disabled) {
14
+ className += ` ${styles.iconDisabled}`
15
+ }
16
+ if (inactive) {
17
+ className += ` ${styles.iconInactive}`
18
+ }
19
+ let icon = <></>
20
+
21
+ switch (size) {
22
+ case SMALL:
23
+ icon = (
24
+ <svg
25
+ width={16}
26
+ height={16}
27
+ viewBox='0 0 16 16'
28
+ fill='none'
29
+ xmlns='http://www.w3.org/2000/svg'
30
+ className={className}
31
+ transform='rotate(270)'
32
+ >
33
+ <path d='M8 6.66506L6.75 6.66506L5.5 4.5L6.75 2.33494L9.25 2.33494L10.5 4.5L9.25 6.66506L8 6.66506ZM8 6.66506C8 7.44338 8 9 8 9' stroke='none' strokeLinejoin='round' />
34
+ <rect x='5' y='9' width='5' height='3' transform='rotate(90 5 9)' stroke='none' strokeLinejoin='round' />
35
+ <rect x='9.5' y='9' width='5' height='3' transform='rotate(90 9.5 9)' stroke='none' strokeLinejoin='round' />
36
+ <rect x='14' y='9' width='5' height='3' transform='rotate(90 14 9)' stroke='none' strokeLinejoin='round' />
37
+ <path d='M5.5 4.5L3.5 4.5L3.5 9' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
38
+ <path d='M10.5 4.5L12.5 4.5L12.5 9' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
39
+ </svg>
40
+ )
41
+ break
42
+ case MEDIUM:
43
+ icon = (
44
+ <svg
45
+ width={24}
46
+ height={24}
47
+ viewBox='0 0 24 24'
48
+ fill='none'
49
+ xmlns='http://www.w3.org/2000/svg'
50
+ className={className}
51
+ transform='rotate(270)'
52
+ >
53
+ <path d='M12 9.9976L10.125 9.9976L8.25 6.75L10.125 3.5024L13.875 3.5024L15.75 6.75L13.875 9.9976L12 9.9976ZM12 9.9976C12 11.1651 12 13.5 12 13.5' stroke='none' stroke-width='1.5' strokeLinejoin='round' />
54
+ <rect x='7.5' y='13.5' width='7.5' height='4.5' transform='rotate(90 7.5 13.5)' stroke='none' stroke-width='1.5' strokeLinejoin='round' />
55
+ <rect x='14.25' y='13.5' width='7.5' height='4.5' transform='rotate(90 14.25 13.5)' stroke='none' stroke-width='1.5' strokeLinejoin='round' />
56
+ <rect x='21' y='13.5' width='7.5' height='4.5' transform='rotate(90 21 13.5)' stroke='none' stroke-width='1.5' strokeLinejoin='round' />
57
+ <path d='M8.25 6.75L5.25 6.75L5.25 13.5' stroke='none' stroke-width='1.5' strokeLinecap='round' strokeLinejoin='round' />
58
+ <path d='M15.75 6.75L18.75 6.75L18.75 13.5' stroke='none' stroke-width='1.5' strokeLinecap='round' strokeLinejoin='round' />
59
+ </svg>
60
+ )
61
+ break
62
+ case LARGE:
63
+ icon = (
64
+ <svg
65
+ width={40}
66
+ height={40}
67
+ viewBox='0 0 40 40'
68
+ fill='none'
69
+ xmlns='http://www.w3.org/2000/svg'
70
+ className={className}
71
+ transform='rotate(270)'
72
+
73
+ >
74
+ <path d='M20 16.6627L16.875 16.6627L13.75 11.25L16.875 5.83734L23.125 5.83734L26.25 11.25L23.125 16.6627L20 16.6627ZM20 16.6627C20 18.6084 20 22.5 20 22.5' stroke='none' stroke-width='2' strokeLinejoin='round' />
75
+ <rect x='12.5' y='22.5' width='12.5' height='7.5' transform='rotate(90 12.5 22.5)' stroke='none' stroke-width='2' strokeLinejoin='round' />
76
+ <rect x='23.75' y='22.5' width='12.5' height='7.5' transform='rotate(90 23.75 22.5)' stroke='none' stroke-width='2' strokeLinejoin='round' />
77
+ <rect x='35' y='22.5' width='12.5' height='7.5' transform='rotate(90 35 22.5)' stroke='none' stroke-width='2' strokeLinejoin='round' />
78
+ <path d='M13.75 11.25L8.75 11.25L8.75 22.5' stroke='none' stroke-width='2' strokeLinecap='round' strokeLinejoin='round' />
79
+ <path d='M26.25 11.25L31.25 11.25L31.25 22.5' stroke='none' stroke-width='2' strokeLinecap='round' strokeLinejoin='round' />
80
+ </svg>
81
+ )
82
+ break
83
+
84
+ default:
85
+ break
86
+ }
87
+ return icon
88
+ }
89
+
90
+ PodServicesIcon.propTypes = {
91
+ /**
92
+ * color of text, icon and borders
93
+ */
94
+ color: PropTypes.oneOf(COLORS_ICON),
95
+ /**
96
+ * Size
97
+ */
98
+ size: PropTypes.oneOf(SIZES),
99
+ /**
100
+ * disabled
101
+ */
102
+ disabled: PropTypes.bool,
103
+ /**
104
+ * inactive
105
+ */
106
+ inactive: PropTypes.bool
107
+ }
108
+
109
+ export default PodServicesIcon
package/src/components/icons/index.js CHANGED
@@ -133,7 +133,10 @@ import PlatformaticDBIcon from './PlatformaticDBIcon'
133
133
  import PlatformaticRuntimeIcon from './PlatformaticRuntimeIcon'
134
134
  import PlatformaticServiceIcon from './PlatformaticServiceIcon'
135
135
  import PlayIcon from './PlayIcon'
136
+ import PodDetailsIcon from './PodDetailsIcon'
137
+ import PodLogsIcon from './PodLogsIcon'
136
138
  import PodMetricsIcon from './PodMetricsIcon'
139
+ import PodServicesIcon from './PodServicesIcon'
137
140
  import PodPerformanceIcon from './PodPerformanceIcon'
138
141
  import PreviewPRIcon from './PreviewPRIcon'
139
142
  import PullRequestIcon from './PullRequestIcon'
@@ -329,7 +332,10 @@ export default {
329
332
  PlatformaticServiceIcon,
330
333
  PlayIcon,
331
334
  PodPerformanceIcon,
335
+ PodDetailsIcon,
336
+ PodLogsIcon,
332
337
  PodMetricsIcon,
338
+ PodServicesIcon,
333
339
  PreviewPRIcon,
334
340
  PullRequestIcon,
335
341
  PullRequestLoadingIcon,
package/tailwind.config.cjs CHANGED
@@ -25,6 +25,7 @@ module.exports = {
25
25
  'error-red': '0px 0px 4px rgba(250, 33, 33, 0.5)',
26
26
  'tertiary-blue': '0px 0px 4px rgba(37, 136, 228, 0.5)',
27
27
  'rich-black': '0px 0px 4px rgba(0, 5, 11, 1)',
28
+ 'black-russian': '0px 0px 4px rgba(0, 9, 14, 23)',
28
29
  white: '0px 0px 4px rgba(255, 255, 255, 0.5)'
29
30
  },
30
31
  opacity: {
@@ -44,6 +45,7 @@ module.exports = {
44
45
  transparent: 'transparent',
45
46
  'warning-yellow': '#FEB928',
46
47
  'rich-black': '#00050B',
48
+ 'black-russian': '#090E17',
47
49
  night: '#0F1114',
48
50
  'electric-purple': '#C61BE2',
49
51
  'anti-flash-white': '#EDEDED',