Skip to content

Commit

Permalink
Merge branch 'main' into issues/348
Browse files Browse the repository at this point in the history
  • Loading branch information
Haarolean authored Jun 17, 2024
2 parents fc07f56 + 28677a9 commit 4b2dbda
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 44 deletions.
2 changes: 1 addition & 1 deletion documentation/compose/ui-acl-with-zk.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ services:
KAFKA_CLUSTERS_0_PROPERTIES_SASL_JAAS_CONFIG: 'org.apache.kafka.common.security.plain.PlainLoginModule required username="admin" password="admin-secret";'

zookeeper:
image: wurstmeister/zookeeper:3.4.6
image: zookeeper:3.8
environment:
JVMFLAGS: "-Djava.security.auth.login.config=/etc/zookeeper/zookeeper_jaas.conf"
volumes:
Expand Down
35 changes: 8 additions & 27 deletions frontend/src/components/common/Switch/Switch.styled.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import styled from 'styled-components';

interface Props {
isCheckedIcon?: boolean;
checked?: boolean;
}

export const StyledLabel = styled.label<Props>`
export const StyledLabel = styled.label`
position: relative;
display: inline-block;
width: ${({ isCheckedIcon }) => (isCheckedIcon ? '40px' : '34px')};
width: 34px;
height: 20px;
margin-right: 8px;
`;
Expand All @@ -32,14 +32,12 @@ export const StyledSlider = styled.span<Props>`
left: 0;
right: 0;
bottom: 0;
background-color: ${({ isCheckedIcon, theme }) =>
isCheckedIcon
? theme.switch.checkedIcon.backgroundColor
: theme.switch.unchecked};
background-color: ${({ checked, theme }) =>
checked ? theme.switch.checked : theme.switch.unchecked};
transition: 0.4s;
border-radius: 20px;
:hover {
&:hover {
background-color: ${({ theme }) => theme.switch.hover};
}
Expand All @@ -48,7 +46,7 @@ export const StyledSlider = styled.span<Props>`
content: '';
height: 14px;
width: 14px;
left: 3px;
left: ${({ checked }) => (checked ? '17px' : '3px')};
bottom: 3px;
background-color: ${({ theme }) => theme.switch.circle};
transition: 0.4s;
Expand All @@ -57,25 +55,8 @@ export const StyledSlider = styled.span<Props>`
}
`;

export const StyledInput = styled.input<Props>`
export const StyledInput = styled.input`
opacity: 0;
width: 0;
height: 0;
&:checked + ${StyledSlider} {
background-color: ${({ isCheckedIcon, theme }) =>
isCheckedIcon
? theme.switch.checkedIcon.backgroundColor
: theme.switch.checked};
}
&:focus + ${StyledSlider} {
box-shadow: 0 0 1px ${({ theme }) => theme.switch.checked};
}
:checked + ${StyledSlider}:before {
transform: translateX(
${({ isCheckedIcon }) => (isCheckedIcon ? '20px' : '14px')}
);
}
`;
19 changes: 3 additions & 16 deletions frontend/src/components/common/Switch/Switch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,17 @@ export interface SwitchProps {
onChange(): void;
checked: boolean;
name: string;
checkedIcon?: React.ReactNode;
unCheckedIcon?: React.ReactNode;
bgCustomColor?: string;
}
const Switch: React.FC<SwitchProps> = ({
name,
checked,
onChange,
checkedIcon,
unCheckedIcon,
}) => {
const isCheckedIcon = !!(checkedIcon || unCheckedIcon);
const Switch: React.FC<SwitchProps> = ({ name, checked, onChange }) => {
return (
<S.StyledLabel isCheckedIcon={isCheckedIcon}>
<S.StyledLabel>
<S.StyledInput
name={name}
type="checkbox"
onChange={onChange}
checked={checked}
isCheckedIcon={isCheckedIcon}
/>
<S.StyledSlider isCheckedIcon={isCheckedIcon} />
{checkedIcon && <S.CheckedIcon>{checkedIcon}</S.CheckedIcon>}
{unCheckedIcon && <S.UnCheckedIcon>{unCheckedIcon}</S.UnCheckedIcon>}
<S.StyledSlider checked={checked} />
</S.StyledLabel>
);
};
Expand Down

0 comments on commit 4b2dbda

Please sign in to comment.