Skip to content

Commit

Permalink
Make all modals UI consistent (#229)
Browse files Browse the repository at this point in the history
  • Loading branch information
@saroojbkhari
saroojbkhari authored Jul 12, 2023
1 parent e82b269 commit 30b858c
Show file tree
Hide file tree
Showing 15 changed files with 370 additions and 350 deletions.
38 changes: 24 additions & 14 deletions src/components/AccessControlEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -457,11 +457,7 @@ const AccessControlEdit = () => {
},
]}
/>
<Card
bordered={true}
// title={setupKey.name}
style={{ marginBottom: "7px" }}
>
<Card bordered={true} style={{ marginBottom: "7px" }}>
<div style={{ maxWidth: "550px" }}>
<Form
layout="vertical"
Expand Down Expand Up @@ -508,7 +504,6 @@ const AccessControlEdit = () => {
<Form.Item
name="name"
label=""
style={{ margin: "0" }}
rules={[
{
required: true,
Expand All @@ -532,7 +527,7 @@ const AccessControlEdit = () => {
{!editDescription ? (
<div
style={{
margin: "12px 0 30px",
margin: "0 0 39px",
lineHeight: "22px",
cursor: "pointer",
}}
Expand All @@ -551,7 +546,7 @@ const AccessControlEdit = () => {
<Form.Item
name="description"
label="Description"
style={{ marginTop: 24, fontWeight: "500" }}
style={{ marginTop: 10, fontWeight: "500" }}
>
<Input
placeholder="Add description..."
Expand All @@ -568,7 +563,7 @@ const AccessControlEdit = () => {
</Row>
</Header>
</Col>
<Col span={24}>
<Col span={24} style={{ marginBottom: "15px" }}>
<Form.Item name="enabled" label="">
<div
style={{
Expand All @@ -579,6 +574,7 @@ const AccessControlEdit = () => {
<Switch
onChange={handleChangeDisabled}
defaultChecked={policy.enabled}
size="small"
/>
<div>
<label
Expand Down Expand Up @@ -784,7 +780,7 @@ const AccessControlEdit = () => {
</Col>
</Row>
</Col>
<Col span={24}>
<Col span={24} style={{ marginBottom: "15px" }}>
<Paragraph
type={"secondary"}
style={{ marginTop: "-15px", marginBottom: "30px" }}
Expand All @@ -793,7 +789,7 @@ const AccessControlEdit = () => {
protocol below
</Paragraph>
</Col>
<Col span={24}>
<Col span={24} style={{ marginBottom: "15px" }}>
<Row>
<Col span={10}>
<Form.Item
Expand Down Expand Up @@ -830,7 +826,14 @@ const AccessControlEdit = () => {
maxWidth: "260px",
fontWeight: "500",
}}
placeholder={<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>}
placeholder={
<div
color={"rgba(0,0,0,0.25)"}
className="arimo-font"
>
Select ports
</div>
}
className="menlo-font"
value={formPolicyCopy}
disabled={true}
Expand Down Expand Up @@ -862,7 +865,14 @@ const AccessControlEdit = () => {
maxWidth: "260px",
fontWeight: "500",
}}
placeholder={<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>}
placeholder={
<div
color={"rgba(0,0,0,0.25)"}
className="arimo-font"
>
Select ports
</div>
}
tagRender={grayTagRender}
onChange={handleChangePorts}
className="menlo-font"
Expand Down Expand Up @@ -890,7 +900,7 @@ const AccessControlEdit = () => {
justifyContent: "start",
padding: 0,
gap: "10px",
marginTop: "30px",
marginTop: "12px",
}}
key={0}
>
Expand Down
28 changes: 20 additions & 8 deletions src/components/AccessControlNew.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -456,18 +456,20 @@ const AccessControlNew = () => {
textAlign: "start",
whiteSpace: "pre-line",
fontSize: "18px",
margin: "0px",
fontWeight: "500",
}}
>
Create Rule
Create rule
</Paragraph>
<Paragraph
type={"secondary"}
style={{
textAlign: "start",
whiteSpace: "pre-line",
paddingBottom: "15px",
marginTop: "-20px",
fontSize: "14px",
paddingBottom: "25px",
marginBottom: "4px",
}}
>
Use this rule to restrict access to groups of resources
Expand Down Expand Up @@ -767,6 +769,8 @@ const AccessControlNew = () => {
color: "rgba(0, 0, 0, 0.88)",
fontSize: "14px",
fontWeight: "500",
padding: "0 0 2px",
display: "inline-block",
}}
>
Ports
Expand Down Expand Up @@ -828,9 +832,16 @@ const AccessControlNew = () => {
className="menlo-font"
placeholder={
formPolicy.protocol === "all" ||
formPolicy.protocol === "icmp"
? "All"
: (<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>)
formPolicy.protocol === "icmp" ? (
"All"
) : (
<div
color={"rgba(0,0,0,0.25)"}
className="arimo-font"
>
Select ports
</div>
)
}
tagRender={grayTagRender}
onChange={handleChangePorts}
Expand Down Expand Up @@ -859,6 +870,7 @@ const AccessControlNew = () => {
}}
>
<Switch
size="small"
onChange={handleChangeDisabled}
defaultChecked={true}
/>
Expand Down Expand Up @@ -890,7 +902,7 @@ const AccessControlNew = () => {
</Col>
<Col
span={24}
style={{ marginTop: "20px", marginBottom: "25px" }}
style={{ marginTop: "10px", marginBottom: "24px" }}
>
<Text type={"secondary"}>
Learn more about
Expand All @@ -900,7 +912,7 @@ const AccessControlNew = () => {
href="https://docs.netbird.io/how-to/manage-network-access"
>
{" "}
Access Controls
access controls
</a>
</Text>
</Col>
Expand Down
Loading

0 comments on commit 30b858c

Please sign in to comment.