Run prettier
This commit is contained in:
parent
d930ab869a
commit
0136fd3cab
9 changed files with 27 additions and 22 deletions
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.fieldRow {
|
||||
margin-bottom: 24px;;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.fieldRow:last-child {
|
||||
|
|
|
@ -9,7 +9,11 @@ export function Toggle({ id, label, className, onChange, isSelected }) {
|
|||
const toggle = useCallback(() => {
|
||||
onChange(!isSelected);
|
||||
});
|
||||
const { buttonProps } = useToggleButton({ isSelected }, { toggle }, buttonRef);
|
||||
const { buttonProps } = useToggleButton(
|
||||
{ isSelected },
|
||||
{ toggle },
|
||||
buttonRef
|
||||
);
|
||||
|
||||
return (
|
||||
<Field
|
||||
|
|
|
@ -6,12 +6,12 @@
|
|||
.button {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
transition: background-color 0.20s ease-out 0.1s;
|
||||
transition: background-color 0.2s ease-out 0.1s;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 21px;
|
||||
background-color: #6F7882;
|
||||
background-color: #6f7882;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
@ -22,7 +22,7 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 21px;
|
||||
background-color: #15191E;
|
||||
background-color: #15191e;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
}
|
||||
|
@ -30,11 +30,11 @@
|
|||
.label {
|
||||
padding: 10px 8px;
|
||||
line-height: 24px;
|
||||
color: #6F7882;
|
||||
color: #6f7882;
|
||||
}
|
||||
|
||||
.toggle.on .button {
|
||||
background-color: #0DBD8B;
|
||||
background-color: #0dbd8b;
|
||||
}
|
||||
|
||||
.toggle.on .ball {
|
||||
|
@ -43,4 +43,4 @@
|
|||
|
||||
.toggle.on .label {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -22,6 +22,6 @@
|
|||
@media (min-width: 800px) {
|
||||
.preview {
|
||||
margin-top: 40px;
|
||||
background-color: #21262C;
|
||||
background-color: #21262c;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,18 +6,20 @@
|
|||
border-radius: 116px;
|
||||
color: ##fff;
|
||||
border: 6px solid #0dbd8b;
|
||||
background-color: #21262C;
|
||||
background-color: #21262c;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.talking {
|
||||
background-color: #0dbd8b;
|
||||
box-shadow: 0px 0px 0px 17px rgba(13, 189, 139, 0.2), 0px 0px 0px 34px rgba(13, 189, 139, 0.2);
|
||||
box-shadow: 0px 0px 0px 17px rgba(13, 189, 139, 0.2),
|
||||
0px 0px 0px 34px rgba(13, 189, 139, 0.2);
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #FF5B55;
|
||||
border-color: #FF5B55;
|
||||
box-shadow: 0px 0px 0px 17px rgba(255, 91, 85, 0.2), 0px 0px 0px 34px rgba(255, 91, 85, 0.2);
|
||||
}
|
||||
background-color: #ff5b55;
|
||||
border-color: #ff5b55;
|
||||
box-shadow: 0px 0px 0px 17px rgba(255, 91, 85, 0.2),
|
||||
0px 0px 0px 34px rgba(255, 91, 85, 0.2);
|
||||
}
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.participants > p {
|
||||
color: #A9B2BC;
|
||||
color: #a9b2bc;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
@ -103,4 +103,4 @@
|
|||
flex: auto;
|
||||
order: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
.audioFeed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,4 +4,3 @@
|
|||
flex: 1;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -85,7 +85,7 @@
|
|||
.videoMutedOverlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #21262C;
|
||||
background-color: #21262c;
|
||||
}
|
||||
|
||||
.presenterLabel {
|
||||
|
@ -93,7 +93,7 @@
|
|||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #17191C;
|
||||
background-color: #17191c;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
@ -110,4 +110,4 @@
|
|||
width: 25%;
|
||||
max-width: 360px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue