1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-05-17 17:01:46 +07:00
verdaccio-ui/src/App/__snapshots__/App.test.tsx.snap
Priscila Oliveira 675ee980ee
feat(lng): Added change language on the fly (#456)
* feat(lng): added change language on the fly

* fixed dropdown

* applied feedbacks

* added translation

* updated bundlesize

* fixed error

* updated snaps

* added french language

* added language in storage

* updated styles

* fixed tests
2020-04-23 08:20:41 +02:00

1515 lines
37 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<App /> should display the Header component 1`] = `
.emotion-85 {
background-color: #fff;
}
.emotion-28 {
background-color: #4b5e40;
color: #fff;
min-height: 60px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (min-width:768px) {
.emotion-28 .emotion-13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.emotion-28 .emotion-17 {
display: none;
}
.emotion-28 .e1jf5lit4 {
display: none;
}
}
@media (min-width:1024px) {
.emotion-28 .emotion-27 {
padding: 0 20px;
}
@media (min-width:1275px) {
.emotion-28 .emotion-27 {
max-width: 1240px;
width: 100%;
margin: 0 auto;
}
}
}
.emotion-26 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 15px;
}
.emotion-14 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.emotion-2 {
margin-right: 1em;
}
.emotion-0 {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background-position: center;
background-size: contain;
background-image: url([object Object]);
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
.emotion-12 {
display: none;
max-width: 393px;
width: 100%;
}
.emotion-10 {
width: 100%;
height: 32px;
position: relative;
z-index: 1;
}
.emotion-6 .MuiInputBase-root:before {
content: '';
border: none;
}
.emotion-6 .MuiInputBase-root:after {
border-color: #fff;
}
.emotion-6 .MuiInputBase-root:hover:before {
content: none;
}
.emotion-6 .MuiInputBase-input {
color: #fff;
}
.emotion-4 {
color: #fff;
}
.emotion-8 {
max-height: 500px;
overflow-y: auto;
}
.emotion-24 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
}
.emotion-16 {
display: block;
}
.emotion-20 {
display: none;
}
@media screen and (min-width:768px) {
.emotion-20 {
display: inline-block;
}
}
.emotion-18 {
display: none;
}
@media screen and (min-width:768px) {
.emotion-18 {
display: inline-block;
}
}
.emotion-22 {
color: #fff;
}
@media screen and (min-width:1240px) {
.emotion-40 {
max-width: 1240px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.emotion-83 {
background: #f9f9f9;
border-top: 1px solid #e3e3e3;
color: #999999;
font-size: 14px;
padding: 20px;
}
.emotion-81 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%;
}
@media (min-width:768px) {
.emotion-81 {
min-width: 400px;
max-width: 800px;
margin: auto;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (min-width:1024px) {
.emotion-81 {
max-width: 1240px;
}
}
.emotion-72 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: none;
}
@media (min-width:768px) {
.emotion-72 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
.emotion-42 {
color: #e25555;
padding: 0 5px;
}
.emotion-70 {
position: relative;
height: 18px;
}
.emotion-70:hover .emotion-69 {
visibility: visible;
}
.emotion-45 {
box-sizing: initial;
display: inline-block;
cursor: default;
width: 18px;
height: 18px;
padding: 0 10px;
}
.emotion-68 {
position: absolute;
background: #d3dddd;
padding: 1px 4px;
border-radius: 3px;
height: 20px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
visibility: hidden;
top: -2px;
}
.emotion-68:before {
content: '';
position: absolute;
top: 29%;
left: -4px;
margin-left: -5px;
border: 5px solid;
border-color: #d3dddd transparent transparent transparent;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.emotion-48 {
box-sizing: initial;
display: inline-block;
cursor: default;
width: 18px;
height: 18px;
padding: 0 5px;
}
.emotion-79 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@media (min-width:768px) {
.emotion-79 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
.emotion-77 {
box-sizing: initial;
display: inline-block;
cursor: pointer;
width: 18px;
height: 18px;
padding: 0 5px;
}
.emotion-74 {
width: 100%;
height: auto;
}
.emotion-38 {
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
position: absolute;
}
.emotion-32 {
margin: 0 0 30px 0;
border-radius: 25px;
box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
background: #f7f8f6;
}
.emotion-30 {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background-position: center;
background-size: contain;
background-image: url([object Object]);
background-repeat: no-repeat;
width: 90px;
height: 90px;
}
.emotion-36 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.emotion-34 {
color: #4b5e40;
}
<div
class="MuiBox-root MuiBox-root-220 emotion-85 emotion-86"
>
<header
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-28 emotion-29 MuiAppBar-colorPrimary"
data-testid="header"
>
<div
class="MuiToolbar-root MuiToolbar-regular emotion-26 emotion-27 MuiToolbar-gutters"
>
<div
class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
>
<a
class="emotion-2 emotion-3"
href="/"
>
<div
class="emotion-0 emotion-1"
/>
</a>
<div
class="emotion-12 emotion-13"
>
<div
class="emotion-10 emotion-11"
>
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="react-autowhatever-1"
class="react-autosuggest__container"
role="combobox"
>
<div
aria-autocomplete="list"
aria-controls="react-autowhatever-1"
class="MuiFormControl-root MuiTextField-root react-autosuggest__input emotion-6 emotion-7 MuiFormControl-fullWidth"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
>
<div
class="MuiInputAdornment-root emotion-4 emotion-5 MuiInputAdornment-positionStart"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
<input
aria-invalid="false"
autocomplete="off"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
placeholder="Search Packages"
type="text"
value=""
/>
</div>
</div>
<div
class="MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container emotion-8 emotion-9"
id="react-autowhatever-1"
role="listbox"
/>
</div>
</div>
</div>
</div>
<div
class="MuiToolbar-root MuiToolbar-regular emotion-24 emotion-25 MuiToolbar-gutters"
data-testid="header-right"
>
<button
class="MuiButtonBase-root MuiIconButton-root emotion-16 emotion-17 MuiIconButton-colorInherit"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<div
class="emotion-20 emotion-21"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
tabindex="0"
title="Change language"
type="button"
>
<span
class="MuiButton-label ForwardRef(Button)-label-339"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
/>
</svg>
<span
class="emotion-18 emotion-19"
>
English
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
<a
class="emotion-22 emotion-23"
data-testid="header--tooltip-documentation"
href="https://verdaccio.org/docs/en/installation"
rel="noopener noreferrer"
target="_blank"
>
<h6
class="MuiTypography-root MuiTypography-subtitle1"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</h6>
</a>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
data-testid="header--tooltip-info"
id="header--button-registryInfo"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
data-testid="header--button-login"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
Login
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</header>
<div
class="MuiBox-root MuiBox-root-414 emotion-40 emotion-41"
>
<div
class="container content"
data-testid="home-page-container"
>
<div
class="emotion-38 emotion-39"
data-testid="loading"
>
<div
class="emotion-32 emotion-33"
>
<div
class="emotion-30 emotion-1"
/>
</div>
<div
class="emotion-36 emotion-37"
>
<div
class="MuiCircularProgress-root emotion-34 emotion-35 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
role="progressbar"
style="width: 50px; height: 50px;"
>
<svg
class="MuiCircularProgress-svg"
viewBox="22 22 44 44"
>
<circle
class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
cx="44"
cy="44"
fill="none"
r="20.2"
stroke-width="3.6"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div
class="emotion-83 emotion-84"
>
<div
class="emotion-81 emotion-82"
>
<div
class="emotion-72 emotion-73"
>
Made with
<span
class="emotion-42 emotion-43"
>
</span>
on
<span
class="emotion-70 emotion-71"
>
<svg
class="emotion-44 emotion-45 emotion-46"
>
<title>
Earth
</title>
<use
xlink:href="[object Object]#earth"
/>
</svg>
<span
class="emotion-68 emotion-69"
>
<svg
class="emotion-47 emotion-48 emotion-46"
>
<title>
Spain
</title>
<use
xlink:href="[object Object]#spain"
/>
</svg>
<svg
class="emotion-47 emotion-48 emotion-46"
>
<title>
Nicaragua
</title>
<use
xlink:href="[object Object]#nicaragua"
/>
</svg>
<svg
class="emotion-47 emotion-48 emotion-46"
>
<title>
India
</title>
<use
xlink:href="[object Object]#india"
/>
</svg>
<svg
class="emotion-47 emotion-48 emotion-46"
>
<title>
Brazil
</title>
<use
xlink:href="[object Object]#brazil"
/>
</svg>
<svg
class="emotion-47 emotion-48 emotion-46"
>
<title>
China
</title>
<use
xlink:href="[object Object]#china"
/>
</svg>
<svg
class="emotion-47 emotion-48 emotion-46"
>
<title>
Austria
</title>
<use
xlink:href="[object Object]#austria"
/>
</svg>
<svg
class="emotion-47 emotion-48 emotion-46"
>
<title>
Germany
</title>
<use
xlink:href="[object Object]#germany"
/>
</svg>
</span>
</span>
</div>
<div
class="emotion-79 emotion-80"
>
Powered by
<span
class="emotion-47 emotion-77 emotion-78"
title="Verdaccio"
>
<img
alt="Verdaccio"
class="emotion-74 emotion-75"
src="[object Object]"
/>
</span>
/ undefined
</div>
</div>
</div>
</div>
`;
exports[`<App /> should display the Loading component at the beginning 1`] = `
.emotion-75 {
background-color: #fff;
}
.emotion-28 {
background-color: #4b5e40;
color: #fff;
min-height: 60px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (min-width:768px) {
.emotion-28 .emotion-13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.emotion-28 .emotion-17 {
display: none;
}
.emotion-28 .e1jf5lit4 {
display: none;
}
}
@media (min-width:1024px) {
.emotion-28 .emotion-27 {
padding: 0 20px;
}
@media (min-width:1275px) {
.emotion-28 .emotion-27 {
max-width: 1240px;
width: 100%;
margin: 0 auto;
}
}
}
.emotion-26 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 15px;
}
.emotion-14 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.emotion-2 {
margin-right: 1em;
}
.emotion-0 {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
background-position: center;
background-size: contain;
background-image: url([object Object]);
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
.emotion-12 {
display: none;
max-width: 393px;
width: 100%;
}
.emotion-10 {
width: 100%;
height: 32px;
position: relative;
z-index: 1;
}
.emotion-6 .MuiInputBase-root:before {
content: '';
border: none;
}
.emotion-6 .MuiInputBase-root:after {
border-color: #fff;
}
.emotion-6 .MuiInputBase-root:hover:before {
content: none;
}
.emotion-6 .MuiInputBase-input {
color: #fff;
}
.emotion-4 {
color: #fff;
}
.emotion-8 {
max-height: 500px;
overflow-y: auto;
}
.emotion-24 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
}
.emotion-16 {
display: block;
}
.emotion-20 {
display: none;
}
@media screen and (min-width:768px) {
.emotion-20 {
display: inline-block;
}
}
.emotion-18 {
display: none;
}
@media screen and (min-width:768px) {
.emotion-18 {
display: inline-block;
}
}
.emotion-22 {
color: #fff;
}
@media screen and (min-width:1240px) {
.emotion-30 {
max-width: 1240px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.emotion-73 {
background: #f9f9f9;
border-top: 1px solid #e3e3e3;
color: #999999;
font-size: 14px;
padding: 20px;
}
.emotion-71 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%;
}
@media (min-width:768px) {
.emotion-71 {
min-width: 400px;
max-width: 800px;
margin: auto;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (min-width:1024px) {
.emotion-71 {
max-width: 1240px;
}
}
.emotion-62 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: none;
}
@media (min-width:768px) {
.emotion-62 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
.emotion-32 {
color: #e25555;
padding: 0 5px;
}
.emotion-60 {
position: relative;
height: 18px;
}
.emotion-60:hover .emotion-59 {
visibility: visible;
}
.emotion-35 {
box-sizing: initial;
display: inline-block;
cursor: default;
width: 18px;
height: 18px;
padding: 0 10px;
}
.emotion-58 {
position: absolute;
background: #d3dddd;
padding: 1px 4px;
border-radius: 3px;
height: 20px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
visibility: hidden;
top: -2px;
}
.emotion-58:before {
content: '';
position: absolute;
top: 29%;
left: -4px;
margin-left: -5px;
border: 5px solid;
border-color: #d3dddd transparent transparent transparent;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.emotion-38 {
box-sizing: initial;
display: inline-block;
cursor: default;
width: 18px;
height: 18px;
padding: 0 5px;
}
.emotion-69 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@media (min-width:768px) {
.emotion-69 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
.emotion-67 {
box-sizing: initial;
display: inline-block;
cursor: pointer;
width: 18px;
height: 18px;
padding: 0 5px;
}
.emotion-64 {
width: 100%;
height: auto;
}
<div
class="MuiBox-root MuiBox-root-2 emotion-75 emotion-76"
style="display: none;"
>
<header
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-28 emotion-29 MuiAppBar-colorPrimary"
data-testid="header"
>
<div
class="MuiToolbar-root MuiToolbar-regular emotion-26 emotion-27 MuiToolbar-gutters"
>
<div
class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
>
<a
class="emotion-2 emotion-3"
href="/"
>
<div
class="emotion-0 emotion-1"
/>
</a>
<div
class="emotion-12 emotion-13"
>
<div
class="emotion-10 emotion-11"
>
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="react-autowhatever-1"
class="react-autosuggest__container"
role="combobox"
>
<div
aria-autocomplete="list"
aria-controls="react-autowhatever-1"
class="MuiFormControl-root MuiTextField-root react-autosuggest__input emotion-6 emotion-7 MuiFormControl-fullWidth"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
>
<div
class="MuiInputAdornment-root emotion-4 emotion-5 MuiInputAdornment-positionStart"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</div>
<input
aria-invalid="false"
autocomplete="off"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
placeholder="Search Packages"
type="text"
value=""
/>
</div>
</div>
<div
class="MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container emotion-8 emotion-9"
id="react-autowhatever-1"
role="listbox"
/>
</div>
</div>
</div>
</div>
<div
class="MuiToolbar-root MuiToolbar-regular emotion-24 emotion-25 MuiToolbar-gutters"
data-testid="header-right"
>
<button
class="MuiButtonBase-root MuiIconButton-root emotion-16 emotion-17 MuiIconButton-colorInherit"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<div
class="emotion-20 emotion-21"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
tabindex="0"
title="Change language"
type="button"
>
<span
class="MuiButton-label ForwardRef(Button)-label-121"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
/>
</svg>
<span
class="emotion-18 emotion-19"
>
English
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
<a
class="emotion-22 emotion-23"
data-testid="header--tooltip-documentation"
href="https://verdaccio.org/docs/en/installation"
rel="noopener noreferrer"
target="_blank"
>
<h6
class="MuiTypography-root MuiTypography-subtitle1"
>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</h6>
</a>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
data-testid="header--tooltip-info"
id="header--button-registryInfo"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
role="presentation"
viewBox="0 0 24 24"
>
<path
d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
data-testid="header--button-login"
tabindex="0"
type="button"
>
<span
class="MuiButton-label"
>
Login
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</header>
<div
class="MuiBox-root MuiBox-root-196 emotion-30 emotion-31"
/>
<div
class="emotion-73 emotion-74"
>
<div
class="emotion-71 emotion-72"
>
<div
class="emotion-62 emotion-63"
>
Made with
<span
class="emotion-32 emotion-33"
>
</span>
on
<span
class="emotion-60 emotion-61"
>
<svg
class="emotion-34 emotion-35 emotion-36"
>
<title>
Earth
</title>
<use
xlink:href="[object Object]#earth"
/>
</svg>
<span
class="emotion-58 emotion-59"
>
<svg
class="emotion-37 emotion-38 emotion-36"
>
<title>
Spain
</title>
<use
xlink:href="[object Object]#spain"
/>
</svg>
<svg
class="emotion-37 emotion-38 emotion-36"
>
<title>
Nicaragua
</title>
<use
xlink:href="[object Object]#nicaragua"
/>
</svg>
<svg
class="emotion-37 emotion-38 emotion-36"
>
<title>
India
</title>
<use
xlink:href="[object Object]#india"
/>
</svg>
<svg
class="emotion-37 emotion-38 emotion-36"
>
<title>
Brazil
</title>
<use
xlink:href="[object Object]#brazil"
/>
</svg>
<svg
class="emotion-37 emotion-38 emotion-36"
>
<title>
China
</title>
<use
xlink:href="[object Object]#china"
/>
</svg>
<svg
class="emotion-37 emotion-38 emotion-36"
>
<title>
Austria
</title>
<use
xlink:href="[object Object]#austria"
/>
</svg>
<svg
class="emotion-37 emotion-38 emotion-36"
>
<title>
Germany
</title>
<use
xlink:href="[object Object]#germany"
/>
</svg>
</span>
</span>
</div>
<div
class="emotion-69 emotion-70"
>
Powered by
<span
class="emotion-37 emotion-67 emotion-68"
title="Verdaccio"
>
<img
alt="Verdaccio"
class="emotion-64 emotion-65"
src="[object Object]"
/>
</span>
/ undefined
</div>
</div>
</div>
</div>
`;