ajilo297/dialog.html

## dialog.html
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        select {
            appearance: none;
            outline: 0;
            background: white;
            background-image: none;
            color: black;
            cursor: pointer;
            font-size: 15px;
            border-bottom: 1.1px solid black;
            border-top: 0px solid black;
            border-right: 0px solid black;
            border-left: 0px solid black;
        }

        .container {
            padding: 16px;
            display: block;
        }

        .flexBar {
            display: flex;
        }

        .spacer {
            flex-grow: 100;
        }

        .title {
            padding: 8px;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            display: inline;
        }

        .messageContainer {
            padding: 64px 16px 8px 16px;
            display: block;
        }

        .message {
            display: inline;
        }

        .assignContainer {
            padding: 8px 16px 64px 16px;
            display: block;
        }

        .assignContent {
            display: inline;
        }

        .horizontal-space {
            display: inline-block;
            width: 32px;
        }

        .raisedButton {
            background-color: darkblue;
            color: white;
            padding: 8px 24px;
            margin: 4px 4px;
            cursor: pointer;
        }

        .flatButton {
            background-color: white;
            color: black;
            padding: 8px 24px;
            border-radius: 4px;
            border: 1px solid black;
            margin: 4px 4px;
            cursor: pointer;
        }

        #count {
            font-weight: 600;
        }

        #closeBtn {
            cursor: pointer;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Assign Task</title>
</head>

<body>
    <div class="container">
        <div class="flexBar">
            <div class="title">Assign Task</div>
            <div class="spacer"></div>
            <div class="title" id="closeBtn">X</div>
        </div>
        <div class="messageContainer">
            <div class="message">You have selected</div>
            <div class="message" id="count">0</div>
            <div class="message">tasks. To whom would you like to assign it?</div>
        </div>
        <div class="assignContainer">
            <div class="assignContent">Assign To</div>
            <div class="horizontal-space"></div>
            <div class="assignContent"><select name="User Dropdown" id="userDropdown">
                    <option value="none" class="option">Select a user</option>
                </select>
            </div>
        </div>
        <div class="flexBar">
            <div class="spacer"></div>
            <div class="raisedButton">Assign</div>
            <div class="flatButton">Cancel</div>
        </div>
    </div>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<style>
	select {
	appearance: none;
	outline: 0;
	background: white;
	background-image: none;
	color: black;
	cursor: pointer;
	font-size: 15px;
	border-bottom: 1.1px solid black;
	border-top: 0px solid black;
	border-right: 0px solid black;
	border-left: 0px solid black;
	}

	.container {
	padding: 16px;
	display: block;
	}

	.flexBar {
	display: flex;
	}

	.spacer {
	flex-grow: 100;
	}

	.title {
	padding: 8px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	display: inline;
	}

	.messageContainer {
	padding: 64px 16px 8px 16px;
	display: block;
	}

	.message {
	display: inline;
	}

	.assignContainer {
	padding: 8px 16px 64px 16px;
	display: block;
	}

	.assignContent {
	display: inline;
	}

	.horizontal-space {
	display: inline-block;
	width: 32px;
	}

	.raisedButton {
	background-color: darkblue;
	color: white;
	padding: 8px 24px;
	margin: 4px 4px;
	cursor: pointer;
	}

	.flatButton {
	background-color: white;
	color: black;
	padding: 8px 24px;
	border-radius: 4px;
	border: 1px solid black;
	margin: 4px 4px;
	cursor: pointer;
	}

	#count {
	font-weight: 600;
	}

	#closeBtn {
	cursor: pointer;
	}
	</style>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Assign Task</title>
	</head>

	<body>
	<div class="container">
	<div class="flexBar">
	<div class="title">Assign Task</div>
	<div class="spacer"></div>
	<div class="title" id="closeBtn">X</div>
	</div>
	<div class="messageContainer">
	<div class="message">You have selected</div>
	<div class="message" id="count">0</div>
	<div class="message">tasks. To whom would you like to assign it?</div>
	</div>
	<div class="assignContainer">
	<div class="assignContent">Assign To</div>
	<div class="horizontal-space"></div>
	<div class="assignContent"><select name="User Dropdown" id="userDropdown">
	<option value="none" class="option">Select a user</option>
	</select>
	</div>
	</div>
	<div class="flexBar">
	<div class="spacer"></div>
	<div class="raisedButton">Assign</div>
	<div class="flatButton">Cancel</div>
	</div>
	</div>

	</body>

	</html>